From e1904da9472ce53861c03b16002e6c9704f9ed3f Mon Sep 17 00:00:00 2001
From: Kangdy <canfrog@naver.com>
Date: Sat, 24 Jan 2026 23:02:13 +0900
Subject: [PATCH 1/9] =?UTF-8?q?feat:=20=ED=88=AC=ED=91=9C=20=ED=98=84?=
 =?UTF-8?q?=ED=99=A9=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=8C=80=EB=9E=B5?=
 =?UTF-8?q?=EC=A0=81=EC=9C=BC=EB=A1=9C=20UI=20=EA=B5=AC=EC=B6=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/join/page.tsx     |   4 ++
 app/meeting/page.tsx  | 150 ++++++++++++++++++++++++++++++++++++++++++
 components/header.tsx |   2 +-
 3 files changed, 155 insertions(+), 1 deletion(-)
 create mode 100644 app/meeting/page.tsx

diff --git a/app/join/page.tsx b/app/join/page.tsx
index 8f17e01..8316fca 100644
--- a/app/join/page.tsx
+++ b/app/join/page.tsx
@@ -1,11 +1,14 @@
 'use client';
 
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 
 export default function JoinMeetingPage() {
   const [name, setName] = useState('');
   const [password, setPassword] = useState('');
   const [isRemembered, setIsRemembered] = useState(true);
+  const router = useRouter();
 
   // 이름/비번 유효성 검사 (입력값이 있을 때만 버튼 활성화)
   const isFormValid = name.length > 0 && password.length === 4;
@@ -15,6 +18,7 @@ export default function JoinMeetingPage() {
     if (!isFormValid) return;
 
     console.log('참여 요청:', { name, password, isRemembered });
+    router.push('/meeting');
   };
 
   return (
diff --git a/app/meeting/page.tsx b/app/meeting/page.tsx
new file mode 100644
index 0000000..a70f016
--- /dev/null
+++ b/app/meeting/page.tsx
@@ -0,0 +1,150 @@
+'use client';
+
+import { useState } from 'react';
+import { Search, Share2, MapPin } from 'lucide-react';
+
+const MOCK_PARTICIPANTS = [
+  { id: 1, name: '안', station: '홍대입구역', status: 'pending', color: 'bg-blue-500' },
+  { id: 2, name: '손', station: '성수역', status: 'pending', color: 'bg-orange-400' },
+  { id: 3, name: '김', station: '강남역', status: 'done', color: 'bg-red-500' },
+  { id: 4, name: '이', station: '건대입구역', status: 'done', color: 'bg-purple-600' },
+  { id: 5, name: '강', station: '천호역', status: 'done', color: 'bg-yellow-500' },
+  { id: 6, name: '최', station: '사당역', status: 'done', color: 'bg-violet-600' },
+  { id: 7, name: '정', station: '고속터미널역', status: 'pending', color: 'bg-sky-500' },
+];
+
+export default function MeetingPage() {
+  const [searchValue, setSearchValue] = useState('');
+
+  return (
+    // 1. 전체 화면 배경 및 중앙 정렬 (회색 배경)
+    <div className="flex items-center justify-center p-0 md:min-h-[calc(100vh-200px)] md:py-25">
+      {/* 2. 메인 컨테이너 (반응형 박스)
+          - 모바일: 화면 꽉 참 (w-full h-full)
+          - 데스크탑(md): 860px x 700px 고정, 중앙 정렬, 둥근 모서리
+       */}
+      <div className="flex h-full w-full flex-col overflow-hidden bg-white md:h-175 md:w-215 md:flex-row md:gap-4 md:rounded-xl">
+        {/* =========================================================
+            [LEFT PANEL] 정보 영역
+            - 너비: 모바일(100%), 데스크탑(380px 고정)
+            - 구조: 타이머 -> [모바일 지도] -> 검색 -> 리스트
+        ========================================================= */}
+        <section className="flex w-full flex-col border-gray-100 bg-white md:w-77.5">
+          {/* A. 타이머 섹션 (항상 상단) */}
+          <div className="px-6 pt-8 pb-4">
+            <div className="flex items-start justify-between">
+              <div>
+                <h2 className="text-[22px] leading-snug font-bold text-gray-900">
+                  투표 마감 시간
+                  <br />
+                  <span className="text-blue-500">03 : 45</span> 남았습니다
+                </h2>
+                <p className="mt-2 text-[13px] font-medium text-gray-500">
+                  아직 입력 안 한 모임원 2명
+                </p>
+              </div>
+              <button className="flex items-center gap-1.5 rounded bg-blue-50 px-3 py-1.5 text-[11px] font-semibold text-blue-500 transition-colors hover:bg-blue-100">
+                <Share2 size={12} />
+                공유
+              </button>
+            </div>
+          </div>
+
+          {/* ★★★ B. [모바일 전용 지도] ★★★ 
+              - 위치: 타이머와 검색창 사이
+              - 동작: 모바일(기본)에선 보이고(block), 데스크탑(md)에선 숨김(hidden)
+          */}
+          <div className="relative mb-4 block aspect-video w-full bg-gray-100 md:hidden">
+            <div className="absolute inset-0 flex items-center justify-center bg-blue-50 text-sm text-gray-400">
+              <MapPin className="mr-1" size={16} /> 모바일 지도 영역
+            </div>
+          </div>
+
+          {/* C. 검색창 */}
+          <div className="mb-4 px-6">
+            <h3 className="mb-3 text-[15px] font-bold text-gray-900">내 출발지</h3>
+            <div className="relative">
+              <input
+                type="text"
+                placeholder="출발역을 검색해주세요"
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                className="w-full rounded border border-gray-200 bg-gray-50 py-3 pr-10 pl-4 text-[14px] text-gray-900 transition-all outline-none placeholder:text-gray-400 focus:ring-1 focus:ring-blue-500"
+              />
+              <Search
+                className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400"
+                size={18}
+              />
+            </div>
+          </div>
+
+          {/* D. 참여 현황 (남은 공간 전체 차지) */}
+          <div className="flex flex-1 flex-col overflow-hidden pb-6">
+            {/* [1] 상단 고정 영역 (헤더 + 배너) - 스크롤 안 됨 */}
+            <div className="px-6 pt-2">
+              <div className="mb-3 flex items-end justify-between bg-white">
+                <h3 className="text-[15px] font-bold text-gray-900">참여현황</h3>
+                <span className="text-[13px] text-gray-500">
+                  <span className="font-semibold text-blue-500">{MOCK_PARTICIPANTS.length}명</span>
+                  이 참여 중
+                </span>
+              </div>
+
+              {/* 재촉하기 배너 */}
+              <div className="mb-4 flex w-full shrink-0 cursor-pointer items-center justify-between rounded bg-blue-500 px-5 py-4 text-white shadow-sm transition-transform active:scale-[0.98]">
+                <div className="flex flex-col gap-0.5">
+                  <span className="text-[12px] font-medium opacity-90">
+                    아직 입력하지 않은 친구
+                  </span>
+                  <span className="text-[16px] font-bold">재촉하기</span>
+                </div>
+                <div className="h-10 w-10 rounded bg-white/20 backdrop-blur-sm"></div>
+              </div>
+            </div>
+
+            {/* [2] 하단 스크롤 영역 (리스트) - 남은 공간 차지(flex-1) & 스크롤(overflow-y-auto) */}
+            <div className="scrollbar-hide flex-1 overflow-y-auto pr-2 pl-6">
+              <div className="flex flex-col gap-3">
+                {MOCK_PARTICIPANTS.map((user) => (
+                  <div
+                    key={user.id}
+                    className="flex h-14 shrink-0 items-center justify-between rounded border border-gray-100 bg-white px-4 transition-colors hover:border-blue-200"
+                  >
+                    <span className="text-[14px] font-medium text-gray-800">{user.station}</span>
+                    <div className="flex items-center gap-2">
+                      <div
+                        className={`flex h-6 w-6 items-center justify-center rounded-full text-[10px] font-bold text-white ${user.color}`}
+                      >
+                        {user.name}
+                      </div>
+                      <span className="text-[12px] text-gray-400">
+                        {user.status === 'done' ? '만기면' : '안가연'}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* =========================================================
+            [RIGHT PANEL] 데스크탑 전용 지도 영역
+            - 위치: 오른쪽 패널
+            - 동작: 모바일(기본)에선 숨김(hidden), 데스크탑(md)에선 보임(block)
+        ========================================================= */}
+        <section className="hidden h-full flex-1 bg-gray-100 md:block">
+          {/* 지도 배경 */}
+          <div className="bg-[url('https://placehold.co/800x800/e5e7eb/a3a3a3?text=Map')] bg-cover opacity-60"></div>
+
+          {/* 핀 예시 */}
+          <div className="absolute top-[40%] left-[50%] flex -translate-x-1/2 -translate-y-1/2 flex-col items-center">
+            <div className="flex h-8 w-8 items-center justify-center rounded-full border-[3px] border-white bg-blue-500 text-xs font-bold text-white shadow-lg">
+              안
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/components/header.tsx b/components/header.tsx
index bf295dd..5e60782 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -8,7 +8,7 @@ const Header = () => {
   const { onOpen } = useModalStore();
 
   return (
-    <header className="border-gray-1 sticky top-0 right-0 left-0 flex h-15 items-center justify-center border-b bg-white">
+    <header className="border-gray-1 top-0 right-0 left-0 flex h-15 items-center justify-center border-b bg-white">
       <div className="mx-5 my-2.5 flex w-300 items-center justify-between md:mx-12.5 lg:mx-42.5">
         <Link href="/" className="shrink-0">
           <Image src="/logo.svg" alt="Mingling Logo" width={112} height={40} priority />

From bac260a58eea2bff8a5ef26d1c0c48accacf6578 Mon Sep 17 00:00:00 2001
From: Kangdy <canfrog@naver.com>
Date: Sat, 24 Jan 2026 23:32:55 +0900
Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=EB=AA=A8=EC=9E=84=20=EC=9E=A5?=
 =?UTF-8?q?=EC=86=8C=20=ED=88=AC=ED=91=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EB=B0=8F=20=EC=B9=B4=EC=B9=B4=EC=98=A4?=
 =?UTF-8?q?=EB=A7=B5=20SDK=20=EC=97=B0=EB=8F=99=20-=20=EA=B5=AC=EC=B2=B4?=
 =?UTF-8?q?=EC=A0=81=EC=9D=B8=20figma=20=EC=8B=9C=EC=95=88=EC=97=90=20?=
 =?UTF-8?q?=EB=A7=9E=EC=B6=B0=EC=84=9C=20=EB=94=94=EC=9E=90=EC=9D=B8?=
 =?UTF-8?q?=EC=9D=80=20=EC=88=98=EC=A0=95=EC=9D=B4=20=EB=8D=94=20=ED=95=84?=
 =?UTF-8?q?=EC=9A=94=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/layout.tsx              |  5 ++++
 app/meeting/page.tsx        | 46 +++++++++++++------------------------
 components/map/kakaoMap.tsx | 37 +++++++++++++++++++++++++++++
 types/global.d.ts           |  8 ++++++-
 4 files changed, 65 insertions(+), 31 deletions(-)
 create mode 100644 components/map/kakaoMap.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 1d501f7..d8aae5e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,6 @@
 import './globals.css';
 import type { Metadata } from 'next';
+import Script from 'next/script';
 import localFont from 'next/font/local';
 import Header from '../components/header';
 import Footer from '../components/footer';
@@ -38,6 +39,10 @@ export default function RootLayout({
         <main className="flex-1">{children}</main>
         <Footer />
         <GlobalModal />
+        <Script
+          src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_KEY}&libraries=services,clusterer&autoload=false`}
+          strategy="beforeInteractive"
+        />
       </body>
     </html>
   );
diff --git a/app/meeting/page.tsx b/app/meeting/page.tsx
index a70f016..3d6018c 100644
--- a/app/meeting/page.tsx
+++ b/app/meeting/page.tsx
@@ -1,7 +1,8 @@
 'use client';
 
 import { useState } from 'react';
-import { Search, Share2, MapPin } from 'lucide-react';
+import { Search, Share2 } from 'lucide-react';
+import KakaoMap from '@/components/map/kakaoMap'; // 컴포넌트 임포트
 
 const MOCK_PARTICIPANTS = [
   { id: 1, name: '안', station: '홍대입구역', status: 'pending', color: 'bg-blue-500' },
@@ -19,18 +20,13 @@ export default function MeetingPage() {
   return (
     // 1. 전체 화면 배경 및 중앙 정렬 (회색 배경)
     <div className="flex items-center justify-center p-0 md:min-h-[calc(100vh-200px)] md:py-25">
-      {/* 2. 메인 컨테이너 (반응형 박스)
-          - 모바일: 화면 꽉 참 (w-full h-full)
-          - 데스크탑(md): 860px x 700px 고정, 중앙 정렬, 둥근 모서리
-       */}
+      {/* 2. 메인 컨테이너 (반응형 박스) */}
       <div className="flex h-full w-full flex-col overflow-hidden bg-white md:h-175 md:w-215 md:flex-row md:gap-4 md:rounded-xl">
         {/* =========================================================
             [LEFT PANEL] 정보 영역
-            - 너비: 모바일(100%), 데스크탑(380px 고정)
-            - 구조: 타이머 -> [모바일 지도] -> 검색 -> 리스트
         ========================================================= */}
         <section className="flex w-full flex-col border-gray-100 bg-white md:w-77.5">
-          {/* A. 타이머 섹션 (항상 상단) */}
+          {/* A. 타이머 섹션 */}
           <div className="px-6 pt-8 pb-4">
             <div className="flex items-start justify-between">
               <div>
@@ -50,15 +46,11 @@ export default function MeetingPage() {
             </div>
           </div>
 
-          {/* ★★★ B. [모바일 전용 지도] ★★★ 
-              - 위치: 타이머와 검색창 사이
-              - 동작: 모바일(기본)에선 보이고(block), 데스크탑(md)에선 숨김(hidden)
+          {/* ★★★ B. [모바일 전용 지도] 교체 완료 ★★★ 
+              - 기존 div 태그를 KakaoMap 컴포넌트로 변경
+              - className은 기존 div의 것을 그대로 승계 (배경색, aspect-ratio 등 유지)
           */}
-          <div className="relative mb-4 block aspect-video w-full bg-gray-100 md:hidden">
-            <div className="absolute inset-0 flex items-center justify-center bg-blue-50 text-sm text-gray-400">
-              <MapPin className="mr-1" size={16} /> 모바일 지도 영역
-            </div>
-          </div>
+          <KakaoMap className="relative mb-4 block aspect-video w-full bg-gray-100 md:hidden" />
 
           {/* C. 검색창 */}
           <div className="mb-4 px-6">
@@ -78,9 +70,9 @@ export default function MeetingPage() {
             </div>
           </div>
 
-          {/* D. 참여 현황 (남은 공간 전체 차지) */}
+          {/* D. 참여 현황 */}
           <div className="flex flex-1 flex-col overflow-hidden pb-6">
-            {/* [1] 상단 고정 영역 (헤더 + 배너) - 스크롤 안 됨 */}
+            {/* [1] 상단 고정 영역 */}
             <div className="px-6 pt-2">
               <div className="mb-3 flex items-end justify-between bg-white">
                 <h3 className="text-[15px] font-bold text-gray-900">참여현황</h3>
@@ -102,7 +94,7 @@ export default function MeetingPage() {
               </div>
             </div>
 
-            {/* [2] 하단 스크롤 영역 (리스트) - 남은 공간 차지(flex-1) & 스크롤(overflow-y-auto) */}
+            {/* [2] 하단 스크롤 영역 */}
             <div className="scrollbar-hide flex-1 overflow-y-auto pr-2 pl-6">
               <div className="flex flex-col gap-3">
                 {MOCK_PARTICIPANTS.map((user) => (
@@ -130,19 +122,13 @@ export default function MeetingPage() {
 
         {/* =========================================================
             [RIGHT PANEL] 데스크탑 전용 지도 영역
-            - 위치: 오른쪽 패널
-            - 동작: 모바일(기본)에선 숨김(hidden), 데스크탑(md)에선 보임(block)
         ========================================================= */}
         <section className="hidden h-full flex-1 bg-gray-100 md:block">
-          {/* 지도 배경 */}
-          <div className="bg-[url('https://placehold.co/800x800/e5e7eb/a3a3a3?text=Map')] bg-cover opacity-60"></div>
-
-          {/* 핀 예시 */}
-          <div className="absolute top-[40%] left-[50%] flex -translate-x-1/2 -translate-y-1/2 flex-col items-center">
-            <div className="flex h-8 w-8 items-center justify-center rounded-full border-[3px] border-white bg-blue-500 text-xs font-bold text-white shadow-lg">
-              안
-            </div>
-          </div>
+          {/* ★★★ [데스크탑 지도] 교체 완료 ★★★ 
+               - 기존의 배경 이미지와 절대 좌표 핀 div들을 제거하고 
+               - KakaoMap이 부모 section(flex-1)을 가득 채우도록 h-full w-full 적용
+           */}
+          <KakaoMap className="h-full w-full" />
         </section>
       </div>
     </div>
diff --git a/components/map/kakaoMap.tsx b/components/map/kakaoMap.tsx
new file mode 100644
index 0000000..288676f
--- /dev/null
+++ b/components/map/kakaoMap.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+interface KakaoMapProps {
+  className?: string; // Tailwind 클래스를 받기 위해
+}
+
+export default function KakaoMap({ className }: KakaoMapProps) {
+  const mapContainer = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // 1. 카카오 스크립트가 로드되지 않았으면 중단
+    if (!window.kakao) return;
+
+    // 2. 카카오 맵 로드 (autoload=false라서 명시적으로 load 호출 필요)
+    window.kakao.maps.load(() => {
+      const container = mapContainer.current;
+      if (!container) return;
+
+      const options = {
+        center: new window.kakao.maps.LatLng(37.5563, 126.9224), // 홍대입구역 좌표
+        level: 3, // 지도 확대 레벨
+      };
+
+      // 지도 생성
+      const map = new window.kakao.maps.Map(container, options);
+
+      // (선택) 마커 추가 예시
+      const markerPosition = new window.kakao.maps.LatLng(37.5563, 126.9224);
+      const marker = new window.kakao.maps.Marker({ position: markerPosition });
+      marker.setMap(map);
+    });
+  }, []);
+
+  return <div ref={mapContainer} className={className} />;
+}
diff --git a/types/global.d.ts b/types/global.d.ts
index cbe652d..4507e71 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -1 +1,7 @@
-declare module "*.css";
+declare module '*.css';
+
+declare global {
+  interface Window {
+    kakao: any;
+  }
+}

From 31bf579653409fd72074a4d5001760d218fb3962 Mon Sep 17 00:00:00 2001
From: Kangdy <canfrog@naver.com>
Date: Sun, 25 Jan 2026 00:04:48 +0900
Subject: [PATCH 3/9] =?UTF-8?q?fix:=20d.ts=EB=A1=9C=20=EC=9D=B8=ED=95=B4?=
 =?UTF-8?q?=20=EB=B0=9C=EC=83=9D=EB=90=98=EB=8A=94=20=ED=83=80=EC=9E=85=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/join/page.tsx | 1 -
 types/global.d.ts | 6 ------
 types/kakao.d.ts  | 7 +++++++
 3 files changed, 7 insertions(+), 7 deletions(-)
 create mode 100644 types/kakao.d.ts

diff --git a/app/join/page.tsx b/app/join/page.tsx
index 8316fca..5ce5b18 100644
--- a/app/join/page.tsx
+++ b/app/join/page.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 
diff --git a/types/global.d.ts b/types/global.d.ts
index 4507e71..35306c6 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -1,7 +1 @@
 declare module '*.css';
-
-declare global {
-  interface Window {
-    kakao: any;
-  }
-}
diff --git a/types/kakao.d.ts b/types/kakao.d.ts
new file mode 100644
index 0000000..1776b38
--- /dev/null
+++ b/types/kakao.d.ts
@@ -0,0 +1,7 @@
+declare global {
+  interface Window {
+    kakao: any;
+  }
+}
+
+export {};

From b8c90f67647ab4d80ad9e90bc8a50eff3abd1adc Mon Sep 17 00:00:00 2001
From: Kangdy <canfrog@naver.com>
Date: Sun, 25 Jan 2026 20:13:18 +0900
Subject: [PATCH 4/9] =?UTF-8?q?feat:=20=ED=88=AC=ED=91=9C=20=ED=98=84?=
 =?UTF-8?q?=ED=99=A9=20=ED=8E=98=EC=9D=B4=EC=A7=80=20-=20=EB=AA=A8?=
 =?UTF-8?q?=EB=B0=94=EC=9D=BC=20UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/join/page.tsx    |  2 +-
 app/meeting/page.tsx | 95 +++++++++++++++++++++-----------------------
 public/search.svg    |  3 ++
 public/share.svg     |  3 ++
 4 files changed, 53 insertions(+), 50 deletions(-)
 create mode 100644 public/search.svg
 create mode 100644 public/share.svg

diff --git a/app/join/page.tsx b/app/join/page.tsx
index 5ce5b18..71aa22b 100644
--- a/app/join/page.tsx
+++ b/app/join/page.tsx
@@ -104,7 +104,7 @@ export default function JoinMeetingPage() {
         <button
           type="submit"
           disabled={!isFormValid}
-          className={`text-gray-2 h-12 w-full rounded-sm py-4 pt-3 pb-2.5 text-lg font-semibold transition-colors md:max-w-sm ${
+          className={`text-gray-2 mt-6 h-12 w-full rounded-sm py-4 pt-3 pb-2.5 text-lg font-semibold transition-colors md:max-w-sm ${
             isFormValid
               ? 'hover:bg-blue-8 bg-blue-5' // 활성화 상태
               : 'bg-gray-4 cursor-not-allowed' // 비활성화 상태
diff --git a/app/meeting/page.tsx b/app/meeting/page.tsx
index 3d6018c..7c4f8f1 100644
--- a/app/meeting/page.tsx
+++ b/app/meeting/page.tsx
@@ -1,47 +1,44 @@
 'use client';
 
 import { useState } from 'react';
-import { Search, Share2 } from 'lucide-react';
-import KakaoMap from '@/components/map/kakaoMap'; // 컴포넌트 임포트
+import Image from 'next/image';
+import KakaoMap from '@/components/map/kakaoMap';
 
 const MOCK_PARTICIPANTS = [
   { id: 1, name: '안', station: '홍대입구역', status: 'pending', color: 'bg-blue-500' },
   { id: 2, name: '손', station: '성수역', status: 'pending', color: 'bg-orange-400' },
   { id: 3, name: '김', station: '강남역', status: 'done', color: 'bg-red-500' },
   { id: 4, name: '이', station: '건대입구역', status: 'done', color: 'bg-purple-600' },
-  { id: 5, name: '강', station: '천호역', status: 'done', color: 'bg-yellow-500' },
-  { id: 6, name: '최', station: '사당역', status: 'done', color: 'bg-violet-600' },
-  { id: 7, name: '정', station: '고속터미널역', status: 'pending', color: 'bg-sky-500' },
 ];
 
 export default function MeetingPage() {
   const [searchValue, setSearchValue] = useState('');
 
   return (
-    // 1. 전체 화면 배경 및 중앙 정렬 (회색 배경)
+    // 1. 전체 화면 배경 및 중앙 정렬
     <div className="flex items-center justify-center p-0 md:min-h-[calc(100vh-200px)] md:py-25">
       {/* 2. 메인 컨테이너 (반응형 박스) */}
-      <div className="flex h-full w-full flex-col overflow-hidden bg-white md:h-175 md:w-215 md:flex-row md:gap-4 md:rounded-xl">
+      <div className="flex h-full w-full flex-col overflow-hidden bg-white md:h-175 md:w-174 md:flex-row md:gap-5 md:rounded-xl lg:w-215">
         {/* =========================================================
             [LEFT PANEL] 정보 영역
         ========================================================= */}
-        <section className="flex w-full flex-col border-gray-100 bg-white md:w-77.5">
+        <section className="border-gray-1 flex w-full flex-col gap-5 bg-white md:w-77.5">
           {/* A. 타이머 섹션 */}
-          <div className="px-6 pt-8 pb-4">
+          <div className="px-5 pt-10">
             <div className="flex items-start justify-between">
-              <div>
-                <h2 className="text-[22px] leading-snug font-bold text-gray-900">
+              <div className="text-[22px] leading-[1.364] font-semibold tracking-[-1.948%]">
+                <h2 className="text-gray-9">
                   투표 마감 시간
                   <br />
-                  <span className="text-blue-500">03 : 45</span> 남았습니다
+                  <span className="text-blue-5">03: 45</span> 남았습니다
                 </h2>
-                <p className="mt-2 text-[13px] font-medium text-gray-500">
+                <p className="text-gray-5 mt-2 text-[15px] font-normal">
                   아직 입력 안 한 모임원 2명
                 </p>
               </div>
-              <button className="flex items-center gap-1.5 rounded bg-blue-50 px-3 py-1.5 text-[11px] font-semibold text-blue-500 transition-colors hover:bg-blue-100">
-                <Share2 size={12} />
-                공유
+              <button className="text-blue-5 bg-blue-1 flex items-center gap-0.5 rounded px-3 py-1.5 text-[11px] font-semibold transition-colors">
+                <Image src="/share.svg" alt={''} width={12} height={12} />
+                참여 링크 공유하기
               </button>
             </div>
           </div>
@@ -50,68 +47,68 @@ export default function MeetingPage() {
               - 기존 div 태그를 KakaoMap 컴포넌트로 변경
               - className은 기존 div의 것을 그대로 승계 (배경색, aspect-ratio 등 유지)
           */}
-          <KakaoMap className="relative mb-4 block aspect-video w-full bg-gray-100 md:hidden" />
+          <KakaoMap className="relative block aspect-video h-93.5 bg-gray-100 md:hidden" />
 
           {/* C. 검색창 */}
-          <div className="mb-4 px-6">
-            <h3 className="mb-3 text-[15px] font-bold text-gray-900">내 출발지</h3>
+          <div className="px-5">
+            <h3 className="text-gray-9 mb-3 text-xl font-semibold">내 출발지</h3>
             <div className="relative">
               <input
                 type="text"
                 placeholder="출발역을 검색해주세요"
                 value={searchValue}
                 onChange={(e) => setSearchValue(e.target.value)}
-                className="w-full rounded border border-gray-200 bg-gray-50 py-3 pr-10 pl-4 text-[14px] text-gray-900 transition-all outline-none placeholder:text-gray-400 focus:ring-1 focus:ring-blue-500"
+                className="bg-gray-1 placeholder:text-gray-4 border-gray-2 focus:ring-blue-5 h-10 w-full rounded border py-2 pl-3 text-[15px] text-gray-900 transition-all outline-none focus:ring-1"
               />
-              <Search
-                className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400"
-                size={18}
+              <Image
+                className="text-gray-6 absolute top-1/2 right-2.5 -translate-y-1/2"
+                src="/search.svg"
+                alt=""
+                width={20}
+                height={20}
               />
             </div>
           </div>
 
+          <div className="bg-gray-1 relative h-1 w-full md:hidden"></div>
+
           {/* D. 참여 현황 */}
-          <div className="flex flex-1 flex-col overflow-hidden pb-6">
+          <div className="flex flex-1 flex-col gap-3 overflow-hidden px-5">
             {/* [1] 상단 고정 영역 */}
-            <div className="px-6 pt-2">
-              <div className="mb-3 flex items-end justify-between bg-white">
-                <h3 className="text-[15px] font-bold text-gray-900">참여현황</h3>
-                <span className="text-[13px] text-gray-500">
-                  <span className="font-semibold text-blue-500">{MOCK_PARTICIPANTS.length}명</span>
-                  이 참여 중
+            <div className="flex items-center justify-between bg-white">
+              <h3 className="text-gray-9 text-xl font-semibold">참여현황</h3>
+              <span className="text-gray-6 text-normal text-xs">
+                <span className="text-blue-5">{MOCK_PARTICIPANTS.length}명</span>이 참여 중
+              </span>
+            </div>
+
+            {/* 재촉하기 배너 */}
+            <div className="bg-blue-5 flex w-full cursor-pointer items-center justify-between rounded px-4 py-4 text-white transition-transform active:scale-[0.98]">
+              <div className="flex flex-col gap-0.5">
+                <span className="text-lg font-semibold">
+                  아직 입력하지 않은 친구 <br /> 재촉하기
                 </span>
               </div>
 
-              {/* 재촉하기 배너 */}
-              <div className="mb-4 flex w-full shrink-0 cursor-pointer items-center justify-between rounded bg-blue-500 px-5 py-4 text-white shadow-sm transition-transform active:scale-[0.98]">
-                <div className="flex flex-col gap-0.5">
-                  <span className="text-[12px] font-medium opacity-90">
-                    아직 입력하지 않은 친구
-                  </span>
-                  <span className="text-[16px] font-bold">재촉하기</span>
-                </div>
-                <div className="h-10 w-10 rounded bg-white/20 backdrop-blur-sm"></div>
-              </div>
+              <div className="bg-gray-3 h-13 w-14"></div>
             </div>
 
             {/* [2] 하단 스크롤 영역 */}
-            <div className="scrollbar-hide flex-1 overflow-y-auto pr-2 pl-6">
-              <div className="flex flex-col gap-3">
+            <div className="scrollbar-hide mb-10 flex-1 overflow-y-auto">
+              <div className="flex flex-col gap-3.5">
                 {MOCK_PARTICIPANTS.map((user) => (
                   <div
                     key={user.id}
-                    className="flex h-14 shrink-0 items-center justify-between rounded border border-gray-100 bg-white px-4 transition-colors hover:border-blue-200"
+                    className="border-gray-2 flex h-17 items-center justify-between rounded border bg-white px-5"
                   >
-                    <span className="text-[14px] font-medium text-gray-800">{user.station}</span>
-                    <div className="flex items-center gap-2">
+                    <span className="text-gray-8 text-[17px] font-semibold">{user.station}</span>
+                    <div className="flex items-center gap-1.5">
                       <div
-                        className={`flex h-6 w-6 items-center justify-center rounded-full text-[10px] font-bold text-white ${user.color}`}
+                        className={`flex h-7 w-7 items-center justify-center rounded-full text-xs font-normal text-white ${user.color}`}
                       >
                         {user.name}
                       </div>
-                      <span className="text-[12px] text-gray-400">
-                        {user.status === 'done' ? '만기면' : '안가연'}
-                      </span>
+                      <span className="text-gray-8 text-[15px]">안가연</span>
                     </div>
                   </div>
                 ))}
diff --git a/public/search.svg b/public/search.svg
new file mode 100644
index 0000000..7cab3b2
--- /dev/null
+++ b/public/search.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.1057 14.2L17 17M16.0667 9.53333C16.0667 13.1416 13.1416 16.0667 9.53333 16.0667C5.92507 16.0667 3 13.1416 3 9.53333C3 5.92507 5.92507 3 9.53333 3C13.1416 3 16.0667 5.92507 16.0667 9.53333Z" stroke="#6B7284" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/public/share.svg b/public/share.svg
new file mode 100644
index 0000000..ddcae8b
--- /dev/null
+++ b/public/share.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 7.60219V9.44625C2 9.72572 2.10536 9.99375 2.29289 10.1914C2.48043 10.389 2.73478 10.5 3 10.5H9C9.26522 10.5 9.51957 10.389 9.70711 10.1914C9.89464 9.99375 10 9.72572 10 9.44625V7.60219M6.00037 7.47125L6.00037 1.5M6.00037 1.5L3.71466 3.78159M6.00037 1.5L8.28609 3.78159" stroke="#0091FF" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From d7407920279b21005812f3c42db9f833fb03d303 Mon Sep 17 00:00:00 2001
From: Kangdy <canfrog@naver.com>
Date: Sun, 25 Jan 2026 20:40:33 +0900
Subject: [PATCH 5/9] =?UTF-8?q?feat:=20feat:=20=ED=88=AC=ED=91=9C=20?=
 =?UTF-8?q?=ED=98=84=ED=99=A9=20=ED=8E=98=EC=9D=B4=EC=A7=80=20-=20?=
 =?UTF-8?q?=ED=83=9C=EB=B8=94=EB=A6=BF/=EB=8D=B0=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=ED=86=B1=20UI=20=EA=B5=AC=ED=98=84=20-=20icon=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=20=EC=A0=95=EB=A6=AC=20=EC=9E=91=EC=97=85=20=EC=A7=84?=
 =?UTF-8?q?=ED=96=89=20-=20=EA=B7=B8=EC=97=90=20=EB=94=B0=EB=A5=B8=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B0=B8=EC=A1=B0=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/meeting/page.tsx            | 63 +++++++++++++++------------------
 app/share/page.tsx              |  4 +--
 components/footer.tsx           |  2 +-
 public/file.svg                 |  1 -
 public/globe.svg                |  1 -
 public/{ => icon}/instagram.svg |  0
 public/{ => icon}/search.svg    |  0
 public/{ => icon}/share.svg     |  0
 public/{ => icon}/threads.svg   |  0
 public/window.svg               |  1 -
 10 files changed, 32 insertions(+), 40 deletions(-)
 delete mode 100644 public/file.svg
 delete mode 100644 public/globe.svg
 rename public/{ => icon}/instagram.svg (100%)
 rename public/{ => icon}/search.svg (100%)
 rename public/{ => icon}/share.svg (100%)
 rename public/{ => icon}/threads.svg (100%)
 delete mode 100644 public/window.svg

diff --git a/app/meeting/page.tsx b/app/meeting/page.tsx
index 7c4f8f1..18c2938 100644
--- a/app/meeting/page.tsx
+++ b/app/meeting/page.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import Image from 'next/image';
 import KakaoMap from '@/components/map/kakaoMap';
 
+// 목 데이터
 const MOCK_PARTICIPANTS = [
   { id: 1, name: '안', station: '홍대입구역', status: 'pending', color: 'bg-blue-500' },
   { id: 2, name: '손', station: '성수역', status: 'pending', color: 'bg-orange-400' },
@@ -15,16 +16,14 @@ export default function MeetingPage() {
   const [searchValue, setSearchValue] = useState('');
 
   return (
-    // 1. 전체 화면 배경 및 중앙 정렬
+    // 전체 화면 배경 및 중앙 정렬
     <div className="flex items-center justify-center p-0 md:min-h-[calc(100vh-200px)] md:py-25">
-      {/* 2. 메인 컨테이너 (반응형 박스) */}
-      <div className="flex h-full w-full flex-col overflow-hidden bg-white md:h-175 md:w-174 md:flex-row md:gap-5 md:rounded-xl lg:w-215">
-        {/* =========================================================
-            [LEFT PANEL] 정보 영역
-        ========================================================= */}
-        <section className="border-gray-1 flex w-full flex-col gap-5 bg-white md:w-77.5">
-          {/* A. 타이머 섹션 */}
-          <div className="px-5 pt-10">
+      {/* 메인 컨테이너 (반응형 박스) */}
+      <div className="flex h-full w-full flex-col overflow-hidden bg-white md:h-175 md:w-174 md:flex-row md:gap-4 md:rounded-xl lg:w-215">
+        {/* [LEFT PANEL] 데스크탑 전용 정보 영역 */}
+        <section className="border-gray-1 flex w-full flex-col gap-5 bg-white md:w-77.5 md:gap-10">
+          {/* 타이머 섹션 */}
+          <div className="px-5 pt-10 md:p-0">
             <div className="flex items-start justify-between">
               <div className="text-[22px] leading-[1.364] font-semibold tracking-[-1.948%]">
                 <h2 className="text-gray-9">
@@ -36,21 +35,21 @@ export default function MeetingPage() {
                   아직 입력 안 한 모임원 2명
                 </p>
               </div>
-              <button className="text-blue-5 bg-blue-1 flex items-center gap-0.5 rounded px-3 py-1.5 text-[11px] font-semibold transition-colors">
-                <Image src="/share.svg" alt={''} width={12} height={12} />
+              <button
+                className="text-blue-5 bg-blue-1 flex h-6 w-30 cursor-pointer items-center gap-0.5 rounded px-3 py-1.5 text-[11px] font-semibold transition-colors"
+                type="button"
+              >
+                <Image src="/icon/share.svg" alt="공유 아이콘" width={12} height={12} />
                 참여 링크 공유하기
               </button>
             </div>
           </div>
 
-          {/* ★★★ B. [모바일 전용 지도] 교체 완료 ★★★ 
-              - 기존 div 태그를 KakaoMap 컴포넌트로 변경
-              - className은 기존 div의 것을 그대로 승계 (배경색, aspect-ratio 등 유지)
-          */}
+          {/* 모바일 전용 지도 영역 */}
           <KakaoMap className="relative block aspect-video h-93.5 bg-gray-100 md:hidden" />
 
-          {/* C. 검색창 */}
-          <div className="px-5">
+          {/* 검색창 */}
+          <div className="px-5 md:p-0">
             <h3 className="text-gray-9 mb-3 text-xl font-semibold">내 출발지</h3>
             <div className="relative">
               <input
@@ -62,8 +61,8 @@ export default function MeetingPage() {
               />
               <Image
                 className="text-gray-6 absolute top-1/2 right-2.5 -translate-y-1/2"
-                src="/search.svg"
-                alt=""
+                src="/icon/search.svg"
+                alt="돋보기 아이콘"
                 width={20}
                 height={20}
               />
@@ -72,8 +71,8 @@ export default function MeetingPage() {
 
           <div className="bg-gray-1 relative h-1 w-full md:hidden"></div>
 
-          {/* D. 참여 현황 */}
-          <div className="flex flex-1 flex-col gap-3 overflow-hidden px-5">
+          {/* 참여 현황 */}
+          <div className="flex flex-1 flex-col gap-3 overflow-hidden px-5 md:gap-3.5 md:p-0">
             {/* [1] 상단 고정 영역 */}
             <div className="flex items-center justify-between bg-white">
               <h3 className="text-gray-9 text-xl font-semibold">참여현황</h3>
@@ -82,19 +81,21 @@ export default function MeetingPage() {
               </span>
             </div>
 
-            {/* 재촉하기 배너 */}
-            <div className="bg-blue-5 flex w-full cursor-pointer items-center justify-between rounded px-4 py-4 text-white transition-transform active:scale-[0.98]">
+            {/* [2] 재촉하기 배너 */}
+            <div className="bg-blue-5 hover:bg-blue-8 flex h-21 w-full cursor-pointer items-center justify-between rounded p-4 text-white transition-transform active:scale-[0.98]">
               <div className="flex flex-col gap-0.5">
-                <span className="text-lg font-semibold">
-                  아직 입력하지 않은 친구 <br /> 재촉하기
+                <span className="text-lg leading-[1.44] font-semibold">
+                  아직 입력하지 않은 친구
+                  <br />
+                  재촉하기
                 </span>
               </div>
 
               <div className="bg-gray-3 h-13 w-14"></div>
             </div>
 
-            {/* [2] 하단 스크롤 영역 */}
-            <div className="scrollbar-hide mb-10 flex-1 overflow-y-auto">
+            {/* [3] 출발지 컴포넌트 */}
+            <div className="mb-10 flex-1">
               <div className="flex flex-col gap-3.5">
                 {MOCK_PARTICIPANTS.map((user) => (
                   <div
@@ -117,14 +118,8 @@ export default function MeetingPage() {
           </div>
         </section>
 
-        {/* =========================================================
-            [RIGHT PANEL] 데스크탑 전용 지도 영역
-        ========================================================= */}
+        {/* [RIGHT PANEL] 데스크탑 전용 지도 영역 */}
         <section className="hidden h-full flex-1 bg-gray-100 md:block">
-          {/* ★★★ [데스크탑 지도] 교체 완료 ★★★ 
-               - 기존의 배경 이미지와 절대 좌표 핀 div들을 제거하고 
-               - KakaoMap이 부모 section(flex-1)을 가득 채우도록 h-full w-full 적용
-           */}
           <KakaoMap className="h-full w-full" />
         </section>
       </div>
diff --git a/app/share/page.tsx b/app/share/page.tsx
index 79cd3bf..a0a9411 100644
--- a/app/share/page.tsx
+++ b/app/share/page.tsx
@@ -21,11 +21,11 @@ export default function ShareLinkPage() {
 
   return (
     <div className="flex flex-col items-center justify-center bg-white px-5 py-10 md:py-25">
-      <h3 className="text-gray-10 mb-9 text-center text-2xl leading-[1.334] font-bold md:text-4xl">
+      <h2 className="text-gray-10 mb-9 text-center text-2xl leading-[1.334] font-bold md:text-4xl">
         모임이 만들어졌어요!
         <br />
         링크를 공유해주세요
-      </h3>
+      </h2>
 
       <section className="mb-9 flex h-70 w-80 max-w-sm items-center justify-center rounded-2xl bg-gray-200 md:w-90">
         <div className="text-gray-10 text-center font-semibold">
diff --git a/components/footer.tsx b/components/footer.tsx
index 70b1018..7008261 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -40,7 +40,7 @@ const Footer = () => {
           <div className="text-gray-4 flex gap-3">
             {ICON.map((item, idx) => (
               <Link href={`https://www.${item}.com/`} key={idx}>
-                <Image src={`/${item}.svg`} alt={`${item} Logo`} width={24} height={24} />
+                <Image src={`/icon/${item}.svg`} alt={`${item} Logo`} width={24} height={24} />
               </Link>
             ))}
           </div>
diff --git a/public/file.svg b/public/file.svg
deleted file mode 100644
index 004145c..0000000
--- a/public/file.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/public/globe.svg b/public/globe.svg
deleted file mode 100644
index 567f17b..0000000
--- a/public/globe.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/public/instagram.svg b/public/icon/instagram.svg
similarity index 100%
rename from public/instagram.svg
rename to public/icon/instagram.svg
diff --git a/public/search.svg b/public/icon/search.svg
similarity index 100%
rename from public/search.svg
rename to public/icon/search.svg
diff --git a/public/share.svg b/public/icon/share.svg
similarity index 100%
rename from public/share.svg
rename to public/icon/share.svg
diff --git a/public/threads.svg b/public/icon/threads.svg
similarity index 100%
rename from public/threads.svg
rename to public/icon/threads.svg
diff --git a/public/window.svg b/public/window.svg
deleted file mode 100644
index b2b2a44..0000000
--- a/public/window.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file

From 19fe87fadfb09345dd5a1dd6feb97eb9ab3e3458 Mon Sep 17 00:00:00 2001
From: Kangdy <canfrog@naver.com>
Date: Sun, 25 Jan 2026 23:03:57 +0900
Subject: [PATCH 6/9] =?UTF-8?q?feat:=20=EC=B6=9C=EB=B0=9C=EC=A7=80=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20UI?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84=20-=20es-hangul=20=EB=9D=BC=EC=9D=B4?=
 =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=EB=A5=BC=20=ED=86=B5=ED=95=9C=20?=
 =?UTF-8?q?=EA=B2=80=EC=83=89=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=20?=
 =?UTF-8?q?-=20=EC=B6=9C=EB=B0=9C=EC=A7=80=20=EA=B2=80=EC=83=89=EC=B0=BD?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/meeting/page.tsx                 |  45 ++++++------
 components/meeting/stationSearch.tsx | 101 +++++++++++++++++++++++++++
 package.json                         |   1 +
 pnpm-lock.yaml                       |   8 +++
 public/icon/x.svg                    |   3 +
 5 files changed, 136 insertions(+), 22 deletions(-)
 create mode 100644 components/meeting/stationSearch.tsx
 create mode 100644 public/icon/x.svg

diff --git a/app/meeting/page.tsx b/app/meeting/page.tsx
index 18c2938..cf2c081 100644
--- a/app/meeting/page.tsx
+++ b/app/meeting/page.tsx
@@ -3,8 +3,10 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import KakaoMap from '@/components/map/kakaoMap';
+import { getChoseong, disassemble } from 'es-hangul';
+import StationSearch from '@/components/meeting/stationSearch';
 
-// 목 데이터
+// 목 데이터 (참여자 목록)
 const MOCK_PARTICIPANTS = [
   { id: 1, name: '안', station: '홍대입구역', status: 'pending', color: 'bg-blue-500' },
   { id: 2, name: '손', station: '성수역', status: 'pending', color: 'bg-orange-400' },
@@ -12,8 +14,21 @@ const MOCK_PARTICIPANTS = [
   { id: 4, name: '이', station: '건대입구역', status: 'done', color: 'bg-purple-600' },
 ];
 
+// [NEW] 목 데이터 (검색용 역 리스트) - 실제로는 API 등에서 가져올 데이터
+const SEARCH_STATIONS = [
+  '검단오류(검단산업단지)',
+  '광교(경기대)',
+  '구의(광진구청)',
+  '굽은다리(강동구민회관앞)',
+  '금정역',
+  '강남역',
+  '홍대입구역',
+  '서울역',
+];
+
 export default function MeetingPage() {
-  const [searchValue, setSearchValue] = useState('');
+  // 선택된 역 상태 관리
+  const [selectedStation, setSelectedStation] = useState<string | null>(null);
 
   return (
     // 전체 화면 배경 및 중앙 정렬
@@ -48,26 +63,12 @@ export default function MeetingPage() {
           {/* 모바일 전용 지도 영역 */}
           <KakaoMap className="relative block aspect-video h-93.5 bg-gray-100 md:hidden" />
 
-          {/* 검색창 */}
-          <div className="px-5 md:p-0">
-            <h3 className="text-gray-9 mb-3 text-xl font-semibold">내 출발지</h3>
-            <div className="relative">
-              <input
-                type="text"
-                placeholder="출발역을 검색해주세요"
-                value={searchValue}
-                onChange={(e) => setSearchValue(e.target.value)}
-                className="bg-gray-1 placeholder:text-gray-4 border-gray-2 focus:ring-blue-5 h-10 w-full rounded border py-2 pl-3 text-[15px] text-gray-900 transition-all outline-none focus:ring-1"
-              />
-              <Image
-                className="text-gray-6 absolute top-1/2 right-2.5 -translate-y-1/2"
-                src="/icon/search.svg"
-                alt="돋보기 아이콘"
-                width={20}
-                height={20}
-              />
-            </div>
-          </div>
+          {/* 출발지 검색 창 컴포넌트 */}
+          <StationSearch
+            stations={SEARCH_STATIONS}
+            selectedStation={selectedStation}
+            onSelect={setSelectedStation}
+          />
 
           <div className="bg-gray-1 relative h-1 w-full md:hidden"></div>
 
diff --git a/components/meeting/stationSearch.tsx b/components/meeting/stationSearch.tsx
new file mode 100644
index 0000000..f7f2b76
--- /dev/null
+++ b/components/meeting/stationSearch.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import { getChoseong, disassemble } from 'es-hangul';
+
+// [NEW] Props 타입 정의
+interface StationSearchProps {
+  stations: string[]; // 역 이름 배열
+  selectedStation: string | null; // 선택된 역 (없으면 null)
+  onSelect: (station: string | null) => void; // 선택/해제 시 실행할 함수
+}
+
+export default function StationSearch({
+  stations = [],
+  selectedStation,
+  onSelect,
+}: StationSearchProps) {
+  const [searchValue, setSearchValue] = useState<string>('');
+
+  // 3단 콤보 필터링 로직
+  const filteredStations = searchValue
+    ? stations.filter(
+        (station) =>
+          station.includes(searchValue) ||
+          getChoseong(station).includes(searchValue) ||
+          disassemble(station).includes(disassemble(searchValue))
+      )
+    : [];
+
+  const handleSelect = (station: string) => {
+    onSelect(station);
+    setSearchValue('');
+  };
+
+  const handleRemove = () => {
+    onSelect(null);
+  };
+
+  return (
+    <div className="relative z-20 px-5 md:p-0">
+      <h3 className="text-gray-9 mb-3 text-xl font-semibold">내 출발지</h3>
+      <div className="relative w-full">
+        {selectedStation ? (
+          // [CASE 1] 선택 완료 상태
+          <div className="border-gray-2 text-gray-8 flex h-14 w-full items-center justify-between rounded border bg-white p-5 text-[17px] font-semibold">
+            <span>{selectedStation}</span>
+            <button
+              onClick={handleRemove}
+              className="text-gray-4 p-1 hover:text-gray-600"
+              type="button"
+            >
+              <Image
+                className="text-gray-6 pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 p-1.25"
+                src="/icon/x.svg"
+                alt="취소 아이콘"
+                width={20}
+                height={20}
+              />
+            </button>
+          </div>
+        ) : (
+          // [CASE 2] 검색 입력 상태
+          <>
+            <div className="relative">
+              <input
+                type="text"
+                placeholder="출발역을 검색해주세요"
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                className="bg-gray-1 placeholder:text-gray-4 border-gray-2 focus:border-blue-5 h-10 w-full rounded border py-2 pl-3 text-[15px] text-gray-900 transition-all outline-none"
+              />
+              <Image
+                className="text-gray-6 pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2"
+                src="/icon/search.svg"
+                alt="돋보기 아이콘"
+                width={20}
+                height={20}
+              />
+            </div>
+
+            {/* 자동완성 드롭다운 */}
+            {searchValue && filteredStations.length > 0 && (
+              <ul className="border-gray-2 absolute top-full left-0 z-50 mt-2 max-h-50 w-full overflow-y-auto rounded border bg-white p-2">
+                {filteredStations.map((station) => (
+                  <li
+                    key={station}
+                    onClick={() => handleSelect(station)}
+                    className="text-gray-9 hover:bg-gray-2 cursor-pointer rounded px-3 py-2.5 text-[15px] transition-colors"
+                  >
+                    {station}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/package.json b/package.json
index e694dd2..fd75814 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@tanstack/react-query": "^5.90.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "es-hangul": "^2.3.8",
     "lucide-react": "^0.563.0",
     "next": "16.1.1",
     "react": "19.2.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9255b01..ecea2c3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      es-hangul:
+        specifier: ^2.3.8
+        version: 2.3.8
       lucide-react:
         specifier: ^0.563.0
         version: 0.563.0(react@19.2.3)
@@ -1131,6 +1134,9 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
+  es-hangul@2.3.8:
+    resolution: {integrity: sha512-VrJuqYBC7W04aKYjCnswomuJNXQRc0q33SG1IltVrRofi2YEE6FwVDPlsEJIdKbHwsOpbBL/mk9sUaBxVpbd+w==}
+
   es-iterator-helpers@1.2.2:
     resolution: {integrity: sha512-BrUQ0cPTB/IwXj23HtwHjS9n7O4h9FX94b4xc5zlTHxeLgTAdzYUDyy6KdExAl9lbN5rtfe44xpjpmj9grxs5w==}
     engines: {node: '>= 0.4'}
@@ -3339,6 +3345,8 @@ snapshots:
 
   es-errors@1.3.0: {}
 
+  es-hangul@2.3.8: {}
+
   es-iterator-helpers@1.2.2:
     dependencies:
       call-bind: 1.0.8
diff --git a/public/icon/x.svg b/public/icon/x.svg
new file mode 100644
index 0000000..ca2dec0
--- /dev/null
+++ b/public/icon/x.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 1L1 11M11 11L1 1" stroke="#6B7284" stroke-width="2" stroke-linecap="round"/>
+</svg>

From b7d9d58d91acee87d34918433152fb8b76ed821b Mon Sep 17 00:00:00 2001
From: Kangdy <canfrog@naver.com>
Date: Sun, 25 Jan 2026 23:35:32 +0900
Subject: [PATCH 7/9] =?UTF-8?q?feat:=20=EC=B0=B8=EC=97=AC=20=EB=A7=81?=
 =?UTF-8?q?=ED=81=AC=20=EA=B3=B5=EC=9C=A0=ED=95=98=EA=B8=B0=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20UI=20=EA=B5=AC=ED=98=84=20-=20GlobalModal.tsx?=
 =?UTF-8?q?=EC=99=80=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/meeting/page.tsx                          |  6 +-
 components/globalModal.tsx                    |  9 +--
 components/meeting/stationSearch.tsx          |  2 +-
 .../{feedback => modal}/feedbackModal.tsx     |  0
 components/modal/shareModal.tsx               | 74 +++++++++++++++++++
 5 files changed, 83 insertions(+), 8 deletions(-)
 rename components/{feedback => modal}/feedbackModal.tsx (100%)
 create mode 100644 components/modal/shareModal.tsx

diff --git a/app/meeting/page.tsx b/app/meeting/page.tsx
index cf2c081..e0b83ae 100644
--- a/app/meeting/page.tsx
+++ b/app/meeting/page.tsx
@@ -3,8 +3,8 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import KakaoMap from '@/components/map/kakaoMap';
-import { getChoseong, disassemble } from 'es-hangul';
 import StationSearch from '@/components/meeting/stationSearch';
+import { useModalStore } from '@/store/useModalStore';
 
 // 목 데이터 (참여자 목록)
 const MOCK_PARTICIPANTS = [
@@ -29,6 +29,7 @@ const SEARCH_STATIONS = [
 export default function MeetingPage() {
   // 선택된 역 상태 관리
   const [selectedStation, setSelectedStation] = useState<string | null>(null);
+  const { onOpen } = useModalStore();
 
   return (
     // 전체 화면 배경 및 중앙 정렬
@@ -51,8 +52,9 @@ export default function MeetingPage() {
                 </p>
               </div>
               <button
-                className="text-blue-5 bg-blue-1 flex h-6 w-30 cursor-pointer items-center gap-0.5 rounded px-3 py-1.5 text-[11px] font-semibold transition-colors"
+                className="text-blue-5 bg-blue-1 hover:bg-blue-2 flex h-6 w-30 cursor-pointer items-center gap-0.5 rounded px-3 py-1.5 text-[11px] font-semibold transition-colors"
                 type="button"
+                onClick={() => onOpen('SHARE')}
               >
                 <Image src="/icon/share.svg" alt="공유 아이콘" width={12} height={12} />
                 참여 링크 공유하기
diff --git a/components/globalModal.tsx b/components/globalModal.tsx
index 597a48a..ec3ad33 100644
--- a/components/globalModal.tsx
+++ b/components/globalModal.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import { useModalStore } from '@/store/useModalStore';
-import FeedbackModal from '@/components/feedback/feedbackModal';
-// import ShareModal from '@/components/ShareModal'; // 추후 제작 예정
+import FeedbackModal from '@/components/modal/feedbackModal';
+import ShareModal from '@/components/modal/shareModal';
 // import NudgeModal from '@/components/NudgeModal'; // 추후 제작 예정
 
 export default function GlobalModal() {
-  const { type, isOpen, onClose, props } = useModalStore();
+  const { type, isOpen, onClose } = useModalStore();
 
   // 닫혀있거나 타입이 없으면 모달 X
   if (!isOpen || !type) return null;
@@ -16,8 +16,7 @@ export default function GlobalModal() {
     case 'FEEDBACK':
       return <FeedbackModal isOpen={isOpen} onClose={onClose} />;
     case 'SHARE':
-      return null;
-    //   return <ShareModal isOpen={isOpen} onClose={onClose} {...props} />;
+      return <ShareModal isOpen={isOpen} onClose={onClose} />;
     case 'NUDGE':
       return null;
     //   return <NudgeModal isOpen={isOpen} onClose={onClose} {...props} />;
diff --git a/components/meeting/stationSearch.tsx b/components/meeting/stationSearch.tsx
index f7f2b76..dea09da 100644
--- a/components/meeting/stationSearch.tsx
+++ b/components/meeting/stationSearch.tsx
@@ -51,7 +51,7 @@ export default function StationSearch({
               type="button"
             >
               <Image
-                className="text-gray-6 pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 p-1.25"
+                className="text-gray-6 absolute top-1/2 right-2.5 -translate-y-1/2 cursor-pointer p-1.25"
                 src="/icon/x.svg"
                 alt="취소 아이콘"
                 width={20}
diff --git a/components/feedback/feedbackModal.tsx b/components/modal/feedbackModal.tsx
similarity index 100%
rename from components/feedback/feedbackModal.tsx
rename to components/modal/feedbackModal.tsx
diff --git a/components/modal/shareModal.tsx b/components/modal/shareModal.tsx
new file mode 100644
index 0000000..d900627
--- /dev/null
+++ b/components/modal/shareModal.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { useState } from 'react';
+import { useToast } from '@/hooks/useToast';
+import Toast from '../ui/toast';
+
+interface ShareModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function ShareModal({ isOpen, onClose }: ShareModalProps) {
+  const [link, setLink] = useState('www.abcabc');
+  const { isVisible, show } = useToast();
+
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(link);
+      show();
+    } catch (error) {
+      console.error('복사 실패: ', error);
+      alert('복사에 실패했습니다. 링크를 직접 복사해주세요.');
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        className="flex w-80 flex-col gap-6 rounded bg-white px-6 py-5 md:w-89.5"
+      >
+        {/* 헤더 영역 */}
+        <DialogHeader className="text-left">
+          <DialogTitle className="text-[22px] font-semibold text-black">
+            모임 링크를 공유해주세요
+          </DialogTitle>
+        </DialogHeader>
+
+        {/* 이미지 영역 */}
+        <div className="bg-gray-2 flex h-55.5 w-68 items-center justify-center rounded-2xl md:w-77.5"></div>
+
+        {/* 주소창 복사 영역 */}
+        <DialogFooter>
+          <div className="relative z-10 flex w-full rounded-sm md:w-90">
+            <Toast message="주소가 복사되었습니다" isVisible={isVisible} />
+
+            <input
+              type="text"
+              name="shareLink"
+              aria-label="모임 공유 링크"
+              value={link}
+              readOnly
+              className="border-gray-1 grow rounded-l-sm border border-r-0 bg-white p-2.5 text-[15px] font-normal text-black focus:outline-none"
+            />
+            <button
+              type="button"
+              onClick={handleCopyLink}
+              className="bg-gray-1 text-gray-6 border-gray-1 hover:bg-gray-2 cursor-pointer rounded-r-sm border px-3.5 py-3 text-sm font-semibold whitespace-nowrap transition-colors"
+            >
+              복사
+            </button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

From be9ba3adf5da437c326b7b7dfbd0341a6f9c337a Mon Sep 17 00:00:00 2001
From: Kangdy <canfrog@naver.com>
Date: Mon, 26 Jan 2026 00:10:28 +0900
Subject: [PATCH 8/9] =?UTF-8?q?feat:=20=EC=9E=AC=EC=B4=89=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=EB=AA=A8=EB=8B=AC=20UI=20=EA=B5=AC=ED=98=84=20-=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EA=B4=80=EB=A0=A8=20=EC=BB=A4=EC=8A=A4?=
 =?UTF-8?q?=ED=85=80=20=ED=9B=85=20=EC=A0=9C=EC=9E=91=20-=20globalModal?=
 =?UTF-8?q?=EC=9D=84=20=ED=86=B5=ED=95=9C=20=EB=AA=A8=EB=8B=AC=20=EC=A1=B0?=
 =?UTF-8?q?=EA=B1=B4=EB=B6=80=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=99=84?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/meeting/page.tsx               | 14 ++++--
 components/footer.tsx              |  6 +--
 components/globalModal.tsx         |  5 +-
 components/header.tsx              |  6 +--
 components/modal/feedbackModal.tsx |  4 +-
 components/modal/nudgeModal.tsx    | 79 ++++++++++++++++++++++++++++++
 components/modal/shareModal.tsx    |  4 ++
 hooks/useOpenModal.ts              | 14 ++++++
 lib/utils.ts                       |  6 +--
 9 files changed, 120 insertions(+), 18 deletions(-)
 create mode 100644 components/modal/nudgeModal.tsx
 create mode 100644 hooks/useOpenModal.ts

diff --git a/app/meeting/page.tsx b/app/meeting/page.tsx
index e0b83ae..8301632 100644
--- a/app/meeting/page.tsx
+++ b/app/meeting/page.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import Image from 'next/image';
 import KakaoMap from '@/components/map/kakaoMap';
 import StationSearch from '@/components/meeting/stationSearch';
-import { useModalStore } from '@/store/useModalStore';
+import { useOpenModal } from '@/hooks/useOpenModal';
 
 // 목 데이터 (참여자 목록)
 const MOCK_PARTICIPANTS = [
@@ -29,7 +29,7 @@ const SEARCH_STATIONS = [
 export default function MeetingPage() {
   // 선택된 역 상태 관리
   const [selectedStation, setSelectedStation] = useState<string | null>(null);
-  const { onOpen } = useModalStore();
+  const openModal = useOpenModal();
 
   return (
     // 전체 화면 배경 및 중앙 정렬
@@ -54,7 +54,7 @@ export default function MeetingPage() {
               <button
                 className="text-blue-5 bg-blue-1 hover:bg-blue-2 flex h-6 w-30 cursor-pointer items-center gap-0.5 rounded px-3 py-1.5 text-[11px] font-semibold transition-colors"
                 type="button"
-                onClick={() => onOpen('SHARE')}
+                onClick={(e) => openModal('SHARE', e)}
               >
                 <Image src="/icon/share.svg" alt="공유 아이콘" width={12} height={12} />
                 참여 링크 공유하기
@@ -85,7 +85,11 @@ export default function MeetingPage() {
             </div>
 
             {/* [2] 재촉하기 배너 */}
-            <div className="bg-blue-5 hover:bg-blue-8 flex h-21 w-full cursor-pointer items-center justify-between rounded p-4 text-white transition-transform active:scale-[0.98]">
+            <button
+              type="button"
+              className="bg-blue-5 hover:bg-blue-8 flex h-21 w-full cursor-pointer items-center justify-between rounded p-4 text-left text-white transition-transform active:scale-[0.98]"
+              onClick={(e) => openModal('NUDGE', e)}
+            >
               <div className="flex flex-col gap-0.5">
                 <span className="text-lg leading-[1.44] font-semibold">
                   아직 입력하지 않은 친구
@@ -95,7 +99,7 @@ export default function MeetingPage() {
               </div>
 
               <div className="bg-gray-3 h-13 w-14"></div>
-            </div>
+            </button>
 
             {/* [3] 출발지 컴포넌트 */}
             <div className="mb-10 flex-1">
diff --git a/components/footer.tsx b/components/footer.tsx
index 7008261..24d5523 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -2,12 +2,12 @@
 
 import Link from 'next/link';
 import Image from 'next/image';
-import { useModalStore } from '@/store/useModalStore';
+import { useOpenModal } from '@/hooks/useOpenModal';
 
 const ICON = ['threads', 'instagram'];
 
 const Footer = () => {
-  const { onOpen } = useModalStore();
+  const openModal = useOpenModal();
 
   return (
     <footer className="bg-gray-1 flex h-59 items-center md:h-35">
@@ -29,7 +29,7 @@ const Footer = () => {
               </Link>
               <button
                 type="button"
-                onClick={() => onOpen('FEEDBACK')}
+                onClick={(e) => openModal('FEEDBACK', e)}
                 className="text-gray-7 cursor-pointer text-[16px]"
               >
                 피드백남기기
diff --git a/components/globalModal.tsx b/components/globalModal.tsx
index ec3ad33..63da792 100644
--- a/components/globalModal.tsx
+++ b/components/globalModal.tsx
@@ -3,7 +3,7 @@
 import { useModalStore } from '@/store/useModalStore';
 import FeedbackModal from '@/components/modal/feedbackModal';
 import ShareModal from '@/components/modal/shareModal';
-// import NudgeModal from '@/components/NudgeModal'; // 추후 제작 예정
+import NudgeModal from '@/components/modal/nudgeModal';
 
 export default function GlobalModal() {
   const { type, isOpen, onClose } = useModalStore();
@@ -18,8 +18,7 @@ export default function GlobalModal() {
     case 'SHARE':
       return <ShareModal isOpen={isOpen} onClose={onClose} />;
     case 'NUDGE':
-      return null;
-    //   return <NudgeModal isOpen={isOpen} onClose={onClose} {...props} />;
+      return <NudgeModal isOpen={isOpen} onClose={onClose} />;
     default:
       return null;
   }
diff --git a/components/header.tsx b/components/header.tsx
index 5e60782..e96b4f3 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -2,10 +2,10 @@
 
 import Link from 'next/link';
 import Image from 'next/image';
-import { useModalStore } from '@/store/useModalStore';
+import { useOpenModal } from '@/hooks/useOpenModal';
 
 const Header = () => {
-  const { onOpen } = useModalStore();
+  const openModal = useOpenModal();
 
   return (
     <header className="border-gray-1 top-0 right-0 left-0 flex h-15 items-center justify-center border-b bg-white">
@@ -19,7 +19,7 @@ const Header = () => {
           </Link>
           <button
             type="button"
-            onClick={() => onOpen('FEEDBACK')}
+            onClick={(e) => openModal('FEEDBACK', e)}
             className="text-gray-5 p-2 text-[16px] transition-colors hover:text-gray-900"
           >
             피드백남기기
diff --git a/components/modal/feedbackModal.tsx b/components/modal/feedbackModal.tsx
index 2a7ec9b..81c3755 100644
--- a/components/modal/feedbackModal.tsx
+++ b/components/modal/feedbackModal.tsx
@@ -65,6 +65,7 @@ export default function FeedbackModal({ isOpen, onClose }: FeedbackModalProps) {
               <div className="flex w-full justify-between gap-1">
                 {SCORES.map((num) => (
                   <button
+                    type="button"
                     key={num}
                     onClick={() => setScore(num)}
                     aria-pressed={score === num}
@@ -88,7 +89,7 @@ export default function FeedbackModal({ isOpen, onClose }: FeedbackModalProps) {
             <label htmlFor="reason" className="text-gray-9 text-sm leading-[1.57] font-semibold">
               그렇게 느낀 가장 큰 이유는 무엇인가요?
             </label>
-            <input
+            <textarea
               id="reason"
               placeholder="플레이스 홀더"
               value={reason}
@@ -101,6 +102,7 @@ export default function FeedbackModal({ isOpen, onClose }: FeedbackModalProps) {
         {/* 푸터 (제출 버튼) */}
         <DialogFooter>
           <button
+            type="button"
             onClick={handleSubmit}
             disabled={!isValid}
             className={`h-12 w-full rounded text-lg font-semibold transition-colors ${isValid ? 'hover:bg-blue-8 bg-blue-5 text-white' : 'text-gray-2 bg-gray-4'}`}
diff --git a/components/modal/nudgeModal.tsx b/components/modal/nudgeModal.tsx
new file mode 100644
index 0000000..2a134c3
--- /dev/null
+++ b/components/modal/nudgeModal.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { useState } from 'react';
+import { useToast } from '@/hooks/useToast';
+import Toast from '../ui/toast';
+
+interface NudgeModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function NudgeModal({ isOpen, onClose }: NudgeModalProps) {
+  const [link, setLink] = useState('www.abcabc');
+  const { isVisible, show } = useToast();
+
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(link);
+      show();
+    } catch (error) {
+      console.error('복사 실패: ', error);
+      alert('복사에 실패했습니다. 링크를 직접 복사해주세요.');
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        className="flex w-80 flex-col gap-6 rounded bg-white px-6 py-5 md:w-89.5"
+      >
+        {/* 헤더 영역 */}
+        <DialogHeader className="text-left">
+          <DialogTitle className="text-[22px] leading-[1.364] font-semibold text-black">
+            아직 입력하지 않은 친구를 <br />
+            재촉해 보세요!
+          </DialogTitle>
+          <DialogDescription className="sr-only">
+            아직 출발지를 입력하지 않은 친구들에게 재촉 알림을 보냅니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* 이미지 영역 */}
+        <div className="bg-gray-2 flex h-55.5 w-68 items-center justify-center rounded-2xl md:w-77.5"></div>
+
+        {/* 주소창 복사 영역 */}
+        <DialogFooter>
+          <div className="relative z-10 flex w-full rounded-sm md:w-90">
+            <Toast message="주소가 복사되었습니다" isVisible={isVisible} />
+
+            <input
+              type="text"
+              name="NudgeLink"
+              aria-label="모임 공유 링크"
+              value={link}
+              readOnly
+              className="border-gray-1 grow rounded-l-sm border border-r-0 bg-white p-2.5 text-[15px] font-normal text-black focus:outline-none"
+            />
+            <button
+              type="button"
+              onClick={handleCopyLink}
+              className="bg-gray-1 text-gray-6 border-gray-1 hover:bg-gray-2 cursor-pointer rounded-r-sm border px-3.5 py-3 text-sm font-semibold whitespace-nowrap transition-colors"
+            >
+              복사
+            </button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/modal/shareModal.tsx b/components/modal/shareModal.tsx
index d900627..18dd013 100644
--- a/components/modal/shareModal.tsx
+++ b/components/modal/shareModal.tsx
@@ -6,6 +6,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogFooter,
+  DialogDescription,
 } from '@/components/ui/dialog';
 import { useState } from 'react';
 import { useToast } from '@/hooks/useToast';
@@ -41,6 +42,9 @@ export default function ShareModal({ isOpen, onClose }: ShareModalProps) {
           <DialogTitle className="text-[22px] font-semibold text-black">
             모임 링크를 공유해주세요
           </DialogTitle>
+          <DialogDescription className="sr-only">
+            현재 모임의 참여 링크를 복사하거나 친구들에게 공유하여 초대할 수 있습니다.
+          </DialogDescription>
         </DialogHeader>
 
         {/* 이미지 영역 */}
diff --git a/hooks/useOpenModal.ts b/hooks/useOpenModal.ts
new file mode 100644
index 0000000..92c98a2
--- /dev/null
+++ b/hooks/useOpenModal.ts
@@ -0,0 +1,14 @@
+import { useModalStore, ModalType } from '@/store/useModalStore';
+
+export const useOpenModal = () => {
+  const { onOpen } = useModalStore();
+
+  const openModal = (type: ModalType, e?: React.MouseEvent<HTMLElement>) => {
+    // 이벤트가 넘어왔다면 포커스 해제 (에러 방지 핵심 로직)
+    if (e) e.currentTarget.blur();
+
+    onOpen(type);
+  };
+
+  return openModal;
+};
diff --git a/lib/utils.ts b/lib/utils.ts
index bd0c391..2819a83 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }

From 9ce25289b84494365c3e7a1dae77270af6c74194 Mon Sep 17 00:00:00 2001
From: Kangdy <canfrog@naver.com>
Date: Mon, 26 Jan 2026 00:13:34 +0900
Subject: [PATCH 9/9] =?UTF-8?q?refactor:=20=ED=8F=B4=EB=8D=94=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/layout.tsx                         | 2 +-
 components/{ => modal}/globalModal.tsx | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename components/{ => modal}/globalModal.tsx (100%)

diff --git a/app/layout.tsx b/app/layout.tsx
index d8aae5e..568d677 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,7 +4,7 @@ import Script from 'next/script';
 import localFont from 'next/font/local';
 import Header from '../components/header';
 import Footer from '../components/footer';
-import GlobalModal from '@/components/globalModal';
+import GlobalModal from '@/components/modal/globalModal';
 
 const pretendard = localFont({
   src: [
diff --git a/components/globalModal.tsx b/components/modal/globalModal.tsx
similarity index 100%
rename from components/globalModal.tsx
rename to components/modal/globalModal.tsx