From 178ed53b5127f9689d01134395902a1f47a46c7f Mon Sep 17 00:00:00 2001 From: "nageuna922@gmail.com" Date: Wed, 27 Nov 2024 22:03:12 +0900 Subject: [PATCH] fix: type --- .../multiple-option/index.stories.ts | 8 ++--- .../quiz/components/multiple-option/index.tsx | 30 +++++++++---------- .../components/ox-choice/index.stories.ts | 14 ++++----- .../quiz/components/ox-choice/index.tsx | 20 ++++++------- .../components/quiz-card/index.stories.tsx | 2 +- .../quiz/components/quiz-card/index.tsx | 6 ++-- .../quiz-explanation-drawer/index.stories.tsx | 14 ++++----- .../quiz-explanation-drawer/index.tsx | 20 ++++++------- .../quiz/components/result-icon/index.tsx | 12 ++++---- .../quiz-view/components/quiz-option.tsx | 10 +++---- src/features/quiz/screen/quiz-view/index.tsx | 12 ++++---- src/features/quiz/utils/index.ts | 20 ++++++------- src/types/quiz.d.ts | 9 ++++-- 13 files changed, 91 insertions(+), 86 deletions(-) diff --git a/src/features/quiz/components/multiple-option/index.stories.ts b/src/features/quiz/components/multiple-option/index.stories.ts index 74430523..9d95fae4 100644 --- a/src/features/quiz/components/multiple-option/index.stories.ts +++ b/src/features/quiz/components/multiple-option/index.stories.ts @@ -30,7 +30,7 @@ type Story = StoryObj export const Default: Story = { args: { - condition: 'idle', + condition: 'IDLE', index: 0, option: quiz.options[0], }, @@ -38,7 +38,7 @@ export const Default: Story = { export const Disabled: Story = { args: { - condition: 'disabled', + condition: 'DISABLED', index: 1, option: quiz.options[1], }, @@ -46,7 +46,7 @@ export const Disabled: Story = { export const Wrong: Story = { args: { - condition: 'wrong', + condition: 'WRONG', index: 2, option: quiz.options[2], }, @@ -54,7 +54,7 @@ export const Wrong: Story = { export const Correct: Story = { args: { - condition: 'correct', + condition: 'RIGHT', index: 3, option: quiz.options[3], }, diff --git a/src/features/quiz/components/multiple-option/index.tsx b/src/features/quiz/components/multiple-option/index.tsx index 982324c4..93349534 100644 --- a/src/features/quiz/components/multiple-option/index.tsx +++ b/src/features/quiz/components/multiple-option/index.tsx @@ -5,14 +5,14 @@ import { ButtonHTMLAttributes } from 'react' interface MultipleOptionProps extends ButtonHTMLAttributes { option: string - condition: 'idle' | 'disabled' | 'correct' | 'wrong' + condition: QuizCondition index: number } const MultipleOption = ({ option, index, - condition = 'idle', + condition = 'IDLE', onClick, disabled, }: MultipleOptionProps) => { @@ -22,31 +22,31 @@ const MultipleOption = ({ disabled={disabled} className={cn( 'flex w-full gap-[16px] px-[15px] py-[12px] rounded-[16px] items-center border transition-all', - condition === 'idle' && 'bg-background-base-01 border-border-default', - condition === 'disabled' && 'bg-background-disabled', - condition === 'wrong' && 'bg-background-disabled', - condition === 'correct' && 'bg-green-200 border-border-right' + condition === 'IDLE' && 'bg-background-base-01 border-border-default', + condition === 'DISABLED' && 'bg-background-disabled', + condition === 'WRONG' && 'bg-background-disabled', + condition === 'RIGHT' && 'bg-green-200 border-border-right' )} >
- {(condition === 'idle' || condition === 'disabled') && ORDER_ICONS[index]} - {condition === 'correct' && } - {condition === 'wrong' && } + {(condition === 'IDLE' || condition === 'DISABLED') && ORDER_ICONS[index]} + {condition === 'RIGHT' && } + {condition === 'WRONG' && }
{option} diff --git a/src/features/quiz/components/ox-choice/index.stories.ts b/src/features/quiz/components/ox-choice/index.stories.ts index 580eec8c..f2411b0e 100644 --- a/src/features/quiz/components/ox-choice/index.stories.ts +++ b/src/features/quiz/components/ox-choice/index.stories.ts @@ -20,14 +20,14 @@ type Story = StoryObj // 초기 상태 (선택하지 않은 상태) export const Idle: Story = { args: { - condition: 'idle', + condition: 'IDLE', }, } // 정답이 O이고 O를 선택한 경우 (정답) export const CorrectO: Story = { args: { - condition: 'correct', + condition: 'RIGHT', userAnswer: 'correct', }, } @@ -35,23 +35,23 @@ export const CorrectO: Story = { // 정답이 X이고 X를 선택한 경우 (정답) export const CorrectX: Story = { args: { - condition: 'correct', - userAnswer: 'wrong', + condition: 'RIGHT', + userAnswer: 'incorrect', }, } // 정답이 O인데 X를 선택한 경우 (오답) export const WrongSelectedX: Story = { args: { - condition: 'wrong', - userAnswer: 'wrong', // X를 선택했지만 O가 정답 + condition: 'WRONG', + userAnswer: 'incorrect', // X를 선택했지만 O가 정답 }, } // 정답이 X인데 O를 선택한 경우 (오답) export const WrongSelectedO: Story = { args: { - condition: 'wrong', + condition: 'WRONG', userAnswer: 'correct', // O를 선택했지만 X가 정답 }, } diff --git a/src/features/quiz/components/ox-choice/index.tsx b/src/features/quiz/components/ox-choice/index.tsx index fcd074a5..66915059 100644 --- a/src/features/quiz/components/ox-choice/index.tsx +++ b/src/features/quiz/components/ox-choice/index.tsx @@ -3,32 +3,32 @@ import { SVGProps } from 'react' interface OXChoiceProps { - condition: 'idle' | 'correct' | 'wrong' - userAnswer?: 'correct' | 'wrong' - onSelect: (userAnswer: 'correct' | 'wrong') => void + condition: Exclude + userAnswer?: OXQuizAnswer + onSelect: (userAnswer: OXQuizAnswer) => void } const OXChoice = ({ condition, userAnswer, onSelect }: OXChoiceProps) => { - const disabled = condition === 'correct' || condition === 'wrong' + const disabled = condition === 'RIGHT' || condition === 'WRONG' - const getIconColors = (type: 'correct' | 'wrong') => { + const getIconColors = (type: OXQuizAnswer) => { const defaultColors = { bg: type === 'correct' ? '#4D7BF9' : '#FB8320', // 기본 배경색 fill: 'white', // 기본 채우기색 } - if (condition === 'idle') { + if (condition === 'IDLE') { return defaultColors } - if (condition === 'correct') { + if (condition === 'RIGHT') { return { bg: type === userAnswer ? '#e6f7e3' : '#ebeff3', fill: type === userAnswer ? '#3acc83' : 'white', } } - if (condition === 'wrong') { + if (condition === 'WRONG') { return { bg: type !== userAnswer ? '#e6f7e3' : '#ebeff3', fill: type !== userAnswer ? '#3acc83' : '#f4502c', @@ -53,10 +53,10 @@ const OXChoice = ({ condition, userAnswer, onSelect }: OXChoiceProps) => { className="flex-1" disabled={disabled} onClick={() => { - onSelect('wrong') + onSelect('incorrect') }} > - + ) diff --git a/src/features/quiz/components/quiz-card/index.stories.tsx b/src/features/quiz/components/quiz-card/index.stories.tsx index 8be6a6d1..bbde2d9a 100644 --- a/src/features/quiz/components/quiz-card/index.stories.tsx +++ b/src/features/quiz/components/quiz-card/index.stories.tsx @@ -128,7 +128,7 @@ export const OXWrongUserAnswer: Story = { ...Template.args, quiz: oxQuiz, showAnswer: true, - userAnswer: 'wrong', + userAnswer: 'incorrect', }, } diff --git a/src/features/quiz/components/quiz-card/index.tsx b/src/features/quiz/components/quiz-card/index.tsx index c9b4ee04..fabdf1f1 100644 --- a/src/features/quiz/components/quiz-card/index.tsx +++ b/src/features/quiz/components/quiz-card/index.tsx @@ -50,7 +50,7 @@ const QuizCard = ({ return (
- {(['correct', 'wrong'] as const).map((value) => ( + {(['correct', 'incorrect'] as const).map((value) => ( {value === 'correct' && 'O'} - {value === 'wrong' && 'X'} + {value === 'incorrect' && 'X'} ) } diff --git a/src/features/quiz/components/quiz-explanation-drawer/index.stories.tsx b/src/features/quiz/components/quiz-explanation-drawer/index.stories.tsx index bcf23c70..b491f816 100644 --- a/src/features/quiz/components/quiz-explanation-drawer/index.stories.tsx +++ b/src/features/quiz/components/quiz-explanation-drawer/index.stories.tsx @@ -9,7 +9,7 @@ const meta = { layout: 'centered', }, argTypes: { - isCorrect: { + isRight: { control: 'boolean', description: '정답 여부', defaultValue: true, @@ -18,10 +18,10 @@ const meta = { control: 'text', description: '설명 텍스트', }, - correctAnswer: { + rightAnswer: { control: 'text', description: '정답 텍스트 (오답일 경우 표시)', - if: { arg: 'isCorrect', eq: false }, + if: { arg: 'isRight', eq: false }, }, }, decorators: [ @@ -47,18 +47,18 @@ const SAMPLE_EXPLANATION = `윌리엄 홀만 교수가 제시한 신식품 명 export const Correct: Story = { args: { - isCorrect: true, + isRight: true, explanation: SAMPLE_EXPLANATION, onClickNext: () => {}, - correctAnswer: '', + rightAnswer: '', }, } export const Wrong: Story = { args: { - isCorrect: false, + isRight: false, explanation: SAMPLE_EXPLANATION, onClickNext: () => {}, - correctAnswer: 'A', + rightAnswer: 'A', }, } diff --git a/src/features/quiz/components/quiz-explanation-drawer/index.tsx b/src/features/quiz/components/quiz-explanation-drawer/index.tsx index 70922f0a..d477193a 100644 --- a/src/features/quiz/components/quiz-explanation-drawer/index.tsx +++ b/src/features/quiz/components/quiz-explanation-drawer/index.tsx @@ -6,18 +6,18 @@ import { Button } from '@/shared/components/ui/button' import Text from '@/shared/components/ui/text' interface QuizExplanationDrawerProps { - isCorrect: boolean + isRight: boolean explanation: string onClickNext: () => void - correctAnswer: string + rightAnswer: string } const MIN_HEIGHT = '125px' const MAX_HEIGHT = '80vh' const QuizExplanationDrawer = ({ - isCorrect, - correctAnswer, + isRight, + rightAnswer, explanation, onClickNext, }: QuizExplanationDrawerProps) => { @@ -29,7 +29,7 @@ const QuizExplanationDrawer = ({ const backgroundColor = useTransform( y, [-200, 0], - ['#ffffff', open ? (isCorrect ? '#e6f7e3' : '#ebeff3') : '#ffffff'] + ['#ffffff', open ? (isRight ? '#e6f7e3' : '#ebeff3') : '#ffffff'] ) const handleOpen = useCallback(async () => { @@ -82,12 +82,12 @@ const QuizExplanationDrawer = ({ transition={{ duration: 0.3 }} >
- {isCorrect ? ( + {isRight ? ( ) : ( )} - {isCorrect ? ( + {isRight ? ( 정답! @@ -98,9 +98,9 @@ const QuizExplanationDrawer = ({ )}
- {!isCorrect && ( + {!isRight && ( - 정답: {correctAnswer} + 정답: {rightAnswer} )} @@ -108,7 +108,7 @@ const QuizExplanationDrawer = ({ {explanation} diff --git a/src/features/quiz/components/result-icon/index.tsx b/src/features/quiz/components/result-icon/index.tsx index 55c6e2aa..40a19447 100644 --- a/src/features/quiz/components/result-icon/index.tsx +++ b/src/features/quiz/components/result-icon/index.tsx @@ -6,10 +6,10 @@ import { useEffect, useState } from 'react' import { UNTIL_EXPLANATION_DRAWER_OPEN } from '../../config' interface Props { - isCorrect: boolean + isRight: boolean } -const ResultIcon = ({ isCorrect }: Props) => { +const ResultIcon = ({ isRight }: Props) => { const [show, setShow] = useState(true) useEffect(() => { @@ -47,9 +47,9 @@ const ResultIcon = ({ isCorrect }: Props) => { return (
- {isCorrect && ( + {isRight && ( { )} - {!isCorrect && ( + {!isRight && ( void + onAnswer: (params: { id: number; isRight: boolean; choseAnswer: string }) => void } const QuizOptions = ({ quiz, currentResult, onAnswer }: QuizOptionsProps) => { @@ -48,7 +48,7 @@ const QuizOptions = ({ quiz, currentResult, onAnswer }: QuizOptionsProps) => { onClick={() => { onAnswer({ id: quiz.id, - isCorrect: quiz.answer === option ? 'correct' : 'wrong', + isRight: quiz.answer === option ? true : false, choseAnswer: option, }) }} @@ -70,11 +70,11 @@ const QuizOptions = ({ quiz, currentResult, onAnswer }: QuizOptionsProps) => { > { + userAnswer={currentResult?.choseAnswer as OXQuizAnswer} + onSelect={(userAnswer: OXQuizAnswer) => { onAnswer({ id: quiz.id, - isCorrect: quiz.answer === userAnswer ? 'correct' : 'wrong', + isRight: quiz.answer === userAnswer ? true : false, choseAnswer: userAnswer, }) }} diff --git a/src/features/quiz/screen/quiz-view/index.tsx b/src/features/quiz/screen/quiz-view/index.tsx index ff062df6..447b8827 100644 --- a/src/features/quiz/screen/quiz-view/index.tsx +++ b/src/features/quiz/screen/quiz-view/index.tsx @@ -50,18 +50,18 @@ const QuizView = ({ quizzes }: Props) => { const onAnswer = ({ id, - isCorrect, + isRight, choseAnswer, }: { id: number - isCorrect: 'correct' | 'wrong' + isRight: boolean choseAnswer: string }) => { setQuizResults((prev) => { const newResults = [...prev] newResults[currentIndex] = { id, - answer: isCorrect, + answer: isRight, choseAnswer, elapsedTime: calculateElapsedTime(), } @@ -90,8 +90,8 @@ const QuizView = ({ quizzes }: Props) => { {showExplanation && isQuizSolved(currentResult) && ( option === currentQuiz.answer)! : currentQuiz.answer === 'correct' @@ -104,7 +104,7 @@ const QuizView = ({ quizzes }: Props) => { )} {isQuizSolved(quizResults[currentIndex]) && ( - + )} diff --git a/src/features/quiz/utils/index.ts b/src/features/quiz/utils/index.ts index 3178c63c..f2d5fd2a 100644 --- a/src/features/quiz/utils/index.ts +++ b/src/features/quiz/utils/index.ts @@ -1,20 +1,20 @@ export const getOptionCondition = ( option: string, result: Quiz.Result | null, - correctAnswer: string + rightAnswer: string ) => { - if (!isQuizSolved(result)) return 'idle' - if (result.answer === 'correct' && result.choseAnswer === option) return 'correct' - if (result.answer === 'wrong' && result.choseAnswer === option) return 'wrong' - if (option === correctAnswer) return 'correct' - return 'disabled' + if (!isQuizSolved(result)) return 'IDLE' + if (result.answer === true && result.choseAnswer === option) return 'RIGHT' + if (result.answer === false && result.choseAnswer === option) return 'WRONG' + if (option === rightAnswer) return 'RIGHT' + return 'DISABLED' } export const getOXCondition = (result: Quiz.Result | null) => { - if (!isQuizSolved(result)) return 'idle' - if (result.answer === 'correct' && result.choseAnswer === 'correct') return 'correct' - if (result.answer === 'wrong' && result.choseAnswer === 'correct') return 'wrong' - return 'wrong' + if (!isQuizSolved(result)) return 'IDLE' + if (result.answer === true && result.choseAnswer === 'correct') return 'RIGHT' + if (result.answer === false && result.choseAnswer === 'correct') return 'WRONG' + return 'WRONG' } export const isQuizSolved = (result: Quiz.Result | null): result is Quiz.Result => { diff --git a/src/types/quiz.d.ts b/src/types/quiz.d.ts index c02dca4b..68a71733 100644 --- a/src/types/quiz.d.ts +++ b/src/types/quiz.d.ts @@ -10,15 +10,20 @@ type MultipleChoiceQuiz = { options: string[] } & BaseQuiz +/** correct와 incorrect는 O/X를 의미. 정답을 맞혔다는 의미로는 right 사용 */ +type OXQuizAnswer = 'correct' | 'incorrect' + type OXQuiz = { quizType: 'MIX_UP' - answer: 'correct' | 'wrong' + answer: OXQuizAnswer } & BaseQuiz type CombineQuiz = MultipleChoiceQuiz | OXQuiz type QuizType = 'MIX_UP' | 'MULTIPLE_CHOICE' +type QuizCondition = 'IDLE' | 'DISABLED' | 'RIGHT' | 'WRONG' + type Document = { id: number name: string @@ -130,7 +135,7 @@ interface UpdateQuizResultPayload { quizSetId: string quizzes: { id: number - answer: 'correct' | 'wrong' + answer: boolean choseAnswer: string elapsedTime: number }[]