Merge pull request #76 from dnd-side-project/feat/#54

feat: 퀴즈 결과 페이지 추가

src/app/quiz/problem/[category]/[index]/page.tsx

@@ -5,7 +5,7 @@ import Image from 'next/image'
 import { usePathname, useRouter } from 'next/navigation'
 import CategoryTag from '@/components/shared/CategoryTag'
 import { quizData } from '@/components/domain/quiz/data'
-import { useQuizStore } from '@/lib/store'
+import { useQuizStore } from '@/store/useQuizStore'
 
 function Quiz() {
   const router = useRouter()
@@ -38,7 +38,7 @@ function Quiz() {
     if (problemIndex < quizData.problemInfo.length - 1) {
       setProblemIndex(problemIndex + 1)
       setCurrentProblem(currentProblem + 1)
-      setCurrentPercent(problemIndex);
+      setCurrentPercent(problemIndex)
       router.push(`/quiz/problem/${category}/${currentProblem + 1}`)
     } else {
       // 임시 alert지정
@@ -51,7 +51,7 @@ function Quiz() {
     if (problemIndex > 0) {
       setProblemIndex(problemIndex - 1)
       setCurrentProblem(currentProblem - 1)
-      setCurrentPercent(problemIndex);
+      setCurrentPercent(problemIndex)
       removeAnswer()
       const category = pathname.split('/').at(-2)
       router.push(`/quiz/problem/${category}/${currentProblem - 1}`)

src/app/quiz/result/layout.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Header } from '@/components/domain/quiz/result'
+
+type LayoutProps = {
+  children: React.ReactNode
+}
+export default function QuizResultLayout({ children }: LayoutProps) {
+  return (
+    <div className="pb-4 h-full">
+      <Header />
+      <div className="h-[calc(100%-80px)]">{children}</div>
+    </div>
+  )
+}

src/app/quiz/result/page.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import React from 'react'
+import Image from 'next/image'
+import { QuizResultCard } from '@/components/domain/quiz/result'
+import { quizCardResultData } from '@/constants/resultData'
+import { getQuizResult } from '@/utils/getQuizResult'
+
+function QuizResult() {
+  const correctCount = quizCardResultData.correctCount
+  const { imageSrc, altText, resultText } = getQuizResult(correctCount)
+
+  return (
+    <div className="px-4 flex flex-col items-center justify-between h-full">
+      <Image src={imageSrc} alt={altText} width={180} height={180} />
+      <p className="text-body1 text-onSurface-300">{resultText}</p>
+      <div className="flex text-h1">
+        <p className="text-primary-400">{quizCardResultData.correctCount}</p>
+        <p className="text-onSurface-300">개 정답!</p>
+      </div>
+      {quizCardResultData.explanationInfo.map((card, index) => {
+        return (
+          <QuizResultCard
+            key={index}
+            wordId={card.wordId}
+            isCorrect={card.isCorrect}
+            isMarked={card.isMarked}
+            name={card.name}
+            selectedOptionDescription={card.selectedOptionDescription}
+            answerOptionDescription={card.answerOptionDescription}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+export default QuizResult

src/components/shared/QuizResultCard/QuizResultCard.stories.tsx → src/components/domain/quiz/result/QuizResultCard/QuizResultCard.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import ExplanationInfo from '.'
-import QuizResultCard from '.'
+import ExplanationInfo from './QuizResultCard'
+import QuizResultCard from './QuizResultCard'
 
 const meta: Meta<typeof ExplanationInfo> = {
   title: 'components/Quiz/QuizResultCard',
@@ -19,7 +19,7 @@ export const Default: Story = {
         wordId={1}
         isCorrect
         isMarked
-        name={'아젠다(Agenda)'}
+        name="아젠다(Agenda)"
         selectedOptionDescription="완수해야 하는 실무 내용을 사전에 정리해 둔 항목들"
         answerOptionDescription="완수해야 하는 실무 내용을 사전에 정리해 둔 항목들"
       />

src/components/shared/QuizResultCard/index.tsx → src/components/domain/quiz/result/QuizResultCard/QuizResultCard.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import Image from 'next/image'
 import { ExplanationInfo } from '@/types/quizresult'
-import BookmarkButton from '../BookmarkButton'
+import BookmarkButton from '@/components/shared/BookmarkButton'
 
-export default function QuizResultCard({
+function QuizResultCard({
   wordId,
   isCorrect,
   isMarked,
@@ -12,7 +12,7 @@ export default function QuizResultCard({
   answerOptionDescription,
 }: ExplanationInfo) {
   return (
-    <div className="px-3 py-6 w-full bg-gray-800 rounded-xl" key={name}>
+    <div className="mt-3 px-3 py-6 w-full bg-gray-800 rounded-xl" key={name}>
       <div className="mb-3 flex justify-between">
         <div className="flex">
           <Image
@@ -21,9 +21,7 @@ export default function QuizResultCard({
             width={20}
             height={20}
           />
-          <p className="ml-2 text-sub1 text-onSurface-300">
-            {name}
-          </p>
+          <p className="ml-2 text-sub1 text-onSurface-300">{name}</p>
         </div>
         <BookmarkButton wordId={wordId} isMarked={isMarked} />
       </div>
@@ -38,3 +36,5 @@ export default function QuizResultCard({
     </div>
   )
 }
+
+export default QuizResultCard

src/components/domain/quiz/result/QuizResultCard/index.ts

@@ -0,0 +1 @@
+export { default as QuizResultCard } from './QuizResultCard'

src/components/domain/quiz/result/header/Header.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import React from 'react'
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+
+function Header() {
+  const router = useRouter()
+
+  return (
+    <div className="px-4 flex flex-shrink-0 h-20">
+      <Image
+        src={'/icons/cross.svg'}
+        alt="cross.svg"
+        onClick={() => router.push('/home/dictionary')}
+        className="cursor-pointer"
+        width={24}
+        height={24}
+      />
+      <p className="m-auto text-sub1 text-onSurface-300">퀴즈결과</p>
+    </div>
+  )
+}
+
+export default Header

src/components/domain/quiz/result/header/index.ts

@@ -0,0 +1 @@
+export { default as Header } from './Header'

src/components/domain/quiz/result/index.ts

@@ -0,0 +1,2 @@
+export * from './header'
+export * from './QuizResultCard'

src/constants/resultData.ts

@@ -0,0 +1,91 @@
+import { ExplanationInfo, QuizResult } from '@/types/quizresult'
+
+export interface ResultData {
+  id: number
+  result: string
+  img: string
+  altText: string
+}
+
+export const resultData: ResultData[] = [
+  {
+    id: 0,
+    result: '아직은 외계어 같은 용어들 👽',
+    img: '/images/quiz_result_00.svg',
+    altText: 'quiz_result_00.svg',
+  },
+  {
+    id: 1,
+    result: '업무 소통계의 떠오르는 샛별 ✨',
+    img: '/images/quiz_result_01.svg',
+    altText: 'quiz_result_01.svg',
+  },
+  {
+    id: 2,
+    result: '업무 소통 역량 로켓 상승 중 🚀',
+    img: '/images/quiz_result_02.svg',
+    altText: 'quiz_result_02.svg',
+  },
+  {
+    id: 3,
+    result: '혜성처럼 나타난 업무 소통 능력자 ☄️',
+    img: '/images/quiz_result_03.svg',
+    altText: 'quiz_result_03.svg',
+  },
+]
+
+export const quizCardResultData: QuizResult = {
+  id: 1,
+  correctCount: 5,
+  explanationInfo: [
+    {
+      wordId: 1,
+      isCorrect: true,
+      isMarked: true,
+      name: '아젠다(Agenda)',
+      selectedOptionDescription:
+        '완수해야 하는 실무 내용을 사전에 정리해 둔 항목들',
+      answerOptionDescription:
+        '완수해야 하는 실무 내용을 사전에 정리해 둔 항목들',
+    },
+    {
+      wordId: 7,
+      isCorrect: true,
+      isMarked: true,
+      name: '목 데이터(Mock Data)',
+      selectedOptionDescription:
+        '실제 데이터를 대신하여 개발이나 테스트에 사용하는 가상의 데이터',
+      answerOptionDescription:
+        '실제 데이터를 대신하여 개발이나 테스트에 사용하는 가상의 데이터',
+    },
+    {
+      wordId: 10,
+      isCorrect: true,
+      isMarked: true,
+      name: '스크럼(Scrum)',
+      selectedOptionDescription:
+        '애자일 방법론 중 하나로, 일정 기간 동안 작은 단위의 작업을 반복하여 진행',
+      answerOptionDescription:
+        '애자일 방법론 중 하나로, 일정 기간 동안 작은 단위의 작업을 반복하여 진행',
+    },
+    {
+      wordId: 13,
+      isCorrect: true,
+      isMarked: true,
+      name: '넛지(Nudge)',
+      selectedOptionDescription:
+        '사용자의 행동을 유도, 관찰된 동작에 대한 간접적인 힌트 제공으로 사용자 경험을 개선하는 개념',
+      answerOptionDescription:
+        '사용자의 행동을 유도, 관찰된 동작에 대한 간접적인 힌트 제공으로 사용자 경험을 개선하는 개념',
+    },
+    {
+      wordId: 18,
+      isCorrect: true,
+      isMarked: true,
+      name: '가시화(Visualization)',
+      selectedOptionDescription:
+        '데이터나 정보를 그래프 등의 시각적 형태로 표현',
+      answerOptionDescription: '데이터나 정보를 그래프 등의 시각적 형태로 표현',
+    },
+  ],
+}

src/types/quizresult.ts

@@ -1,14 +1,14 @@
-export interface ExplantionInfoType {
+export interface ExplanationInfo {
   wordId: number
   isCorrect: boolean
   isMarked: boolean
-  name: 'string'
-  selectedOptionDescription: 'string'
-  answerOptionDescription: 'string'
+  name: string
+  selectedOptionDescription: string
+  answerOptionDescription: string
 }
 
-export interface QuizResultType {
+export interface QuizResult {
   id: number
   correctCount: number
-  explanationInfo: ExplantionInfoType[]
+  explanationInfo: ExplanationInfo[]
 }

src/utils/getQuizResult.ts

@@ -0,0 +1,34 @@
+// 파일 경로: src/utils/getQuizResult.js
+
+import { resultData } from '@/constants/resultData'
+
+export function getQuizResult(correctCount: number) {
+  let imageSrc, altText, resultText
+
+  switch (correctCount) {
+    case 1:
+    case 2:
+      imageSrc = resultData[1].img!
+      altText = resultData[1].altText!
+      resultText = resultData[1].result
+      break
+    case 3:
+    case 4:
+      imageSrc = resultData[2].img!
+      altText = resultData[2].altText!
+      resultText = resultData[2].result
+      break
+    case 5:
+      imageSrc = resultData[3].img!
+      altText = resultData[3].altText!
+      resultText = resultData[3].result
+      break
+    default:
+      imageSrc = resultData[0].img!
+      altText = resultData[0].altText!
+      resultText = resultData[0].result
+      break
+  }
+
+  return { imageSrc, altText, resultText }
+}