diff --git a/src/app/map/PopupTestPage/PopupTestPage.jsx b/src/app/map/PopupTestPage/PopupTestPage.jsx deleted file mode 100644 index 5182d8e..0000000 --- a/src/app/map/PopupTestPage/PopupTestPage.jsx +++ /dev/null @@ -1,99 +0,0 @@ -"use client"; - -import { useState } from "react"; -import axios from "axios"; - -const scores = [ - { score: 5, text: ["최고에요", "매우 충분해요", "많이 느꼈어요"] }, - { score: 4, text: ["좋아요", "충분해요", "조금 느꼈어요"] }, - { score: 3, text: ["보통이에요", "보통이에요", "보통이에요"] }, - { score: 2, text: ["그냥 그래요", "부족해요", "그냥 그래요"] }, - { score: 1, text: ["아쉬워요", "매우 부족해요", "별로에요"] }, -]; - -export default function PopupTestPage({ routing }) { - const [satisfactions, setSatisfactions] = useState([0, 0, 0]); - - const handleScoreClick = (index, score) => { - const nextScore = satisfactions.map((satisfaction, i) => - i === index ? score : satisfaction - ); - setSatisfactions(nextScore); - }; - - const handleSubmitClick = async () => { - const userId = localStorage.getItem("userId") || ""; - - const payload = { - clientId: userId, - satisfactions: satisfactions, - }; - - if (true) { - try { - const response = await axios.patch( - "https://saegil.store/api/survey/update", - payload - ); - routing("ToRecommendTransition"); - } catch (error) { - console.error("만족도 API 호출 실패:", error); - } - } - }; - - return ( -
- -
-
-

Q1. 추천드린 장소는 도움이 됐나요?

-
- {scores.map((score, index) => ( - - ))} -
-
-
-

Q2. 놀 거리나 볼 거리가 충분했나요?

-
- {scores.map((score, index) => ( - - ))} -
-
-
-

Q3. 지역에서의 생활에 매력을 느끼셨나요?

-
- {scores.map((score, index) => ( - - ))} -
-
-
-
- ); -} diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx deleted file mode 100644 index b9bf28a..0000000 --- a/src/app/map/page.tsx +++ /dev/null @@ -1,14 +0,0 @@ -"use client"; - -import Bad from "@/assets/icons/emoji_bad.svg"; -import Image from "next/image"; - -export default function MapPage() { - return ( -
-
테스트 페이지
- - -
- ); -} diff --git a/src/app/recommend/_components/MapView/SatisfactionModalContent/index.tsx b/src/app/recommend/_components/MapView/SatisfactionModalContent/index.tsx deleted file mode 100644 index 7b00f08..0000000 --- a/src/app/recommend/_components/MapView/SatisfactionModalContent/index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { useState } from "react"; -import { useSatisfactionSubmit } from "./hooks/useSatisfactionSubmit"; -import SatisfactionForm from "./SatisfactionForm"; -import Button from "@/components/Button"; - -export default function SatisfactionModalContent({ - onClose, -}: { - onClose: () => void; -}) { - const [satisfactionScores, setSatisfactionScores] = useState([0, 0, 0]); - - const { handleSubmit, isLoading, error } = useSatisfactionSubmit(() => { - setSatisfactionScores([0, 0, 0]); - onClose(); - }); - - if (isLoading) return
Loading
; // 로딩 페이지 시안 완성되면 변경 - if (error) return
{error}
; // 에러 페이지 시안 완성되면 변경 - - return ( -
-
-

- 추천받는 과정은 어떠셨나요? -

-

- 작은 의견 하나가 더 나은 새길을 만드는 데 큰 힘이 돼요 :) -

