[#443] TopNavigation 컴포넌트 스타일 fixed 적용 (#488)

* feat: TopNavigation 컴포넌트가 항상 상단에 고정되도록 스타일 수정 * typo: 불필요한 공백 제거 * fix: 데스크탑에서도 TopNavigation 이 제대로 보여지도록 수정 * style: TopNavigation 높이 수정
prgrms-web-devcourse · Jun 17, 2024 · 60d3311 · 60d3311
1 parent 313d61a
commit 60d3311
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -14,7 +14,7 @@ const RootLayout = ({ children }: { children: ReactNode }) => {
       </head>
       <body className="app-layout">
         <ContextProvider>
-          <main className={`${LineSeedKR.variable} font-lineseed `}>
+          <main className={`${LineSeedKR.variable} font-lineseed`}>
             {children}
           </main>
         </ContextProvider>

diff --git a/src/v1/base/TopNavigation.tsx b/src/v1/base/TopNavigation.tsx
@@ -8,15 +8,15 @@ type ItemProps = TopNavigationProps;
 
 const TopNavigation = ({ children }: TopNavigationProps) => {
   return (
-    <div className="relative flex h-[2.4rem] w-full items-center justify-center bg-opacity-0 px-[2rem] py-[1.7rem] text-md">
+    <div className="fixed left-0 right-0 top-0 z-50 mx-auto flex h-[2.4rem] w-full max-w-[43rem] items-center justify-center bg-white px-[4rem] py-[2.7rem] text-md">
       {children}
     </div>
   );
 };
 
 const LeftItem = ({ children }: ItemProps) => {
   return (
-    <div className="absolute left-[0rem] flex [&_svg]:h-[2rem] [&_svg]:w-[2rem] [&_svg]:cursor-pointer">
+    <div className="absolute left-[0rem] flex pl-[2rem] [&_svg]:h-[2rem] [&_svg]:w-[2rem] [&_svg]:cursor-pointer">
       {children}
     </div>
   );
@@ -38,7 +38,7 @@ const CenterItem = ({ children, textAlign = 'center' }: CenterItemProps) => {
 
 const RightItem = ({ children }: ItemProps) => {
   return (
-    <div className="absolute right-[0rem] flex gap-[1rem] [&_svg]:h-[2rem] [&_svg]:w-[2rem] [&_svg]:cursor-pointer">
+    <div className="absolute right-[0rem] flex gap-[1rem] pr-[2rem] [&_svg]:h-[2rem] [&_svg]:w-[2rem] [&_svg]:cursor-pointer">
       {children}
     </div>
   );

diff --git a/src/v1/layout/Layout.tsx b/src/v1/layout/Layout.tsx
@@ -19,7 +19,9 @@ const Layout = ({ children }: LayoutProps) => {
   const pathname = usePathname();
   const isRootPath = pathname && rootPaths.includes(pathname);
 
-  const dynamicClass = isRootPath ? 'pb-[6.4rem] pt-[2rem]' : 'py-[2rem]';
+  const dynamicClass = isRootPath
+    ? 'pb-[6.4rem] pt-[2rem]'
+    : 'pt-[5.4rem] pb-[2rem]';
 
   return (
     <>