feat: featch collections

picktoss · Dec 4, 2024 · 0fe3d3a · 0fe3d3a
1 parent 9072350
commit 0fe3d3a
Show file tree

Hide file tree

Showing 5 changed files with 180 additions and 91 deletions.
diff --git a/src/features/collection/components/create-collection-form.tsx b/src/features/collection/components/create-collection-form.tsx
@@ -29,6 +29,7 @@ import {
 } from '@/shared/components/ui/drawer'
 import { CATEGORIES } from '@/features/category/config'
 import { useCreateCollection } from '@/requests/collection/hooks'
+import Loading from '@/shared/components/custom/loading'
 
 interface SearchParams {
   step: 'select-document' | 'create-form'
@@ -41,7 +42,7 @@ const CreateCollectionForm = () => {
     ? stepValue
     : 'select-document'
 
-  const { data: directoriesData } = useDirectories()
+  const { data: directoriesData, isLoading: directoriesLoading } = useDirectories()
 
   const [selectedDirectoryId, setSelectedDirectoryId] = useState<number | null>(null)
   const [selectedQuizIds, setSelectedQuizIds] = useState<number[]>([])
@@ -52,9 +53,11 @@ const CreateCollectionForm = () => {
   const [description, setDescription] = useState('')
   const [categoryCode, setCategoryCode] = useState(CATEGORIES[0].code)
 
-  const { data: directoryQuizzesData } = useDirectoryQuizzes(selectedDirectoryId)
+  const { data: directoryQuizzesData, isLoading: directoryQuizzesLoading } =
+    useDirectoryQuizzes(selectedDirectoryId)
 
-  const { mutate: createCollectionMutate } = useCreateCollection()
+  const { mutate: createCollectionMutate, isPending: isCreateCollectionPending } =
+    useCreateCollection()
 
   const handleSelectAllClick = (check: boolean) => {
     if (!directoryQuizzesData) return
@@ -88,7 +91,7 @@ const CreateCollectionForm = () => {
       },
       {
         onSuccess: (data) => {
-          router.push(`/collections/${data.id}`)
+          router.replace(`/collections/${data.id}`)
         },
       }
     )
@@ -119,57 +122,65 @@ const CreateCollectionForm = () => {
             5문제 이상 선택해주세요.
           </Text>
         </div>
-        <div className="mt-[24px] pb-[120px]">
-          <div className="sticky top-[54px] z-20 flex h-[44px] items-center justify-between bg-white">
-            <DirectorySelect
-              directories={directoriesData?.directories ?? []}
-              selectedDirectoryId={selectedDirectoryId}
-              selectDirectoryId={(directoryId: number) => setSelectedDirectoryId(directoryId)}
-            />
-            <Text typography="text2-bold" className="text-text-accent">
-              {selectedQuizCount}개 선택됨
-            </Text>
-          </div>
-
-          <div className="mt-[16px] flex items-center gap-[12px]">
-            <Checkbox id="check-all" checked={allChecked} onCheckedChange={handleSelectAllClick} />
-            <Label htmlFor="check-all" className="!text-text1-medium text-text-secondary">
-              전체 선택
-            </Label>
-          </div>
+        {directoriesLoading || directoryQuizzesLoading ? (
+          <Loading center />
+        ) : (
+          <div className="mt-[24px] pb-[120px]">
+            <div className="sticky top-[54px] z-20 flex h-[44px] items-center justify-between bg-white">
+              <DirectorySelect
+                directories={directoriesData?.directories ?? []}
+                selectedDirectoryId={selectedDirectoryId}
+                selectDirectoryId={(directoryId: number) => setSelectedDirectoryId(directoryId)}
+              />
+              <Text typography="text2-bold" className="text-text-accent">
+                {selectedQuizCount}개 선택됨
+              </Text>
+            </div>
 
-          <ul className="mt-[23px] flex flex-col gap-[8px]">
-            {directoryQuizzesData?.quizzes.map((quiz) => (
-              <SelectableQuizCard
-                key={quiz.id}
-                quiz={quiz}
-                onSelect={onSelectableQuizCardClick}
-                selected={selectedQuizIds.includes(quiz.id)}
-                order={selectedQuizIds.indexOf(quiz.id) + 1}
+            <div className="mt-[16px] flex items-center gap-[12px]">
+              <Checkbox
+                id="check-all"
+                checked={allChecked}
+                onCheckedChange={handleSelectAllClick}
               />
-            ))}
-          </ul>
+              <Label htmlFor="check-all" className="!text-text1-medium text-text-secondary">
+                전체 선택
+              </Label>
+            </div>
 
-          <FixedBottom className="flex gap-[6px]">
-            <Button
-              variant={'largeRound'}
-              colors={'tertiary'}
-              className="w-[35%]"
-              onClick={() => setSelectedQuizIds([])}
-            >
-              초기화
-            </Button>
-            <Button
-              variant={'largeRound'}
-              colors={'primary'}
-              className="flex-1"
-              disabled={selectedQuizCount < 5}
-              onClick={() => router.push('/collections/create?step=create-form')}
-            >
-              다음
-            </Button>
-          </FixedBottom>
-        </div>
+            <ul className="mt-[23px] flex flex-col gap-[8px]">
+              {directoryQuizzesData?.quizzes.map((quiz) => (
+                <SelectableQuizCard
+                  key={quiz.id}
+                  quiz={quiz}
+                  onSelect={onSelectableQuizCardClick}
+                  selected={selectedQuizIds.includes(quiz.id)}
+                  order={selectedQuizIds.indexOf(quiz.id) + 1}
+                />
+              ))}
+            </ul>
+
+            <FixedBottom className="flex gap-[6px]">
+              <Button
+                variant={'largeRound'}
+                colors={'tertiary'}
+                className="w-[35%]"
+                onClick={() => setSelectedQuizIds([])}
+              >
+                초기화
+              </Button>
+              <Button
+                variant={'largeRound'}
+                colors={'primary'}
+                className="flex-1"
+                disabled={selectedQuizCount < 5}
+                onClick={() => router.push('/collections/create?step=create-form')}
+              >
+                다음
+              </Button>
+            </FixedBottom>
+          </div>
+        )}
       </>
     )
   }
@@ -252,7 +263,12 @@ const CreateCollectionForm = () => {
         </div>
       </div>
       <FixedBottom className="flex gap-[6px]">
-        <Button variant={'largeRound'} className="w-full" onClick={() => handleCreateCollection()}>
+        <Button
+          variant={'largeRound'}
+          className="w-full"
+          onClick={() => handleCreateCollection()}
+          disabled={isCreateCollectionPending}
+        >
           만들기
         </Button>
       </FixedBottom>

diff --git a/src/features/collection/components/exploration.tsx b/src/features/collection/components/exploration.tsx
@@ -12,7 +12,7 @@ const controlButtons = ['분야', '퀴즈 유형', '문제 수']
 
 const Exploration = () => {
   const { data: collectionsData, isLoading } = useCollections()
-  const { data: bookmarkedCollections } = useBookmarkedCollections()
+  const { data: bookmarkedCollections, isLoading: isBookmarkedLoading } = useBookmarkedCollections()
 
   return (
     <>
@@ -34,7 +34,7 @@ const Exploration = () => {
       </div>
 
       <CollectionList>
-        {isLoading ? (
+        {isBookmarkedLoading || isLoading ? (
           <Loading center />
         ) : (
           collectionsData?.collections.map((collection) => {

diff --git a/src/features/collection/components/my-collection.tsx b/src/features/collection/components/my-collection.tsx
@@ -8,6 +8,9 @@ import CollectionList from './collection-list'
 import Link from 'next/link'
 import Icon from '@/shared/components/custom/icon'
 import StartQuizDrawer from './start-quiz-drawer'
+import { useBookmarkedCollections, useMyCollections } from '@/requests/collection/hooks'
+import Loading from '@/shared/components/custom/loading'
+import { SwitchCase } from '@/shared/components/custom/react/switch-case'
 
 const tabs = [
   { key: 'create-collection', label: '만든 컬렉션' },
@@ -19,6 +22,10 @@ const MyCollection = () => {
     'create-collection'
   )
 
+  const { data: myCollectionsData, isLoading: isMyCollectionLoading } = useMyCollections()
+  const { data: bookmarkedCollectionsData, isLoading: isBookmarkedCollectionLoading } =
+    useBookmarkedCollections()
+
   return (
     <>
       <div className="flex h-[60px] border-b border-border-divider text-text-sub transition-all">
@@ -41,42 +48,82 @@ const MyCollection = () => {
         ))}
       </div>
 
-      <CollectionList>
-        {activeTab === 'create-collection' && (
-          <Link
-            href="/collections/create"
-            className="flex flex-col items-center gap-[12px] rounded-[16px] border-[3px] border-dashed border-border-default pt-[70px]"
-          >
-            <Icon name="plus-circle" className="size-[24px]" />
-            <Text typography="subtitle2-bold">만들기</Text>
-          </Link>
-        )}
-        {Array.from({ length: 10 }).map((_, idx) => (
-          <StartQuizDrawer
-            key={idx}
-            collectionId={idx.toString()}
-            emoji="🔥"
-            multipleChoiceCount={30}
-            oxCount={5}
-            category="IT·프로그래밍"
-            title="파이썬기본문법과응용"
-            description="이 퀴즈는 제가 파이썬을 공부하며 생성한 퀴즈 중 자주 틀린 퀴즈만 모은 컬렉션입니다 공부에 도움이 되시길 바라며..."
-            isBookMarked={true}
-            bookMarkCount={123}
-            trigger={
-              <Collection
-                emoji="🔥"
-                title="파이썬 OX"
-                category="IT·프로그래밍"
-                problemCount={35}
-                lastUpdated="2일 전"
-                isBookMarked={true}
-                bookMarkCount={123}
-              />
-            }
-          />
-        ))}
-      </CollectionList>
+      <SwitchCase
+        value={activeTab}
+        caseBy={{
+          'create-collection': isMyCollectionLoading ? (
+            <Loading center />
+          ) : (
+            <CollectionList>
+              <Link
+                href="/collections/create"
+                className="flex flex-col items-center gap-[12px] rounded-[16px] border-[3px] border-dashed border-border-default pt-[70px]"
+              >
+                <Icon name="plus-circle" className="size-[24px]" />
+                <Text typography="subtitle2-bold">만들기</Text>
+              </Link>
+              {myCollectionsData?.collections.map((collection) => (
+                <StartQuizDrawer
+                  key={collection.id}
+                  collectionId={collection.id}
+                  emoji={collection.emoji}
+                  multipleChoiceCount={collection.quizCount}
+                  oxCount={collection.quizCount}
+                  category={collection.collectionField}
+                  title={collection.name}
+                  description={'asdasd'}
+                  isBookMarked={true}
+                  bookMarkCount={collection.bookmarkCount}
+                  trigger={
+                    <Collection
+                      collectionId={collection.id}
+                      emoji={collection.emoji}
+                      title={collection.name}
+                      category={collection.collectionField}
+                      problemCount={collection.quizCount}
+                      lastUpdated="2일 전"
+                      isBookMarked={true}
+                      bookMarkCount={collection.bookmarkCount}
+                    />
+                  }
+                />
+              ))}
+            </CollectionList>
+          ),
+          'save-collection': isBookmarkedCollectionLoading ? (
+            <Loading center />
+          ) : (
+            <CollectionList>
+              {bookmarkedCollectionsData?.collections.map((collection) => (
+                <StartQuizDrawer
+                  key={collection.id}
+                  collectionId={collection.id}
+                  emoji={collection.emoji}
+                  multipleChoiceCount={collection.quizCount}
+                  oxCount={collection.quizCount}
+                  category={collection.collectionField}
+                  title={collection.name}
+                  description={'asdasd'}
+                  isBookMarked={true}
+                  bookMarkCount={collection.bookmarkCount}
+                  trigger={
+                    <Collection
+                      collectionId={collection.id}
+                      emoji={collection.emoji}
+                      title={collection.name}
+                      category={collection.collectionField}
+                      problemCount={collection.quizCount}
+                      lastUpdated="2일 전"
+                      isBookMarked={true}
+                      bookMarkCount={collection.bookmarkCount}
+                    />
+                  }
+                />
+              ))}
+            </CollectionList>
+          ),
+        }}
+      />
     </>
   )
 }

diff --git a/src/requests/collection/hooks.ts b/src/requests/collection/hooks.ts
@@ -6,6 +6,7 @@ import {
   getAllCollections,
   deleteBookmark,
   createBookmark,
+  getMyCollections,
 } from '.'
 
 export const useCollections = () => {
@@ -15,6 +16,13 @@ export const useCollections = () => {
   })
 }
 
+export const useMyCollections = () => {
+  return useQuery({
+    queryKey: ['myCollections'],
+    queryFn: async () => getMyCollections(),
+  })
+}
+
 export const useBookmarkedCollections = () => {
   return useQuery({
     queryKey: ['bookmarkedCollections'],

diff --git a/src/requests/collection/index.ts b/src/requests/collection/index.ts
@@ -22,6 +22,24 @@ export const getAllCollections = async () => {
   }
 }
 
+export const getMyCollections = async () => {
+  try {
+    const session = await auth()
+
+    const { data } = await http.get<Collection.Response.GetMyCollections>(
+      API_ENDPOINTS.COLLECTION.GET.MY_COLLECTIONS,
+      {
+        headers: {
+          Authorization: `Bearer ${session?.user.accessToken}`,
+        },
+      }
+    )
+    return data
+  } catch (error) {
+    throw error
+  }
+}
+
 export const getBookmarkedCollections = async () => {
   try {
     const session = await auth()