From a273423b3f763725515c8b852cb5b3746e3dda14 Mon Sep 17 00:00:00 2001
From: zzzryt <jinjinstar3@gmail.com>
Date: Fri, 5 Dec 2025 18:09:58 +0900
Subject: [PATCH 1/3] =?UTF-8?q?(#195):=20=EC=B9=B4=EC=B9=B4=EC=98=A4?=
 =?UTF-8?q?=ED=86=A1=20=EA=B3=B5=EC=9C=A0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/shared/lib/useKakaoShare.ts      | 70 +++++++++++++++++++
 .../shared/ui/SharedButtonContainer.tsx       | 25 +++++++
 src/features/tourList/ui/TourInfoCard.tsx     | 26 +++----
 3 files changed, 108 insertions(+), 13 deletions(-)
 create mode 100644 src/features/shared/lib/useKakaoShare.ts
 create mode 100644 src/features/shared/ui/SharedButtonContainer.tsx

diff --git a/src/features/shared/lib/useKakaoShare.ts b/src/features/shared/lib/useKakaoShare.ts
new file mode 100644
index 0000000..a6ca628
--- /dev/null
+++ b/src/features/shared/lib/useKakaoShare.ts
@@ -0,0 +1,70 @@
+import { tourQueries } from '@/entities/tour';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Kakao: any;
+  }
+}
+
+interface UseKakaoShareParams {
+  contentId: string;
+  link: string;
+}
+
+const useKakaoShare = ({ contentId, link }: UseKakaoShareParams) => {
+  const { data } = useQuery({
+    ...tourQueries.detailCommon(contentId),
+  });
+
+  useEffect(() => {
+    // SDK 로드
+    const script = document.createElement('script');
+    script.src = 'https://t1.kakaocdn.net/kakao_js_sdk/2.7.0/kakao.min.js';
+    script.async = true;
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  const shareKakao = () => {
+    if (window.Kakao) {
+      const kakao = window.Kakao;
+      if (!kakao.isInitialized()) {
+        kakao.init(import.meta.env.VITE_KAKAO_MAP_KEY);
+      }
+      window.Kakao.Share.sendDefault({
+        objectType: 'feed',
+        content: {
+          title: data?.title ?? '여행지 추천',
+          description: data?.overview ?? '멋진 여행지를 확인해보세요!',
+          imageUrl:
+            data?.firstimage ||
+            data?.firstimage2 ||
+            'https://developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png',
+          link: {
+            mobileWebUrl: link,
+            webUrl: link,
+          },
+        },
+        buttons: [
+          {
+            title: '여행 시작하기',
+            link: {
+              mobileWebUrl: link,
+              webUrl: link,
+            },
+          },
+        ],
+      });
+    }
+  };
+
+  return { shareKakao };
+};
+
+export default useKakaoShare;
diff --git a/src/features/shared/ui/SharedButtonContainer.tsx b/src/features/shared/ui/SharedButtonContainer.tsx
new file mode 100644
index 0000000..9901c42
--- /dev/null
+++ b/src/features/shared/ui/SharedButtonContainer.tsx
@@ -0,0 +1,25 @@
+/* eslint-disable */
+import { commonSVG } from '@/assets';
+import useKakaoShare from '../lib/useKakaoShare';
+
+interface SharedButtonContainerProps {
+  contentId: string;
+}
+
+export default function SharedButtonContainer({
+  contentId,
+}: SharedButtonContainerProps) {
+  const link = window.location.href;
+  const { shareKakao } = useKakaoShare({ contentId, link });
+
+  return (
+    <button
+      aria-label="공유하기"
+      className="cursor-pointer"
+      type="button"
+      onClick={shareKakao}
+    >
+      <commonSVG.ShareIcon />
+    </button>
+  );
+}
diff --git a/src/features/tourList/ui/TourInfoCard.tsx b/src/features/tourList/ui/TourInfoCard.tsx
index b02804f..219b261 100644
--- a/src/features/tourList/ui/TourInfoCard.tsx
+++ b/src/features/tourList/ui/TourInfoCard.tsx
@@ -1,5 +1,4 @@
 import { Suspense } from 'react';
-import { commonSVG } from '@/assets';
 
 import { TourCardImages } from '@/features/tourList';
 import { SkeletonCard, StartTripButton } from '@/features/tour';
@@ -13,6 +12,7 @@ import {
 } from '@/shared';
 
 import type { TourItem } from '@/entities/tour';
+import SharedButtonContainer from '@/features/shared/ui/SharedButtonContainer';
 interface TourInfoCardProps {
   tourInfo: TourItem;
 }
@@ -40,9 +40,7 @@ export default function TourInfoCard({ tourInfo }: TourInfoCardProps) {
           </span>
         </div>
         <nav className="flex gap-2.5" aria-label="카드 옵션">
-          <button aria-label="옵션 보기">
-            <commonSVG.ShareIcon />
-          </button>
+          <SharedButtonContainer contentId={tourInfo.contentid} />
           <Suspense fallback={<LoadingSpinner />}>
             <BookmarkButtonContainer contentId={tourInfo.contentid} />
           </Suspense>
@@ -51,15 +49,17 @@ export default function TourInfoCard({ tourInfo }: TourInfoCardProps) {
 
       {/* 상세 정보 */}
       <section className="flex flex-col px-5 mt-2 text-sm">
-        <div className="flex items-center gap-2">
-          <DistanceTimeInfo
-            dist={tourInfo.dist}
-            iconFill="#FA4032"
-            className="text-primary-red font-bold"
-          />
-          <address className="not-italic">
-            {truncate(tourInfo.addr1 ?? '', { omission: '', length: 10 })}
-          </address>
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex gap-2">
+            <DistanceTimeInfo
+              dist={tourInfo.dist}
+              iconFill="#FA4032"
+              className="text-primary-red font-bold"
+            />
+            <address className="not-italic">
+              {truncate(tourInfo.addr1 ?? '', { omission: '...', length: 15 })}
+            </address>
+          </div>
           <StartTripButton
             lng={tourInfo.mapx}
             lat={tourInfo.mapy}

From 9efb15fd333eaaa9d0637488011b9b679e672189 Mon Sep 17 00:00:00 2001
From: zzzryt <jinjinstar3@gmail.com>
Date: Sun, 7 Dec 2025 08:40:36 +0900
Subject: [PATCH 2/3] =?UTF-8?q?(#195):=20single=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/router/Router.tsx              |  2 ++
 src/app/router/lazyRoutes.ts           |  3 ++
 src/features/tour/ui/single/Single.tsx | 38 ++++++++++++++++++++++++++
 src/pages/tour/geotrip/SingleTrip.tsx  | 30 ++++++++++++++++++++
 src/pages/tour/geotrip/index.ts        |  1 +
 5 files changed, 74 insertions(+)
 create mode 100644 src/features/tour/ui/single/Single.tsx
 create mode 100644 src/pages/tour/geotrip/SingleTrip.tsx

diff --git a/src/app/router/Router.tsx b/src/app/router/Router.tsx
index 1c33d0b..c0c79df 100644
--- a/src/app/router/Router.tsx
+++ b/src/app/router/Router.tsx
@@ -7,6 +7,7 @@ import {
   AroundSearch,
   TourList,
   TourSearch,
+  TourSingleInfo,
 } from '@/app/router';
 import { Home } from '@/pages/home';
 import { GeoTrip } from '@/pages/tour/geotrip';
@@ -28,6 +29,7 @@ export default function Router() {
           </Route>
           <Route path="/tour" element={<Tour />}>
             <Route path="geo-trip" element={<GeoTrip />} />
+            <Route path="single/:contentId" element={<TourSingleInfo />} />
             <Route path="list" element={<TourList />} />
             <Route path="search" element={<TourSearch />} />
             <Route path="bookmark" element={<Bookmark />} />
diff --git a/src/app/router/lazyRoutes.ts b/src/app/router/lazyRoutes.ts
index b5a9a24..d20ea25 100644
--- a/src/app/router/lazyRoutes.ts
+++ b/src/app/router/lazyRoutes.ts
@@ -9,3 +9,6 @@ export const AroundSearch = lazy(
 );
 export const TourList = lazy(() => import('@/pages/tour/tourList/TourList'));
 export const TourSearch = lazy(() => import('@/pages/tour/search/TourSearch'));
+export const TourSingleInfo = lazy(
+  () => import('@/pages/tour/geotrip/SingleTrip'),
+);
diff --git a/src/features/tour/ui/single/Single.tsx b/src/features/tour/ui/single/Single.tsx
new file mode 100644
index 0000000..373a0e7
--- /dev/null
+++ b/src/features/tour/ui/single/Single.tsx
@@ -0,0 +1,38 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+
+import { tourQueries, type TourItem } from '@/entities/tour';
+import { LoadingSpinner } from '@/shared/ui';
+import { TourSlide } from '@/features/tourShort';
+
+export default function Single() {
+  const { contentId } = useParams();
+  const navigate = useNavigate();
+
+  const { data: tourInfo, isLoading } = useQuery({
+    ...tourQueries.detailCommon(contentId!),
+    enabled: !!contentId,
+  });
+
+  // 로딩 중일 때
+  if (isLoading) {
+    return (
+      <div className="w-full h-full flex justify-center items-center">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  const handleRedirectMainPage = () => {
+    navigate('/tour/geo-trip?distance=20000&tour-type=12');
+  };
+
+  return (
+    <div className="relative w-full h-full">
+      <TourSlide
+        tourInfo={tourInfo as TourItem}
+        openBottomSheet={handleRedirectMainPage}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/tour/geotrip/SingleTrip.tsx b/src/pages/tour/geotrip/SingleTrip.tsx
new file mode 100644
index 0000000..867cc7a
--- /dev/null
+++ b/src/pages/tour/geotrip/SingleTrip.tsx
@@ -0,0 +1,30 @@
+import SingleTrip from '@/features/tour/ui/single/Single';
+import { LoadingSpinner, QueryErrorBoundary } from '@/shared';
+import { BottomNavigationBar, Seo } from '@/widgets';
+import { Suspense } from 'react';
+import { useParams } from 'react-router-dom';
+
+export default function SingleTripPage() {
+  const { contentId } = useParams();
+  return (
+    <>
+      <Seo
+        title="관광지 조회"
+        description="관광지를 단일 조회하는 페이지입니다."
+        canonicalUrl={`https://p-pick.com/tour/${contentId}`}
+      />
+      <section className="flex flex-col h-full w-full">
+        <div className="h-full w-full relative">
+          <div className="absolute h-full w-full flex items-center justify-center">
+            <QueryErrorBoundary>
+              <Suspense fallback={<LoadingSpinner />}>
+                <SingleTrip />
+              </Suspense>
+            </QueryErrorBoundary>
+          </div>
+        </div>
+        <BottomNavigationBar />
+      </section>
+    </>
+  );
+}
diff --git a/src/pages/tour/geotrip/index.ts b/src/pages/tour/geotrip/index.ts
index ca8cac1..0797c0b 100644
--- a/src/pages/tour/geotrip/index.ts
+++ b/src/pages/tour/geotrip/index.ts
@@ -1 +1,2 @@
 export { default as GeoTrip } from './GeoTrip';
+export { default as SingleTrip } from './SingleTrip';

From 16eea55a9cc1e489259732e1e39325e15873d3cf Mon Sep 17 00:00:00 2001
From: zzzryt <jinjinstar3@gmail.com>
Date: Sun, 7 Dec 2025 08:57:39 +0900
Subject: [PATCH 3/3] =?UTF-8?q?(#195):=20single=20=EA=B2=BD=EB=A1=9C?=
 =?UTF-8?q?=EB=A5=BC=20link=EB=A1=9C=20=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/shared/ui/SharedButtonContainer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/shared/ui/SharedButtonContainer.tsx b/src/features/shared/ui/SharedButtonContainer.tsx
index 9901c42..23d3998 100644
--- a/src/features/shared/ui/SharedButtonContainer.tsx
+++ b/src/features/shared/ui/SharedButtonContainer.tsx
@@ -9,9 +9,9 @@ interface SharedButtonContainerProps {
 export default function SharedButtonContainer({
   contentId,
 }: SharedButtonContainerProps) {
-  const link = window.location.href;
-  const { shareKakao } = useKakaoShare({ contentId, link });
+  const link = `${window.location.origin}/tour/single/${contentId}`;
 
+  const { shareKakao } = useKakaoShare({ contentId, link });
   return (
     <button
       aria-label="공유하기"