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

src/pages/map/index.tsx

@@ -2,25 +2,45 @@ 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.isSuccess) {
+            router.push(`/map/result?sessionId=${res.result.sessionId}`);
+          }
+        },
+        onError: (err) => {
+          console.error('AI 코스 추천 실패:', err);
+        },
+      },
+    );
   };
 
   return (
@@ -55,27 +75,21 @@ export default function CourseSettingPage() {
           </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/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"
@@ -15,7 +19,14 @@ const MapPage = () => {
         title="코스 추천"
         onClick={() => router.push('/map/result?from=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>
   );
 };

src/pages/map/result/index.tsx

@@ -2,18 +2,20 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import Image from 'next/image';
 import { cn } from '@/shared/lib';
-import { ControlBar } from '@/shared/components';
-import { BottomNav } from '@/shared/components';
-import { PopupSet } from '@/shared/components';
-import TagGroup from '@/pages/map/result/components/TagGroup';
-import ResultList from '@/pages/map/result/components/ResultList';
-import ResultMap from '@/pages/map/result/components/ResultMap';
+import { ControlBar, BottomNav, PopupSet } from '@/shared/components';
+import TagGroup from '@/shared/components/map/result/components/TagGroup';
+import ResultList from '@/shared/components/map/result/components/ResultList';
+import ResultMap from '@/shared/components/map/result/components/ResultMap';
+import { useCourseSession } from '@/shared/api/course/queries/useCourseSession';
 
 export default function CourseResultPage() {
   const router = useRouter();
   const [showPopup, setShowPopup] = useState(false);
   const [viewMode, setViewMode] = useState<'list' | 'map'>('list');
 
+  const sessionId = router.query.sessionId as string | undefined;
+  const { data } = useCourseSession(sessionId ?? ''); 
+
   useEffect(() => {
     if (typeof window === 'undefined') return;
 
@@ -25,13 +27,17 @@ export default function CourseResultPage() {
   }, []);
 
   useEffect(() => {
-    if (router.query.from === 'map') {
-      setViewMode('map');
-    }
+    if (router.query.from === 'map') setViewMode('map');
   }, [router.query.from]);
 
   const handlePopupClose = () => setShowPopup(false);
 
+  const tags = [
+    data?.travelPurpose || null,
+    data?.stayDuration || null,
+    data?.transportation || null,
+  ].filter(Boolean) as string[];
+
   return (
     <div className='relative bg-white flex flex-col min-h-screen pb-[12rem] no-scrollbar'>
       <ControlBar className='fixed top-[1rem] left-0 right-0 z-50 px-[2rem]' />
@@ -50,6 +56,7 @@ export default function CourseResultPage() {
 
           <TagGroup
             viewMode={viewMode}
+            tags={tags}
             onToggleView={() =>
               setViewMode((prev) => (prev === 'list' ? 'map' : 'list'))
             }
@@ -63,7 +70,11 @@ export default function CourseResultPage() {
                 : 'h-[43.6rem] overflow-hidden',
             )}
           >
-            {viewMode === 'list' ? <ResultList /> : <ResultMap />}
+            {viewMode === 'list' ? (
+              <ResultList places={data?.places ?? []} />
+            ) : (
+              <ResultMap sessionId={sessionId ?? ''} places={data?.places ?? []} />
+            )}
           </section>
         </div>
       </main>

src/shared/api/course/api/getCourseSession.ts

@@ -0,0 +1,14 @@
+import { apiAuth } from "@/shared/api/instance";
+import type { CourseSessionResponse } from "@/shared/api/course/types/courseSession";
+
+export const getCourseSession = async (sessionId: string) => {
+  const { data } = await apiAuth.get<CourseSessionResponse>(
+    `/api/courses/session/${sessionId}`,
+  );
+
+  if (!data.isSuccess) {
+    throw new Error(data.message || 'Failed to fetch course session');
+  }
+
+  return data.result;
+};

src/shared/api/course/api/postRecommendCourse.ts

@@ -0,0 +1,13 @@
+import { apiWithToken } from '@/shared/api/instance';
+import type {
+  RecommendCourseRequest,
+  RecommendCourseResponse,
+} from '@/shared/api/course/types/recommendTypes';
+
+export const postRecommendCourse = async (body: RecommendCourseRequest) => {
+  const { data } = await apiWithToken.post<RecommendCourseResponse>(
+    '/api/courses/recommend',
+    body,
+  );
+  return data;
+};

src/shared/api/course/queries/useCourseSession.ts

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+import { getCourseSession } from '@/shared/api/course/api/getCourseSession';
+import type { CourseSessionResponse } from '@/shared/api/course/types/courseSession';
+
+export const useCourseSession = (sessionId: string) => {
+  return useQuery<CourseSessionResponse['result']>({
+    queryKey: ['courseSession', sessionId],
+    queryFn: () => getCourseSession(sessionId),
+    enabled: Boolean(sessionId && sessionId.trim()),
+    staleTime: 1000 * 60 * 5, 
+    refetchOnWindowFocus: true, 
+    refetchOnReconnect: true,   
+    refetchInterval: false, 
+  });
+};

src/shared/api/course/queries/useRecommendCourse.ts

@@ -0,0 +1,14 @@
+import { useMutation } from '@tanstack/react-query';
+import {
+  postRecommendCourse,
+} from '@/shared/api/course/api/postRecommendCourse';
+import type {
+  RecommendCourseRequest,
+  RecommendCourseResponse,
+} from '@/shared/api/course/types/recommendTypes';
+
+export const useRecommendCourse = () => {
+  return useMutation<RecommendCourseResponse, Error, RecommendCourseRequest>({
+    mutationFn: (body) => postRecommendCourse(body),
+  });
+};

src/shared/api/course/types/courseSession.ts

@@ -0,0 +1,24 @@
+export interface CoursePlace {
+  placeId: number;
+  name: string;
+  address: string;
+  latitude: number;
+  longitude: number;
+  description: string;
+  placeImg: string;
+}
+
+export interface CourseSessionResponse {
+  code: string;
+  message: string;
+  isSuccess: boolean;
+  result: {
+    memberId: number;
+    createdAt: string;
+    travelPurpose: string;
+    stayDuration: string;
+    transportation: string;
+    mustVisitPlace?: string; 
+    places: CoursePlace[];
+  };
+}