diff --git a/next.config.mjs b/next.config.mjs index abc270f..585928c 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,5 +1,7 @@ /** @type {import('next').NextConfig} */ const nextConfig = { + reactStrictMode: false, + experimental: { turbo: { rules: { 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/MapView/SatisfactionModalContent/SatisfactionForm.tsx b/src/app/recommend/_components/MapView/SatisfactionModalContent/SatisfactionForm.tsx new file mode 100644 index 0000000..c0d8e90 --- /dev/null +++ b/src/app/recommend/_components/MapView/SatisfactionModalContent/SatisfactionForm.tsx @@ -0,0 +1,67 @@ +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]; +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); + }; + + return ( + <> + {satisfactionData.map((data, questionIndex) => ( +
+

+ {data.question} +

+
+ {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/hooks/useSatisfactionSubmit.ts b/src/app/recommend/_components/MapView/SatisfactionModalContent/hooks/useSatisfactionSubmit.ts new file mode 100644 index 0000000..0a0a21e --- /dev/null +++ b/src/app/recommend/_components/MapView/SatisfactionModalContent/hooks/useSatisfactionSubmit.ts @@ -0,0 +1,32 @@ +import { useState } from "react"; +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 handleSubmit = async (satisfactions: number[]) => { + setIsLoading(true); + setError(null); + + const clientId = localStorage.getItem("userId") || ""; + + const payload: UpdateRequest = { + clientId, + satisfactions, + }; + + try { + await updateSatisfactionScore(payload); + onClose(); + } catch (err) { + console.error(err); + setError("만족도 정보를 전송하는 데 실패했어요."); + } finally { + setIsLoading(false); + } + }; + + return { handleSubmit, isLoading, error }; +} 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..7b00f08 --- /dev/null +++ b/src/app/recommend/_components/MapView/SatisfactionModalContent/index.tsx @@ -0,0 +1,56 @@ +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/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({ {/* 시작 지점 마커 */} void; +}) { return (