style: 레이아웃 스타일 통합 및 전역 zoom 적용

Author: KyeongJooni

src/app/layout/MainLayout.tsx

@@ -5,7 +5,9 @@ export default function MainLayout() {
   return (
     <div className="min-h-screen bg-white">
       <Header />
-      <Outlet />
+      <div className="pt-spacing-header-content)">
+        <Outlet />
+      </div>
     </div>
   );
 }

src/app/styles/index.css

@@ -92,11 +92,15 @@
   --radius-l: 24px;
   --radius-m: 16px;
   --radius-s: 8px;
+
+  /* Layout */
+  --spacing-header-content: 54px;
 }
 
 @layer base {
   html {
     font-family: var(--font-sans);
+    zoom: 0.9;
   }
 
   /* View Transitions */

src/pages/main/ui/MainPage.tsx

@@ -11,7 +11,7 @@ export default function MainPage() {
   const navigate = useNavigate();
 
   return (
-    <main className="flex w-full flex-col items-center gap-14 px-4 pt-8 pb-24">
+    <main className="flex w-full flex-col items-center gap-14 px-4 pb-24">
       <section className="h-79.25 w-full max-w-300" aria-label="메인 슬로건 영역">
         <ClientOnly>
           <Carousel3D slides={CAROUSEL_SLIDES} />

src/pages/sell/ui/SellPage.tsx

@@ -5,7 +5,7 @@ const SellPage = () => {
   return (
     <div className="w-full bg-white">
       <div className="mx-auto min-h-screen w-full max-w-[1440px] bg-white px-4 pb-[112px] md:px-[120px]">
-        <main className="mt-[55px] flex flex-col">
+        <main className="flex flex-col">
           <SellPageHeader />
           <SellForm />
         </main>

src/pages/sell/ui/SellPageHeader.tsx

@@ -1,6 +1,6 @@
 export const SellPageHeader = () => {
   return (
-    <section className="flex h-[266px] items-center justify-center bg-[linear-gradient(180deg,var(--color-brand-primary)_0%,var(--color-white)_100%)] py-[67px]">
+    <section className="rounded-t-l flex h-[266px] items-center justify-center bg-[linear-gradient(180deg,var(--color-brand-primary)_0%,var(--color-white)_100%)] py-[67px]">
       <div className="gap-xxs flex w-full max-w-[1200px] flex-col items-center text-center">
         <h1 className="typo-title-1 text-gray-900">나의 전자 기기 판매하기</h1>
       </div>

src/shared/ui/Header/Header.variants.ts

@@ -5,7 +5,18 @@ const baseButton = ['bg-transparent', 'cursor-pointer'];
 export const headerVariants = tv({
   slots: {
     // Layout
-    root: ['flex', 'w-full', 'h-[92px]', 'justify-between', 'items-center', 'bg-white', 'px-10', 'xl:px-[120px]'],
+    root: [
+      'flex',
+      'w-full',
+      'max-w-[1440px]',
+      'mx-auto',
+      'h-[92px]',
+      'justify-between',
+      'items-center',
+      'bg-white',
+      'px-10',
+      'xl:px-[120px]',
+    ],
     logo: ['w-[192px]', 'h-[36px]', 'shrink-0'],
 
     // Desktop Navigation