Merge branch 'develop' of github.com:picktoss/pick-toss-next into fea…

…t-search # Conflicts: # src/types/schema.d.ts
picktoss · Dec 11, 2024 · 7cda0cd · 7cda0cd
2 parents 6f99eb6 + aae2354
commit 7cda0cd
Show file tree

Hide file tree

Showing 12 changed files with 93 additions and 55 deletions.
diff --git a/src/app/(routes)/quiz/[id]/layout.tsx b/src/app/(routes)/quiz/[id]/layout.tsx
@@ -1,16 +1,12 @@
-import { FunctionComponent, PropsWithChildren, Suspense } from 'react'
+import { FunctionComponent, PropsWithChildren } from 'react'
 import { Metadata } from 'next'
 
 export const metadata: Metadata = {}
 
 interface LayoutProps extends PropsWithChildren {}
 
 const Layout: FunctionComponent<LayoutProps> = ({ children }) => {
-  return (
-    <main>
-      <Suspense>{children}</Suspense>
-    </main>
-  )
+  return <main>{children}</main>
 }
 
 export default Layout
diff --git a/src/app/(routes)/quiz/[id]/page.tsx b/src/app/(routes)/quiz/[id]/page.tsx
@@ -1,6 +1,6 @@
+'use server'
+
 import IntroAndQuizView from '@/features/quiz/screen/intro-and-quiz-view'
-import { getQuizSetTypeEnum } from '@/features/quiz/utils'
-import { getCollectionInfo } from '@/requests/collection/server'
 import { getQuizSetById } from '@/requests/quiz/server'
 import { notFound } from 'next/navigation'
 
