Merge pull request #23 from CarToi/feat/#21/recommendation-page

[feat] #21 추천 페이지 기능 추가/ 제출 완료 페이지/ 서비스 만족도 조사 모달 기능 추가

Author: yl0937

src/app/map/PopupTestPage/PopupTestPage.jsx

@@ -10,11 +10,16 @@ export default function SpaceCard({
   position,
   category,
   image,
-  // url,
+  url,
 }: RecommendationResponse) {
   const city = getCity(position);
   return (
-    <div className="flex h-full w-full gap-2 sm:flex-col sm:gap-3">
+    <button
+      onClick={() => {
+        window.open(url, "_blank");
+      }}
+      className="flex h-full w-full cursor-pointer gap-2 hover:bg-[#D1D4DC] sm:flex-col sm:gap-3"
+    >
       <Image
         className="size-40 rounded-[6px] object-cover sm:h-[180px] sm:w-full"
         src={image || Temp}
@@ -46,6 +51,6 @@ export default function SpaceCard({
           )}
         </div>
       </div>
-    </div>
+    </button>
   );
 }

src/app/map/page.tsx

@@ -1,14 +1,17 @@
 import { RecommendationResponse } from "@/lib/type";
 import SpaceCard from "./SpaceCard";
+import ErrorScreen from "@/components/ErrorScreen";
 
 export default function RecommendationPanel({
   spaceData,
+  isError,
 }: {
   spaceData: RecommendationResponse[];
+  isError: boolean;
 }) {
   return (
     <div className="pointer-events-auto mt-auto flex h-[50vh] rounded-tl-[20px] rounded-tr-[20px] bg-white px-4 py-5 sm:mt-0 sm:h-screen sm:w-[50vw] sm:max-w-[750px] sm:min-w-[500px] sm:rounded-tl-none sm:rounded-br-[20px] sm:p-10">
-      <div className="scrollbar-hide flex flex-col gap-4 overflow-x-auto sm:gap-10 sm:overflow-hidden">
+      <div className="scrollbar-hide flex w-full flex-col gap-4 overflow-x-auto sm:gap-10 sm:overflow-hidden">
         <div className="flex flex-col gap-2 sm:gap-4">
           <h2 className="sm:text-title-large text-title-small text-[#1F2229]">
             새길이 오늘 기분에 딱 맞는
@@ -20,11 +23,16 @@ export default function RecommendationPanel({
           </p>
         </div>
         <div className="h-0.5 border border-[#EEEFF2]"></div>
-        <div className="scrollbar-overlay grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-5 sm:overflow-x-auto">
-          {spaceData.map((space, index) => (
-            <SpaceCard key={index} {...space} />
-          ))}
-        </div>
+
+        {isError ? (
+          <ErrorScreen />
+        ) : (
+          <div className="scrollbar-overlay grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-5 sm:overflow-x-auto">
+            {spaceData.map((space, index) => (
+              <SpaceCard key={index} {...space} />
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );

src/app/recommend/_components/MapView/SatisfactionModalContent/index.tsx

@@ -1,14 +1,17 @@
 import { useState } from "react";
+import { useRouter } from "next/navigation";
 import { UpdateRequest } from "@/lib/type";
 import { updateSatisfactionScore } from "@/lib/apis/survey";
 
 export function useSatisfactionSubmit(onClose: () => void) {
   const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<null | string>(null);
+  const [isError, setIsError] = useState(false);
+
+  const router = useRouter();
 
   const handleSubmit = async (satisfactions: number[]) => {
     setIsLoading(true);
-    setError(null);
+    setIsError(false);
 
     const clientId = localStorage.getItem("userId") || "";
 
@@ -20,13 +23,14 @@ export function useSatisfactionSubmit(onClose: () => void) {
     try {
       await updateSatisfactionScore(payload);
       onClose();
+      router.push("/submit-success");
     } catch (err) {
       console.error(err);
-      setError("만족도 정보를 전송하는 데 실패했어요.");
+      setIsError(true);
     } finally {
       setIsLoading(false);
     }
   };
 
-  return { handleSubmit, isLoading, error };
+  return { handleSubmit, isLoading, isError };
 }

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

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { useSatisfactionSubmit } from "./hooks/useSatisfactionSubmit";
+import SatisfactionForm from "./SatisfactionForm";
+import Button from "@/components/Button";
+import ErrorScreen from "@/components/ErrorScreen";
+
+export default function SatisfactionModalContent({
+  onClose,
+}: {
+  onClose: () => void;
+}) {
+  const [satisfactionScores, setSatisfactionScores] = useState([0, 0, 0]);
+
+  const { handleSubmit, isLoading, isError } = useSatisfactionSubmit(onClose);
+
+  return (
+    <div className="flex h-full flex-col gap-8 sm:gap-16">
+      <div className="flex shrink-0 flex-col gap-1 sm:gap-2.5">
+        <h1 className="text-title-small sm:text-heading-small text-[#1F2229]">
+          추천받는 과정은 어떠셨나요?
+        </h1>
+        <p className="text-body-small sm:text-body-medium text-[#79839A]">
+          작은 의견 하나가 더 나은 새길을 만드는 데 큰 힘이 돼요 :)
+        </p>
+      </div>
+      {isError ? (
+        <ErrorScreen />
+      ) : (
+        <>
+          <div className="flex flex-1 flex-col gap-10 overflow-y-auto sm:gap-12">
+            <SatisfactionForm
+              scores={satisfactionScores}
+              setScores={setSatisfactionScores}
+            />
+          </div>
+          <div className="flex shrink-0 justify-center gap-3">
+            <Button
+              color="gray"
+              onClick={onClose}
+              className="text-body-large h-[62px] w-full max-w-[150px] rounded-xl sm:w-[150px]"
+            >
+              다음에 하기
+            </Button>
+            <Button
+              color="blue"
+              onClick={() => handleSubmit(satisfactionScores)}
+              className="text-body-large h-[62px] w-full max-w-[150px] rounded-xl sm:w-[150px]"
+              disabled={isLoading || satisfactionScores.includes(0)}
+            >
+              보내기
+            </Button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}