Merge pull request #56 from dnd-side-project/feat/#55

feat: 퀴즈 결과 카드 컴포넌트 추가 및 스토리북 작성

src/components/shared/QuizResultCard/QuizResultCard.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import ExplanationInfo from '.'
+import QuizResultCard from '.'
+
+const meta: Meta<typeof ExplanationInfo> = {
+ title: 'components/Quiz/QuizResultCard',
+ component: ExplanationInfo,
+ tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof ExplanationInfo>
+
+export const Default: Story = {
+ render: () => (
+ <div className="flex flex-col gap-2">
+ <QuizResultCard
+ wordId={1}
+ isCorrect
+ isMarked
+ name={'아젠다(Agenda)'}
+ selectedOptionDescription="완수해야 하는 실무 내용을 사전에 정리해 둔 항목들"
+ answerOptionDescription="완수해야 하는 실무 내용을 사전에 정리해 둔 항목들"
+ />
+ <QuizResultCard
+ wordId={7}
+ isCorrect={false}
+ isMarked={false}
+ name={'목 데이터(Mock Data)'}
+ selectedOptionDescription="완수해야 하는 실무 내용을 사전에 정리해 둔 항목들"
+ answerOptionDescription="실제 데이터를 대신하여 개발이나 테스트에 사용하는 가상의 데이터"
+ />
+ </div>
+ ),
+}

src/components/shared/QuizResultCard/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import Image from 'next/image'
+import { ExplanationInfo } from '@/types/quizresult'
+import BookmarkButton from '../BookmarkButton'
+
+export default function QuizResultCard({
+ wordId,
+ isCorrect,
+ isMarked,
+ name,
+ selectedOptionDescription,
+ answerOptionDescription,
+}: ExplanationInfo) {
+ return (
+ <div className="px-3 py-6 w-full bg-gray-800 rounded-xl" key={name}>
+ <div className="mb-3 flex justify-between">
+ <div className="flex">
+ <Image
+ src={isCorrect ? '/icons/correct.svg' : '/icons/wrong.svg'}
+ alt={isCorrect ? 'correct.svg' : 'wrong.svg'}
+ width={20}
+ height={20}
+ />
+ <p className="ml-2 text-sub1 text-onSurface-300">
+ {name}
+ </p>
+ </div>
+ <BookmarkButton wordId={wordId} isMarked={isMarked} />
+ </div>
+ {!isCorrect && (
+ <p className="line-through text-onSurface-100 text-body3">
+ {selectedOptionDescription}
+ </p>
+ )}
+ <p className="break-keep text-body2 text-onSurface-200">
+ 정답 : &nbsp;{answerOptionDescription}
+ </p>
+ </div>
+ )
+}

src/types/quizresult.ts

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