[FEAT] 메인페이지 퍼블리싱

src/components/card/lookCard/lookCard.css.ts

@@ -8,6 +8,7 @@ export const cardWrapper = style({
   height: '33.1rem',
   borderRadius: 8,
   padding: '2rem',
+  marginTop: '1.2rem',
 });
 
 export const textBox = style({

src/components/card/mapCard/map.css.ts

@@ -1,9 +1,10 @@
 import { style } from '@vanilla-extract/css';
+import mapImage from 'src/assets/images/home_card_map.png';
 
 const mapStyle = style({
   width: '28.9rem',
   height: '40.8rem',
-  backgroundImage: 'url(src/assets/images/home_card_map.png)',
+  backgroundImage: `url(${mapImage})`,
   backgroundSize: 'cover',
   backgroundPosition: 'center',
   position: 'relative',

src/components/card/mapCard/mapCard.css.ts

@@ -10,6 +10,7 @@ export const mapWrapper = style({
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
+  marginTop: '1.4rem',
 });
 
 export const titleBox = style({

src/components/carousel/curationCarousel/curationCarousel.css.ts

@@ -10,7 +10,6 @@ export const carouselWrapper = style({
   width: '37.5rem',
   overflow: 'hidden',
   display: 'flex',
-  marginLeft: '-2rem',
 });
 
 export const carouselContainer = style({

src/components/carousel/popularCarousel/carouselIndex.css.ts

@@ -25,6 +25,7 @@ const indexStyle = recipe({
 export const indexContainer = style({
   display: 'flex',
   gap: '0.4rem',
+  marginTop: '0.8rem',
 });
 
 export default indexStyle;

src/components/footer/footer.css.ts

@@ -5,7 +5,6 @@ export const footerContainer = style({
   width: '37.5rem',
   height: '18.7rem',
   padding: '2rem',
-  marginLeft: '-2rem',
   position: 'absolute',
   bottom: 0,
   backgroundColor: theme.COLORS.gray1,

src/pages/homePage/HomePage.tsx

@@ -0,0 +1,32 @@
+import LookCard from '@components/card/lookCard/LookCard';
+import MapCard from '@components/card/mapCard/MapCard';
+import CurationCarousel from '@components/carousel/curationCarousel/CurationCarousel';
+import CarouselIndex from '@components/carousel/popularCarousel/CarouselIndex';
+import PopularCarousel from '@components/carousel/popularCarousel/PopularCarousel';
+import DetailTitle from '@components/detailTitle/DetailTitle';
+import Footer from '@components/footer/Footer';
+import Header from '@components/header/Header';
+
+import * as styles from './homePage.css';
+
+const HomePage = () => {
+  return (
+    <div className={styles.homeWrapper}>
+      <Header />
+      <LookCard name="절로가" />
+      <MapCard />
+      <div className={styles.curationCarouselStyle}>
+        <DetailTitle title="절로가 큐레이션" />
+        <CurationCarousel />
+      </div>
+      <div className={styles.popularCarouselStyle}>
+        <DetailTitle title="이번주 인기스테이" />
+        <PopularCarousel />
+        <CarouselIndex total={3} currentIndex={1} />
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default HomePage;

src/pages/homePage/homePage.css.ts

@@ -0,0 +1,26 @@
+import { style } from '@vanilla-extract/css';
+
+const flexCenterColumn = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const homeWrapper = flexCenterColumn;
+
+export const curationCarouselStyle = style([
+  flexCenterColumn,
+  {
+    gap: '0.8rem',
+    marginTop: '5.4rem',
+  },
+]);
+
+export const popularCarouselStyle = style([
+  flexCenterColumn,
+  {
+    gap: '0.8rem',
+    margin: '5.4rem 0 28rem 0',
+  },
+]);

src/router/Router.tsx

@@ -5,7 +5,7 @@ import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom'
 import App from 'src/App';
 import PrivateRoute from 'src/router/PrivateRoute';
 
-const HomePage = lazy(() => import('@pages/HomePage'));
+const HomePage = lazy(() => import('@pages/homePage/HomePage'));
 const SearchPage = lazy(() => import('@pages/searchPage/SearchPage'));
 const ErrorPage = lazy(() => import('@pages/ErrorPage'));
 const MyPage = lazy(() => import('@pages/myPage/MyPage'));

src/stories/HomePage.stories.ts

@@ -0,0 +1,17 @@
+import HomePage from '@pages/homePage/HomePage';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Page/HomePage',
+  component: HomePage,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof HomePage>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};