diff --git a/app/join/page.tsx b/app/join/page.tsx
index 8f17e01..71aa22b 100644
--- a/app/join/page.tsx
+++ b/app/join/page.tsx
@@ -1,11 +1,13 @@
 'use client';
 
+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 +17,7 @@ export default function JoinMeetingPage() {
     if (!isFormValid) return;
 
     console.log('참여 요청:', { name, password, isRemembered });
+    router.push('/meeting');
   };
 
   return (
@@ -101,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/layout.tsx b/app/layout.tsx
index 1d501f7..568d677 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,9 +1,10 @@
 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';
-import GlobalModal from '@/components/globalModal';
+import GlobalModal from '@/components/modal/globalModal';
 
 const pretendard = localFont({
   src: [
@@ -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
new file mode 100644
index 0000000..8301632
--- /dev/null
+++ b/app/meeting/page.tsx
@@ -0,0 +1,135 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import KakaoMap from '@/components/map/kakaoMap';
+import StationSearch from '@/components/meeting/stationSearch';
+import { useOpenModal } from '@/hooks/useOpenModal';
+
+// 목 데이터 (참여자 목록)
+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' },
+];
+
+// [NEW] 목 데이터 (검색용 역 리스트) - 실제로는 API 등에서 가져올 데이터
+const SEARCH_STATIONS = [
+  '검단오류(검단산업단지)',
+  '광교(경기대)',
+  '구의(광진구청)',
+  '굽은다리(강동구민회관앞)',
+  '금정역',
+  '강남역',
+  '홍대입구역',
+  '서울역',
+];
+
+export default function MeetingPage() {
+  // 선택된 역 상태 관리
+  const [selectedStation, setSelectedStation] = useState<string | null>(null);
+  const openModal = useOpenModal();
+
+  return (
+    // 전체 화면 배경 및 중앙 정렬
+    <div className="flex items-center justify-center p-0 md:min-h-[calc(100vh-200px)] md:py-25">
+      {/* 메인 컨테이너 (반응형 박스) */}
+      <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">
+                  투표 마감 시간
+                  <br />
+                  <span className="text-blue-5">03: 45</span> 남았습니다
+                </h2>
+                <p className="text-gray-5 mt-2 text-[15px] font-normal">
+                  아직 입력 안 한 모임원 2명
+                </p>
+              </div>
+              <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={(e) => openModal('SHARE', e)}
+              >
+                <Image src="/icon/share.svg" alt="공유 아이콘" width={12} height={12} />
+                참여 링크 공유하기
+              </button>
+            </div>
+          </div>
+
+          {/* 모바일 전용 지도 영역 */}
+          <KakaoMap className="relative block aspect-video h-93.5 bg-gray-100 md:hidden" />
+
+          {/* 출발지 검색 창 컴포넌트 */}
+          <StationSearch
+            stations={SEARCH_STATIONS}
+            selectedStation={selectedStation}
+            onSelect={setSelectedStation}
+          />
+
+          <div className="bg-gray-1 relative h-1 w-full md:hidden"></div>
+
+          {/* 참여 현황 */}
+          <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>
+              <span className="text-gray-6 text-normal text-xs">
+                <span className="text-blue-5">{MOCK_PARTICIPANTS.length}명</span>이 참여 중
+              </span>
+            </div>
+
+            {/* [2] 재촉하기 배너 */}
+            <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">
+                  아직 입력하지 않은 친구
+                  <br />
+                  재촉하기
+                </span>
+              </div>
+
+              <div className="bg-gray-3 h-13 w-14"></div>
+            </button>
+
+            {/* [3] 출발지 컴포넌트 */}
+            <div className="mb-10 flex-1">
+              <div className="flex flex-col gap-3.5">
+                {MOCK_PARTICIPANTS.map((user) => (
+                  <div
+                    key={user.id}
+                    className="border-gray-2 flex h-17 items-center justify-between rounded border bg-white px-5"
+                  >
+                    <span className="text-gray-8 text-[17px] font-semibold">{user.station}</span>
+                    <div className="flex items-center gap-1.5">
+                      <div
+                        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-gray-8 text-[15px]">안가연</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* [RIGHT PANEL] 데스크탑 전용 지도 영역 */}
+        <section className="hidden h-full flex-1 bg-gray-100 md:block">
+          <KakaoMap className="h-full w-full" />
+        </section>
+      </div>
+    </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..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]"
               >
                 피드백남기기
@@ -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/components/globalModal.tsx b/components/globalModal.tsx
deleted file mode 100644
index 597a48a..0000000
--- a/components/globalModal.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client';
-
-import { useModalStore } from '@/store/useModalStore';
-import FeedbackModal from '@/components/feedback/feedbackModal';
-// import ShareModal from '@/components/ShareModal'; // 추후 제작 예정
-// import NudgeModal from '@/components/NudgeModal'; // 추후 제작 예정
-
-export default function GlobalModal() {
-  const { type, isOpen, onClose, props } = useModalStore();
-
-  // 닫혀있거나 타입이 없으면 모달 X
-  if (!isOpen || !type) return null;
-
-  // 타입에 따라 다른 컴포넌트 렌더링.
-  switch (type) {
-    case 'FEEDBACK':
-      return <FeedbackModal isOpen={isOpen} onClose={onClose} />;
-    case 'SHARE':
-      return null;
-    //   return <ShareModal isOpen={isOpen} onClose={onClose} {...props} />;
-    case 'NUDGE':
-      return null;
-    //   return <NudgeModal isOpen={isOpen} onClose={onClose} {...props} />;
-    default:
-      return null;
-  }
-}
diff --git a/components/header.tsx b/components/header.tsx
index bf295dd..e96b4f3 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -2,13 +2,13 @@
 
 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 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 />
@@ -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/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/components/meeting/stationSearch.tsx b/components/meeting/stationSearch.tsx
new file mode 100644
index 0000000..dea09da
--- /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 absolute top-1/2 right-2.5 -translate-y-1/2 cursor-pointer 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/components/feedback/feedbackModal.tsx b/components/modal/feedbackModal.tsx
similarity index 97%
rename from components/feedback/feedbackModal.tsx
rename to components/modal/feedbackModal.tsx
index 2a7ec9b..81c3755 100644
--- a/components/feedback/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/globalModal.tsx b/components/modal/globalModal.tsx
new file mode 100644
index 0000000..63da792
--- /dev/null
+++ b/components/modal/globalModal.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { useModalStore } from '@/store/useModalStore';
+import FeedbackModal from '@/components/modal/feedbackModal';
+import ShareModal from '@/components/modal/shareModal';
+import NudgeModal from '@/components/modal/nudgeModal';
+
+export default function GlobalModal() {
+  const { type, isOpen, onClose } = useModalStore();
+
+  // 닫혀있거나 타입이 없으면 모달 X
+  if (!isOpen || !type) return null;
+
+  // 타입에 따라 다른 컴포넌트 렌더링.
+  switch (type) {
+    case 'FEEDBACK':
+      return <FeedbackModal isOpen={isOpen} onClose={onClose} />;
+    case 'SHARE':
+      return <ShareModal isOpen={isOpen} onClose={onClose} />;
+    case 'NUDGE':
+      return <NudgeModal isOpen={isOpen} onClose={onClose} />;
+    default:
+      return null;
+  }
+}
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
new file mode 100644
index 0000000..18dd013
--- /dev/null
+++ b/components/modal/shareModal.tsx
@@ -0,0 +1,78 @@
+'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 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>
+          <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="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>
+  );
+}
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));
 }
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/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/icon/search.svg b/public/icon/search.svg
new file mode 100644
index 0000000..7cab3b2
--- /dev/null
+++ b/public/icon/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/icon/share.svg b/public/icon/share.svg
new file mode 100644
index 0000000..ddcae8b
--- /dev/null
+++ b/public/icon/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>
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/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>
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
diff --git a/types/global.d.ts b/types/global.d.ts
index cbe652d..35306c6 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -1 +1 @@
-declare module "*.css";
+declare module '*.css';
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 {};