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

…t-system-view
picktoss · Dec 5, 2024 · 0f5883b · 0f5883b
2 parents 2a57b4d + 40af215
commit 0f5883b
Show file tree

Hide file tree

Showing 8 changed files with 207 additions and 93 deletions.
diff --git a/src/actions/fetchers/user/get-user/index.ts b/src/actions/fetchers/user/get-user/index.ts
@@ -4,6 +4,7 @@ import { apiClient } from '@/actions/api-client'
 import { API_ENDPOINT } from '@/actions/endpoints'
 
 export interface GetUserResponse {
+  id: number
   name: string
   email: string
   role: 'ROLE_USER' | 'ROLE_ADMIN'

diff --git a/src/features/category/config/index.ts b/src/features/category/config/index.ts
@@ -1,47 +1,58 @@
 type Category = {
   code: Collection.Field
   name: string
+  emoji: string
 }
 
 export const CATEGORIES: Category[] = [
   {
     code: 'IT',
     name: 'IT·프로그래밍',
+    emoji: '🤖',
   },
   {
     code: 'LAW',
     name: '법률·정치',
+    emoji: '📖',
   },
   {
     code: 'BUSINESS_ECONOMY',
     name: '경제·경영',
+    emoji: '💰',
   },
   {
     code: 'SOCIETY_POLITICS',
     name: '사회·정치',
+    emoji: '⚖️',
   },
   {
     code: 'LANGUAGE',
     name: '언어',
+    emoji: '💬',
   },
   {
     code: 'MEDICINE_PHARMACY',
     name: '의학·약학',
+    emoji: '🩺',
   },
   {
     code: 'ART',
     name: '예술',
+    emoji: '🎨',
   },
   {
     code: 'SCIENCE_ENGINEERING',
     name: '과학·공학',
+    emoji: '🔬',
   },
   {
     code: 'HISTORY_PHILOSOPHY',
     name: '역사·철학',
+    emoji: '📜',
   },
   {
     code: 'OTHER',
     name: '기타',
+    emoji: '♾️',
   },
 ]
diff --git a/src/features/collection/components/collection.tsx b/src/features/collection/components/collection.tsx
@@ -12,7 +12,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
   category: string
   problemCount: number
   lastUpdated: string
-  isBookMarked: boolean
+  isBookMarked?: boolean
+  isOwner?: boolean
   bookMarkCount: number
 }
 