-
-
- -
-
- - -
-
- ); -} diff --git a/src/app/recommend/_components/RecommendationPanel/SpaceCard.tsx b/src/app/recommend/_components/RecommendationPanel/SpaceCard.tsx index a7b17bf..8dc5127 100644 --- a/src/app/recommend/_components/RecommendationPanel/SpaceCard.tsx +++ b/src/app/recommend/_components/RecommendationPanel/SpaceCard.tsx @@ -10,11 +10,16 @@ export default function SpaceCard({ position, category, image, - // url, + url, }: RecommendationResponse) { const city = getCity(position); return ( -
+
- + ); } diff --git a/src/app/recommend/_components/RecommendationPanel/index.tsx b/src/app/recommend/_components/RecommendationPanel/index.tsx index ff64c1f..cb47ad3 100644 --- a/src/app/recommend/_components/RecommendationPanel/index.tsx +++ b/src/app/recommend/_components/RecommendationPanel/index.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 (
-
+

새길이 오늘 기분에 딱 맞는 @@ -20,11 +23,16 @@ export default function RecommendationPanel({

-
- {spaceData.map((space, index) => ( - - ))} -
+ + {isError ? ( + + ) : ( +
+ {spaceData.map((space, index) => ( + + ))} +
+ )}
); diff --git a/src/app/recommend/_components/RetrySurveyButton.tsx b/src/app/recommend/_components/RetrySurveyButton.tsx deleted file mode 100644 index d92dae7..0000000 --- a/src/app/recommend/_components/RetrySurveyButton.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { useRouter } from "next/navigation"; -import Button from "@/components/Button"; - -export default function RetrySurveyButton() { - const router = useRouter(); - - const handleBackToSurvey = () => { - localStorage.clear(); - router.push("/"); - }; - - return ( - - ); -} diff --git a/src/app/recommend/_components/SatisfactionModalButton.tsx b/src/app/recommend/_components/SatisfactionModalButton.tsx deleted file mode 100644 index ddbd0a3..0000000 --- a/src/app/recommend/_components/SatisfactionModalButton.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import Button from "@/components/Button"; - -export default function SatisfactionModalButton({ - onOpen, -}: { - onOpen: () => void; -}) { - return ( - - ); -} diff --git a/src/app/recommend/_components/MapView/SatisfactionModalContent/SatisfactionForm.tsx b/src/app/recommend/_components/SatisfactionModalContent/SatisfactionForm.tsx similarity index 100% rename from src/app/recommend/_components/MapView/SatisfactionModalContent/SatisfactionForm.tsx rename to src/app/recommend/_components/SatisfactionModalContent/SatisfactionForm.tsx diff --git a/src/app/recommend/_components/MapView/SatisfactionModalContent/hooks/useSatisfactionSubmit.ts b/src/app/recommend/_components/SatisfactionModalContent/hooks/useSatisfactionSubmit.ts similarity index 71% rename from src/app/recommend/_components/MapView/SatisfactionModalContent/hooks/useSatisfactionSubmit.ts rename to src/app/recommend/_components/SatisfactionModalContent/hooks/useSatisfactionSubmit.ts index 0a0a21e..45bc48f 100644 --- a/src/app/recommend/_components/MapView/SatisfactionModalContent/hooks/useSatisfactionSubmit.ts +++ b/src/app/recommend/_components/SatisfactionModalContent/hooks/useSatisfactionSubmit.ts @@ -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); + 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 }; } diff --git a/src/app/recommend/_components/SatisfactionModalContent/index.tsx b/src/app/recommend/_components/SatisfactionModalContent/index.tsx new file mode 100644 index 0000000..2eda6d0 --- /dev/null +++ b/src/app/recommend/_components/SatisfactionModalContent/index.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 ( +
+
+

+ 추천받는 과정은 어떠셨나요? +

+

+ 작은 의견 하나가 더 나은 새길을 만드는 데 큰 힘이 돼요 :) +

