[refactor, feat] #7 추천 결과 페이지 API 관련 작업

src/app/_components/SurveyScreen/hooks/useSurvey.ts

@@ -1,12 +1,15 @@
 import { useState } from "react";
+import { useRouter } from "next/navigation";
 import { surveyData } from "@/constants/surveyData";
 
 interface UseSurveyProps {
   type: "onboarding" | "todayMood";
-  routing: (page: string) => void;
+  routing?: (page: string) => void;
 }
 
 export default function useSurvey({ type, routing }: UseSurveyProps) {
+  const router = useRouter();
+
   const questions = surveyData[type];
   const storageKey = `${type}Answers`;
 
@@ -35,9 +38,11 @@ export default function useSurvey({ type, routing }: UseSurveyProps) {
 
   const handleNextClick = () => {
     if (currentQuestion === questions.length - 1) {
-      routing(
-        type === "onboarding" ? "ToMoodTransition" : "ToRecommendTransition"
-      );
+      if (routing) {
+        routing("ToMoodTransition");
+      } else {
+        router.push("/recommend");
+      }
     } else {
       setCurrentQuestion((prev) => prev + 1);
     }

src/app/_components/SurveyScreen/index.tsx

@@ -7,7 +7,7 @@ import Button from "@/components/Button";
 
 interface SurveyScreenProps {
   type: "onboarding" | "todayMood";
-  routing: (page: string) => void;
+  routing?: (page: string) => void;
 }
 
 export default function SurveyScreen({ type, routing }: SurveyScreenProps) {

src/app/_components/TransitionScreen/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect } from "react";
-import { useRouter } from "next/navigation";
 import { transitionData } from "@/constants/transitionData";
 import Image from "next/image";
 
@@ -14,18 +13,15 @@ export default function TransitionScreen({
   type,
   routing,
 }: TransitionScreenProps) {
-  const router = useRouter();
   const transitionContent = transitionData[type];
 
   useEffect(() => {
-    setTimeout(() => {
-      if (routing) {
+    if (routing) {
+      setTimeout(() => {
         routing("TodayMoodSurvey");
-      } else {
-        router.push("/recommend");
-      }
-    }, 1000);
-  }, [transitionContent, routing, router]);
+      }, 1000);
+    }
+  }, [transitionContent, routing]);
 
   return (
     <div className="flex items-center w-full h-screen bg-[#F7F9FD]">

src/app/map/PopupTestPage/PopupTestPage.jsx

@@ -22,10 +22,10 @@ export default function PopupTestPage({ routing }) {
   };
 
   const handleSubmitClick = async () => {
-    const USID = localStorage.getItem("USID") || "";
+    const userId = localStorage.getItem("userId") || "";
 
     const payload = {
-      clientId: USID,
+      clientId: userId,
       satisfactions: satisfactions,
     };
 

src/app/page.tsx

@@ -18,13 +18,10 @@ export default function Home() {
     ToMoodTransition: () => (
       <TransitionScreen type="toMood" routing={handleRouting} />
     ),
-    ToRecommendTransition: () => <TransitionScreen type="toRecommend" />,
     OnboardingSurvey: () => (
       <SurveyScreen type="onboarding" routing={handleRouting} />
     ),
-    TodayMoodSurvey: () => (
-      <SurveyScreen type="todayMood" routing={handleRouting} />
-    ),
+    TodayMoodSurvey: () => <SurveyScreen type="todayMood" />,
   };
 
   return <div>{pageMapping[currentPage]?.()}</div>;

src/app/recommend/_components/SidePanel/SpaceCard.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import Temp from "@/assets/icons/temp.jpg";
-import { RecommendationResponse } from "@/app/lib/type";
+import { RecommendationResponse } from "@/lib/type";
 
 export default function SpaceCard({
   spaceData,

src/app/recommend/_components/SidePanel/index.tsx

@@ -1,7 +1,7 @@
 import SpaceCard from "./SpaceCard";
 import Image from "next/image";
 import ChevronLeft from "@/assets/icons/chevron-left.png";
-import { RecommendationResponse } from "@/app/lib/type";
+import { RecommendationResponse } from "@/lib/type";
 
 export default function SidePanel({
   spaceData,

src/app/recommend/_hooks/useSurveyRecommendation.ts

@@ -0,0 +1,44 @@
+// hooks/useSurveyRecommendation.ts
+import { useEffect, useState } from "react";
+import { fetchRecommendation } from "@/lib/apis/survey";
+import { RecommendationRequest, RecommendationResponse } from "@/lib/type";
+
+export function useSurveyRecommendation() {
+  const [spaceData, setSpaceData] = useState<RecommendationResponse[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<null | string>(null);
+
+  useEffect(() => {
+    const userId = localStorage.getItem("userId") || "";
+    const onboarding = JSON.parse(
+      localStorage.getItem("onboardingAnswers") ?? "[]"
+    );
+
+    const payload: RecommendationRequest = {
+      clientId: userId,
+      age: Number(onboarding[0]?.substr(0, 2) || 0),
+      gender: onboarding[1],
+      resident: onboarding[2],
+      city: onboarding[3],
+      want: onboarding[5],
+      mood: onboarding[6],
+    };
+
+    setIsLoading(true);
+    setError(null);
+
+    fetchRecommendation(payload)
+      .then((data) => {
+        setSpaceData(data);
+      })
+      .catch((err) => {
+        console.error(err);
+        setError("추천 정보를 불러오는 데 실패했어요.");
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, []);
+
+  return { spaceData, isLoading, error };
+}

src/app/recommend/page.tsx

@@ -1,46 +1,19 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import axios from "axios";
 import SideBar from "./_components/SideBar";
 import SidePanel from "./_components/SidePanel";
 import BackToSurveyButton from "./_components/BackToSurveyButton";
 import MapView from "./_components/MapView";
+import TransitionScreen from "@/app/_components/TransitionScreen";
+import { useSurveyRecommendation } from "./_hooks/useSurveyRecommendation";
 
 export default function RecommendPage() {
-  const [spaceData, setSpaceData] = useState([]);
+  const { spaceData, isLoading, error } = useSurveyRecommendation();
 
-  useEffect(() => {
-    const submitTodayMood = async () => {
-      const USID = localStorage.getItem("USID") || "";
-      const onboarding = JSON.parse(
-        localStorage.getItem("onboardingAnswers") ?? "[]"
-      );
+  if (isLoading) return <TransitionScreen type="toRecommend" />;
 
-      const payload = {
-        clientId: USID,
-        age: Number(onboarding[0]?.substr(0, 2) || 0),
-        gender: onboarding[1],
-        resident: onboarding[2],
-        city: onboarding[3],
-        want: onboarding[5],
-        mood: onboarding[6],
-      };
-
-      try {
-        const res = await axios.post(
-          "https://saegil.store/api/survey/recommendation",
-          payload
-        );
-        setSpaceData(res.data);
-      } catch (err) {
-        console.error("추천 API 실패:", err);
-        alert("추천 정보를 불러오는 데 실패했어요.");
-      }
-    };
-
-    submitTodayMood();
-  }, []);
+  // 에러 페이지 시안 완성되면 변경
+  if (error) return <div>{error}</div>;
 
   return (
     <div className="relative bg-[#FFFFFF] h-screen overflow-hidden">

src/lib/apis/survey.ts

@@ -0,0 +1,23 @@
+import axios from "@/lib/axiosInstance";
+import { RecommendationRequest, UpdateRequest } from "../type";
+
+// 사용자 설문 결과 요청
+export async function fetchRecommendation(payload: RecommendationRequest) {
+  try {
+    const res = await axios.post("/survey/recommendation", payload);
+    return res.data;
+  } catch (err) {
+    console.error("추천 API 실패:", err);
+    throw err;
+  }
+}
+
+// 사용자 설문 결과 만족도 반영 요청
+export async function updateSatisfactionScore(payload: UpdateRequest) {
+  try {
+    await axios.post("/survey/update", payload);
+  } catch (err) {
+    console.error("만족도 API 호출 실패:", err);
+    throw err;
+  }
+}

src/lib/axiosInstance.ts

@@ -0,0 +1,7 @@
+import axios from "axios";
+
+const axiosInstance = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_URL,
+});
+
+export default axiosInstance;

src/lib/type.ts

@@ -0,0 +1,22 @@
+export interface RecommendationRequest {
+  clientId: string;
+  age: number;
+  gender: "남자" | "여자";
+  resident: "새만금" | "군산" | "김제" | "부안";
+  city: "새만금" | "군산" | "김제" | "부안";
+  want: string;
+  mood: string;
+}
+
+export interface RecommendationResponse {
+  title: string;
+  position: string;
+  category: "FESTIVAL" | "EVENT" | "TOUR" | "CULTURE";
+  image: string;
+  url: string;
+}
+
+export interface UpdateRequest {
+  clientId: string;
+  satisfactions: number[];
+}

src/utils/createNewUser.ts

@@ -1,6 +1,6 @@
 export function createNewUser() {
   const time = new Date();
-  const userID =
+  const userId =
     "" +
     time.getFullYear() +
     time.getMonth() +
@@ -11,7 +11,7 @@ export function createNewUser() {
     time.getMilliseconds() +
     Math.floor(Math.random() * 1000);
 
-  localStorage.setItem("USID", userID);
+  localStorage.setItem("userId", userId);
   localStorage.setItem("onboardingAnswers", JSON.stringify(Array(7).fill("")));
   localStorage.setItem("todayMoodAnswers", JSON.stringify(Array(2).fill("")));
 }