diff --git a/app/src/main/java/org/sopt/pingle/presentation/ui/main/home/map/MapModalDialogFragment.kt b/app/src/main/java/org/sopt/pingle/presentation/ui/main/home/map/MapModalDialogFragment.kt
new file mode 100644
index 00000000..b2a628a2
--- /dev/null
+++ b/app/src/main/java/org/sopt/pingle/presentation/ui/main/home/map/MapModalDialogFragment.kt
@@ -0,0 +1,40 @@
+package org.sopt.pingle.presentation.ui.main.home.map
+
+import android.os.Bundle
+import android.view.View
+import org.sopt.pingle.R
+import org.sopt.pingle.databinding.DialogMapModalBinding
+import org.sopt.pingle.presentation.type.CategoryType
+import org.sopt.pingle.util.base.BindingDialogFragment
+import org.sopt.pingle.util.fragment.colorOf
+
+class MapModalDialogFragment(
+    private val category: CategoryType,
+    private val name: String,
+    private val ownerName: String,
+    private val clickBtn: () -> Unit
+) : BindingDialogFragment<DialogMapModalBinding>(R.layout.dialog_map_modal) {
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+
+        initLayout()
+        addListeners()
+    }
+
+    private fun initLayout() {
+        with(binding) {
+            badgeMapModalPingleInfoCategory.setBadgeCategoryType(category)
+            tvMapModalPingleInfoName.text = name
+            tvMapModalPingleInfoName.setTextColor(colorOf(category.textColor))
+            tvMapModalPingleInfoOwnerName.text = ownerName
+        }
+    }
+
+    private fun addListeners() {
+        binding.btnMapModal.setOnClickListener {
+            clickBtn()
+            dismiss()
+        }
+    }
+}
diff --git a/app/src/main/java/org/sopt/pingle/util/base/BindingDialogFragment.kt b/app/src/main/java/org/sopt/pingle/util/base/BindingDialogFragment.kt
index 4c0a235a..9f974049 100644
--- a/app/src/main/java/org/sopt/pingle/util/base/BindingDialogFragment.kt
+++ b/app/src/main/java/org/sopt/pingle/util/base/BindingDialogFragment.kt
@@ -9,6 +9,7 @@ import androidx.annotation.LayoutRes
 import androidx.databinding.DataBindingUtil
 import androidx.databinding.ViewDataBinding
 import androidx.fragment.app.DialogFragment
+import org.sopt.pingle.R
 
 abstract class BindingDialogFragment<T : ViewDataBinding>(@LayoutRes private val layoutResId: Int) :
     DialogFragment() {
@@ -31,7 +32,7 @@ abstract class BindingDialogFragment<T : ViewDataBinding>(@LayoutRes private val
             WindowManager.LayoutParams.MATCH_PARENT,
             WindowManager.LayoutParams.WRAP_CONTENT
         )
-        dialog?.window?.setBackgroundDrawableResource(android.R.color.transparent)
+        dialog?.window?.setBackgroundDrawableResource(R.color.backdrop)
         dialog?.setCancelable(false)
         dialog?.setCanceledOnTouchOutside(true)
     }
diff --git a/app/src/main/java/org/sopt/pingle/util/component/PingleBadge.kt b/app/src/main/java/org/sopt/pingle/util/component/PingleBadge.kt
index 11742f6e..ccc55577 100644
--- a/app/src/main/java/org/sopt/pingle/util/component/PingleBadge.kt
+++ b/app/src/main/java/org/sopt/pingle/util/component/PingleBadge.kt
@@ -8,6 +8,8 @@ import android.view.LayoutInflater
 import androidx.constraintlayout.widget.ConstraintLayout
 import org.sopt.pingle.databinding.BadgePingleBinding
 import org.sopt.pingle.presentation.type.CategoryType
