refactor: Navbar 리펙토링

Author: kangsuyeong

src/layouts/Layout.tsx

@@ -1,36 +1,19 @@
-import { Outlet, useLocation } from 'react-router';
+import { Outlet } from 'react-router';
 import { twMerge } from 'tailwind-merge';
 import PostButton from '@/components/PostButton';
 import MyErrorBoundary from '@/components/ErrorBoundary';
-import BottomNavWrapper from '@/layouts/bottomNav/BottomNavWrapper';
 import HeaderWrapper from '@/layouts/header/HeaderWrapper';
 import { AnimatePresence, motion } from 'framer-motion';
+import BottomNav from '@/layouts/bottomNav/BottomNav';
 
 function Layout() {
-  const location = useLocation(); // 현재 URL 가져오기
-  //바텀 nav 바 필요한 페이지
-  const showNav =
-    //메인 페이지
-    location.pathname === '/home' ||
-    //마이 페이지
-    location.pathname === '/mypage' ||
-    //유저 페이지
-    location.pathname.includes('/user') ||
-    //지난 대화 기록 페이지
-    location.pathname === '/chat';
-
   return (
     <div className="max-w-[600px] min-w-[320px] w-full bg-background flex min-h-screen mx-auto">
       {/* 헤더 */}
       <HeaderWrapper />
 
       {/* 메인 컨텐츠 영역 */}
-      <div
-        className={twMerge(
-          'pt-[44px] flex-1 flex justify-center w-full px-3',
-          showNav && 'pb-[62px] ', // 하단 네비게이션 숨길때만 padding주기
-        )}
-      >
+      <div className={twMerge('pt-[44px] flex-1 flex justify-center w-full px-3')}>
         <MyErrorBoundary>
           <AnimatePresence mode="wait">
             <motion.div
@@ -47,7 +30,7 @@ function Layout() {
       </div>
 
       {/* 하단 네비게이션 */}
-      <BottomNavWrapper />
+      <BottomNav />
       {/* 글작성 버튼 */}
       <PostButton />
     </div>

src/layouts/bottomNav/BottomNav.tsx

@@ -1,53 +1,84 @@
-import { NavLink } from 'react-router';
-import { chatDefault, homeDefault, mypageDefault } from '@/assets/icons/nav';
-import { twMerge } from 'tailwind-merge';
-import HomeActive from '@/assets/icons/nav/HomeActive';
-import ChatActive from '@/assets/icons/nav/ChatActive';
-import MyPageActive from '@/assets/icons/nav/MyPageActive';
+import { NavLink, useLocation } from 'react-router';
+import {
+  chatDefault,
+  homeDefault,
+  mypageDefault,
+  HomeActive,
+  ChatActive,
+  MyPageActive,
+} from '@/assets/icons/nav';
+import { cn } from '@/utils';
 
 const navItems = [
-  { path: '/home', label: '홈', icons: { default: homeDefault, active: <HomeActive /> } },
+  {
+    path: '/home',
+    label: '홈',
+    icons: {
+      default: <img src={homeDefault} alt="홈 아이콘" className="w-6 h-6" />,
+      active: <HomeActive />,
+    },
+  },
   {
     path: '/chat',
     label: '채팅',
-    icons: { default: chatDefault, active: <ChatActive /> },
+    icons: {
+      default: <img src={chatDefault} alt="채팅 아이콘" className="w-6 h-6" />,
+      active: <ChatActive />,
+    },
   },
   {
     path: '/mypage',
     label: '마이페이지',
-    icons: { default: mypageDefault, active: <MyPageActive /> },
+    icons: {
+      default: <img src={mypageDefault} alt="마이페이지 아이콘" className="w-6 h-6" />,
+      active: <MyPageActive />,
+    },
   },
 ];
 
 export default function BottomNav() {
+  const location = useLocation(); // 현재 URL 가져오기
+  //바텀 nav 바 필요한 페이지
+  const showNav =
+    //메인 페이지
+    location.pathname === '/home' ||
+    //마이 페이지
+    location.pathname === '/mypage' ||
+    //유저 페이지
+    location.pathname.startsWith('/user') ||
+    //지난 대화 기록 페이지
+    location.pathname === '/chat';
+
+  if (!showNav) return null;
+
   return (
-    <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">
-      {navItems.map(({ path, label, icons }) => (
-        <NavLink
-          key={path}
-          to={path}
-          className="flex-1 flex flex-col items-center justify-center gap-0.5 py-0.5 hover:brightness-120 transition"
-        >
-          {({ isActive }) => (
-            <>
-              {isActive ? (
-                icons.active
-              ) : (
-                <img src={icons.default} className="w-6 h-6" alt={`${label} Icon`} />
-              )}
+    <>
+      <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">
+        {navItems.map(({ path, label, icons }) => (
+          <NavLink
+            key={path}
+            to={path}
+            className="flex-1 flex flex-col items-center justify-center gap-0.5 py-0.5 hover:brightness-120 transition"
+          >
+            {({ isActive }) => (
+              <>
+                {isActive ? icons.active : icons.default}
+                <span
+                  className={cn(
+                    'text-[10px] leading-[18px',
+                    isActive ? 'text-primary-active' : 'text-gray-50',
+                  )}
+                >
+                  {label}
+                </span>
+              </>
+            )}
+          </NavLink>
+        ))}
+      </nav>
 
-              <span
-                className={twMerge(
-                  'text-[10px] leading-[18px] text-gray-50',
-                  isActive && 'text-primary-active',
-                )}
-              >
-                {label}
-              </span>
-            </>
-          )}
-        </NavLink>
-      ))}
-    </nav>
+      {/* Spacer: 콘텐츠가 하단바에 가려지지 않도록 */}
+      <div className="h-[62px]" />
+    </>
   );
 }