Skip to content

Commit 718ffaf

Browse files
kangsuyeongkangsuyeong
authored
Merge pull request #306 from prgrms-web-devcourse-final-project/refactor/nav-bar
[refactor] nav-bar 리펙토링
2 parents 5007853 + eb7114d commit 718ffaf

File tree

6 files changed

+78
-86
lines changed

6 files changed

+78
-86
lines changed

‎src/assets/icons/nav/HomeActive.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React from 'react';
21
import { motion } from 'framer-motion';
32

4-
const HomeActive: React.FC = () => {
3+
const HomeActive = () => {
54
return (
65
<motion.svg
76
width="24"

‎src/assets/icons/nav/index.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
import ChatActive from './ChatActive';
12
import chatDefault from './chat-default.svg';
2-
import chatActive from './chat-active.svg';
33
import homeDefault from './home-default.svg';
4-
import homeActive from './home-active.svg';
54
import mypageDefault from './mypage-default.svg';
6-
import mypageActive from './mypage-active.svg';
5+
import MyPageActive from './MyPageActive';
6+
import HomeActive from './HomeActive';
77

8-
export { chatDefault, chatActive, homeDefault, homeActive, mypageDefault, mypageActive };
8+
export { chatDefault, homeDefault, mypageDefault, ChatActive, MyPageActive, HomeActive };

‎src/layouts/Layout.tsx‎

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,19 @@
1-
import { Outlet, useLocation } from 'react-router';
1+
import { Outlet } from 'react-router';
22
import { twMerge } from 'tailwind-merge';
33
import PostButton from '@/components/PostButton';
44
import MyErrorBoundary from '@/components/ErrorBoundary';
5-
import BottomNavWrapper from '@/layouts/bottomNav/BottomNavWrapper';
65
import HeaderWrapper from '@/layouts/header/HeaderWrapper';
76
import { AnimatePresence, motion } from 'framer-motion';
7+
import BottomNav from '@/layouts/bottomNav/BottomNav';
88

99
function Layout() {
10-
const location = useLocation(); // 현재 URL 가져오기
11-
//바텀 nav 바 필요한 페이지
12-
const showNav =
13-
//메인 페이지
14-
location.pathname === '/home' ||
15-
//마이 페이지
16-
location.pathname === '/mypage' ||
17-
//유저 페이지
18-
location.pathname.includes('/user') ||
19-
//지난 대화 기록 페이지
20-
location.pathname === '/chat';
21-
2210
return (
2311
<div className="max-w-[600px] min-w-[320px] w-full bg-background flex min-h-screen mx-auto">
2412
{/* 헤더 */}
2513
<HeaderWrapper />
2614

2715
{/* 메인 컨텐츠 영역 */}
28-
<div
29-
className={twMerge(
30-
'pt-[44px] flex-1 flex justify-center w-full px-3',
31-
showNav && 'pb-[62px] ', // 하단 네비게이션 숨길때만 padding주기
32-
)}
33-
>
16+
<div className={twMerge('pt-[44px] flex-1 flex justify-center w-full px-3')}>
3417
<MyErrorBoundary>
3518
<AnimatePresence mode="wait">
3619
<motion.div
@@ -47,7 +30,7 @@ function Layout() {
4730
</div>
4831

4932
{/* 하단 네비게이션 */}
50-
<BottomNavWrapper />
33+
<BottomNav />
5134
{/* 글작성 버튼 */}
5235
<PostButton />
5336
</div>

‎src/layouts/bottomNav/BottomNav.tsx‎

Lines changed: 67 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,84 @@
1-
import { NavLink } from 'react-router';
2-
import { chatDefault, homeDefault, mypageDefault } from '@/assets/icons/nav';
3-
import { twMerge } from 'tailwind-merge';
4-
import HomeActive from '@/assets/icons/nav/HomeActive';
5-
import ChatActive from '@/assets/icons/nav/ChatActive';
6-
import MyPageActive from '@/assets/icons/nav/MyPageActive';
1+
import { NavLink, useLocation } from 'react-router';
2+
import {
3+
chatDefault,
4+
homeDefault,
5+
mypageDefault,
6+
HomeActive,
7+
ChatActive,
8+
MyPageActive,
9+
} from '@/assets/icons/nav';
10+
import { cn } from '@/utils';
711

812
const navItems = [
9-
{ path: '/home', label: '홈', icons: { default: homeDefault, active: <HomeActive /> } },
13+
{
14+
path: '/home',
15+
label: '홈',
16+
icons: {
17+
default: <img src={homeDefault} alt="홈 아이콘" className="w-6 h-6" />,
18+
active: <HomeActive />,
19+
},
20+
},
1021
{
1122
path: '/chat',
1223
label: '채팅',
13-
icons: { default: chatDefault, active: <ChatActive /> },
24+
icons: {
25+
default: <img src={chatDefault} alt="채팅 아이콘" className="w-6 h-6" />,
26+
active: <ChatActive />,
27+
},
1428
},
1529
{
1630
path: '/mypage',
1731
label: '마이페이지',
18-
icons: { default: mypageDefault, active: <MyPageActive /> },
32+
icons: {
33+
default: <img src={mypageDefault} alt="마이페이지 아이콘" className="w-6 h-6" />,
34+
active: <MyPageActive />,
35+
},
1936
},
2037
];
2138

2239
export default function BottomNav() {
40+
const location = useLocation(); // 현재 URL 가져오기
41+
//바텀 nav 바 필요한 페이지
42+
const showNav =
43+
//메인 페이지
44+
location.pathname === '/home' ||
45+
//마이 페이지
46+
location.pathname === '/mypage' ||
47+
//유저 페이지
48+
location.pathname.startsWith('/user') ||
49+
//지난 대화 기록 페이지
50+
location.pathname === '/chat';
51+
52+
if (!showNav) return null;
53+
2354
return (
24-
<nav className="fixed bottom-padding-nav bottom-0 left-1/2 -translate-x-1/2 z-40 flex max-w-[600px] min-w-[320px] w-full bg-secondary-1 py-1">
25-
{navItems.map(({ path, label, icons }) => (
26-
<NavLink
27-
key={path}
28-
to={path}
29-
className="flex-1 flex flex-col items-center justify-center gap-0.5 py-0.5 hover:brightness-120 transition"
30-
>
31-
{({ isActive }) => (
32-
<>
33-
{isActive ? (
34-
icons.active
35-
) : (
36-
<img src={icons.default} className="w-6 h-6" alt={`${label} Icon`} />
37-
)}
55+
<>
56+
<nav className="fixed bottom-padding-nav bottom-0 left-1/2 -translate-x-1/2 z-40 flex max-w-[600px] min-w-[320px] w-full bg-secondary-1 pt-1">
57+
{navItems.map(({ path, label, icons }) => (
58+
<NavLink
59+
key={path}
60+
to={path}
61+
className="flex-1 flex flex-col items-center justify-center gap-0.5 py-0.5 hover:brightness-120 transition"
62+
>
63+
{({ isActive }) => (
64+
<>
65+
{isActive ? icons.active : icons.default}
66+
<span
67+
className={cn(
68+
'text-[10px] leading-[18px',
69+
isActive ? 'text-primary-active' : 'text-gray-50',
70+
)}
71+
>
72+
{label}
73+
</span>
74+
</>
75+
)}
76+
</NavLink>
77+
))}
78+
</nav>
3879

39-
<span
40-
className={twMerge(
41-
'text-[10px] leading-[18px] text-gray-50',
42-
isActive && 'text-primary-active',
43-
)}
44-
>
45-
{label}
46-
</span>
47-
</>
48-
)}
49-
</NavLink>
50-
))}
51-
</nav>
80+
{/* Spacer: 콘텐츠가 하단바에 가려지지 않도록 */}
81+
<div className="h-[62px]" />
82+
</>
5283
);
5384
}

‎src/layouts/bottomNav/BottomNavWrapper.tsx‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎src/styles/tailwind.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@
5353
stroke-dashoffset: 0;
5454
}
5555
}
56-
5756
}
5857
@layer utilities {
5958
.bg-background {
@@ -70,8 +69,8 @@
7069
}
7170
.bottom-padding-nav {
7271
padding-bottom: calc(
73-
env(safe-area-inset-bottom, 16px) + 16px
74-
); /* 기본 16px, 홈 인디케이터 대응 */
72+
env(safe-area-inset-bottom, 20px) + 20px
73+
); /* 기본 20px, 홈 인디케이터 대응 */
7574
}
7675
.bottom-padding-chat {
7776
padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 92px);

0 commit comments

Comments
 (0)