From 4fd62e51a5439e1bbac96be723a78c82c062dd6b Mon Sep 17 00:00:00 2001 From: Jeon Jinho Date: Fri, 2 Feb 2024 18:27:20 +0900 Subject: [PATCH] feat: differentiate bottom navigate icons (#158) * feat: differentiate bottom navigate icons * fix: make ProfileIcon inactive transparent --- src/assets/icons/a-logo.svg | 12 ++-- src/assets/icons/a-stroke-logo.svg | 5 ++ src/assets/icons/b-fill-logo.svg | 5 ++ src/assets/icons/b-stroke-logo.svg | 10 +++ src/assets/icons/home-selected.svg | 3 - src/assets/icons/home-stroke.svg | 5 ++ src/assets/icons/home.svg | 5 ++ src/assets/icons/index.ts | 12 +++- src/assets/icons/profile.svg | 12 ++-- .../BottomNavigation/BottomNavigation.tsx | 72 ++++++++++++++++--- src/routes/Auth/kakao/KakaoLogin.tsx | 2 +- src/routes/Topic/TopicSideSelection.tsx | 2 +- 12 files changed, 119 insertions(+), 26 deletions(-) create mode 100644 src/assets/icons/a-stroke-logo.svg create mode 100644 src/assets/icons/b-fill-logo.svg create mode 100644 src/assets/icons/b-stroke-logo.svg delete mode 100644 src/assets/icons/home-selected.svg create mode 100644 src/assets/icons/home-stroke.svg create mode 100644 src/assets/icons/home.svg diff --git a/src/assets/icons/a-logo.svg b/src/assets/icons/a-logo.svg index 3df8607..208c0c8 100644 --- a/src/assets/icons/a-logo.svg +++ b/src/assets/icons/a-logo.svg @@ -1,4 +1,8 @@ - - - - + + + + \ No newline at end of file diff --git a/src/assets/icons/a-stroke-logo.svg b/src/assets/icons/a-stroke-logo.svg new file mode 100644 index 0000000..39f8919 --- /dev/null +++ b/src/assets/icons/a-stroke-logo.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/b-fill-logo.svg b/src/assets/icons/b-fill-logo.svg new file mode 100644 index 0000000..37477b6 --- /dev/null +++ b/src/assets/icons/b-fill-logo.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/b-stroke-logo.svg b/src/assets/icons/b-stroke-logo.svg new file mode 100644 index 0000000..05715c3 --- /dev/null +++ b/src/assets/icons/b-stroke-logo.svg @@ -0,0 +1,10 @@ + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/home-selected.svg b/src/assets/icons/home-selected.svg deleted file mode 100644 index 98467b4..0000000 --- a/src/assets/icons/home-selected.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/home-stroke.svg b/src/assets/icons/home-stroke.svg new file mode 100644 index 0000000..07e2599 --- /dev/null +++ b/src/assets/icons/home-stroke.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/home.svg b/src/assets/icons/home.svg new file mode 100644 index 0000000..32c24fe --- /dev/null +++ b/src/assets/icons/home.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 9dceeb4..320b328 100644 --- a/src/assets/icons/index.ts +++ b/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, diff --git a/src/assets/icons/profile.svg b/src/assets/icons/profile.svg index 8ffeabd..de19201 100644 --- a/src/assets/icons/profile.svg +++ b/src/assets/icons/profile.svg @@ -1,4 +1,8 @@ - - - - + + + + \ No newline at end of file diff --git a/src/components/commons/BottomNavigation/BottomNavigation.tsx b/src/components/commons/BottomNavigation/BottomNavigation.tsx index 23dce6f..003cbfd 100644 --- a/src/components/commons/BottomNavigation/BottomNavigation.tsx +++ b/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 ( - - + {({ isActive }) => ( + <> + {isActive ? ( + + ) : ( + + )} + + 홈 + + + )} - - A사이드 + {({ isActive }) => ( + <> + {isActive ? ( + + ) : ( + + )} + + A사이드 + + + )} - - B사이드 + {({ isActive }) => ( + <> + {isActive ? : } + + B사이드 + + + )} - - MY + {({ isActive }) => ( + <> + + + MY + + + )} diff --git a/src/routes/Auth/kakao/KakaoLogin.tsx b/src/routes/Auth/kakao/KakaoLogin.tsx index d2028a8..240e09a 100644 --- a/src/routes/Auth/kakao/KakaoLogin.tsx +++ b/src/routes/Auth/kakao/KakaoLogin.tsx @@ -73,7 +73,7 @@ const KakaoLogin = () => { gap={7.5} style={{ width: '100%', height: '100%' }} > - + diff --git a/src/routes/Topic/TopicSideSelection.tsx b/src/routes/Topic/TopicSideSelection.tsx index c3b091d..4766171 100644 --- a/src/routes/Topic/TopicSideSelection.tsx +++ b/src/routes/Topic/TopicSideSelection.tsx @@ -68,7 +68,7 @@ const TopicSideSelection = () => { - + Anything
Side