Team-Tiki · wuzoo · Dec 4, 2024 · Nov 25, 2024 · Nov 26, 2024 · Nov 26, 2024
diff --git a/apps/client/index.html b/apps/client/index.html
@@ -2,7 +2,7 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/common/asset/svg/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel='preload' href="/font/subset-PretendardVariable.woff2" />
     <link rel='preload' href="/font/subset-PretendardVariable.woff" />

diff --git a/apps/client/package.json b/apps/client/package.json
@@ -24,10 +24,8 @@
     "axios": "^1.7.2",
     "framer-motion": "^11.11.11",
     "mime": "^4.0.4",
-    "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",
-    "react-router-dom": "^6.24.1",
-    "zustand": "^5.0.0"
+    "react-router-dom": "^6.24.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",

diff --git a/apps/client/src/common/asset/svg/favicon.svg → apps/client/public/favicon.svg b/apps/client/src/common/asset/svg/favicon.svg → apps/client/public/favicon.svg
diff --git a/apps/client/src/common/asset/svg/ic_add.svg b/apps/client/src/common/asset/svg/ic_add.svg
diff --git a/apps/client/src/common/asset/svg/ic_avatar.svg b/apps/client/src/common/asset/svg/ic_avatar.svg
diff --git a/apps/client/src/common/asset/svg/ic_global.svg b/apps/client/src/common/asset/svg/ic_global.svg
diff --git a/apps/client/src/common/style/animation.ts b/apps/client/src/common/style/animation.ts
diff --git a/apps/client/src/page/showcase/index/component/ClubProfileCard/ClubProfileCard.tsx b/apps/client/src/page/showcase/index/component/ClubProfileCard/ClubProfileCard.tsx
@@ -1,15 +1,15 @@
 import { IcDefaultProfile } from '@tiki/icon';
 import { Heading, Text } from '@tiki/ui';
 
+import CachedImage from '@/common/component/CachedImage/CachedImage';
+
 import {
   containerStyle,
   descriptionStyle,
   detailStyle,
   imageStyle,
 } from '@/page/showcase/index/component/ClubProfileCard/ClubProfileCard.style';
 