+
+ {isError ? ( + + ) : ( + <> +
+ +
+
+ + +
+ + )} +
+ ); +} diff --git a/src/app/recommend/_hooks/useSurveyRecommendation.ts b/src/app/recommend/_hooks/useSurveyRecommendation.ts index d9e68a6..e477342 100644 --- a/src/app/recommend/_hooks/useSurveyRecommendation.ts +++ b/src/app/recommend/_hooks/useSurveyRecommendation.ts @@ -5,11 +5,11 @@ import { RecommendationRequest, RecommendationResponse } from "@/lib/type"; export function useSurveyRecommendation() { const [spaceData, setSpaceData] = useState([]); const [isLoading, setIsLoading] = useState(true); - const [error, setError] = useState(null); + const [isError, setIsError] = useState(false); const fetchData = async () => { setIsLoading(true); - setError(null); + setIsError(false); const clientId = localStorage.getItem("userId") || ""; const onboarding = JSON.parse( @@ -31,7 +31,7 @@ export function useSurveyRecommendation() { setSpaceData(res); } catch (err) { console.error(err); - setError("추천 정보를 불러오는 데 실패했어요."); + setIsError(true); } finally { setIsLoading(false); } @@ -41,5 +41,5 @@ export function useSurveyRecommendation() { fetchData(); }, []); - return { spaceData, isLoading, error }; + return { spaceData, isLoading, isError }; } diff --git a/src/app/recommend/page.tsx b/src/app/recommend/page.tsx index 7ae6def..405d847 100644 --- a/src/app/recommend/page.tsx +++ b/src/app/recommend/page.tsx @@ -5,19 +5,17 @@ import { useSurveyRecommendation } from "./_hooks/useSurveyRecommendation"; import NavBar from "./_components/NavBar"; import RecommendationPanel from "./_components/RecommendationPanel"; import MapView from "./_components/MapView"; -import RetrySurveyButton from "./_components/RetrySurveyButton"; -import SatisfactionModalButton from "./_components/SatisfactionModalButton"; -import TransitionScreen from "@/app/_components/TransitionScreen"; +import Button from "@/components/Button"; import Modal from "@/components/Modal"; -import SatisfactionModalContent from "./_components/MapView/SatisfactionModalContent"; +import SatisfactionModalContent from "./_components/SatisfactionModalContent"; +import TransitionScreen from "@/app/_components/TransitionScreen"; export default function RecommendPage() { const [isOpen, setIsOpen] = useState(false); - const { spaceData, isLoading, error } = useSurveyRecommendation(); + const { spaceData, isLoading, isError } = useSurveyRecommendation(); if (isLoading) return ; - if (error) return
{error}
; // 에러 페이지 시안 완성되면 변경 return ( <> @@ -30,11 +28,16 @@ export default function RecommendPage() {
- +
- - setIsOpen(true)} /> +
diff --git a/src/app/submit-success/page.tsx b/src/app/submit-success/page.tsx new file mode 100644 index 0000000..8efde51 --- /dev/null +++ b/src/app/submit-success/page.tsx @@ -0,0 +1,30 @@ +"use client"; + +import { useRouter } from "next/navigation"; +import Link from "next/link"; +import Button from "@/components/Button"; + +export default function SubmitSuccessPage() { + const router = useRouter(); + + const handleRetrySurvey = () => { + localStorage.clear(); + router.push("/"); + }; + + return ( +
+

설문에 응해주셔서 감사합니다

+ + 서비스를 평가하고 아메리카노를 받아가세요! + + +
+ ); +} diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 2728db7..065d598 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -4,7 +4,7 @@ import { ReactNode } from "react"; import clsx from "clsx"; interface ButtonProps { - color: "blue" | "gray" | "white"; + color: "blue" | "gray"; onClick?: () => void; className?: string; disabled?: boolean; @@ -24,7 +24,6 @@ export default function Button({ className, color === "blue" && "bg-[#3560C0] text-[#F7F9FD]", color === "gray" && "bg-[#EEEFF2] text-[#79839A]", - color === "white" && "bg-white text-[#79839A]", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer" )} onClick={onClick} diff --git a/src/components/ErrorScreen/index.tsx b/src/components/ErrorScreen/index.tsx new file mode 100644 index 0000000..7c57333 --- /dev/null +++ b/src/components/ErrorScreen/index.tsx @@ -0,0 +1,17 @@ +import BadEmoji from "@/assets/icons/emoji_poor.svg"; + +export default function ErrorScreen() { + return ( +
+ +
+

+ 앗, 문제가 생겼어요! +

+

+ 다시 한 번 시도해주세요 +

+
+
+ ); +}