✨Feat: 카카오맵 수정 및 AI 코스 추천/코스 세션 조회 api 연결

src/pages/map/index.tsx

@@ -2,80 +2,95 @@ import Image from 'next/image';
 import { cn } from '@/shared/lib';
 import { ControlBar } from '@/shared/components';
 import { BottomNav } from '@/shared/components/tab/BottomNav';
-import {
-  purposes,
-  stays,
-  moves,
-} from '@/shared/constants/course/courseOptions';
 import { useCourseSelection } from '@/shared/hooks/useCourseSelection';
-import CourseSelectSection from '@/pages/map/components/CourseSelectSection';
-import CourseInputSection from '@/pages/map/components/CourseInputSection';
+import CourseSelectGroup from '@/shared/components/map/components/CourseSelectGroup';
+import CourseInputSection from '@/shared/components/map/components/CourseInputSection';
 import { useRouter } from 'next/router';
+import { useRecommendCourse } from '@/shared/api/course/queries/useRecommendCourse';
+import { useState } from 'react';
 
 export default function CourseSettingPage() {
   const router = useRouter();
-  const { purpose, setPurpose, stay, setStay, move, setMove } =
-    useCourseSelection();
+  const { mutate, isPending } = useRecommendCourse();
+
+  const { purpose, setPurpose, stay, setStay, move, setMove } = useCourseSelection();
+  const [mustVisitPlace, setMustVisitPlace] = useState('');
 
   const canProceed = Boolean(purpose && stay && move);
 
   const handleNext = () => {
-    if (canProceed) router.push('/map/result');
+    if (!canProceed) return;
+
+    mutate(
+      {
+        travelPurpose: purpose!,
+        stayDuration: stay!,
+        transportation: move!,
+        userLatitude: 37.4985,
+        userLongitude: 126.7822,
+        mustVisitPlace: mustVisitPlace || '',
+      },
+      {
+        onSuccess: (res) => {
+          if (res.success) {
+            router.push(`/map/result?sessionId=${res.data.sessionId}`);
+          }
+        },
+        onError: (err) => {
+          console.error('AI 코스 추천 실패:', err);
+        },
+      },
+    );
   };
 
   return (
     <div
       className={cn(
         'relative px-[2.4rem] bg-white flex flex-col h-full pt-[1.3rem] pb-[12rem]',
       )}
-      role='form'
-      aria-labelledby='course-setting-title'
-      aria-describedby='course-setting-desc'
+      role="form"
+      aria-labelledby="course-setting-title"
+      aria-describedby="course-setting-desc"
     >
-      <ControlBar className='fixed top-[1rem] left-0 right-0 z-50 px-[2rem]' />
+      <ControlBar className="fixed top-[1rem] left-0 right-0 z-50 px-[2rem]" />
 
       <main
-        className='w-full pt-[3.4rem] flex flex-col overflow-auto'
-        aria-live='polite'
+        className="w-full pt-[3.4rem] flex flex-col overflow-auto"
+        aria-live="polite"
       >
-        <section className='mb-[3.6rem] text-center'>
-          <h1 id='course-setting-title' className='sr-only'>
+        <section className="mb-[3.6rem] text-center">
+          <h1 id="course-setting-title" className="sr-only">
             여행 코스 설정
           </h1>
+
           <Image
-            src='/assets/bannerMap.svg'
-            alt='여행 코스 추천 배너 이미지'
+            src="/assets/bannerMap.svg"
+            alt="여행 코스 추천 배너 이미지"
             width={354}
             height={79}
-            className='w-full h-auto object-cover block'
+            className="w-full h-auto object-cover block"
           />
-          <p id='course-setting-desc' className='sr-only'>
-            여행 목적, 체류 시간, 이동 방식을 선택하고, 원하는 장소를 입력할 수
-            있습니다.
+
+          <p id="course-setting-desc" className="sr-only">
+            여행 목적, 체류 시간, 이동 방식을 선택하고, 원하는 장소를 입력할 수 있습니다.
           </p>
         </section>
 
-        <div className='flex flex-col gap-[1.9rem] mb-[8rem]'>
-          <CourseSelectSection
-            title='여행 목적을 선택해 주세요'
-            options={purposes}
-            selected={purpose}
-            onSelect={setPurpose}
-          />
-          <CourseSelectSection
-            title='체류 시간을 선택해 주세요'
-            options={stays}
-            selected={stay}
-            onSelect={setStay}
-          />
-          <CourseSelectSection
-            title='이동 방식을 선택해 주세요'
-            options={moves}
-            selected={move}
-            onSelect={setMove}
-          />
-          <CourseInputSection onNext={handleNext} />
-        </div>
+        <CourseSelectGroup
+          purpose={purpose}
+          stay={stay}
+          move={move}
+          setPurpose={setPurpose}
+          setStay={setStay}
+          setMove={setMove}
+        />
+
+        <CourseInputSection
+          value={mustVisitPlace}
+          onChange={setMustVisitPlace}
+          onNext={handleNext}
+          isLoading={isPending}
+        />
       </main>
 
       <BottomNav />

src/pages/map/location/[placeId].tsx

@@ -0,0 +1,39 @@
+'use client';
+import { useRouter } from 'next/router';
+import Image from 'next/image';
+import { Header, LocationCard, AddressCopy } from '@/shared/components';
+
+export default function LocationPage() {
+  const router = useRouter();
+  const { name, imageSrc, description, address } = router.query;
+
+  if (!router.isReady || !name) {
+    return <p className="text-center mt-10">불러오는 중...</p>;
+  }
+
+  return (
+    <div className="relative w-full h-[100vh] overflow-auto px-[2.4rem]">
+      <Header title={String(name)} onClick={() => router.back()} />
+
+      <main className="relative pt-[14.3rem] gap-[1.2rem] flex flex-col">
+        <Image
+          src={typeof imageSrc === 'string' ? imageSrc : '/assets/board.svg'}
+          alt={String(name)}
+          width={354}
+          height={436}
+          className="w-full h-auto object-cover block rounded-[16px]"
+        />
+
+        <LocationCard
+          name={String(name)}
+          address={String(address)}
+          description={String(description)}
+          variant="mint"
+          size="large"
+        />
+
+        <AddressCopy variant="mint" value={String(address)} />
+      </main>
+    </div>
+  );
+}

src/pages/map/result/Map.tsx

@@ -1,10 +1,14 @@
 import { Header } from '@/shared/components';
 import { useRouter } from 'next/router';
-import FullMap from '@/pages/map/result/components/FullMap';
+import FullMap from '@/shared/components/map/result/components/FullMap';
 
 const MapPage = () => {
   const router = useRouter();
 
+  const sessionId = Array.isArray(router.query.sessionId)
+    ? router.query.sessionId[0]
+    : router.query.sessionId;
+
   return (
     <main
       className="w-full h-[100vh] bg-mint-300 overflow-hidden"
@@ -13,9 +17,22 @@ const MapPage = () => {
     >
       <Header
         title="코스 추천"
-        onClick={() => router.push('/map/result?from=map')}
+        onClick={() => {
+          if (window.history.length > 1) {
+            router.back();
+          } else {
+            router.push('/map');
+          }
+        }}
       />
-      <FullMap />
+
+      {sessionId ? (
+        <FullMap sessionId={sessionId} />
+      ) : (
+        <div className="flex h-full items-center justify-center text-gray-600 text-title-sm bg-gray-200">
+          코스 정보가 없습니다
+        </div>
+      )}
     </main>
   );
 };