@@ -9,43 +9,34 @@ interface Props {
     id: string
   }
   searchParams: {
-    quizType: 'today' | 'document' | 'collection' | 'create'
+    quizSetType: Quiz.Set.Type
     createdAt: string
     // 문서 퀴즈일 경우
     documentName?: string
     directoryEmoji?: string
-    // 콜렉션 퀴즈일 경우 (id는 params로 받음)
+    // 콜렉션 퀴즈일 경우
     collectionName?: string
     collectionEmoji?: string
   }
 }
 
 const QuizDetailPage = async ({ params, searchParams }: Props) => {
   const {
-    quizType = 'today',
+    quizSetType = 'TODAY_QUIZ_SET',
     createdAt,
     documentName,
     directoryEmoji,
     collectionName,
     collectionEmoji,
   } = searchParams
 
-  // const isTodayQuiz = quizType === 'today'
-  // const isDocumentQuiz = quizType === 'document'
-  // const isCollectionQuiz = quizType === 'collection'
-  const collectionId = Number(params.id)
-  // const collection = isCollectionQuiz ? await getCollectionInfo(collectionId) : null
-  // const isCreateQuiz = quizType === 'create'
-
   const quizSet = await getQuizSetById({
     quizSetId: params.id,
-    collectionId: quizType === 'collection' ? Number(collectionId) : undefined,
-    quizSetType: getQuizSetTypeEnum(quizType),
+    quizSetType,
   })
 
   const hasDocumentInfo = documentName !== undefined && directoryEmoji !== undefined
-  const hasCollectionInfo =
-    collectionId !== undefined && collectionName !== undefined && collectionEmoji !== undefined
+  const hasCollectionInfo = collectionName !== undefined && collectionEmoji !== undefined
 
   const documentInfo = hasDocumentInfo
     ? { name: documentName, directoryEmoji: directoryEmoji }
@@ -60,7 +51,7 @@ const QuizDetailPage = async ({ params, searchParams }: Props) => {
 
   return (
     <IntroAndQuizView
-      quizType={quizType}
+      quizSetType={quizSetType}
       createdAt={createdAt}
       quizzes={quizSet.quizzes}
       documentInfo={documentInfo}

diff --git a/src/features/collection/components/detail-info/index.tsx b/src/features/collection/components/detail-info/index.tsx
@@ -2,22 +2,26 @@
 
 import QuizCard from '@/features/quiz/components/quiz-card'
 import { useCollectionInfo } from '@/requests/collection/hooks'
+import { useCollectionQuizzesInfo } from '@/requests/quiz/hooks'
 import CategoryTag from '@/shared/components/custom/category-tag'
 import FixedBottom from '@/shared/components/custom/fixed-bottom'
 import Loading from '@/shared/components/custom/loading'
 import { Button } from '@/shared/components/ui/button'
 import Text from '@/shared/components/ui/text'
 import { useUser } from '@/shared/hooks/use-user'
-import Link from 'next/link'
+import { useRouter } from 'next/navigation'
 import { useMemo } from 'react'
 
 interface Props {
   id: number
 }
 
 const DetailInfo = ({ id }: Props) => {
+  const router = useRouter()
+
   const { user } = useUser()
   const { data: collectionData } = useCollectionInfo(id)
+  const { mutate: createQuizSetMutate } = useCollectionQuizzesInfo()
 
   const quizCounts = useMemo(() => {
     if (!collectionData?.quizzes) return { multiple: 0, ox: 0 }
@@ -37,6 +41,22 @@ const DetailInfo = ({ id }: Props) => {
 
   const isMine = user?.id === collectionData?.member.creatorId
 
+  const handleQuizStart = () => {
+    if (!collectionData) {
+      return
+    }
+
+    createQuizSetMutate(
+      { collectionId: id },
+      {
+        onSuccess: ({ quizSetId, quizSetType }) =>
+          router.push(
+            `/quiz/${quizSetId}?quizSetType=${quizSetType}&collectionName=${collectionData.name}&collectionEmoji=${collectionData.emoji}`
+          ),
+      }
+    )
+  }
+
   /** TODO: Spinner로 대체 */
   if (!collectionData) return <Loading center size="xs" />
 
@@ -98,13 +118,14 @@ const DetailInfo = ({ id }: Props) => {
       )}
 
       <FixedBottom>
-        <Link
+        {/* <Link
           // 바로 이동하지 않고, collection quiz_set_id를 가져오는 api를 실행함
           href={`/quiz/${collectionData.id}?quizType=collection&collectionName=${collectionData.name}&collectionEmoji=${collectionData.emoji}`}
-        >
-          {/* 이동 /quiz/[id] - searchParams로 collectionId, createdAt, collectionName, collectionEmoji 넣어서 */}
-          <Button className="w-full">퀴즈 시작하기</Button>
-        </Link>
+        > */}
+        {/* 이동 /quiz/[id] - searchParams로 collectionId, createdAt, collectionName, collectionEmoji 넣어서 */}
+        <Button className="w-full" onClick={handleQuizStart}>
+          퀴즈 시작하기
+        </Button>
       </FixedBottom>
     </>
   )

diff --git a/src/features/quiz/components/quiz-card/index.tsx b/src/features/quiz/components/quiz-card/index.tsx
@@ -6,7 +6,7 @@ import { cn } from '@/shared/lib/utils'
 import React, { useState } from 'react'
 
 interface Props {
-  quiz: Quiz.Item
+  quiz: Quiz.Item | Omit<Quiz.Item, 'document' | 'directory'>
   header: React.ReactNode
   answerMode?: boolean
   showExplanation?: boolean

diff --git a/src/features/quiz/screen/intro-and-quiz-view.tsx b/src/features/quiz/screen/intro-and-quiz-view.tsx
@@ -5,15 +5,15 @@ import QuizView from './quiz-view'
 import QuizIntro from './intro'
 
 interface Props {
-  quizType: 'today' | 'document' | 'collection' | 'create'
-  quizzes: QuizWithMetadata[]
+  quizSetType: Quiz.Set.Type
+  quizzes: Quiz.Item[]
   createdAt: string
   documentInfo?: { name: string; directoryEmoji: string }
   collectionInfo?: { name: string; emoji: string }
 }
 
 const IntroAndQuizView = ({
-  quizType,
+  quizSetType,
   quizzes,
   createdAt,
   documentInfo,
@@ -32,7 +32,7 @@ const IntroAndQuizView = ({
   if (!finishedIntro) {
     return (
       <QuizIntro
-        quizType={quizType === 'create' ? 'document' : quizType}
+        quizSetType={quizSetType === 'FIRST_QUIZ_SET' ? 'DOCUMENT_QUIZ_SET' : quizSetType}
         createdAt={createdAt}
         documentInfo={documentInfo}
         collectionInfo={collectionInfo}
@@ -41,7 +41,7 @@ const IntroAndQuizView = ({
     )
   }
 
-  return <QuizView quizzes={quizzes} isFirst={quizType === 'create'} />
+  return <QuizView quizzes={quizzes} isFirst={quizSetType === 'FIRST_QUIZ_SET'} />
 }
 
 export default IntroAndQuizView
diff --git a/src/features/quiz/screen/intro/index.tsx b/src/features/quiz/screen/intro/index.tsx
@@ -7,15 +7,15 @@ import CollectionQuizIntro from './components/collection-quiz-intro'
 import { formatDateKorean } from '@/shared/utils/date'
 
 interface Props {
-  quizType: 'today' | 'document' | 'collection' | 'create'
+  quizSetType: Quiz.Set.Type
   createdAt: string
   documentInfo?: { name: string; directoryEmoji: string }
   collectionInfo?: { name: string; emoji: string }
   onAnimationComplete: () => void
 }
 
 const QuizIntro = ({
-  quizType,
+  quizSetType,
   createdAt,
   documentInfo,
   collectionInfo,
@@ -25,21 +25,21 @@ const QuizIntro = ({
 
   return (
     <SwitchCase
-      value={quizType}
+      value={quizSetType}
       caseBy={{
-        today: (
+        TODAY_QUIZ_SET: (
           <TodayQuizIntro createdAt={createDateText} onAnimationComplete={onAnimationComplete} />
         ),
 
-        document: (
+        DOCUMENT_QUIZ_SET: (
           <DocumentQuizIntro
             createdAt={createDateText}
             documentName={documentInfo?.name ?? ''}
             directoryEmoji={documentInfo?.directoryEmoji ?? ''}
             onAnimationComplete={onAnimationComplete}
           />
         ),
-        collection: (
+        COLLECTION_QUIZ_SET: (
           <CollectionQuizIntro
             createdAt={createDateText}
             collectionName={collectionInfo?.name ?? ''}

diff --git a/src/requests/quiz/client.tsx b/src/requests/quiz/client.tsx
@@ -118,3 +118,14 @@ export const updateWrongQuizResult = async (requestBody: Quiz.Request.UpdateWron
     throw error
   }
 }
+
+export const collectionQuizzesInfo = async ({ collectionId }: { collectionId: number }) => {
+  try {
+    const { data } = await http.post<Quiz.Response.StartCollectionQuiz>(
+      API_ENDPOINTS.QUIZ.POST.COLLECTION(collectionId)
+    )
+    return data
+  } catch (error: unknown) {
+    throw error
+  }
+}
diff --git a/src/requests/quiz/hooks.ts b/src/requests/quiz/hooks.ts
@@ -2,6 +2,7 @@
 
 import { useMutation, useQuery } from '@tanstack/react-query'
 import {
+  collectionQuizzesInfo,
   createQuizSetForCheck,
   createReplayDocumentQuizSet,
   fetchDirectoryQuizzes,
@@ -60,3 +61,9 @@ export const useUpdateWrongQuizResult = () => {
     },
   })
 }
+
+export const useCollectionQuizzesInfo = () => {
+  return useMutation({
+    mutationFn: collectionQuizzesInfo,
+  })
+}
diff --git a/src/requests/quiz/server.tsx b/src/requests/quiz/server.tsx
@@ -16,22 +16,18 @@ export const getTodayQuizSetId = async () => {
 
 export const getQuizSetById = async ({
   quizSetId,
-  collectionId,
   quizSetType,
 }: {
   quizSetId: string
-  collectionId?: number
   quizSetType: Quiz.Set.Type
 }) => {
-  const params = collectionId
-    ? { 'collection-id': collectionId, 'quiz-set-type': quizSetType }
-    : { 'quiz-set-type': quizSetType }
-
   try {
     const { data } = await httpServer.get<Quiz.Response.GetBaseQuizSet>(
       API_ENDPOINTS.QUIZ.GET.BY_SET_ID(quizSetId),
       {
-        params,
+        params: {
+          'quiz-set-type': quizSetType,
+        },
       }
     )
     return data

diff --git a/src/shared/configs/endpoint.ts b/src/shared/configs/endpoint.ts
@@ -171,6 +171,9 @@ export const API_ENDPOINTS = {
       DOWNLOAD: (documentId: number) => `/documents/${documentId}/download-quiz`,
       /** GET /incorrect-quizzes - 오답 터뜨리기 퀴즈 가져오기 */
       WRONG_ANSWER: '/incorrect-quizzes',
+      /** POST /api/v2/collections/{collection_id}/collection-quizzes - 컬렉션 퀴즈 시작하기 응답 */
+      COLLECTION_QUIZZES: (collectionId: number) =>
+        `/collections/${collectionId}/collection-quizzes`,
     },
     PATCH: {
       /** PATCH /quiz/result - 퀴즈 결과 업데이트 */

diff --git a/src/types/quiz.d.ts b/src/types/quiz.d.ts
@@ -21,8 +21,6 @@ declare global {
    */
   declare namespace Quiz {
     type Item = QuizItem
-    type List = QuizItem[]
-    type ItemWithMetadata = QuizWithMetadata
     type ReplayType = ReplayQuizType
 
     type Type = QuizType
@@ -159,6 +157,13 @@ declare global {
       type CreateQuizSet = DeepRequired<
         paths['/api/v2/quizzes/documents/{document_id}/check-quiz-set']['post']['responses']['201']['content']['application/json;charset=UTF-8']
       >
+
+      /** POST /api/v2/collections/{collection_id}/collection-quizzes
+       * 컬렉션 퀴즈 시작하기 응답
+       */
+      type StartCollectionQuiz = DeepRequired<
+        paths['/api/v2/collections/{collection_id}/collection-quizzes']['post']['responses']['201']['content']['application/json;charset=UTF-8']
+      >
     }
   }
 }