refactor: SideNav 컴포넌트를 TopNav로 이름 변경 및 레이아웃 수정

chamchi0809 · chamchi0809 · commit 6a75ed6c160f · 2025-09-10T05:49:00.000+09:00
diff --git a/src/components/TopNav.astro b/src/components/TopNav.astro
@@ -1,6 +1,6 @@
 ---
 import {type Icon as IconType, House, Cog} from "@lucide/astro";
-import SideNavItem from "./SideNavItem.astro";
+import TopNavItem from "./TopNavItem.astro";
 
 type MenuItem = {
     name: string;
@@ -22,18 +22,18 @@ const menuItems: MenuItem[] = [
 ];
 ---
 
-<div transition:name="header" class="w-70 h-full flex flex-col bg-[#1e1e1e] border-r border-bright/50 p-8 gap-9 z-40">
-    <div class="w-full flex flex-row items-center">
-        <div class="rounded-full w-12 h-12 bg-[url(/images/anvy_profile.png)] bg-center bg-cover"/>
+<nav transition:name="header" class="w-full flex flex-row justify-between border border-bright/50 rounded-full sticky top-4 px-5 py-3 gap-9 z-40 backdrop-blur-[2px]">
+    <div class="flex flex-row items-center">
+        <div class="rounded-full w-10 h-10 bg-[url(/images/anvy_profile.png)] bg-center bg-cover"/>
         <div class="ml-4">
             <h1 class="text-bright text-lg font-bold">Chamchi</h1>
             <p class="text-bright text-sm">Web & Game Dev</p>
         </div>
     </div>
-    <div class="flex flex-col gap-3">
+    <div class="flex flex-row gap-6">
         {menuItems.map(item =>
-            <SideNavItem icon={item.icon} label={item.name} pathname={item.pathname}>
+            <TopNavItem icon={item.icon} label={item.name} pathname={item.pathname}>
                 <item.icon/>
-            </SideNavItem>)}
+            </TopNavItem>)}
     </div>
-</div>
+</nav>
diff --git a/src/components/TopNavItem.astro b/src/components/TopNavItem.astro
@@ -11,10 +11,9 @@ const {pathname, label, icon} = Astro.props;
 const active = pathname === (Astro.url.pathname.replace(/\/+$/, '') || "/");
 ---
 
-<a href={pathname} class=`p-3 flex flex-row items-center gap-3 cursor-pointer rounded-full text-bright select-none transition-all
-hover:bg-bright hover:text-gray-950
-active:scale-105
-${active && 'bg-bright text-gray-950'}`>
+<a href={pathname} class=`px-4 flex flex-row items-center gap-3 cursor-pointer rounded-full text-bright select-none transition-all
+hover:bg-bright hover:text-gray-950 hover:scale-110
+${active && 'bg-bright text-gray-950 scale-110'}`>
     <slot/>
     <span>{label}</span>
 </a>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,6 +1,6 @@
 ---
 import "../assets/app.css";
-import SideNav from "../components/SideNav.astro";
+import TopNav from "../components/TopNav.astro";
 import {ClientRouter, fade} from "astro:transitions";
 ---
 <!doctype html>
@@ -14,10 +14,12 @@ import {ClientRouter, fade} from "astro:transitions";
     <ClientRouter/>
 </head>
 <body>
-<SideNav/>
-<main transition:animate={fade({duration: '0.4s'})}>
-    <slot/>
-</main>
+<div class="flex flex-col items-center w-full max-w-3xl mx-4">
+    <TopNav/>
+    <main transition:animate={fade({duration: '0.5s'})}>
+        <slot/>
+    </main>
+</div>
 </body>
 </html>
 
@@ -30,11 +32,12 @@ import {ClientRouter, fade} from "astro:transitions";
     body {
         display: flex;
         flex-direction: row;
+        justify-content: center;
         width: 100%;
         height: 100%;
         background-color: #222222;
         opacity: 1;
-        background-image: linear-gradient(rgba(28, 28, 28, 0.64), rgba(28, 28, 28, 0.64)), url('/images/grid-top-right.svg'), linear-gradient(rgba(28, 28, 28, 0.24), rgba(28, 28, 28, 0.24));
+        background-image: linear-gradient(rgba(28, 28, 28, 0.5), rgba(28, 28, 28, 0.5)), url('/images/grid-top-right.svg'), linear-gradient(rgba(28, 28, 28, 0.24), rgba(28, 28, 28, 0.24));
         background-position: center;
         background-size: cover;
     }
