Skip to content

Commit ec0ae71

Browse files
gustn99gustn99
committed
Refactor: NavBar 리팩토링
1 parent 95b30f0 commit ec0ae71

4 files changed

Lines changed: 76 additions & 53 deletions

File tree

‎src/components/Icons/Home.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,29 @@
11
import React from 'react';
22
import type { IconsProps } from './dto';
33

4-
const Home: React.FC<IconsProps> = ({ color = '', isFilled = false }) => {
4+
const Home: React.FC<IconsProps> = ({ color = '', isFilled = false, width, height }) => {
55
return (
66
<>
77
{isFilled ? ( // isFilled가 true일 때 원하는 색 사용 (desktopNavBar의 home-fill는 color을 black으로, default는 color을 white로)
8-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="1 0 14 14" fill="none">
8+
<svg
9+
xmlns="http://www.w3.org/2000/svg"
10+
width={width || 14}
11+
height={height || 14}
12+
viewBox="1 0 14 14"
13+
fill="none"
14+
>
915
<path d="M8 2.6425L11.75 6.0175V11.875H10.25V7.375H5.75V11.875H4.25V6.0175L8 2.6425Z" fill={color} />
1016
<path d="M8 0.625L0.5 7.375H2.75V13.375H7.25V8.875H8.75V13.375H13.25V7.375H15.5L8 0.625Z" fill={color} />
1117
</svg>
1218
) : (
1319
// isFilled가 false일 때 원하는 색 사용 (desktopNavBar의 home은은 color을 black으로, default는 color을 white로)
14-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="1 0 14 14" fill="none">
20+
<svg
21+
xmlns="http://www.w3.org/2000/svg"
22+
width={width || 14}
23+
height={height || 14}
24+
viewBox="1 0 14 14"
25+
fill="none"
26+
>
1527
<path
1628
d="M8 2.6425L11.75 6.0175V11.875H10.25V7.375H5.75V11.875H4.25V6.0175L8 2.6425ZM8 0.625L0.5 7.375H2.75V13.375H7.25V8.875H8.75V13.375H13.25V7.375H15.5L8 0.625Z"
1729
fill={color}

‎src/components/Icons/Message.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import React from 'react';
22
import type { IconsProps } from './dto';
33

4-
const Message: React.FC<IconsProps> = ({ color = '', isFilled = false }) => {
4+
const Message: React.FC<IconsProps> = ({ color = '', isFilled = false, width, height }) => {
55
return (
66
<>
77
{isFilled ? ( // isFilled가 true일 때 원하는 색 사용 (desktopNavBar의 message-fill는 color을 black으로, default는 color을 white로)
8-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none">
8+
<svg
9+
xmlns="http://www.w3.org/2000/svg"
10+
width={width || 14}
11+
height={height || 12}
12+
viewBox="0 0 14 12"
13+
fill="none"
14+
>
915
<path
1016
d="M12.4 0.25H1.6C0.8575 0.25 0.25 0.8575 0.25 1.6V13.75L2.95 11.05H12.4C13.1425 11.05 13.75 10.4425 13.75 9.7V1.6C13.75 0.8575 13.1425 0.25 12.4 0.25Z"
1117
fill={color}
@@ -15,7 +21,13 @@ const Message: React.FC<IconsProps> = ({ color = '', isFilled = false }) => {
1521
</svg>
1622
) : (
1723
// isFilled가 false일 때 원하는 색 사용 (desktopNavBar의 message는 color을 black으로, default는 color을 #8E8E8E로, default의 message-white는 color을 white로)
18-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none">
24+
<svg
25+
xmlns="http://www.w3.org/2000/svg"
26+
width={width || 14}
27+
height={height || 12}
28+
viewBox="0 0 14 12"
29+
fill="none"
30+
>
1931
<path
2032
d="M12.4 0.25H1.6C0.8575 0.25 0.25 0.8575 0.25 1.6V13.75L2.95 11.05H12.4C13.1425 11.05 13.75 10.4425 13.75 9.7V1.6C13.75 0.8575 13.1425 0.25 12.4 0.25ZM12.4 9.7H2.95L1.6 11.05V1.6H12.4V9.7Z"
2133
fill={color}

‎src/components/NavBar/index.tsx‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,54 +3,56 @@ import { useLocation, useNavigate } from 'react-router-dom';
33
import {
44
NavBarContainer,
55
NavBarWrapper,
6-
IconImg,
76
IconWrapper,
87
SideNavBarContainer,
98
SideNavBarList,
109
SideNavBarItem,
1110
SideNavBarButton,
1211
SideNavBarHeader,
1312
SideNavBarFooter,
13+
Icon,
1414
} from './styles';
15-
import Chat_s from './../../assets/default/message-white.svg';
16-
import Chat_f from './../../assets/default/message-fill.svg';
17-
import Home_s from './../../assets/default/home.svg';
18-
import Home_f from './../../assets/default/home-fill.svg';
19-
import Profile_s from './../../assets/default/my-page-white.svg';
20-
import Profile_f from './../../assets/default/my-page-fill.svg';
21-
import logo from './../../assets/default/oodd.svg';
22-
import alarm from './../../assets/default/alarm.svg';
23-
// import clickedAlarm from './../../assets/default/alarm-on.svg';
24-
import chatDesktopIcon from './../../assets/default/desktopNavBar/message.svg';
25-
import chatFillDesktopIcon from './../../assets/default/desktopNavBar/message-fill.svg';
26-
import homeDesktopIcon from './../../assets/default/desktopNavBar/home.svg';
27-
import homeFillDesktopIcon from './../../assets/default/desktopNavBar/home-fill.svg';
28-
import profileDesktopIcon from './../../assets/default/desktopNavBar/my-page.svg';
29-
import profileFillDesktopIcon from './../../assets/default/desktopNavBar/my-page-fill.svg';
30-
import logout from './../../assets/default/leave.svg';
31-
import { StyledText } from '../Text/StyledText';
32-
import Modal from '../Modal';
33-
import { ModalProps } from '../Modal/dto';
34-
35-
const userId = localStorage.getItem('my_id');
36-
37-
const tabs = [
38-
{ name: 'Chats', iconSelected: Chat_f, iconUnselected: Chat_s, route: '/chats' },
39-
{ name: 'Home', iconSelected: Home_f, iconUnselected: Home_s, route: '/' },
40-
{ name: 'Profile', iconSelected: Profile_f, iconUnselected: Profile_s, route: `/profile/${userId}` },
41-
];
42-
43-
const desktopTabs = [
44-
{ name: 'Home', iconSelected: homeFillDesktopIcon, iconUnselected: homeDesktopIcon, route: '/' },
45-
{ name: 'Chats', iconSelected: chatFillDesktopIcon, iconUnselected: chatDesktopIcon, route: '/chats' },
46-
{ name: 'Profile', iconSelected: profileFillDesktopIcon, iconUnselected: profileDesktopIcon, route: `/profile/${userId}` },
47-
];
15+
import Message from '@components/Icons/Message';
16+
import Home from '@components/Icons/Home';
17+
import MyPage from '@components/Icons/MyPage';
18+
import Alarm from '@components/Icons/Alarm';
19+
import logo from '@assets/default/oodd.svg';
20+
import logout from '@assets/default/leave.svg';
21+
import { StyledText } from '@components/Text/StyledText';
22+
import Modal from '@components/Modal';
23+
import type { ModalProps } from '@components/Modal/dto';
24+
import { getCurrentUserId } from '@utils/getCurrentUserId';
4825

4926
const NavBar: React.FC = () => {
50-
const [selectedTab, setSelectedTab] = useState('');
5127
const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
28+
const [selectedTab, setSelectedTab] = useState('');
5229
const navigate = useNavigate();
5330
const location = useLocation();
31+
const currentUserId = getCurrentUserId();
32+
33+
const tabs = [
34+
{
35+
name: 'Chats',
36+
Icon: (isSelected: boolean, isDesktop: boolean) => (
37+
<Message isFilled={isSelected} color={isDesktop ? 'black' : 'white'} width="16" height="16" />
38+
),
39+
route: '/chats',
40+
},
41+
{
42+
name: 'Home',
43+
Icon: (isSelected: boolean, isDesktop: boolean) => (
44+
<Home isFilled={isSelected} color={isDesktop ? 'black' : 'white'} width="18" height="18" />
45+
),
46+
route: '/',
47+
},
48+
{
49+
name: 'Profile',
50+
Icon: (isSelected: boolean, isDesktop: boolean) => (
51+
<MyPage isFilled={isSelected} color={isDesktop ? 'black' : 'white'} />
52+
),
53+
route: `/profile/${currentUserId}`,
54+
},
55+
];
5456

5557
useEffect(() => {
5658
const currentTab = tabs.find((tab) => tab.route === location.pathname);
@@ -68,7 +70,7 @@ const NavBar: React.FC = () => {
6870
}
6971
};
7072

71-
const handleConfirmLogout = () => {
73+
const handleLogoutConfirmButtonClick = () => {
7274
localStorage.clear();
7375
setIsLogoutModalOpen(false);
7476

@@ -87,18 +89,17 @@ const NavBar: React.FC = () => {
8789
content: '이 기기에서 정말 로그아웃 할까요?',
8890
button: {
8991
content: '로그아웃',
90-
onClick: handleConfirmLogout,
92+
onClick: handleLogoutConfirmButtonClick,
9193
},
9294
};
9395

9496
return (
9597
<>
96-
{isLogoutModalOpen && <Modal {...logoutModalProps} />}
9798
<NavBarContainer>
9899
<NavBarWrapper>
99100
{tabs.map((tab) => (
100101
<IconWrapper key={tab.name} onClick={() => handleTabClick(tab)}>
101-
<IconImg src={selectedTab === tab.name ? tab.iconSelected : tab.iconUnselected} />
102+
<Icon>{tab.Icon(selectedTab === tab.name, false)}</Icon>
102103
<p>{tab.name}</p>
103104
</IconWrapper>
104105
))}
@@ -108,16 +109,14 @@ const NavBar: React.FC = () => {
108109
<SideNavBarHeader>
109110
<img src={logo} alt="oodd" className="logo" />
110111
<button className="alarm">
111-
<img src={alarm} alt="알림" />
112+
<Alarm></Alarm>
112113
</button>
113114
</SideNavBarHeader>
114115
<SideNavBarList>
115-
{desktopTabs.map((tab) => (
116+
{tabs.map((tab) => (
116117
<SideNavBarItem key={tab.name} onClick={() => handleTabClick(tab)}>
117118
<SideNavBarButton>
118-
<button>
119-
<img src={selectedTab === tab.name ? tab.iconSelected : tab.iconUnselected} />
120-
</button>
119+
<button>{tab.Icon(selectedTab === tab.name, true)}</button>
121120
<StyledText
122121
className="styled-text"
123122
$textTheme={{ style: selectedTab === tab.name ? `heading2-bold` : 'heading2-medium' }}
@@ -132,11 +131,12 @@ const NavBar: React.FC = () => {
132131
<SideNavBarFooter>
133132
<SideNavBarButton onClick={handleLogoutButtonClick}>
134133
<button>
135-
<img src={logout} alt="" />
134+
<img src={logout} alt="로그아웃" />
136135
</button>
137136
</SideNavBarButton>
138137
</SideNavBarFooter>
139138
</SideNavBarContainer>
139+
{isLogoutModalOpen && <Modal {...logoutModalProps} />}
140140
</>
141141
);
142142
};

‎src/components/NavBar/styles.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ export const IconWrapper = styled.div`
3535
cursor: pointer;
3636
gap: 10px;
3737
38-
3938
p {
4039
margin: 0;
4140
bottom: 0;
@@ -49,7 +48,7 @@ export const IconWrapper = styled.div`
4948
}
5049
`;
5150

52-
export const IconImg = styled.img`
51+
export const Icon = styled.div`
5352
width: 1.13rem;
5453
height: 1.13rem;
5554
object-fit: cover;

0 commit comments

Comments
 (0)