style: #39 - Header 컴포넌트 상단 고정

Team-TenTen · Nov 5, 2023 · 38ac31a · 38ac31a
1 parent d079efc
commit 38ac31a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -21,7 +21,7 @@ export default function RootLayout({
             id="root"
             className="relative mx-auto w-full max-w-[500px]">
             <Header />
-            <main>{children}</main>
+            <main className="pt-[53px]">{children}</main>
           </div>
         </Providers>
       </body>

diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
@@ -19,30 +19,30 @@ const Header = () => {
 
   return (
     <>
-      <div className="flex items-center justify-between bg-bgColor">
+      <div className="fixed z-10 flex w-full max-w-[500px] items-center justify-between border-b border-slate-100 bg-bgColor px-4 py-2.5 dark:border-slate-800">
         <div className="flex items-center justify-center">
           <Button>
             <Link href="/">
-              <LinkIcon className="h-8 w-8" />
+              <LinkIcon className="h-8 w-8 text-slate9" />
             </Link>
           </Button>
         </div>
-        <div className="absolute left-1/2 flex -translate-x-1/2 items-center justify-center">
+        <div className="absolute left-1/2 flex -translate-x-1/2 items-center justify-center font-bold text-gray9">
           {currentPage || 'Home'}
         </div>
-        <div className="flex items-center justify-center">
+        <div className="flex items-center justify-center gap-x-1">
           <Button className="flex h-8 w-8 items-center justify-center">
             <Link href="/notification">
-              <BellIcon className="h-6 w-6" />
+              <BellIcon className="h-6 w-6 text-slate9" />
             </Link>
           </Button>
           <Button className="flex h-8 w-8 items-center justify-center">
-            <MagnifyingGlassCircleIcon className="h-6 w-6" />
+            <MagnifyingGlassCircleIcon className="h-6 w-6 text-slate9" />
           </Button>
           <Button
             className="flex h-8 w-8 items-center justify-center"
             onClick={() => setIsSidebarOpen(true)}>
-            <Bars3Icon className="h-6 w-6" />
+            <Bars3Icon className="h-6 w-6 text-slate9" />
           </Button>
         </div>
       </div>