From 8c3f9c3009e6e3abcc93e26fcb29e120cce9cc94 Mon Sep 17 00:00:00 2001
From: Kangdy <canfrog@naver.com>
Date: Mon, 2 Feb 2026 10:34:51 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=AA=A8=EC=9E=84=20=EA=B3=B5?=
 =?UTF-8?q?=EC=9C=A0=20=EA=B8=B0=EB=8A=A5=EC=9D=84=20useMeetingShare=20?=
 =?UTF-8?q?=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=9B=85=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC=20-=20useMeeting=EC=9D=84=20useCreateMeeting?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?=EB=B0=8F=20=ED=8F=B4=EB=8D=94=20=EA=B5=AC=EC=A1=B0=20=EC=A0=95?=
 =?UTF-8?q?=EB=A6=AC=20-=20create/page.tsx=EC=9D=98=20tailwind=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=EB=AA=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/create/page.tsx                           | 38 +++++++-------
 app/share/[id]/page.tsx                       | 46 ++--------------
 .../useCreateMeeting.ts}                      |  0
 hooks/api/query/useShareMeeting.ts            | 52 +++++++++++++++++++
 4 files changed, 76 insertions(+), 60 deletions(-)
 rename hooks/api/{useMeeting.ts => mutation/useCreateMeeting.ts} (100%)
 create mode 100644 hooks/api/query/useShareMeeting.ts

diff --git a/app/create/page.tsx b/app/create/page.tsx
index a88d461..4a2cacf 100644
--- a/app/create/page.tsx
+++ b/app/create/page.tsx
@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
-import { useCreateMeeting } from '@/hooks/api/useMeeting';
+import { useCreateMeeting } from '@/hooks/api/mutation/useCreateMeeting';
 import type { MeetingCreateRequest } from '@/types/api';
 import { useToast } from '@/hooks/useToast';
 import Toast from '@/components/ui/toast';
@@ -167,7 +167,7 @@ export default function Page() {
               value={meetingName}
               onChange={(e) => setMeetingName(e.target.value)}
               placeholder="플레이스 홀더"
-              className="border-gray-2 placeholder:text-gray-3 w-full rounded-[4px] border px-3 py-2 text-[15px] leading-[1.6] tracking-[0.144px] focus:outline-none"
+              className="border-gray-2 placeholder:text-gray-3 w-full rounded border px-3 py-2 text-[15px] leading-[1.6] tracking-[0.144px] focus:outline-none"
             />
           </div>
 
@@ -183,7 +183,7 @@ export default function Page() {
                   setMeetingType('회의');
                   setSelectedSocialPlace(null);
                 }}
