refactor: type + axios interceptor (picktoss#305)

* refactor: type + axios interceptor * fix: cspell * feat: zustand * refactor: 주석 추가 * fix: type * fix: token
rabyeoljji · Dec 9, 2024 · 83853f1 · 83853f1
1 parent 7f9af29
commit 83853f1
Show file tree

Hide file tree

Showing 43 changed files with 540 additions and 615 deletions.
diff --git a/cspell.json b/cspell.json
@@ -4,29 +4,29 @@
   "ignorePaths": ["node_modules", ".next", "*.js", "*.json", "*.html", "*.css", "*.md", "*.svg"],
   "files": ["src/**/*.tsx", "src/**/*.ts"],
   "words": [
+    "autodocs",
     "classname",
+    "customise",
+    "hanmail",
     "kakao",
     "KEYPOINT",
     "kisa",
     "lotties",
+    "lucide",
     "lukemorales",
     "metadatas",
+    "naver",
     "nextauth",
+    "noti",
+    "partialize",
     "picktoss",
     "remirror",
     "svgs",
+    "swipeable",
     "Tanstack",
     "Uncapitalize",
     "vaul",
     "yxxx",
-    "swipeable",
-    "lucide",
-    "hanmail",
-    "naver",
-    "noti",
-
-    // storybook
-    "autodocs",
-    "customise"
+    "zustand"
   ]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -79,7 +79,8 @@
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.1",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "zustand": "^5.0.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",

diff --git a/src/app/(routes)/document/[id]/(main)/page.tsx b/src/app/(routes)/document/[id]/(main)/page.tsx
@@ -3,7 +3,7 @@ import DocumentFloatingButton from '@/features/document/components/document-floa
 import { QuizListProvider } from '@/features/document/contexts/quiz-list-context'
 import DocumentContent from '@/features/document/screens/document-content'
 import Quiz from '@/features/document/screens/quiz'
-import { fetchDocumentDetail } from '@/requests/document'
+import { fetchDocumentDetail } from '@/requests/document/client'
 
 interface Props {
   params: {

diff --git a/src/app/(routes)/main/@header/default.tsx b/src/app/(routes)/main/@header/default.tsx
@@ -4,23 +4,23 @@ import Icon from '@/shared/components/custom/icon'
 import Text from '@/shared/components/ui/text'
 import { useMessaging } from '@/shared/hooks/use-messaging'
 import usePreviousPath from '@/shared/hooks/use-previous-path'
-import { useSession } from 'next-auth/react'
+// import { useSession } from 'next-auth/react'
 import Link from 'next/link'
-import { useRouter } from 'next/navigation'
-import { useEffect } from 'react'
+// import { useRouter } from 'next/navigation'
+// import { useEffect } from 'react'
 
 const Header = () => {
-  const router = useRouter()
-  const { data: session, status } = useSession()
+  // const router = useRouter()
+  // const { data: session, status } = useSession()
   usePreviousPath()
   useMessaging()
 
-  useEffect(() => {
-    // 첫 로그인 회원일 경우 온보딩 화면(관심분야선택)으로 보냅니다
-    if (status === 'authenticated' && session?.user.isNewUser) {
-      router.push('/on-boarding')
-    }
-  }, [session, status, router])
+  // useEffect(() => {
+  //   // 첫 로그인 회원일 경우 온보딩 화면(관심분야선택)으로 보냅니다
+  //   if (status === 'authenticated' && session?.user.isNewUser) {
+  //     router.push('/on-boarding')
+  //   }
+  // }, [session, status, router])
 
   return (
     <header className="flex h-[54px] w-full max-w-mobile items-center justify-between bg-background-base-02 px-[18px]">

diff --git a/src/app/(routes)/main/page.tsx b/src/app/(routes)/main/page.tsx
@@ -7,14 +7,14 @@ import Icon from '@/shared/components/custom/icon'
 import MainTodayQuizArea from '@/features/quiz/components/main-today-quiz-area'
 import ReviewTop5Container from '@/features/document/components/review-top5-container'
 import InterestedCategoryCollections from '@/features/collection/components/interested-category-collections'
-import { fetchTodayQuizSetId } from '@/requests/quiz'
-import { fetchDocuments } from '@/requests/document'
 import RandomQuizLottie from '@/features/quiz/components/random-quiz-lottie'
 import BombQuizLottie from '@/features/quiz/components/bomb-quiz-lottie'
+import { fetchTodayQuizSetId } from '@/requests/quiz/server'
+import { fetchDocumentsServer } from '@/requests/document/server'
 
 const Home = async () => {
   const { quizSetId, createdAt, type } = await fetchTodayQuizSetId()
-  const { documents } = await fetchDocuments()
+  const { documents } = await fetchDocumentsServer()
   const isEmpty = !documents || documents.length === 0
   const todayQuizState = isEmpty ? 'EMPTY' : type === 'READY' ? 'ARRIVED' : 'NOT_ARRIVED'
 

diff --git a/src/app/(routes)/profile/account/page.tsx b/src/app/(routes)/profile/account/page.tsx
@@ -4,12 +4,14 @@ import { cn } from '@/shared/lib/utils'
 import CategoryDrawer from '@/features/user/components/category-drawer'
 import SetNameDialog from '@/features/user/components/set-name-dialog'
 import Link from 'next/link'
-import { fetchUserInfo } from '@/requests/user'
+import { fetchUserInfo } from '@/requests/user/server'
 
 const AccountPage = async () => {
   const user = await fetchUserInfo()
 
-  const interestFields = user.interestField?.length ? user.interestField : ['관심 분야 없음']
+  const interestCategories = user.interestCategories?.length
+    ? user.interestCategories
+    : ['관심 분야 없음']
 
   return (
     <main className="h-[calc(100dvh-54px-88px)] w-full overflow-y-auto px-[16px]">
@@ -31,7 +33,9 @@ const AccountPage = async () => {
         <SetNameDialog userName={user.name} />
 
         <CategoryDrawer
-          interestedCategories={interestFields as (interestedCategory | '관심 분야 없음')[]}
+          interestedCategories={
+            interestCategories as (User.InterestedCategory | '관심 분야 없음')[]
+          }
         />
 
         <Link href={'verify-email'} className="flex w-full items-center justify-between">

diff --git a/src/app/(routes)/quiz/[id]/page.tsx b/src/app/(routes)/quiz/[id]/page.tsx
@@ -1,6 +1,6 @@
 import IntroAndQuizView from '@/features/quiz/screen/intro-and-quiz-view'
 import { getQuizSetTypeEnum } from '@/features/quiz/utils'
-import { fetchQuizSetById } from '@/requests/quiz'
+import { fetchQuizSetById } from '@/requests/quiz/client'
 import { notFound } from 'next/navigation'
 
 interface Props {

diff --git a/src/app/(routes)/quiz/random/page.tsx b/src/app/(routes)/quiz/random/page.tsx
@@ -1,5 +1,5 @@
 import RandomQuizView from '@/features/quiz/screen/random-quiz-view'
-import { getBookmarkedCollections } from '@/requests/collection'
+import { getBookmarkedCollections } from '@/requests/collection/server'
 
 const RandomQuiz = async () => {
   const bookmarkedCollections = await getBookmarkedCollections()

diff --git a/src/features/category/components/category-select-area/index.tsx b/src/features/category/components/category-select-area/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useUpdateCollectionFields } from '@/requests/user/hooks'
+import { useUpdateCollectionCategories } from '@/requests/user/hooks'
 import Loading from '@/shared/components/custom/loading'
 import { Button } from '@/shared/components/ui/button'
 import { Form, FormField, FormItem } from '@/shared/components/ui/form'
@@ -22,12 +22,12 @@ const MAX_CATEGORY = 2
 
 const CategorySelectArea = () => {
   const router = useRouter()
-  const { mutate, isPending } = useUpdateCollectionFields()
+  const { mutate, isPending } = useUpdateCollectionCategories()
 
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      categories: [] as interestedCategory[],
+      categories: [] as User.InterestedCategory[],
     },
   })
   const { watch } = form
@@ -43,11 +43,11 @@ const CategorySelectArea = () => {
     >
   ) => {
     const target = e.target as HTMLElement
-    const category = target.id as interestedCategory
+    const category = target.id as User.InterestedCategory
 
     if (!category) return // 버튼이 아닌 다른 영역 클릭 시 무시
 
-    const currentCategories = (field.value || []) as interestedCategory[]
+    const currentCategories = (field.value || []) as User.InterestedCategory[]
     if (currentCategories.includes(category)) {
       // 이미 선택된 경우 제거
       const updatedCategories = currentCategories.filter((item) => item !== category)
@@ -61,7 +61,7 @@ const CategorySelectArea = () => {
 
   const onSubmit = (values: FormValues) => {
     mutate(
-      { interestCollectionFields: values.categories as interestedCategory[] },
+      { interestCollectionCategories: values.categories as NonNullable<User.InterestedCategory>[] },
       {
         onSuccess: () => {
           router.replace('/main')

diff --git a/src/features/quiz/components/ox-choice/index.tsx b/src/features/quiz/components/ox-choice/index.tsx
@@ -3,15 +3,15 @@
 import { SVGProps } from 'react'
 
 interface OXChoiceProps {
-  condition: Exclude<QuizCondition, 'DISABLED'>
-  userAnswer?: OXQuizAnswer
-  onSelect: (userAnswer: OXQuizAnswer) => void
+  condition: Exclude<Quiz.Condition, 'DISABLED'>
+  userAnswer?: Quiz.OXAnswer
+  onSelect: (userAnswer: Quiz.OXAnswer) => void
 }
 
 const OXChoice = ({ condition, userAnswer, onSelect }: OXChoiceProps) => {
   const disabled = condition === 'RIGHT' || condition === 'WRONG'
 
-  const getIconColors = (type: OXQuizAnswer) => {
+  const getIconColors = (type: Quiz.OXAnswer) => {
     const defaultColors = {
       bg: type === 'correct' ? '#4D7BF9' : '#FB8320', // 기본 배경색
       fill: 'white', // 기본 채우기색

diff --git a/src/features/quiz/config/index.tsx b/src/features/quiz/config/index.tsx
@@ -1,4 +1,4 @@
-export const quizzes: Quiz.ItemWithCategory[] = [
+export const quizzes: Quiz.ItemWithMetadata[] = [
   {
     document: {
       id: 1,
@@ -8,10 +8,6 @@ export const quizzes: Quiz.ItemWithCategory[] = [
       id: 1,
       name: '전공 공부',
     },
-    category: {
-      id: 1,
-      name: 'IT',
-    },
     id: 1,
     quizType: 'MULTIPLE_CHOICE',
     question: '식물기반 단백질 시장에서 대기업의 참여가 늘어나는 이유는 무엇인가요?',
@@ -33,10 +29,6 @@ export const quizzes: Quiz.ItemWithCategory[] = [
       id: 1,
       name: '전공 공부',
     },
-    category: {
-      id: 1,
-      name: 'IT',
-    },
     id: 2,
     quizType: 'MIX_UP',
     question: '식물기반 단백질 시장에서 대기업의 참여가 늘어나는 이유는 무엇인가요?',
@@ -53,10 +45,6 @@ export const quizzes: Quiz.ItemWithCategory[] = [
       id: 1,
       name: '전공 공부',
     },
-    category: {
-      id: 1,
-      name: 'IT',
-    },
     id: 3,
     quizType: 'MULTIPLE_CHOICE',
     question: '식물기반 단백질 시장에서 대기업의 참여가 늘어나는 이유는 무엇인가요?',
@@ -78,10 +66,6 @@ export const quizzes: Quiz.ItemWithCategory[] = [
       id: 1,
       name: '전공 공부',
     },
-    category: {
-      id: 1,
-      name: 'IT',
-    },
     id: 5,
     quizType: 'MIX_UP',
     question: '식물기반 단백질 시장에서 대기업의 참여가 늘어나는 이유는 무엇인가요?',
@@ -97,10 +81,6 @@ export const quizzes: Quiz.ItemWithCategory[] = [
       id: 1,
       name: '전공 공부',
     },
-    category: {
-      id: 1,
-      name: 'IT',
-    },
     id: 4,
     quizType: 'MIX_UP',
     question: '식물기반 단백질 시장에서 대기업의 참여가 늘어나는 이유는 무엇인가요?',

diff --git a/src/features/quiz/screen/quiz-view/components/quiz-option.tsx b/src/features/quiz/screen/quiz-view/components/quiz-option.tsx
@@ -72,8 +72,8 @@ const QuizOptions = ({ quiz, currentResult, onAnswer, className }: QuizOptionsPr
       >
         <OXChoice
           condition={getOXCondition(currentResult)}
-          userAnswer={currentResult?.choseAnswer as OXQuizAnswer}
-          onSelect={(userAnswer: OXQuizAnswer) => {
+          userAnswer={currentResult?.choseAnswer as Quiz.OXQuizAnswer}
+          onSelect={(userAnswer: Quiz.OXQuizAnswer) => {
             onAnswer({
               id: quiz.id,
               isRight: quiz.answer === userAnswer ? true : false,

diff --git a/src/features/quiz/screen/quiz-view/index.tsx b/src/features/quiz/screen/quiz-view/index.tsx
@@ -33,8 +33,8 @@ const QuizView = ({ quizzes, isFirst }: Props) => {
 
   const [exitDialogOpen, setExitDialogOpen] = useState(false)
 
-  const currentQuiz = quizzes[currentIndex]
-  const currentResult = quizResults[currentIndex]
+  const currentQuiz = quizzes[currentIndex] ?? ({} as Quiz.ItemWithMetadata)
+  const currentResult = quizResults[currentIndex] ?? null
 
   const onNext = () => {
     const hasNextQuiz = handleNext(currentIndex, quizzes.length)
@@ -127,9 +127,7 @@ const QuizView = ({ quizzes, isFirst }: Props) => {
         />
       )}
 
-      {isQuizSolved(quizResults[currentIndex]) && (
-        <ResultIcon isRight={quizResults[currentIndex]?.answer} />
-      )}
+      {isQuizSolved(currentResult) && <ResultIcon isRight={currentResult?.answer} />}
 
       <ExitDialog index={currentIndex} open={exitDialogOpen} onOpenChange={setExitDialogOpen} />
     </div>

diff --git a/src/features/quiz/utils/index.ts b/src/features/quiz/utils/index.ts
@@ -22,7 +22,7 @@ export const isQuizSolved = (result: Quiz.Result | null): result is Quiz.Result
 }
 
 export const getAnswerText = (answer: string) => {
-  const OXType = ['correct', 'incorrect'] as OXQuizAnswer[]
+  const OXType = ['correct', 'incorrect'] as Quiz.OXAnswer[]
   const isOXType = OXType.find((oxType) => oxType === answer)
 
   if (isOXType) {
@@ -34,7 +34,7 @@ export const getAnswerText = (answer: string) => {
 }
 
 export const getQuizSetTypeEnum = (quizSetType: 'today' | 'document' | 'collection' | 'create') => {
-  let enumQuizType: QuizSetType
+  let enumQuizType: Quiz.SetType
 
   switch (quizSetType) {
     case 'today':