From 926e93dfac98fc00da515372078ad13af9ad2568 Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Thu, 10 Jul 2025 10:08:39 +0900 Subject: [PATCH 1/8] =?UTF-8?q?design:=20=EC=B6=9C=EB=B0=9C=20=EB=B0=8F=20?= =?UTF-8?q?=EB=8F=84=EC=B0=A9=20=EB=A7=88=EC=BB=A4=EA=B0=80=20=ED=95=AD?= =?UTF-8?q?=EC=83=81=20=EC=B6=94=EC=B2=9C=20=EC=9E=A5=EC=86=8C=20=EB=A7=88?= =?UTF-8?q?=EC=BB=A4=EB=93=A4=20=EC=9C=84=EC=97=90=20=ED=91=9C=EC=8B=9C?= =?UTF-8?q?=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/recommend/_components/MapView/index.tsx | 2 ++ src/components/Modal/index.tsx | 3 +++ 2 files changed, 5 insertions(+) create mode 100644 src/components/Modal/index.tsx diff --git a/src/app/recommend/_components/MapView/index.tsx b/src/app/recommend/_components/MapView/index.tsx index b8d248f..8b2345f 100644 --- a/src/app/recommend/_components/MapView/index.tsx +++ b/src/app/recommend/_components/MapView/index.tsx @@ -50,6 +50,7 @@ export default function MapView({ {/* 시작 지점 마커 */} 모달; +} From 8dbb6e5b213b3d4b633acd93eff70f7cd4e2cc75 Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Thu, 10 Jul 2025 11:02:55 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=EC=84=9C=EB=B9=84=EC=8A=A4=20?= =?UTF-8?q?=EB=A7=8C=EC=A1=B1=EB=8F=84=20=EB=B2=84=ED=8A=BC=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C=20=EB=AA=A8=EB=8B=AC=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 6 ++- .../_components/SatisfactionModalButton.tsx | 8 +++- src/app/recommend/page.tsx | 43 +++++++++++-------- src/components/Modal/index.tsx | 28 +++++++++++- 4 files changed, 61 insertions(+), 24 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 2b06bf1..d41c4cc 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -12,8 +12,10 @@ export default function RootLayout({ }) { return ( - - {children} + + +
{children}
+ ); } diff --git a/src/app/recommend/_components/SatisfactionModalButton.tsx b/src/app/recommend/_components/SatisfactionModalButton.tsx index 23bc1f5..ddbd0a3 100644 --- a/src/app/recommend/_components/SatisfactionModalButton.tsx +++ b/src/app/recommend/_components/SatisfactionModalButton.tsx @@ -1,10 +1,14 @@ import Button from "@/components/Button"; -export default function SatisfactionModalButton() { +export default function SatisfactionModalButton({ + onOpen, +}: { + onOpen: () => void; +}) { return ( + ); +} diff --git a/src/app/recommend/_components/MapView/SatisfactionModalContent/SubmitButton.tsx b/src/app/recommend/_components/MapView/SatisfactionModalContent/SubmitButton.tsx new file mode 100644 index 0000000..7cdb1e2 --- /dev/null +++ b/src/app/recommend/_components/MapView/SatisfactionModalContent/SubmitButton.tsx @@ -0,0 +1,14 @@ +import Button from "@/components/Button"; + +export default function SubmitButton({ onClose }: { onClose: () => void }) { + return ( + + ); +} diff --git a/src/app/recommend/_components/MapView/SatisfactionModalContent/index.tsx b/src/app/recommend/_components/MapView/SatisfactionModalContent/index.tsx new file mode 100644 index 0000000..b6d3708 --- /dev/null +++ b/src/app/recommend/_components/MapView/SatisfactionModalContent/index.tsx @@ -0,0 +1,26 @@ +import CancelButton from "./CancelButton"; +import SubmitButton from "./SubmitButton"; + +export default function SatisfactionModalContent({ + onClose, +}: { + onClose: () => void; +}) { + return ( +
+
+

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

+

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

+
+
+
+ + +
+
+ ); +} diff --git a/src/app/recommend/page.tsx b/src/app/recommend/page.tsx index 06a9736..7ae6def 100644 --- a/src/app/recommend/page.tsx +++ b/src/app/recommend/page.tsx @@ -9,6 +9,7 @@ import RetrySurveyButton from "./_components/RetrySurveyButton"; import SatisfactionModalButton from "./_components/SatisfactionModalButton"; import TransitionScreen from "@/app/_components/TransitionScreen"; import Modal from "@/components/Modal"; +import SatisfactionModalContent from "./_components/MapView/SatisfactionModalContent"; export default function RecommendPage() { const [isOpen, setIsOpen] = useState(false); @@ -38,7 +39,7 @@ export default function RecommendPage() { setIsOpen(false)}> -
Modal Content
+ setIsOpen(false)} /> ); From 3843d53bfcb7ca01883e62de1f088fb7c30a009c Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Thu, 10 Jul 2025 13:25:34 +0900 Subject: [PATCH 4/8] =?UTF-8?q?design:=20=EB=AA=A8=EB=8B=AC=20=ED=8F=BC=20?= =?UTF-8?q?=EB=82=B4=EC=9A=A9=20=EB=B0=B0=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SatisfactionModalContent/CancelButton.tsx | 13 ---- .../SatisfactionForm.tsx | 39 ++++++++++++ .../SatisfactionModalContent/SubmitButton.tsx | 14 ----- .../hooks/useSatisfaction.ts | 60 +++++++++++++++++++ .../SatisfactionModalContent/index.tsx | 25 ++++++-- src/assets/icons/emoji_bad.svg | 2 +- src/assets/icons/emoji_excellent.svg | 2 +- src/assets/icons/emoji_good.svg | 2 +- src/assets/icons/emoji_neutral.svg | 2 +- src/assets/icons/emoji_poor.svg | 2 +- src/constants/satisfactionData.ts | 26 ++++++++ 11 files changed, 150 insertions(+), 37 deletions(-) delete mode 100644 src/app/recommend/_components/MapView/SatisfactionModalContent/CancelButton.tsx create mode 100644 src/app/recommend/_components/MapView/SatisfactionModalContent/SatisfactionForm.tsx delete mode 100644 src/app/recommend/_components/MapView/SatisfactionModalContent/SubmitButton.tsx create mode 100644 src/app/recommend/_components/MapView/SatisfactionModalContent/hooks/useSatisfaction.ts create mode 100644 src/constants/satisfactionData.ts diff --git a/src/app/recommend/_components/MapView/SatisfactionModalContent/CancelButton.tsx b/src/app/recommend/_components/MapView/SatisfactionModalContent/CancelButton.tsx deleted file mode 100644 index c8fdfe2..0000000 --- a/src/app/recommend/_components/MapView/SatisfactionModalContent/CancelButton.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import Button from "@/components/Button"; - -export default function CancelButton({ onClose }: { onClose: () => void }) { - return ( - - ); -} diff --git a/src/app/recommend/_components/MapView/SatisfactionModalContent/SatisfactionForm.tsx b/src/app/recommend/_components/MapView/SatisfactionModalContent/SatisfactionForm.tsx new file mode 100644 index 0000000..6380444 --- /dev/null +++ b/src/app/recommend/_components/MapView/SatisfactionModalContent/SatisfactionForm.tsx @@ -0,0 +1,39 @@ +import { satisfactionData } from "@/constants/satisfactionData"; +import BadEmoji from "@/assets/icons/emoji_bad.svg"; +import PoorEmoji from "@/assets/icons/emoji_poor.svg"; +import NeutralEmoji from "@/assets/icons/emoji_neutral.svg"; +import GoodEmoji from "@/assets/icons/emoji_good.svg"; +import ExcellentEmoji from "@/assets/icons/emoji_excellent.svg"; + +const emojis = [BadEmoji, PoorEmoji, NeutralEmoji, GoodEmoji, ExcellentEmoji]; + +export default function SatisfactionForm() { + return ( + <> + {satisfactionData.map((data, index) => ( +
+

+ {data.question} +

+
+ {data.scores.map((scoreText, index) => { + const Emoji = emojis[index]; + return ( + + ); + })} +
+
+ ))} + + ); +} diff --git a/src/app/recommend/_components/MapView/SatisfactionModalContent/SubmitButton.tsx b/src/app/recommend/_components/MapView/SatisfactionModalContent/SubmitButton.tsx deleted file mode 100644 index 7cdb1e2..0000000 --- a/src/app/recommend/_components/MapView/SatisfactionModalContent/SubmitButton.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import Button from "@/components/Button"; - -export default function SubmitButton({ onClose }: { onClose: () => void }) { - return ( - - ); -} diff --git a/src/app/recommend/_components/MapView/SatisfactionModalContent/hooks/useSatisfaction.ts b/src/app/recommend/_components/MapView/SatisfactionModalContent/hooks/useSatisfaction.ts new file mode 100644 index 0000000..9bfb13e --- /dev/null +++ b/src/app/recommend/_components/MapView/SatisfactionModalContent/hooks/useSatisfaction.ts @@ -0,0 +1,60 @@ +import { useState } from "react"; +import { useRouter } from "next/navigation"; +import { surveyData } from "@/constants/surveyData"; + +interface UseSurveyProps { + type: "onboarding" | "todayMood"; + routing?: (page: string) => void; +} + +export function useSurvey({ type, routing }: UseSurveyProps) { + const router = useRouter(); + + const questions = surveyData[type]; + const storageKey = `${type}Answers`; + + const [answers, setAnswers] = useState( + JSON.parse(localStorage.getItem(storageKey) ?? "[]") + ); + + const [currentQuestion, setCurrentQuestion] = useState(0); + + const progress = + ((questions.length - + answers.filter((element: string) => element === "").length) / + questions.length) * + 100; + + const handleAnswerClick = (answer: string) => { + const updatedAnswers = [...answers]; + updatedAnswers[currentQuestion] = answer; + localStorage.setItem(storageKey, JSON.stringify(updatedAnswers)); + setAnswers(updatedAnswers); + }; + + const handlePrevClick = () => { + setCurrentQuestion((prev) => prev - 1); + }; + + const handleNextClick = () => { + if (currentQuestion === questions.length - 1) { + if (routing) { + routing("ToMoodTransition"); + } else { + router.push("/recommend"); + } + } else { + setCurrentQuestion((prev) => prev + 1); + } + }; + + return { + questions, + answers, + progress, + currentQuestion, + handleAnswerClick, + handlePrevClick, + handleNextClick, + }; +} diff --git a/src/app/recommend/_components/MapView/SatisfactionModalContent/index.tsx b/src/app/recommend/_components/MapView/SatisfactionModalContent/index.tsx index b6d3708..4216ad3 100644 --- a/src/app/recommend/_components/MapView/SatisfactionModalContent/index.tsx +++ b/src/app/recommend/_components/MapView/SatisfactionModalContent/index.tsx @@ -1,5 +1,5 @@ -import CancelButton from "./CancelButton"; -import SubmitButton from "./SubmitButton"; +import Button from "@/components/Button"; +import SatisfactionForm from "./SatisfactionForm"; export default function SatisfactionModalContent({ onClose, @@ -16,10 +16,25 @@ export default function SatisfactionModalContent({ 작은 의견 하나가 더 나은 새길을 만드는 데 큰 힘이 돼요 :)

-
+
+ +
- - + +
); diff --git a/src/assets/icons/emoji_bad.svg b/src/assets/icons/emoji_bad.svg index c7033ba..f4d03d2 100644 --- a/src/assets/icons/emoji_bad.svg +++ b/src/assets/icons/emoji_bad.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/icons/emoji_excellent.svg b/src/assets/icons/emoji_excellent.svg index be06446..0119071 100644 --- a/src/assets/icons/emoji_excellent.svg +++ b/src/assets/icons/emoji_excellent.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/icons/emoji_good.svg b/src/assets/icons/emoji_good.svg index 359e7a1..a95fa5b 100644 --- a/src/assets/icons/emoji_good.svg +++ b/src/assets/icons/emoji_good.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/icons/emoji_neutral.svg b/src/assets/icons/emoji_neutral.svg index 5a30ebd..ce770f6 100644 --- a/src/assets/icons/emoji_neutral.svg +++ b/src/assets/icons/emoji_neutral.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/icons/emoji_poor.svg b/src/assets/icons/emoji_poor.svg index 868fb4c..bc17144 100644 --- a/src/assets/icons/emoji_poor.svg +++ b/src/assets/icons/emoji_poor.svg @@ -1,4 +1,4 @@ - + diff --git a/src/constants/satisfactionData.ts b/src/constants/satisfactionData.ts new file mode 100644 index 0000000..3016c0b --- /dev/null +++ b/src/constants/satisfactionData.ts @@ -0,0 +1,26 @@ +export const satisfactionData = [ + { + question: "Q1. 추천드린 장소는 도움이 됐나요?", + scores: ["아쉬워요", "그냥 그래요", "보통이에요", "좋아요", "최고에요"], + }, + { + question: "Q2. 놀 거리나 볼 거리가 충분했나요?", + scores: [ + "매우 부족해요", + "부족해요", + "보통이에요", + "충분해요", + "매우 충분해요", + ], + }, + { + question: "Q3. 지역에서의 생활에 매력을 느끼셨나요?", + scores: [ + "별로에요", + "그냥 그래요", + "보통이에요", + "조금 느꼈어요", + "많이 느꼈어요", + ], + }, +]; From f1de6deef15b4720190e9b67c73c807e2d50f95c Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Thu, 10 Jul 2025 14:27:59 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=EB=A7=8C=EC=A1=B1=EB=8F=84=20?= =?UTF-8?q?=EC=A1=B0=EC=82=AC=20=EC=9D=91=EB=8B=B5=20=EC=84=A0=ED=83=9D=20?= =?UTF-8?q?=EB=B0=8F=20=EC=83=81=ED=83=9C=20=EC=A0=80=EC=9E=A5=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SatisfactionForm.tsx | 48 +++++++++++++++---- .../SatisfactionModalContent/index.tsx | 8 +++- 2 files changed, 45 insertions(+), 11 deletions(-) diff --git a/src/app/recommend/_components/MapView/SatisfactionModalContent/SatisfactionForm.tsx b/src/app/recommend/_components/MapView/SatisfactionModalContent/SatisfactionForm.tsx index 6380444..c0d8e90 100644 --- a/src/app/recommend/_components/MapView/SatisfactionModalContent/SatisfactionForm.tsx +++ b/src/app/recommend/_components/MapView/SatisfactionModalContent/SatisfactionForm.tsx @@ -6,26 +6,54 @@ import GoodEmoji from "@/assets/icons/emoji_good.svg"; import ExcellentEmoji from "@/assets/icons/emoji_excellent.svg"; const emojis = [BadEmoji, PoorEmoji, NeutralEmoji, GoodEmoji, ExcellentEmoji]; +const selectedColor = ["#F84B5F", "#3C98A4", "#53B3C0", "#577DD1", "#3560C0"]; + +interface SatisfactionFormProps { + scores: number[]; + setScores: (scores: number[]) => void; +} + +export default function SatisfactionForm({ + scores, + setScores, +}: SatisfactionFormProps) { + const handleScoreChange = (questionIndex: number, score: number) => { + const updatedScores = [...scores]; + updatedScores[questionIndex] = score; + setScores(updatedScores); + }; -export default function SatisfactionForm() { return ( <> - {satisfactionData.map((data, index) => ( -
+ {satisfactionData.map((data, questionIndex) => ( +

{data.question}

- {data.scores.map((scoreText, index) => { - const Emoji = emojis[index]; + {data.scores.map((scoreText, scoreIndex) => { + const Emoji = emojis[scoreIndex]; + const isSelected = scores[questionIndex] === scoreIndex + 1; return ( diff --git a/src/app/recommend/_components/MapView/SatisfactionModalContent/index.tsx b/src/app/recommend/_components/MapView/SatisfactionModalContent/index.tsx index 4216ad3..0449fb1 100644 --- a/src/app/recommend/_components/MapView/SatisfactionModalContent/index.tsx +++ b/src/app/recommend/_components/MapView/SatisfactionModalContent/index.tsx @@ -1,11 +1,14 @@ import Button from "@/components/Button"; import SatisfactionForm from "./SatisfactionForm"; +import { useState } from "react"; export default function SatisfactionModalContent({ onClose, }: { onClose: () => void; }) { + const [satisfactionScores, setSatisfactionScores] = useState([0, 0, 0]); + return (
@@ -17,7 +20,10 @@ export default function SatisfactionModalContent({

- +