-                className={`flex-1 rounded-[4px] py-2.5 text-[15px] leading-[1.6] tracking-[0.144px] transition-colors sm:py-2 ${
+                className={`flex-1 rounded py-2.5 text-[15px] leading-[1.6] tracking-[0.144px] transition-colors sm:py-2 ${
                   meetingType === '회의'
                     ? 'bg-blue-5 text-white'
                     : 'bg-gray-1 text-gray-7 hover:bg-gray-2'
@@ -197,7 +197,7 @@ export default function Page() {
                   setMeetingType('친목');
                   setSelectedLocation(null);
                 }}
-                className={`flex-1 rounded-[4px] py-2.5 text-[15px] leading-[1.6] tracking-[0.144px] transition-colors sm:py-2 ${
+                className={`flex-1 rounded py-2.5 text-[15px] leading-[1.6] tracking-[0.144px] transition-colors sm:py-2 ${
                   meetingType === '친목'
                     ? 'bg-blue-5 text-white'
                     : 'bg-gray-1 text-gray-7 hover:bg-gray-2'
@@ -220,7 +220,7 @@ export default function Page() {
                         key={location}
                         type="button"
                         onClick={() => setSelectedLocation(isSelected ? null : location)}
-                        className={`flex h-[43px] w-full items-center gap-[14px] rounded-[4px] border px-3 py-1 transition-colors ${
+                        className={`flex h-10.75 w-full items-center gap-3.5 rounded border px-3 py-1 transition-colors ${
                           isSelected
                             ? 'border-gray-1 bg-white'
                             : 'border-gray-1 hover:bg-gray-1 bg-white'
@@ -260,7 +260,7 @@ export default function Page() {
                         key={place}
                         type="button"
                         onClick={() => setSelectedSocialPlace(isSelected ? null : place)}
-                        className={`flex h-[43px] w-full items-center gap-[14px] rounded-[4px] border px-3 py-1 transition-colors ${
+                        className={`flex h-10.75 w-full items-center gap-3.5 rounded border px-3 py-1 transition-colors ${
                           isSelected
                             ? 'border-gray-1 bg-white'
                             : 'border-gray-1 hover:bg-gray-1 bg-white'
@@ -292,16 +292,16 @@ export default function Page() {
             <label className="text-gray-9 text-[14px] leading-[1.571] font-semibold tracking-[0.203px] sm:text-[15px] md:text-[14px]">
               참여 인원을 알려주세요.
             </label>
-            <div className="border-gray-2 relative flex h-[44px] items-center rounded-[4px] border bg-white">
+            <div className="border-gray-2 relative flex h-11 items-center rounded border bg-white">
               <button
                 type="button"
                 onClick={handleDecreaseParticipants}
                 disabled={isParticipantUndecided || participantCount === 2}
-                className="bg-gray-1 absolute -top-px -left-px flex h-[44px] w-[44px] items-center justify-center rounded-tl-[4px] rounded-bl-[4px] disabled:opacity-50 sm:h-[44px] sm:w-[44px]"
+                className="bg-gray-1 absolute -top-px -left-px flex h-11 w-11 items-center justify-center rounded-tl-lg rounded-bl-lg disabled:opacity-50 sm:h-11 sm:w-11"
               >
                 <Image src="/icon/minus.svg" alt="minus" width={20} height={20} />
               </button>
-              <div className="text-gray-8 absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-[2px] text-[15px] leading-[1.6] tracking-[0.144px]">
+              <div className="text-gray-8 absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-0.5 text-[15px] leading-[1.6] tracking-[0.144px]">
                 <span>{participantCount}</span>
                 <span>명</span>
               </div>
@@ -309,16 +309,16 @@ export default function Page() {
                 type="button"
                 onClick={handleIncreaseParticipants}
                 disabled={isParticipantUndecided}
-                className="bg-gray-1 absolute -top-px -right-px flex h-[44px] w-[44px] items-center justify-center rounded-tr-[4px] rounded-br-[4px] disabled:opacity-50 sm:h-[44px] sm:w-[44px]"
+                className="bg-gray-1 absolute -top-px -right-px flex h-11 w-11 items-center justify-center rounded-tr-lg rounded-br-lg disabled:opacity-50 sm:h-11 sm:w-11"
               >
                 <Image src="/icon/plus.svg" alt="plus" width={20} height={20} />
               </button>
             </div>
-            <div className="flex items-center gap-[10px]">
+            <div className="flex items-center gap-2.5">
               <button
                 type="button"
                 onClick={handleParticipantCheckbox}
-                className={`flex h-5 w-5 items-center justify-center rounded-[4px] transition-colors ${
+                className={`flex h-5 w-5 items-center justify-center rounded transition-colors ${
                   isParticipantUndecided ? 'bg-blue-5' : 'bg-gray-3'
                 }`}
               >
@@ -336,12 +336,12 @@ export default function Page() {
             <label className="text-gray-9 text-[14px] leading-[1.571] font-semibold tracking-[0.203px] sm:text-[15px] md:text-[14px]">
               참여 기한을 정해주세요.
             </label>
-            <div className="border-gray-2 relative flex h-[60px] items-center rounded-[4px] border bg-white">
+            <div className="border-gray-2 relative flex h-15 items-center rounded border bg-white">
               <button
                 type="button"
                 onClick={handleDecreaseDeadline}
                 disabled={isDeadlineFlexible || deadlineDays === 1}
-                className="bg-gray-1 absolute -top-px -left-px flex h-[60px] w-[44px] items-center justify-center rounded-tl-[4px] rounded-bl-[4px] disabled:opacity-50 sm:h-[60px] sm:w-[44px]"
+                className="bg-gray-1 absolute -top-px -left-px flex h-15 w-11 items-center justify-center rounded-tl-lg rounded-bl-lg disabled:opacity-50 sm:h-15 sm:w-11"
               >
                 <Image src="/icon/minus.svg" alt="minus" width={20} height={20} />
               </button>
@@ -349,7 +349,7 @@ export default function Page() {
                 <span className="text-blue-5 text-[12px] leading-[1.334] tracking-[0.3024px]">
                   {getDeadlineDate()}
                 </span>
-                <div className="text-gray-8 flex items-center gap-[2px] text-[15px] leading-[1.6] tracking-[0.144px]">
+                <div className="text-gray-8 flex items-center gap-0.5 text-[15px] leading-[1.6] tracking-[0.144px]">
                   <span>{deadlineDays}</span>
                   <span>일</span>
                 </div>
@@ -358,16 +358,16 @@ export default function Page() {
                 type="button"
                 onClick={handleIncreaseDeadline}
                 disabled={isDeadlineFlexible}
-                className="bg-gray-1 absolute -top-px -right-px flex h-[60px] w-[44px] items-center justify-center rounded-tr-[4px] rounded-br-[4px] disabled:opacity-50 sm:h-[60px] sm:w-[44px]"
+                className="bg-gray-1 absolute -top-px -right-px flex h-15 w-11 items-center justify-center rounded-tr-lg rounded-br-lg disabled:opacity-50 sm:h-15 sm:w-11"
               >
                 <Image src="/icon/plus.svg" alt="plus" width={20} height={20} />
               </button>
             </div>
-            <div className="flex items-center gap-[10px]">
+            <div className="flex items-center gap-2.5">
               <button
                 type="button"
                 onClick={handleDeadlineCheckbox}
-                className={`flex h-5 w-5 items-center justify-center rounded-[4px] border transition-colors ${
+                className={`flex h-5 w-5 items-center justify-center rounded border transition-colors ${
                   isDeadlineFlexible ? 'bg-blue-5' : 'bg-gray-3'
                 }`}
               >
@@ -386,7 +386,7 @@ export default function Page() {
               type="button"
               disabled={!isFormValid || createMeeting.isPending}
               onClick={handleGenerateMeeting}
-              className={`h-12 w-full rounded-[4px] text-[16px] leading-[1.445] font-semibold tracking-[-0.0036px] transition-colors sm:text-[17px] md:text-[18px] ${
+              className={`h-12 w-full rounded text-[16px] leading-[1.445] font-semibold tracking-[-0.0036px] transition-colors sm:text-[17px] md:text-[18px] ${
                 isFormValid && !createMeeting.isPending
                   ? 'bg-blue-5 hover:bg-blue-8 text-white'
                   : 'bg-gray-4 text-gray-2 cursor-not-allowed'
diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx
index aac001a..08c5482 100644
--- a/app/share/[id]/page.tsx
+++ b/app/share/[id]/page.tsx
@@ -1,54 +1,18 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import { notFound, useParams, useRouter } from 'next/navigation';
+import { notFound, useParams } from 'next/navigation';
 import Link from 'next/link';
 import Toast from '@/components/ui/toast';
-import { useToast } from '@/hooks/useToast';
-import { apiGet } from '@/lib/api';
+import { useShareMeeting } from '@/hooks/api/query/useShareMeeting';
 
 export default function SharePage() {
   const params = useParams();
   const id = params?.id as string;
-  const router = useRouter();
-  const { isVisible, show } = useToast();
 
-  const [shareUrl, setShareUrl] = useState('');
-  const [loading, setLoading] = useState(true);
-  const [isError, setIsError] = useState(false);
-
-  useEffect(() => {
-    if (!id) return;
-
-    const checkMeeting = async () => {
-      try {
-        // 모임이 존재하는지 확인
-        await apiGet(`${process.env.NEXT_PUBLIC_API_BASE_URL}/meeting/result/${id}`);
-
-        // 존재하면 URL 생성 (window 객체 사용 가능)
-        setShareUrl(`${window.location.origin}/meeting/${id}`);
-        setLoading(false);
-      } catch (error) {
-        console.error('실패:', error);
-        setIsError(true);
-      }
-    };
-
-    checkMeeting();
-  }, [id, router]);
-
-  const handleCopyLink = async () => {
-    if (!shareUrl) return;
-    try {
-      await navigator.clipboard.writeText(shareUrl);
-      show();
-    } catch (error) {
-      alert('복사 실패');
-    }
-  };
+  const { shareUrl, isError, isLoading, handleCopyLink, isVisible } = useShareMeeting(id);
 
   if (isError) notFound();
-  if (loading) return null;
+  if (isLoading) return null;
 
   return (
     <div className="flex flex-col items-center justify-center bg-white px-5 py-10 md:py-25">
@@ -83,7 +47,7 @@ export default function SharePage() {
       </div>
 
       <Link
-        href={`/meeting/${id}`}
+        href={`/join/${id}`}
         className="bg-blue-5 hover:bg-blue-8 h-12 w-full rounded-sm py-2.5 pt-3 text-center text-lg font-normal text-white transition-colors md:w-90"
       >
         내 출발지 등록하기
diff --git a/hooks/api/useMeeting.ts b/hooks/api/mutation/useCreateMeeting.ts
similarity index 100%
rename from hooks/api/useMeeting.ts
rename to hooks/api/mutation/useCreateMeeting.ts
diff --git a/hooks/api/query/useShareMeeting.ts b/hooks/api/query/useShareMeeting.ts
new file mode 100644
index 0000000..5c31135
--- /dev/null
+++ b/hooks/api/query/useShareMeeting.ts
@@ -0,0 +1,52 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { apiGet } from '@/lib/api';
+import { useToast } from '@/hooks/useToast';
+import { useState, useEffect } from 'react';
+
+// API Fetcher 분리
+const fetchMeetingResult = async (id: string) => {
+  return apiGet(`${process.env.NEXT_PUBLIC_API_BASE_URL}/meeting/result/${id}`);
+};
+
+export const useShareMeeting = (meetingId: string) => {
+  const { show, isVisible } = useToast();
+  const [shareUrl, setShareUrl] = useState('');
+
+  // 모임 존재 여부 확인 (Query)
+  const { isError, isLoading, error } = useQuery({
+    queryKey: ['meeting', 'exist', meetingId],
+    queryFn: () => fetchMeetingResult(meetingId),
+    enabled: !!meetingId, // ID가 있을 때만 실행
+    retry: false, // 404면 재시도 없이 에러 처리
+  });
+
+  // 공유 URL 생성
+  useEffect(() => {
+    if (typeof window !== 'undefined' && meetingId) {
+      setShareUrl(`${window.location.origin}/join/${meetingId}`);
+    }
+  }, [meetingId]);
+
+  // 복사 핸들러
+  const handleCopyLink = async () => {
+    if (!shareUrl) return;
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      show();
+    } catch (err) {
+      console.error(err);
+      alert('복사 실패');
+    }
+  };
+
+  return {
+    shareUrl,
+    isError,
+    isLoading,
+    error,
+    handleCopyLink,
+    isVisible,
+  };
+};

From 5e4190e4772bbaf8d60dc9986700c2580b30eb81 Mon Sep 17 00:00:00 2001
From: Kangdy <canfrog@naver.com>
Date: Mon, 2 Feb 2026 11:28:02 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=A0=84=EB=8B=AC=20=EA=B5=AC=EC=A1=B0=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. Global Modal 시스템 개선
- `useModalStore`: 모달 오픈 시 `data`(예: meetingId)를 전달받도록 상태 구조 확장
- `useOpenModal`: (type, data, event) 시그니처로 변경하여 데이터 전달 파이프라인 구축
- `GlobalModal`: Store의 데이터를 하위 모달(ShareModal 등)에 Props로 주입

2. 공유 기능 훅(useShareMeeting) 리팩토링 및 최적화
- `ShareModal`의 비즈니스 로직을 커스텀 훅으로 분리
- `useSyncExternalStore`를 도입하여 `window.location.origin` 접근 시 발생하는 Hydration Mismatch 및 ESLint(`setState-in-effect`) 에러 해결
- 불필요한 `useState`, `useEffect` 제거로 렌더링 성능 최적화
---
 app/meeting/[id]/page.tsx          | 11 +++++++----
 app/result/page.tsx                |  8 +++++---
 components/footer.tsx              |  2 +-
 components/header.tsx              |  2 +-
 components/modal/globalModal.tsx   |  6 +++---
 components/modal/nudgeModal.tsx    | 27 ++++++++++++---------------
 components/modal/shareModal.tsx    | 27 ++++++++++++---------------
 hooks/api/query/useShareMeeting.ts | 30 +++++++++++++++++-------------
 hooks/useOpenModal.ts              |  6 +++---
 store/useModalStore.ts             | 13 +++++++++----
 10 files changed, 70 insertions(+), 62 deletions(-)

diff --git a/app/meeting/[id]/page.tsx b/app/meeting/[id]/page.tsx
index c80f2b9..feb698d 100644
--- a/app/meeting/[id]/page.tsx
+++ b/app/meeting/[id]/page.tsx
@@ -7,14 +7,17 @@ import StationSearch from '@/components/meeting/stationSearch';
 import { useOpenModal } from '@/hooks/useOpenModal';
 import { MOCK_PARTICIPANTS } from '@/mock/mockData';
 import StationData from '@/database/stations_info.json';
-import { useRouter } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 
 const STATION_DATA = StationData;
 
 export default function Page() {
   // 선택된 역 이름 상태 관리
-
   const [selectedStation, setSelectedStation] = useState<string | null>(null);
+
+  const params = useParams();
+  const id = params?.id as string;
+
   const openModal = useOpenModal();
   const router = useRouter();
 
@@ -70,7 +73,7 @@ export default function Page() {
               <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)}
+                onClick={(e) => openModal('SHARE', { meetingId: id }, e)}
               >
                 <Image src="/icon/share.svg" alt="공유 아이콘" width={12} height={12} />
                 참여 링크 공유하기
@@ -108,7 +111,7 @@ export default function Page() {
             <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)}
+              onClick={(e) => openModal('NUDGE', { meetingId: id }, e)}
             >
               <div className="flex flex-col gap-0.5">
                 <span className="text-lg leading-[1.44] font-semibold">
diff --git a/app/result/page.tsx b/app/result/page.tsx
index bb5cb75..007a335 100644
--- a/app/result/page.tsx
+++ b/app/result/page.tsx
@@ -3,13 +3,15 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import { useOpenModal } from '@/hooks/useOpenModal';
-import { useRouter } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 import KakaoMapLine from '@/components/map/kakaoMapLine';
 import { MOCK_LOCATION_RESULTS } from '@/mock/mockData';
 
 export default function Page() {
   const openModal = useOpenModal();
   const router = useRouter();
+  const params = useParams();
+  const id = params?.id as string;
 
   // 현재 선택된 결과 카드 관리 (기본값: 첫 번째)
   const [selectedResultId, setSelectedResultId] = useState<number>(1);
@@ -47,7 +49,7 @@ export default function Page() {
               <button
                 className="text-blue-5 bg-blue-1 hover:bg-blue-2 flex h-7 cursor-pointer items-center gap-1 rounded px-2.5 text-[11px] font-semibold transition-colors"
                 type="button"
-                onClick={(e) => openModal('SHARE', e)}
+                onClick={(e) => openModal('SHARE', { meetingId: id }, e)}
               >
                 <Image src="/icon/share.svg" alt="공유 아이콘" width={12} height={12} />
                 결과 공유하기
@@ -117,7 +119,7 @@ export default function Page() {
                     <button
                       onClick={(e) => {
                         e.stopPropagation();
-                        openModal('TRANSFER', e);
+                        openModal('TRANSFER', undefined, e);
                       }}
                       className="bg-gray-8 h-8 w-full cursor-pointer rounded py-1 text-[15px] font-normal text-white"
                     >
diff --git a/components/footer.tsx b/components/footer.tsx
index 24d5523..ef61de3 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -29,7 +29,7 @@ const Footer = () => {
               </Link>
               <button
                 type="button"
-                onClick={(e) => openModal('FEEDBACK', e)}
+                onClick={(e) => openModal('FEEDBACK', undefined, e)}
                 className="text-gray-7 cursor-pointer text-[16px]"
               >
                 피드백남기기
diff --git a/components/header.tsx b/components/header.tsx
index e96b4f3..dba8ad1 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -19,7 +19,7 @@ const Header = () => {
           </Link>
           <button
             type="button"
-            onClick={(e) => openModal('FEEDBACK', e)}
+            onClick={(e) => openModal('FEEDBACK', undefined, e)}
             className="text-gray-5 p-2 text-[16px] transition-colors hover:text-gray-900"
           >
             피드백남기기
diff --git a/components/modal/globalModal.tsx b/components/modal/globalModal.tsx
index d1c4de9..3f04c5a 100644
--- a/components/modal/globalModal.tsx
+++ b/components/modal/globalModal.tsx
@@ -7,7 +7,7 @@ import NudgeModal from '@/components/modal/nudgeModal';
 import TransferModal from './transferModal';
 
 export default function GlobalModal() {
-  const { type, isOpen, onClose } = useModalStore();
+  const { type, isOpen, onClose, data } = useModalStore();
 
   // 닫혀있거나 타입이 없으면 모달 X
   if (!isOpen || !type) return null;
@@ -17,9 +17,9 @@ export default function GlobalModal() {
     case 'FEEDBACK':
       return <FeedbackModal isOpen={isOpen} onClose={onClose} />;
     case 'SHARE':
-      return <ShareModal isOpen={isOpen} onClose={onClose} />;
+      return <ShareModal isOpen={isOpen} onClose={onClose} meetingId={data?.meetingId || ''} />;
     case 'NUDGE':
-      return <NudgeModal isOpen={isOpen} onClose={onClose} />;
+      return <NudgeModal isOpen={isOpen} onClose={onClose} meetingId={data?.meetingId || ''} />;
     case 'TRANSFER':
       return <TransferModal isOpen={isOpen} onClose={onClose} />;
     default:
diff --git a/components/modal/nudgeModal.tsx b/components/modal/nudgeModal.tsx
index 2a134c3..fc6fd2d 100644
--- a/components/modal/nudgeModal.tsx
+++ b/components/modal/nudgeModal.tsx
@@ -8,28 +8,23 @@ import {
   DialogFooter,
   DialogDescription,
 } from '@/components/ui/dialog';
-import { useState } from 'react';
-import { useToast } from '@/hooks/useToast';
 import Toast from '../ui/toast';
+import { useShareMeeting } from '@/hooks/api/query/useShareMeeting';
 
 interface NudgeModalProps {
   isOpen: boolean;
   onClose: () => void;
+  meetingId: string;
 }
 
-export default function NudgeModal({ isOpen, onClose }: NudgeModalProps) {
-  const [link, setLink] = useState('www.abcabc');
-  const { isVisible, show } = useToast();
+export default function NudgeModal({ isOpen, onClose, meetingId }: NudgeModalProps) {
+  const { shareUrl, isError, isLoading, handleCopyLink, isVisible } = useShareMeeting(meetingId);
 
-  const handleCopyLink = async () => {
-    try {
-      await navigator.clipboard.writeText(link);
-      show();
-    } catch (error) {
-      console.error('복사 실패: ', error);
-      alert('복사에 실패했습니다. 링크를 직접 복사해주세요.');
-    }
-  };
+  const displayValue = isError
+    ? '유효하지 않은 모임입니다.'
+    : isLoading
+      ? '링크 생성 중...'
+      : shareUrl;
 
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
@@ -60,13 +55,15 @@ export default function NudgeModal({ isOpen, onClose }: NudgeModalProps) {
               type="text"
               name="NudgeLink"
               aria-label="모임 공유 링크"
-              value={link}
+              value={displayValue}
               readOnly
+              disabled={isLoading || isError}
               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}
+              disabled={isLoading || isError || !shareUrl}
               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"
             >
               복사
diff --git a/components/modal/shareModal.tsx b/components/modal/shareModal.tsx
index 18dd013..153442b 100644
--- a/components/modal/shareModal.tsx
+++ b/components/modal/shareModal.tsx
@@ -8,28 +8,23 @@ import {
   DialogFooter,
   DialogDescription,
 } from '@/components/ui/dialog';
-import { useState } from 'react';
-import { useToast } from '@/hooks/useToast';
 import Toast from '../ui/toast';
+import { useShareMeeting } from '@/hooks/api/query/useShareMeeting';
 
 interface ShareModalProps {
   isOpen: boolean;
   onClose: () => void;
+  meetingId: string;
 }
 
-export default function ShareModal({ isOpen, onClose }: ShareModalProps) {
-  const [link, setLink] = useState('www.abcabc');
-  const { isVisible, show } = useToast();
+export default function ShareModal({ isOpen, onClose, meetingId }: ShareModalProps) {
+  const { shareUrl, isError, isLoading, handleCopyLink, isVisible } = useShareMeeting(meetingId);
 
-  const handleCopyLink = async () => {
-    try {
-      await navigator.clipboard.writeText(link);
-      show();
-    } catch (error) {
-      console.error('복사 실패: ', error);
-      alert('복사에 실패했습니다. 링크를 직접 복사해주세요.');
-    }
-  };
+  const displayValue = isError
+    ? '유효하지 않은 모임입니다.'
+    : isLoading
+      ? '링크 생성 중...'
+      : shareUrl;
 
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
@@ -59,13 +54,15 @@ export default function ShareModal({ isOpen, onClose }: ShareModalProps) {
               type="text"
               name="shareLink"
               aria-label="모임 공유 링크"
-              value={link}
+              value={displayValue}
               readOnly
+              disabled={isLoading || isError}
               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}
+              disabled={isLoading || isError || !shareUrl}
               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"
             >
               복사
diff --git a/hooks/api/query/useShareMeeting.ts b/hooks/api/query/useShareMeeting.ts
index 5c31135..73d5abc 100644
--- a/hooks/api/query/useShareMeeting.ts
+++ b/hooks/api/query/useShareMeeting.ts
@@ -3,33 +3,37 @@
 import { useQuery } from '@tanstack/react-query';
 import { apiGet } from '@/lib/api';
 import { useToast } from '@/hooks/useToast';
-import { useState, useEffect } from 'react';
+import { useSyncExternalStore } from 'react';
 
-// API Fetcher 분리
+// API Fetcher
 const fetchMeetingResult = async (id: string) => {
   return apiGet(`${process.env.NEXT_PUBLIC_API_BASE_URL}/meeting/result/${id}`);
 };
 
+// (URL origin은 변하지 않으므로 구독 함수는 빈 함수가 된다.)
+const emptySubscribe = () => () => {};
+// 브라우저에서 실행될 함수 (브라우저 URL을 가져오는 함수)
+const getClientSnapshot = () => window.location.origin;
+// 서버에서 실행될 함수 (서버에는 window가 없기에 빈 값 반환)
+const getServerSnapshot = () => '';
+
 export const useShareMeeting = (meetingId: string) => {
   const { show, isVisible } = useToast();
-  const [shareUrl, setShareUrl] = useState('');
+
+  // useSyncExternalStore hooks를 통해 window.location.origin을 안전하게 가져오기
+  const origin = useSyncExternalStore(emptySubscribe, getClientSnapshot, getServerSnapshot);
+
+  // URL 계산 (origin이 있을 때만 합침)
+  const shareUrl = origin ? `${origin}/join/${meetingId}` : '';
 
   // 모임 존재 여부 확인 (Query)
   const { isError, isLoading, error } = useQuery({
     queryKey: ['meeting', 'exist', meetingId],
     queryFn: () => fetchMeetingResult(meetingId),
-    enabled: !!meetingId, // ID가 있을 때만 실행
-    retry: false, // 404면 재시도 없이 에러 처리
+    enabled: !!meetingId,
+    retry: false,
   });
 
-  // 공유 URL 생성
-  useEffect(() => {
-    if (typeof window !== 'undefined' && meetingId) {
-      setShareUrl(`${window.location.origin}/join/${meetingId}`);
-    }
-  }, [meetingId]);
-
-  // 복사 핸들러
   const handleCopyLink = async () => {
     if (!shareUrl) return;
     try {
diff --git a/hooks/useOpenModal.ts b/hooks/useOpenModal.ts
index 92c98a2..9feb050 100644
--- a/hooks/useOpenModal.ts
+++ b/hooks/useOpenModal.ts
@@ -1,13 +1,13 @@
-import { useModalStore, ModalType } from '@/store/useModalStore';
+import { useModalStore, ModalType, ModalData } from '@/store/useModalStore';
 
 export const useOpenModal = () => {
   const { onOpen } = useModalStore();
 
-  const openModal = (type: ModalType, e?: React.MouseEvent<HTMLElement>) => {
+  const openModal = (type: ModalType, data?: ModalData, e?: React.MouseEvent<HTMLElement>) => {
     // 이벤트가 넘어왔다면 포커스 해제 (에러 방지 핵심 로직)
     if (e) e.currentTarget.blur();
 
-    onOpen(type);
+    onOpen(type, data);
   };
 
   return openModal;
diff --git a/store/useModalStore.ts b/store/useModalStore.ts
index f23ecb2..eeff5da 100644
--- a/store/useModalStore.ts
+++ b/store/useModalStore.ts
@@ -1,22 +1,27 @@
 import { create } from 'zustand';
 import { combine, devtools } from 'zustand/middleware';
 
-// 관리할 모달의 종류 정의 (피드백남기기, 링크 공유하기, 재촉하기, 환승경로 보기)
+// 관리할 모달의 종류 정의
 export type ModalType = 'FEEDBACK' | 'SHARE' | 'NUDGE' | 'TRANSFER';
 
+export interface ModalData {
+  meetingId?: string; // SHARE, NUDGE 모달에서 사용
+}
+
 export const useModalStore = create(
   devtools(
     combine(
       {
         type: null as ModalType | null,
         isOpen: false,
+        data: null as ModalData | null,
       },
       (set) => ({
-        onOpen: (type: ModalType) => {
-          set({ isOpen: true, type });
+        onOpen: (type: ModalType, data?: ModalData) => {
+          set({ isOpen: true, type, data });
         },
         onClose: () => {
-          set({ isOpen: false });
+          set({ isOpen: false, data: null });
         },
       })
     ),