feat: 드로워 스트링캣 리스트에 공개 스트링캣 딱지 추가 #405

RollingPaper42 · Apr 16, 2024 · d44aaea · d44aaea
1 parent 18007b7
commit d44aaea
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 17 deletions.
diff --git a/src/component/Common/HeaderLayout/Drawer/DropList.tsx b/src/component/Common/HeaderLayout/Drawer/DropList.tsx
@@ -3,17 +3,17 @@ import { useState } from 'react';
 import DownArrow from '../../Icon/drawer/DownArrow';
 import UpArrow from '../../Icon/drawer/UpArrow';
 import DropListItem from './DropListItem';
-import { bodyFontState } from '@/recoil/font/body';
 import { titleFontState } from '@/recoil/font/title';
 import { drawerBoard } from '@/types/drawerBoard';
 import { defaultState } from '@/utils/theme/default';
 
 interface Props {
   title: string;
   list: drawerBoard[];
+  type: 'personal' | 'history';
 }
 
-export default function DropList({ title, list }: Props) {
+export default function DropList({ title, list, type }: Props) {
   const [dropList, setDropList] = useState<boolean>(false);
 
   return (
@@ -34,7 +34,7 @@ export default function DropList({ title, list }: Props) {
           defaultState.drawerList
         } w-full  scrollbar-thumb-textarea-bg scrollbar-thin scrollbar-thumb-rounded-[7px] `}
       >
-        <DropListItem list={list} category={'personal'} />
+        <DropListItem list={list} type={type} />
       </div>
     </>
   );

diff --git a/src/component/Common/HeaderLayout/Drawer/DropListItem.tsx b/src/component/Common/HeaderLayout/Drawer/DropListItem.tsx
@@ -3,34 +3,32 @@ import { useRecoilState } from 'recoil';
 import { usePathname, useRouter } from 'next/navigation';
 
 import { Check } from '../../Icon/Drawer';
+import PublicBadge from '../../Icon/PublicBadge';
 import { drawerState } from '@/recoil/drawer';
 import { drawerBoard } from '@/types/drawerBoard';
 import { defaultState } from '@/utils/theme/default';
 
 interface Props {
   list: drawerBoard[];
-  category: string;
+  type: 'personal' | 'history';
 }
 
-export default function DropListItem({ list, category }: Props) {
+export default function DropListItem({ list, type }: Props) {
   const router = useRouter();
   const pathname = usePathname();
   const [, setDrawer] = useRecoilState(drawerState);
 
-  const truncateTitle = (title: string) => {
-    if (title.length <= 17) {
-      return title;
-    } else {
-      return title.substring(0, 17) + '...';
-    }
+  const truncateTitle = (title: string, isPublic: boolean) => {
+    const limit = isPublic ? 15 : 17;
+    return title.length <= limit ? title : title.substring(0, limit) + '...';
   };
 
   return list.map((item: drawerBoard) => {
-    const url = '/'.concat(category, '/', item.id);
+    const url = '/personal/'.concat(item.id);
     const isActive = pathname === url;
     return (
       <div
-        key={item.id}
+        key={item.id + type}
         className="flex h-[54px] w-full cursor-pointer select-none items-center justify-between px-[24px]"
         onClick={() => {
           router.push(url);
@@ -44,7 +42,10 @@ export default function DropListItem({ list, category }: Props) {
           }`}
         >
           {isActive && <Check />}
-          <div className="pl-[8px]">{truncateTitle(item.title)}</div>
+          {item.public && <PublicBadge />}
+          <div className="pl-[8px]">
+            {truncateTitle(item.title, item.public)}
+          </div>
         </div>
       </div>
     );

diff --git a/src/component/Common/HeaderLayout/Drawer/index.tsx b/src/component/Common/HeaderLayout/Drawer/index.tsx
@@ -144,8 +144,16 @@ export default function Drawer() {
           <div className={`flex flex-col items-center`}>
             {isLogin ? (
               <>
-                <DropList title={'내 스트링캣'} list={personalList} />
-                <DropList title={'최근 방문한 스트링캣'} list={historyList} />
+                <DropList
+                  title={'내 스트링캣'}
+                  list={personalList}
+                  type={'personal'}
+                />
+                <DropList
+                  title={'최근 방문한 스트링캣'}
+                  list={historyList}
+                  type={'history'}
+                />
                 <div className="mt-[12px] w-full px-[24px]">
                   <BottomButton
                     name="새 스트링캣 만들기"
@@ -180,7 +188,11 @@ export default function Drawer() {
                     textColor={`${defaultState.highLightText}`}
                   />
                 </div>
-                <DropList title={'최근 방문한 스트링캣'} list={historyList} />
+                <DropList
+                  title={'최근 방문한 스트링캣'}
+                  list={historyList}
+                  type={'history'}
+                />
               </>
             )}
             <div

diff --git a/src/types/drawerBoard.ts b/src/types/drawerBoard.ts
@@ -1,4 +1,5 @@
 export interface drawerBoard {
   id: string;
   title: string;
+  public: boolean;
 }