페이지 UI: 메인 페이지

package.json

@@ -28,7 +28,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.49.2",
     "react-redux": "^9.0.4",
-    "swiper": "^10"
+    "swiper": "^11"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.6",
@@ -75,4 +75,4 @@
   "msw": {
     "workerDirectory": "public"
   }
-}
+}

src/app/globals.css

@@ -14,6 +14,7 @@
   --pink: #F67272;
 
   /* -------------- z-index -------------- */
+  --header-zindex: 2;
   --dimmed-zindex: 10;
   --modal-zindex: 11;
 }

src/app/page.module.scss

@@ -0,0 +1,32 @@
+.headerWrapper {
+  padding: 0 24px;
+
+  .header {
+    z-index: 999;
+  }
+}
+
+.mainContainer {
+  .searchBarWrapper {
+    padding: 0 24px;
+  }
+
+  .bannerWrapper {
+    max-height: 140px;
+    overflow-y: hidden;
+  }
+
+  .recommandTextWrapper {
+    padding: 0 24px;
+  }
+
+  .productListContainer {
+    padding: 0 24px 80px;
+
+    .productArticleContainer {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+    }
+  }
+}