@@ -23,7 +24,8 @@ const Collection = ({
   category,
   problemCount,
   lastUpdated,
-  isBookMarked,
+  isBookMarked = false,
+  isOwner = false,
   bookMarkCount,
   className,
 }: Props) => {
@@ -33,23 +35,35 @@ const Collection = ({
     <div className={cn('min-w-[166px]', className)}>
       <div className="relative inline-block h-[200px] w-full rounded-[16px] bg-background-base-01 px-[20px] pt-[19px] text-start">
         <div className="absolute right-[16px] top-[20px] flex flex-col items-center gap-[4px]">
-          {isBookMarked ? (
+          {isOwner && (
             <Icon
               name="book-mark-fill"
+              className="size-[24px] text-icon-disabled"
               onClick={(e) => {
                 e.stopPropagation()
-                bookmarkMutate({ collectionId, isBookMarked: true })
-              }}
-            />
-          ) : (
-            <Icon
-              name="book-mark"
-              onClick={(e) => {
-                e.stopPropagation()
-                bookmarkMutate({ collectionId, isBookMarked: false })
               }}
             />
           )}
+          {!isOwner &&
+            (isBookMarked ? (
+              <Icon
+                name="book-mark-fill"
+                className="size-[24px] cursor-pointer"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  bookmarkMutate({ collectionId, isBookMarked: true })
+                }}
+              />
+            ) : (
+              <Icon
+                name="book-mark"
+                className="size-[24px] cursor-pointer"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  bookmarkMutate({ collectionId, isBookMarked: false })
+                }}
+              />
+            ))}
           <Text typography="text2-medium" className="text-text-caption">
             {bookMarkCount}
           </Text>

diff --git a/src/features/collection/components/exploration.tsx b/src/features/collection/components/exploration.tsx
@@ -7,12 +7,14 @@ import Text from '@/shared/components/ui/text'
 import StartQuizDrawer from './start-quiz-drawer'
 import { useBookmarkedCollections, useCollections } from '@/requests/collection/hooks'
 import Loading from '@/shared/components/custom/loading'
+import { useUser } from '@/shared/hooks/use-user'
 
 const controlButtons = ['분야', '퀴즈 유형', '문제 수']
 
 const Exploration = () => {
   const { data: collectionsData, isLoading } = useCollections()
   const { data: bookmarkedCollections, isLoading: isBookmarkedLoading } = useBookmarkedCollections()
+  const { user } = useUser()
 
   return (
     <>
@@ -43,26 +45,33 @@ const Exploration = () => {
                 (bookmarkedCollection) => bookmarkedCollection.id === collection.id
               )
             )
+            const multipleChoiceCount =
+              collection.quizzes?.filter((quiz) => quiz.quizType === 'MULTIPLE_CHOICE').length ?? 0
+            const oxCount =
+              collection.quizzes?.filter((quiz) => quiz.quizType === 'MIX_UP').length ?? 0
+
             return (
               <StartQuizDrawer
                 key={collection.id}
                 collectionId={collection.id}
                 emoji={collection.emoji}
-                multipleChoiceCount={collection.quizCount}
-                oxCount={collection.quizCount}
+                multipleChoiceCount={multipleChoiceCount}
+                oxCount={oxCount}
                 category={collection.collectionField}
                 title={collection.name}
-                description={'asdasd'}
+                description={collection.description}
                 isBookMarked={isBookmarked}
+                isOwner={user?.id === collection.member.creatorId}
                 bookMarkCount={collection.bookmarkCount}
                 trigger={
                   <Collection
                     collectionId={collection.id}
                     emoji={collection.emoji}
                     title={collection.name}
                     category={collection.collectionField}
-                    problemCount={collection.quizCount}
+                    problemCount={multipleChoiceCount + oxCount}
                     lastUpdated="2일 전"
+                    isOwner={user?.id === collection.member.creatorId}
                     isBookMarked={isBookmarked}
                     bookMarkCount={collection.bookmarkCount}
                   />

diff --git a/src/features/collection/components/my-collection.tsx b/src/features/collection/components/my-collection.tsx
@@ -25,6 +25,7 @@ const MyCollection = () => {
   const { data: myCollectionsData, isLoading: isMyCollectionLoading } = useMyCollections()
   const { data: bookmarkedCollectionsData, isLoading: isBookmarkedCollectionLoading } =
     useBookmarkedCollections()
+  const { data: bookmarkedCollections, isLoading: isBookmarkedLoading } = useBookmarkedCollections()
 
   return (
     <>
@@ -62,64 +63,86 @@ const MyCollection = () => {
                 <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}
-                    />
-                  }
-                />
-              ))}
+              {myCollectionsData?.collections.map((collection) => {
+                const multipleChoiceCount =
+                  collection.quizzes?.filter((quiz) => quiz.quizType === 'MULTIPLE_CHOICE')
+                    .length ?? 0
+                const oxCount =
+                  collection.quizzes?.filter((quiz) => quiz.quizType === 'MIX_UP').length ?? 0
+
+                return (
+                  <StartQuizDrawer
+                    key={collection.id}
+                    collectionId={collection.id}
+                    emoji={collection.emoji}
+                    multipleChoiceCount={multipleChoiceCount}
+                    oxCount={oxCount}
+                    category={collection.collectionField}
+                    title={collection.name}
+                    description={collection.description}
+                    isOwner={true}
+                    bookMarkCount={collection.bookmarkCount}
+                    trigger={
+                      <Collection
+                        collectionId={collection.id}
+                        emoji={collection.emoji}
+                        title={collection.name}
+                        category={collection.collectionField}
+                        problemCount={multipleChoiceCount + oxCount}
+                        lastUpdated="2일 전"
+                        isOwner={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
+              {!isBookmarkedLoading &&
+                bookmarkedCollectionsData?.collections.map((collection) => {
+                  const isBookmarked = Boolean(
+                    bookmarkedCollections?.collections.some(
+                      (bookmarkedCollection) => bookmarkedCollection.id === collection.id
+                    )
+                  )
+                  const multipleChoiceCount =
+                    collection.quizzes?.filter((quiz) => quiz.quizType === 'MULTIPLE_CHOICE')
+                      .length ?? 0
+                  const oxCount =
+                    collection.quizzes?.filter((quiz) => quiz.quizType === 'MIX_UP').length ?? 0
+
+                  return (
+                    <StartQuizDrawer
+                      key={collection.id}
                       collectionId={collection.id}
                       emoji={collection.emoji}
-                      title={collection.name}
+                      multipleChoiceCount={multipleChoiceCount}
+                      oxCount={oxCount}
                       category={collection.collectionField}
-                      problemCount={collection.quizCount}
-                      lastUpdated="2일 전"
-                      isBookMarked={true}
+                      title={collection.name}
+                      description={collection.description}
+                      isBookMarked={isBookmarked}
                       bookMarkCount={collection.bookmarkCount}
+                      trigger={
+                        <Collection
+                          collectionId={collection.id}
+                          emoji={collection.emoji}
+                          title={collection.name}
+                          category={collection.collectionField}
+                          problemCount={multipleChoiceCount + oxCount}
+                          lastUpdated="2일 전"
+                          isBookMarked={isBookmarked}
+                          bookMarkCount={collection.bookmarkCount}
+                        />
+                      }
                     />
-                  }
-                />
-              ))}
+                  )
+                })}
             </CollectionList>
           ),
         }}

diff --git a/src/features/collection/components/start-quiz-drawer.tsx b/src/features/collection/components/start-quiz-drawer.tsx
@@ -17,7 +17,8 @@ interface StartQuizDrawerProps {
   multipleChoiceCount: number
   oxCount: number
   description: string
-  isBookMarked: boolean
+  isBookMarked?: boolean
+  isOwner?: boolean
   bookMarkCount: number
 }
 
@@ -30,7 +31,8 @@ const StartQuizDrawer = ({
   multipleChoiceCount,
   oxCount,
   description,
-  isBookMarked,
+  isBookMarked = false,
+  isOwner = false,
   bookMarkCount,
 }: StartQuizDrawerProps) => {
   const { mutate: bookmarkMutate } = useBookmarkMutation()
@@ -56,19 +58,21 @@ const StartQuizDrawer = ({
 
           <div className="relative p-[20px]">
             <div className="absolute right-[20px] flex flex-col items-center gap-[4px]">
-              {isBookMarked ? (
-                <Icon
-                  name="book-mark-fill"
-                  className="size-[24px]"
-                  onClick={() => bookmarkMutate({ collectionId, isBookMarked: true })}
-                />
-              ) : (
-                <Icon
-                  name="book-mark"
-                  className="size-[24px]"
-                  onClick={() => bookmarkMutate({ collectionId, isBookMarked: false })}
-                />
-              )}
+              {isOwner && <Icon name="book-mark-fill" className="size-[24px] text-icon-disabled" />}
+              {!isOwner &&
+                (isBookMarked ? (
+                  <Icon
+                    name="book-mark-fill"
+                    className="size-[24px] cursor-pointer"
+                    onClick={() => bookmarkMutate({ collectionId, isBookMarked: true })}
+                  />
+                ) : (
+                  <Icon
+                    name="book-mark"
+                    className="size-[24px] cursor-pointer"
+                    onClick={() => bookmarkMutate({ collectionId, isBookMarked: false })}
+                  />
+                ))}
               <Text typography="text2-medium" className="text-text-caption">
                 {bookMarkCount}
               </Text>