+import org.sopt.pingle.util.view.colorOf
+import org.sopt.pingle.util.view.stringOf
 
 @SuppressLint("CustomViewStyleable")
 class PingleBadge @JvmOverloads constructor(
@@ -23,10 +25,10 @@ class PingleBadge @JvmOverloads constructor(
 
     fun setBadgeCategoryType(categoryType: CategoryType) {
         with(binding.tvBadgePingleText) {
-            text = context.getText(categoryType.categoryNameRes)
-            setTextColor(context.getColor(categoryType.textColor))
+            text = stringOf(categoryType.categoryNameRes)
+            setTextColor(colorOf(categoryType.textColor))
             backgroundTintList =
-                ColorStateList.valueOf(context.getColor(categoryType.backgroundBadgeColor))
+                ColorStateList.valueOf(colorOf(categoryType.backgroundBadgeColor))
         }
     }
 }
diff --git a/app/src/main/java/org/sopt/pingle/util/component/PingleChip.kt b/app/src/main/java/org/sopt/pingle/util/component/PingleChip.kt
index ed5a3fa1..3f2353ed 100644
--- a/app/src/main/java/org/sopt/pingle/util/component/PingleChip.kt
+++ b/app/src/main/java/org/sopt/pingle/util/component/PingleChip.kt
@@ -4,10 +4,11 @@ import android.annotation.SuppressLint
 import android.content.Context
 import android.content.res.ColorStateList
 import android.util.AttributeSet
-import androidx.core.content.ContextCompat
 import com.google.android.material.chip.Chip
 import org.sopt.pingle.R
 import org.sopt.pingle.presentation.type.CategoryType
+import org.sopt.pingle.util.view.colorOf
+import org.sopt.pingle.util.view.stringOf
 
 @SuppressLint("CustomViewStyleable")
 class PingleChip @JvmOverloads constructor(
@@ -29,8 +30,8 @@ class PingleChip @JvmOverloads constructor(
                 intArrayOf(-android.R.attr.state_checked)
             ),
             intArrayOf(
-                ContextCompat.getColor(context, activatedColorRes),
-                ContextCompat.getColor(context, inactivatedColorRes)
+                colorOf(activatedColorRes),
+                colorOf(inactivatedColorRes)
             )
         )
 
@@ -41,7 +42,7 @@ class PingleChip @JvmOverloads constructor(
         val inactivatedTextColor = R.color.g_03
         val inactivatedChipColor = R.color.g_11
 
-        text = context.getText(categoryType.categoryNameRes)
+        text = stringOf(categoryType.categoryNameRes)
         chipStrokeColor = setColorStateList(
             context = context,
             activatedColorRes = categoryType.activatedOutLinedColor,
diff --git a/app/src/main/java/org/sopt/pingle/util/view/ViewExt.kt b/app/src/main/java/org/sopt/pingle/util/view/ViewExt.kt
index dd73459c..3a70b93b 100644
--- a/app/src/main/java/org/sopt/pingle/util/view/ViewExt.kt
+++ b/app/src/main/java/org/sopt/pingle/util/view/ViewExt.kt
@@ -1,6 +1,11 @@
 package org.sopt.pingle.util.view
 
 import android.view.View
+import androidx.annotation.ColorRes
+import androidx.annotation.DrawableRes
+import androidx.annotation.StringRes
+import androidx.core.content.ContextCompat
+import androidx.core.content.ContextCompat.getString
 import androidx.recyclerview.widget.DiffUtil
 import com.google.android.material.snackbar.Snackbar
 
@@ -25,6 +30,12 @@ fun View.showSnackBar(message: String, isShort: Boolean = true) {
     Snackbar.make(this, message, duration).show()
 }
 
+fun View.stringOf(@StringRes resId: Int) = getString(context, resId)
+
+fun View.colorOf(@ColorRes resId: Int) = ContextCompat.getColor(context, resId)
+
+fun View.drawableOf(@DrawableRes resId: Int) = ContextCompat.getDrawable(context, resId)
+
 class ItemDiffCallback<T : Any>(
     val onItemsTheSame: (T, T) -> Boolean,
     val onContentsTheSame: (T, T) -> Boolean
diff --git a/app/src/main/res/layout/dialog_map_modal.xml b/app/src/main/res/layout/dialog_map_modal.xml
new file mode 100644
index 00000000..83dba59b
--- /dev/null
+++ b/app/src/main/res/layout/dialog_map_modal.xml
@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <data>
+
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginHorizontal="@dimen/dialog_horizontal_margin"
+            android:background="@drawable/shape_border_radius_15"
+            android:backgroundTint="@color/g_10"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <androidx.constraintlayout.widget.Guideline
+                android:id="@+id/gl_start"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:orientation="vertical"
+                app:layout_constraintGuide_begin="@dimen/dialog_map_modal_horizontal_margin" />
+
+            <androidx.constraintlayout.widget.Guideline
+                android:id="@+id/gl_end"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:orientation="vertical"
+                app:layout_constraintGuide_end="@dimen/dialog_map_modal_horizontal_margin" />
+
+            <androidx.constraintlayout.widget.ConstraintLayout
+                android:id="@+id/layout_map_modal_pingle_info"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="25dp"
+                android:background="@drawable/shape_border_radius_15"
+                android:backgroundTint="@color/g_09"
+                app:layout_constraintEnd_toEndOf="@id/gl_end"
+                app:layout_constraintStart_toStartOf="@id/gl_start"
+                app:layout_constraintTop_toTopOf="parent">
+
+                <androidx.constraintlayout.widget.Guideline
+                    android:id="@+id/gl_map_modal_pingle_info_start"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:orientation="vertical"
+                    app:layout_constraintGuide_begin="16dp" />
+
+                <androidx.constraintlayout.widget.Guideline
+                    android:id="@+id/gl_map_modal_pingle_info_end"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:orientation="vertical"
+                    app:layout_constraintGuide_end="16dp" />
+
+                <org.sopt.pingle.util.component.PingleBadge
+                    android:id="@+id/badge_map_modal_pingle_info_category"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="@dimen/spacing25"
+                    app:layout_constraintEnd_toEndOf="@id/gl_map_modal_pingle_info_end"
+                    app:layout_constraintStart_toStartOf="@id/gl_map_modal_pingle_info_start"
+                    app:layout_constraintTop_toTopOf="parent"
+                    tools:text="STUDY" />
+
+                <TextView
+                    android:id="@+id/tv_map_modal_pingle_info_name"
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="6dp"
+                    android:gravity="center"
+                    android:textAppearance="@style/TextAppearance.Pingle.Sub.Semi.18"
+                    app:layout_constraintEnd_toEndOf="@id/gl_map_modal_pingle_info_end"
+                    app:layout_constraintStart_toStartOf="@id/gl_map_modal_pingle_info_start"
+                    app:layout_constraintTop_toBottomOf="@id/badge_map_modal_pingle_info_category"
+                    tools:text="강남 모각작팟"
+                    tools:textColor="@color/pingle_orange" />
+
+                <TextView
+                    android:id="@+id/tv_map_modal_pingle_info_owner_name"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="6dp"
+                    android:layout_marginBottom="25dp"
+                    android:textAppearance="@style/TextAppearance.Pingle.Body.Med.14"
+                    android:textColor="@color/g_03"
+                    app:layout_constraintBottom_toBottomOf="parent"
+                    app:layout_constraintEnd_toEndOf="@id/gl_map_modal_pingle_info_end"
+                    app:layout_constraintStart_toStartOf="@id/gl_map_modal_pingle_info_start"
+                    app:layout_constraintTop_toBottomOf="@id/tv_map_modal_pingle_info_name"
+                    tools:text="박소현" />
+
+            </androidx.constraintlayout.widget.ConstraintLayout>
+
+            <TextView
+                android:id="@+id/tv_map_modal_description"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="20dp"
+                android:text="@string/map_modal_description"
+                android:textAppearance="@style/TextAppearance.Pingle.Body.Med.14"
+                android:textColor="@color/white"
+                app:layout_constraintEnd_toStartOf="@id/gl_end"
+                app:layout_constraintStart_toStartOf="@id/gl_start"
+                app:layout_constraintTop_toBottomOf="@id/layout_map_modal_pingle_info" />
+
+            <com.google.android.material.button.MaterialButton
+                android:id="@+id/btn_map_modal"
+                style="@style/Theme.Pingle.Button.M"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginHorizontal="45dp"
+                android:layout_marginTop="20dp"
+                android:layout_marginBottom="21dp"
+                android:backgroundTint="@color/g_01"
+                android:text="@string/map_participate"
+                android:textColor="@color/g_10"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toStartOf="@id/gl_end"
+                app:layout_constraintStart_toStartOf="@id/gl_start"
+                app:layout_constraintTop_toBottomOf="@id/tv_map_modal_description" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>
\ No newline at end of file
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index 1e0f5e48..920bb21f 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -33,16 +33,20 @@
 
     <!-- bottom navi -->
     <dimen name="bottom_navi_height">60dp</dimen>
-    
+
     <!-- button -->
     <dimen name="button_l_height">56dp</dimen>
     <dimen name="button_m_height">42dp</dimen>
     <dimen name="button_s_height">42dp</dimen>
     <dimen name="button_corner_radius">10dp</dimen>
-    
+
     <!-- fab -->
     <dimen name="fab_size">50dp</dimen>
-    
+
     <!-- chip -->
     <dimen name="chip_spacing">4dp</dimen>
+
+    <!-- dialog -->
+    <dimen name="dialog_horizontal_margin">24dp</dimen>
+    <dimen name="dialog_map_modal_horizontal_margin">24dp</dimen>
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index d50e51b5..a7b931e2 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -19,15 +19,21 @@
     <string name="on_boarding_original_group">기존 단체\n입장하기</string>
     <string name="on_boarding_new_group">신규 단체\n개설하기</string>
 
+    <!-- join group success -->
+    <string name="join_group_success_btn">입장하기</string>
+    <string name="join_gorup_success_title">단체 입장\n완료!</string>
+    <string name="join_group_success_description_group_name">%s에서</string>
+    <string name="join_group_success_description">핑글 여정을 함께해보세요!</string>
+
     <!--  plan  -->
     <string name="plan_later_des">나중에 만드시겠어요?</string>
     <string name="plan_close"><u>나가기</u></string>
     <string name="plan_next">다음으로</string>
     <string name="plan_pingle">핑글 개최하기</string>
 
-    <!-- join group success -->
-    <string name="join_group_success_btn">입장하기</string>
-    <string name="join_gorup_success_title">단체 입장\n완료!</string>
-    <string name="join_group_success_description_group_name">%s에서</string>
-    <string name="join_group_success_description">핑글 여정을 함께해보세요!</string>
+    <!-- map -->
+    <string name="map_participate">참여하기</string>
+
+    <!-- map modal -->
+    <string name="map_modal_description">이 핑글에 참여할까요?</string>
 </resources>
\ No newline at end of file