[Design]: 네비게이션바 글자크기 확대 및 메뉴명 수정

ssh/src/components/Layout/Header/index.tsx

@@ -1,6 +1,4 @@
 import { Link, useLocation } from 'react-router-dom';
-import { Menubar, MenubarMenu, MenubarTrigger } from '@/components/ui/menubar';
-import { Button } from '@/components/ui/button';
 import { ROUTING_PATH } from '@/routes/path.constants';
 import { MessageSquare, CircleUserRound } from 'lucide-react';
 
@@ -14,64 +12,67 @@ export default function Header() {
     { label: '채팅하기', seg: ROUTING_PATH.chatbot },
     { label: '보이스피싱 진단', seg: ROUTING_PATH.voicephishing },
     { label: '주변 ATM 찾기', seg: ROUTING_PATH.atmmap },
-    { label: '기부', seg: ROUTING_PATH.donation },
+    { label: '유산 기부', seg: ROUTING_PATH.donation },
   ] as const;
 
   const isActive = (seg: string) => {
     const abs = toAbs(seg);
     return abs === '/' ? pathname === '/' : pathname.startsWith(abs);
   };
 
+  const basePill =
+    'inline-flex items-center gap-2 rounded-full font-semibold leading-none ' +
+    'transition-colors duration-100 ease-out ' +
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ' +
+    'px-8 py-3 text-lg';
+  const activePill = 'bg-primary/10 text-primary ring-1 ring-primary/20';
+  const inactivePill = 'text-foreground/70 hover:bg-muted active:bg-muted/80';
+
   return (
-    <header className="fixed top-0 z-50 w-full bg-background/80 backdrop-blur">
-      <div className="mx-auto flex h-16 w-full max-w-screen-xl items-center justify-between px-6">
-        <Menubar className="border-transparent bg-transparent p-0 shadow-none">
-          {NAV.map((item) => {
-            const href = toAbs(item.seg);
-            return (
-              <MenubarMenu key={item.label}>
-                <MenubarTrigger
-                  asChild
-                  aria-current={isActive(item.seg) ? 'page' : undefined}
-                  className={[
-                    'cursor-pointer rounded-full px-4 py-2 text-sm font-medium transition-colors',
-                    isActive(item.seg)
-                      ? 'bg-primary/10 text-primary'
-                      : 'text-muted-foreground hover:bg-muted',
-                  ].join(' ')}
+    <header className="fixed top-0 z-50 w-full bg-background/90 backdrop-blur supports-[backdrop-filter]:backdrop-blur">
+      <div className="mx-auto w-full max-w-screen-xl px-8 py-4">
+        <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+          <nav className="flex flex-wrap items-center gap-3">
+            {NAV.map((item) => {
+              const href = toAbs(item.seg);
+              const active = isActive(item.seg);
+              return (
+                <Link
+                  key={item.label}
+                  to={href}
+                  aria-current={active ? 'page' : undefined}
+                  className={[basePill, active ? activePill : inactivePill].join(' ')}
                 >
-                  <Link to={href}>{item.label}</Link>
-                </MenubarTrigger>
-              </MenubarMenu>
-            );
-          })}
-        </Menubar>
+                  {item.label}
+                </Link>
+              );
+            })}
+          </nav>
 
-        <div className="flex items-center gap-4">
-          <Button
-            variant="ghost"
-            asChild
-            className="rounded-full px-4 py-2 text-sm font-medium transition-colors"
-          >
+          <nav className="flex items-center gap-3">
             <Link
               to={toAbs(ROUTING_PATH.setting)}
-              className={
-                isActive(ROUTING_PATH.setting)
-                  ? 'bg-primary/10 text-primary'
-                  : 'text-muted-foreground hover:bg-muted'
-              }
+              aria-current={isActive(ROUTING_PATH.setting) ? 'page' : undefined}
+              className={[
+                basePill,
+                isActive(ROUTING_PATH.setting) ? activePill : inactivePill,
+              ].join(' ')}
             >
-              <CircleUserRound className="mr-2 h-4 w-4" />
+              <CircleUserRound className="h-5 w-5" />
               로그인/회원가입
             </Link>
-          </Button>
 
-          <Button size="sm" className="rounded-full" asChild>
-            <Link to={toAbs(ROUTING_PATH.chatbot)}>
-              <MessageSquare className="mr-2 h-4 w-4" />
+            <Link
+              to={toAbs(ROUTING_PATH.chatbot)}
+              className={[
+                basePill,
+                'bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/95',
+              ].join(' ')}
+            >
+              <MessageSquare className="h-5 w-5" />
               채팅 시작하기
             </Link>
-          </Button>
+          </nav>
         </div>
       </div>
     </header>

ssh/src/components/Layout/index.tsx

@@ -1,12 +1,12 @@
-import { Outlet } from "react-router-dom";
-import Header from "@/components/Layout/Header";
-import Footer from "@/components/Layout/Footer";
+import { Outlet } from 'react-router-dom';
+import Header from '@/components/Layout/Header';
+import Footer from '@/components/Layout/Footer';
 
 export default function RootLayout() {
   return (
     <>
       <Header />
-      <main className="w-full pt-20">
+      <main className="w-full pt-24">
         <Outlet />
       </main>
       <Footer />