fix: type

picktoss · Nov 27, 2024 · 178ed53 · 178ed53
1 parent 79e4ac7
commit 178ed53
Show file tree

Hide file tree

Showing 13 changed files with 91 additions and 86 deletions.
diff --git a/src/features/quiz/components/multiple-option/index.stories.ts b/src/features/quiz/components/multiple-option/index.stories.ts
@@ -30,31 +30,31 @@ type Story = StoryObj<typeof MultipleOption>
 
 export const Default: Story = {
   args: {
-    condition: 'idle',
+    condition: 'IDLE',
     index: 0,
     option: quiz.options[0],
   },
 }
 
 export const Disabled: Story = {
   args: {
-    condition: 'disabled',
+    condition: 'DISABLED',
     index: 1,
     option: quiz.options[1],
   },
 }
 
 export const Wrong: Story = {
   args: {
-    condition: 'wrong',
+    condition: 'WRONG',
     index: 2,
     option: quiz.options[2],
   },
 }
 
 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
@@ -5,14 +5,14 @@ import { ButtonHTMLAttributes } from 'react'
 
 interface MultipleOptionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   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'
       )}
     >
       <div
         className={cn(
           'size-[32px] shrink-0 rounded-full flex-center',
-          condition === 'idle' && 'bg-background-base-03 text-gray-500',
-          condition === 'disabled' && 'bg-background-container-01 text-gray-300'
+          condition === 'IDLE' && 'bg-background-base-03 text-gray-500',
+          condition === 'DISABLED' && 'bg-background-container-01 text-gray-300'
         )}
       >
-        {(condition === 'idle' || condition === 'disabled') && ORDER_ICONS[index]}
-        {condition === 'correct' && <Icon name="correct-check-round" />}
-        {condition === 'wrong' && <Icon name="wrong-x-round" />}
+        {(condition === 'IDLE' || condition === 'DISABLED') && ORDER_ICONS[index]}
+        {condition === 'RIGHT' && <Icon name="correct-check-round" />}
+        {condition === 'WRONG' && <Icon name="wrong-x-round" />}
       </div>
       <Text
         typography="text1-medium"
         className={cn(
           'text-start',
-          condition === 'idle' && 'text-text-secondary',
-          condition === 'disabled' && 'text-text-disabled',
-          condition === 'wrong' && 'text-text-disabled',
-          condition === 'correct' && 'text-border-right !text-text1-bold'
+          condition === 'IDLE' && 'text-text-secondary',
+          condition === 'DISABLED' && 'text-text-disabled',
+          condition === 'WRONG' && 'text-text-disabled',
+          condition === 'RIGHT' && 'text-border-right !text-text1-bold'
         )}
       >
         {option}

diff --git a/src/features/quiz/components/ox-choice/index.stories.ts b/src/features/quiz/components/ox-choice/index.stories.ts
@@ -20,38 +20,38 @@ type Story = StoryObj<typeof OXChoice>
 // 초기 상태 (선택하지 않은 상태)
 export const Idle: Story = {
   args: {
-    condition: 'idle',
+    condition: 'IDLE',
   },
 }
 
 // 정답이 O이고 O를 선택한 경우 (정답)
 export const CorrectO: Story = {
   args: {
-    condition: 'correct',
+    condition: 'RIGHT',
     userAnswer: 'correct',
   },
 }
 
 // 정답이 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
@@ -3,32 +3,32 @@
 import { SVGProps } from 'react'
 
 interface OXChoiceProps {
-  condition: 'idle' | 'correct' | 'wrong'
-  userAnswer?: 'correct' | 'wrong'
-  onSelect: (userAnswer: 'correct' | 'wrong') => void
+  condition: Exclude<QuizCondition, 'DISABLED'>
+  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')
         }}
       >
-        <WrongOptionIcon className="size-full" {...getIconColors('wrong')} />
+        <WrongOptionIcon className="size-full" {...getIconColors('incorrect')} />
       </button>
     </div>
   )

diff --git 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
@@ -50,7 +50,7 @@ const QuizCard = ({
 
     return (
       <div className="flex-center mt-[16px] gap-[6px]">
-        {(['correct', 'wrong'] as const).map((value) => (
+        {(['correct', 'incorrect'] as const).map((value) => (
           <OXChoice
             key={value}
             value={value}
@@ -136,7 +136,7 @@ const OXChoice = ({
   showAnswer,
   chosenAnswer,
 }: {
-  value: 'correct' | 'wrong'
+  value: OXQuizAnswer
   isAnswer: boolean
   showAnswer: boolean
   chosenAnswer?: string
@@ -153,7 +153,7 @@ const OXChoice = ({
       )}
     >
       {value === 'correct' && 'O'}
-      {value === 'wrong' && 'X'}
+      {value === 'incorrect' && 'X'}
     </Text>
   )
 }
diff --git 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
@@ -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 }}
         >
           <div className="flex items-center gap-[16px]">
-            {isCorrect ? (
+            {isRight ? (
               <Icon name="correct-check-round" className="size-[48px]" />
             ) : (
               <Icon name="wrong-x-round" className="size-[48px]" />
             )}
-            {isCorrect ? (
+            {isRight ? (
               <Text typography="title1" color="right">
                 정답!
               </Text>
@@ -98,17 +98,17 @@ const QuizExplanationDrawer = ({
             )}
           </div>
 
-          {!isCorrect && (
+          {!isRight && (
             <Text typography="subtitle2-bold" color="secondary" className="mt-[28px]">
-              정답: {correctAnswer}
+              정답: {rightAnswer}
             </Text>
           )}
 
           <div>
             <Text
               as="p"
               typography="text1-medium"
-              className={cn(isCorrect ? 'mt-[28px]' : 'mt-[12px]')}
+              className={cn(isRight ? 'mt-[28px]' : 'mt-[12px]')}
             >
               {explanation}
             </Text>

diff --git 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 (
     <div className="center z-50">
       <AnimatePresence mode="wait">
-        {isCorrect && (
+        {isRight && (
           <motion.div
-            key="correct"
+            key="RIGHT"
             variants={iconVariants}
             initial="initial"
             animate="animate"
@@ -58,9 +58,9 @@ const ResultIcon = ({ isCorrect }: Props) => {
             <Icon name="correct-check-round" className="size-[80px]" />
           </motion.div>
         )}
-        {!isCorrect && (
+        {!isRight && (
           <motion.div
-            key="wrong"
+            key="WRONG"
             variants={iconVariants}
             initial="initial"
             animate="animate"