Refactor: 탭 아이콘 색상 및 탭 text 스타일 조건부 처리 로직을 함수로 정의하여 리팩토링

8-Sprinters · Sep 6, 2024 · 6c22271 · 6c22271
1 parent 8ad18f3
commit 6c22271
Showing 1 changed file with 16 additions and 18 deletions.
diff --git a/src/components/BottomNav/BottomNav.tsx b/src/components/BottomNav/BottomNav.tsx
@@ -44,14 +44,14 @@ export default function BottomNav() {
   }
 
   // 네브바 탭 현재위치를 표시하기 위한 분기처리
-  const selectedItem = (() => {
+  const selectedTap = (() => {
     switch (pathname) {
       case '/':
         return bottomNavTapPath.home;
       case `/user/${userId}/mylist`:
         return bottomNavTapPath.feed;
       default:
-        return null;
+        return bottomNavTapPath.home;
     }
   })();
 
@@ -64,34 +64,32 @@ export default function BottomNav() {
     path === bottomNavTapPath.feed ? router.push(`/user/${userId}/mylist`) : router.push('/list/create');
   };
 
+  // 탭 아이콘 색상을 정하는 함수
+  const getIconColor = (selectedTap: string, path: string) => {
+    return selectedTap === path ? vars.color.blue : vars.color.lightgray;
+  };
+
+  // 탭 text 스타일을 정하는 함수
+  const getTextStyle = (selectedTap: string, path: string) => {
+    return selectedTap === path ? styles.bottomTapText.variant : styles.bottomTapText.default;
+  };
+
   return (
     <>
       <nav>
         <div className={styles.bottomTapContainer}>
           <Link href="/" className={styles.bottomTapVariant.left}>
-            <HomeIcon fill={selectedItem === bottomNavTapPath.home ? vars.color.blue : vars.color.lightgray} />
-            <span
-              className={
-                selectedItem === bottomNavTapPath.home ? styles.bottomTapText.variant : styles.bottomTapText.default
-              }
-            >
-              홈
-            </span>
+            <HomeIcon fill={getIconColor(selectedTap, bottomNavTapPath.home)} />
+            <span className={getTextStyle(selectedTap, bottomNavTapPath.home)}>홈</span>
           </Link>
           <div className={styles.addButtonTap}>
             <button className={styles.addButton} onClick={handleMoveToPageOnLogin(bottomNavTapPath.list)}>
               <AddIcon />
             </button>
           </div>
           <button className={styles.bottomTapVariant.right} onClick={handleMoveToPageOnLogin(bottomNavTapPath.feed)}>
-            <MyFeedIcon fill={selectedItem === bottomNavTapPath.feed ? vars.color.blue : vars.color.lightgray} />
-            <span
-              className={
-                selectedItem === bottomNavTapPath.feed ? styles.bottomTapText.variant : styles.bottomTapText.default
-              }
-            >
-              내 피드
-            </span>
+            <MyFeedIcon fill={getIconColor(selectedTap, bottomNavTapPath.feed)} />
+            <span className={getTextStyle(selectedTap, bottomNavTapPath.feed)}>내 피드</span>
           </button>
         </div>
       </nav>