-import CachedImage from '@/shared/component/CachedImage/CachedImage';
-
 interface ClubProfileCardProps {
   title: string;
   detail: string;

diff --git a/apps/client/src/shared/component/CachedImage/CachedImage.tsx b/apps/client/src/shared/component/CachedImage/CachedImage.tsx
diff --git a/apps/client/src/shared/component/SideNavBar/Item/Item.tsx b/apps/client/src/shared/component/SideNavBar/Item/Item.tsx
@@ -1,3 +1,4 @@
+import { IcAdd, IcGlobal } from '@tiki/icon';
 import { Flex, ToolTip } from '@tiki/ui';
 import { motion } from 'framer-motion';
 
@@ -11,13 +12,43 @@ import {
 } from '@/shared/component/SideNavBar/Item/Item.style';
 
 interface ItemProps extends HTMLAttributes<HTMLDivElement> {
-  hoverMessage: string;
-  logoUrl: string | null;
+  variant:
+    | {
+        type: 'add';
+        hoverMessage: string;
+      }
+    | {
+        type: 'dashboard';
+        hoverMessage: string;
+      }
+    | {
+        type: 'team';
+        logoUrl: string | null;
+        hoverMessage: string;
+      };
   isClicked: boolean;
   onLogoClick: () => void;
 }
 
-const Item = ({ logoUrl = '', isClicked, onLogoClick, hoverMessage, ...props }: ItemProps) => {
+const getItemsInfo = (variant: Required<ItemProps['variant']>) => {
+  switch (variant?.type) {
+    case 'add': {
+      return <IcAdd width={16} height={16} />;
+    }
+    case 'dashboard': {
+      return <IcGlobal width={20} height={20} />;
+    }
+    case 'team': {
+      return variant.logoUrl ? (
+        <img src={variant.logoUrl} alt="팀 프로필 이미지" />
+      ) : (
+        <span css={firstSpellStyle}>{variant.hoverMessage[0]}</span>
+      );
+    }
+  }
+};
+
+const Item = ({ variant, isClicked, onLogoClick, ...props }: ItemProps) => {
   const [isHover, setIsHover] = useState(false);
 
   const handleMouseEnter = () => {
@@ -39,7 +70,7 @@ const Item = ({ logoUrl = '', isClicked, onLogoClick, hoverMessage, ...props }:
       {isClicked && (
         <motion.div layoutId="snb_indicator" css={[pageIndicatorStyle(isClicked, isHover), indicatorStyle]} />
       )}
-      <ToolTip message={hoverMessage} position="right" gap={0.8}>
+      <ToolTip message={variant.hoverMessage} position="right" gap={0.8}>
         <div
           role="button"
           tabIndex={0}
@@ -48,7 +79,7 @@ const Item = ({ logoUrl = '', isClicked, onLogoClick, hoverMessage, ...props }:
           onKeyDown={handleEnterKeyDown}
           onMouseEnter={handleMouseEnter}
           onMouseLeave={handleMouseLeave}>
-          {logoUrl ? <img src={logoUrl} alt="버튼 아이콘" /> : <span css={firstSpellStyle}>{hoverMessage[0]}</span>}
+          {getItemsInfo(variant)}
         </div>
       </ToolTip>
     </Flex>

diff --git a/apps/client/src/shared/component/SideNavBar/SideNavBar.tsx b/apps/client/src/shared/component/SideNavBar/SideNavBar.tsx
@@ -1,13 +1,9 @@
-import { IcTikiLogo } from '@tiki/icon';
+import { IcAvatar, IcTikiLogo } from '@tiki/icon';
 import { Divider, Flex, ToolTip, theme } from '@tiki/ui';
 
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import addUrl from '@/common/asset/svg/ic_add.svg';
-import avatarUrl from '@/common/asset/svg/ic_avatar.svg';
-import globalUrl from '@/common/asset/svg/ic_global.svg';
-
 import Item from '@/shared/component/SideNavBar/Item/Item';
 import { containerStyle, settingStyle, tikiLogoStyle } from '@/shared/component/SideNavBar/SideNavBar.style';
 import { PATH } from '@/shared/constant/path';
@@ -45,28 +41,25 @@ const SideNavBar = () => {
       <IcTikiLogo css={tikiLogoStyle} />
       <Flex tag="ul" styles={{ direction: 'column', align: 'center' }}>
         <Item
-          logoUrl={globalUrl}
+          variant={{ type: 'dashboard', hoverMessage: 'showcase' }}
           isClicked={selectedId === 'showcase'}
           onLogoClick={() => handleItemClick('showcase', PATH.SHOWCASE)}
-          hoverMessage={'showcase'}
         />
         <Divider type="horizontal" size={56.78} color={theme.colors.gray_300} />
         {data?.belongTeamGetResponses.map((data: Team) => {
           return (
             <Item
               key={data.id}
               isClicked={selectedId === String(data.id)}
-              logoUrl={data.iconImageUrl}
+              variant={{ type: 'team', logoUrl: data.iconImageUrl, hoverMessage: data.name }}
               onLogoClick={() => handleItemClick(String(data.id), `${PATH.DASHBOARD}?teamId=${data.id}`)}
-              hoverMessage={data.name}
             />
           );
         })}
         <Item
-          logoUrl={addUrl}
+          variant={{ type: 'add', hoverMessage: '새로운 워크스페이스 생성' }}
           isClicked={false}
           onLogoClick={handleWorkspaceClick}
-          hoverMessage={'새로운 워크스페이스 생성'}
         />
         <Flex css={settingStyle}>
           <ToolTip message={'내 정보 수정하기'} position="right" gap={0.8}>
@@ -79,7 +72,7 @@ const SideNavBar = () => {
               onKeyDown={() => {
                 alert('현재 준비중인 기능입니다.');
               }}>
-              <img src={avatarUrl} alt="버튼 아이콘" />
+              <IcAvatar width={32} height={32} />
             </div>
           </ToolTip>
         </Flex>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml