feat: differentiate bottom navigate icons (#158)

* feat: differentiate bottom navigate icons

* fix: make ProfileIcon inactive transparent

src/assets/icons/index.ts

@@ -1,11 +1,14 @@
 /* eslint-disable import/no-unresolved */
 import ALogoIcon from './a-logo.svg?react';
+import AStrokeLogoIcon from './a-stroke-logo.svg?react';
 import ABLogoIcon from './ab-logo.svg?react';
 import ABIcon from './ab.svg?react';
 import AlarmIcon from './alarm-default.svg?react';
 import NewAlarmIcon from './alarm-new.svg?react';
 import AppleIcon from './apple.svg?react';
+import BFillLogoIcon from './b-fill-logo.svg?react';
 import BLogoIcon from './b-logo.svg?react';
+import BStrokeLogoIcon from './b-stroke-logo.svg?react';
 import BigDownChevronIcon from './big-down-chevron.svg?react';
 import CheckIcon from './check.svg?react';
 import ClockIcon from './clock.svg?react';
@@ -15,7 +18,8 @@ import DownChevronIcon from './down-chevron.svg?react';
 import GoogleIcon from './google.svg?react';
 import HideIcon from './hide.svg?react';
 import HitIcon from './hit.svg?react';
-import SelectedHomeIcon from './home-selected.svg?react';
+import HomeStrokeIcon from './home-stroke.svg?react';
+import HomeIcon from './home.svg?react';
 import KakaoIcon from './kakao.svg?react';
 import LeftDoubleArrowIcon from './left-double-arrow.svg?react';
 import MeatballIcon from './meatball.svg?react';
@@ -38,8 +42,11 @@ export {
   AlarmIcon,
   ALogoIcon,
   AppleIcon,
+  AStrokeLogoIcon,
+  BFillLogoIcon,
   BigDownChevronIcon,
   BLogoIcon,
+  BStrokeLogoIcon,
   CheckIcon,
   ClockIcon,
   CloseIcon,
@@ -48,6 +55,8 @@ export {
   GoogleIcon,
   HideIcon,
   HitIcon,
+  HomeIcon,
+  HomeStrokeIcon,
   KakaoIcon,
   LeftDoubleArrowIcon,
   MeatballIcon,
@@ -59,7 +68,6 @@ export {
   RightChevronIcon,
   RightDoubleArrowIcon,
   RotateIcon,
-  SelectedHomeIcon,
   SizeUpIcon,
   ThumbsIcon,
   TopicCreatBackgrounIcon,

src/components/commons/BottomNavigation/BottomNavigation.tsx

@@ -1,9 +1,20 @@
-import React from 'react';
-import { NavLink } from 'react-router-dom';
+import React, { PropsWithChildren } from 'react';
 
 import Text from '@components/commons/Text/Text';
 
-import { ALogoIcon, BLogoIcon, WriteBoxIcon, ProfileIcon, SelectedHomeIcon } from '@icons/index';
+import { colors } from '@styles/theme';
+
+import {
+  ALogoIcon,
+  BLogoIcon,
+  WriteBoxIcon,
+  ProfileIcon,
+  HomeIcon,
+  HomeStrokeIcon,
+  AStrokeLogoIcon,
+  BStrokeLogoIcon,
+  BFillLogoIcon,
+} from '@icons/index';
 
 import {
   Container,
@@ -14,25 +25,64 @@ import {
 } from './BottomNavigation.styles';
 
 const BottomNavigation = () => {
+  const inactiveColor = '#A2A1A6';
+
   return (
     <Container>
       <RadiusContainer>
         <StyledNavLink to={'/'}>
-          <SelectedHomeIcon width={26} height={26} />
-          <Text size={12}>홈</Text>
+          {({ isActive }) => (
+            <>
+              {isActive ? (
+                <HomeIcon width={26} height={26} />
+              ) : (
+                <HomeStrokeIcon width={26} height={26} fill={colors.white_60} />
+              )}
+              <Text size={12} color={isActive ? colors.white : inactiveColor}>
+                홈
+              </Text>
+            </>
+          )}
         </StyledNavLink>
         <StyledNavLink to={'/topics/a'}>
-          <ALogoIcon width={19} height={20} />
-          <Text size={12}>A사이드</Text>
+          {({ isActive }) => (
+            <>
+              {isActive ? (
+                <ALogoIcon width={19} height={20} fill={colors.white} />
+              ) : (
+                <AStrokeLogoIcon width={19} height={20} stroke={inactiveColor} />
+              )}
+              <Text size={12} color={isActive ? colors.white : inactiveColor}>
+                A사이드
+              </Text>
+            </>
+          )}
         </StyledNavLink>
         <Empty />
         <StyledNavLink to={'/b'}>
-          <BLogoIcon width={17} height={20} />
-          <Text size={12}>B사이드</Text>
+          {({ isActive }) => (
+            <>
+              {isActive ? <BFillLogoIcon /> : <BStrokeLogoIcon />}
+              <Text size={12} color={isActive ? colors.white : inactiveColor}>
+                B사이드
+              </Text>
+            </>
+          )}
         </StyledNavLink>
         <StyledNavLink to={'/profile'}>
-          <ProfileIcon width={26} height={26} />
-          <Text size={12}>MY</Text>
+          {({ isActive }) => (
+            <>
+              <ProfileIcon
+                width={26}
+                height={26}
+                fill={isActive ? colors.white : 'rgba(255, 255, 255, 0.0)'}
+                stroke={isActive ? 'transparent' : colors.white_60}
+              />
+              <Text size={12} color={isActive ? colors.white : inactiveColor}>
+                MY
+              </Text>
+            </>
+          )}
         </StyledNavLink>
       </RadiusContainer>
       <StyledNavLink to={'/topics/create'}>

src/routes/Auth/kakao/KakaoLogin.tsx

@@ -73,7 +73,7 @@ const KakaoLogin = () => {
           gap={7.5}
           style={{ width: '100%', height: '100%' }}
         >
-          <ALogoIcon width={65} />
+          <ALogoIcon width={65} fill={colors.A} />
           <BLogoIcon width={66} />
         </Row>
       </div>

src/routes/Topic/TopicSideSelection.tsx

@@ -68,7 +68,7 @@ const TopicSideSelection = () => {
         </SelectDescription>
         <ButtonContainer>
           <AButton selected={selected} onClick={handleAButtonClick}>
-            <ALogoIcon />
+            <ALogoIcon fill={colors.A} />
             <ADescription selected={selected}>
               Anything <br /> Side
             </ADescription>