Merge pull request #127 from LEEJW1953/fe-header

[Feat] 헤더 상단 고정 및 z-index 수정

app/frontend/src/components/commons/Header/index.css.ts

@@ -3,10 +3,16 @@ import { style } from '@vanilla-extract/css';
 import { vars, fontStyle } from '@/styles';
 
 export const container = style({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  right: 0,
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
+  background: vars.color.grayscaleWhite,
   borderBottom: `1px solid ${vars.color.grayscale100}`,
+  zIndex: '999',
 });
 
 export const header = style({

app/frontend/src/components/commons/Layout/index.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  paddingTop: '8.5rem',
+});

app/frontend/src/components/commons/Layout/index.tsx

@@ -1,12 +1,15 @@
 import { Outlet } from 'react-router-dom';
 
+import * as styles from './index.css';
 import { Header } from '../Header';
 
 export function Layout() {
   return (
     <>
       <Header />
-      <Outlet />
+      <div className={styles.container}>
+        <Outlet />
+      </div>
     </>
   );
 }