feat: random quiz (#314)

* feat: random quiz swiper 구현 * feat: random quiz * feat: infinite random quiz
picktoss · Dec 21, 2024 · 22e6893 · 22e6893
1 parent c6acbb3
commit 22e6893
Show file tree

Hide file tree

Showing 17 changed files with 233 additions and 138 deletions.
diff --git a/src/app/(routes)/quiz/random/page.tsx b/src/app/(routes)/quiz/random/page.tsx
@@ -1,10 +1,14 @@
 import RandomQuizView from '@/features/quiz/screen/random-quiz-view'
-import { getBookmarkedCollections } from '@/requests/collection/server'
+import { getDirectories } from '@/requests/directory/server'
 
 const RandomQuiz = async () => {
-  const bookmarkedCollections = await getBookmarkedCollections()
+  const directories = await getDirectories()
 
-  return <RandomQuizView collections={bookmarkedCollections.collections} directories={[]} />
+  const directoriesHasDocuments = directories.directories.filter(
+    (directory) => directory.documentCount > 0
+  )
+
+  return <RandomQuizView directories={directoriesHasDocuments} />
 }
 
 export default RandomQuiz
diff --git a/src/features/category/config/index.ts b/src/features/category/config/index.ts
@@ -1,57 +1,57 @@
 type Category = {
-  code: Collection.Field
+  id: Collection.Field
   name: string
   emoji: string
 }
 
 export const CATEGORIES: Category[] = [
   {
-    code: 'IT',
+    id: 'IT',
     name: 'IT·프로그래밍',
     emoji: '🤖',
   },
   {
-    code: 'LAW',
+    id: 'LAW',
     name: '법률·정치',
     emoji: '📖',
   },
   {
-    code: 'BUSINESS_ECONOMY',
+    id: 'BUSINESS_ECONOMY',
     name: '경제·경영',
     emoji: '💰',
   },
   {
-    code: 'SOCIETY_POLITICS',
+    id: 'SOCIETY_POLITICS',
     name: '사회·정치',
     emoji: '⚖️',
   },
   {
-    code: 'LANGUAGE',
+    id: 'LANGUAGE',
     name: '언어',
     emoji: '💬',
   },
   {
-    code: 'MEDICINE_PHARMACY',
+    id: 'MEDICINE_PHARMACY',
     name: '의학·약학',
     emoji: '🩺',
   },
   {
-    code: 'ART',
+    id: 'ART',
     name: '예술',
     emoji: '🎨',
   },
   {
-    code: 'SCIENCE_ENGINEERING',
+    id: 'SCIENCE_ENGINEERING',
     name: '과학·공학',
     emoji: '🔬',
   },
   {
-    code: 'HISTORY_PHILOSOPHY',
+    id: 'HISTORY_PHILOSOPHY',
     name: '역사·철학',
     emoji: '📜',
   },
   {
-    code: 'OTHER',
+    id: 'OTHER',
     name: '기타',
     emoji: '♾️',
   },

diff --git a/src/features/collection/components/collection.tsx b/src/features/collection/components/collection.tsx
@@ -34,8 +34,7 @@ const Collection = ({
 }: Props) => {
   const { mutate: bookmarkMutate } = useBookmarkMutation()
 
-  const categoryLabel =
-    CATEGORIES.find((categoryItem) => categoryItem.code === category)?.name ?? ''
+  const categoryLabel = CATEGORIES.find((categoryItem) => categoryItem.id === category)?.name ?? ''
 
   return (
     <div className={cn('min-w-[166px]', className)}>

diff --git a/src/features/collection/components/create-collection-form.tsx b/src/features/collection/components/create-collection-form.tsx
@@ -51,7 +51,7 @@ const CreateCollectionForm = () => {
   const [emoji, setEmoji] = useState('🥹')
   const [title, setTitle] = useState('')
   const [description, setDescription] = useState('')
-  const [categoryCode, setCategoryCode] = useState(CATEGORIES[0]?.code ?? 'IT')
+  const [categoryCode, setCategoryCode] = useState(CATEGORIES[0]?.id ?? 'IT')
 
   const { data: directoryQuizzesData, isLoading: directoryQuizzesLoading } =
     useDirectoryQuizzes(selectedDirectoryId)
@@ -225,7 +225,7 @@ const CreateCollectionForm = () => {
             <DrawerTrigger>
               <div className="rounded-full bg-background-base-02 px-[14px] py-[5px]">
                 <CategoryTag
-                  title={CATEGORIES.find((category) => category.code === categoryCode)?.name ?? ''}
+                  title={CATEGORIES.find((category) => category.id === categoryCode)?.name ?? ''}
                 />
               </div>
             </DrawerTrigger>
@@ -235,10 +235,10 @@ const CreateCollectionForm = () => {
               </DrawerHeader>
               <div className="flex flex-col gap-2 p-4">
                 {CATEGORIES.map((category) => (
-                  <DrawerClose key={category.code}>
+                  <DrawerClose key={category.id}>
                     <CategoryTag
                       title={category.name}
-                      onClick={() => setCategoryCode(category.code)}
+                      onClick={() => setCategoryCode(category.id)}
                     />
                   </DrawerClose>
                 ))}

diff --git a/src/features/quiz/screen/quiz-view/components/quiz-option.tsx b/src/features/quiz/screen/quiz-view/components/quiz-option.tsx
@@ -6,7 +6,7 @@ import { QUIZ_ANIMATION_DURATION } from '@/features/quiz/config'
 import { cn } from '@/shared/lib/utils'
 
 interface QuizOptionsProps {
-  quiz: Quiz.Item
+  quiz: Quiz.Item | Quiz.RandomItem
   currentResult: Quiz.Result | null
   onAnswer: (params: { id: number; isRight: boolean; choseAnswer: string }) => void
   className?: HTMLElement['className']
@@ -31,7 +31,7 @@ const QuizOptions = ({ quiz, currentResult, onAnswer, className }: QuizOptionsPr
   if (quiz.quizType === 'MULTIPLE_CHOICE') {
     return (
       <motion.div
-        className={cn('flex flex-col gap-[12px]', className)}
+        className={cn('flex flex-col gap-[12px] w-full', className)}
         variants={container}
         initial="hidden"
         animate="show"