feat: 메인 페이지 Carousel 반영

Kernel360 · Jan 21, 2024 · 69aa63a · 69aa63a
1 parent 3132c91
commit 69aa63a
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 43 deletions.
diff --git a/src/app/page.module.scss b/src/app/page.module.scss
@@ -11,12 +11,7 @@
     padding: 0 24px;
   }
 
-  .bannerWrapper {
-    max-height: 140px;
-    overflow-y: hidden;
-  }
-
-  .recommandTextWrapper {
+  .recommendTextWrapper {
     padding: 0 24px;
   }
 

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,20 +1,18 @@
 import classNames from 'classnames/bind';
-import dynamic from 'next/dynamic';
 
-import BottomNav from '@components/shared/bottom-nav/BottomNav';
-import Flex from '@components/shared/flex/Flex';
-import Header from '@components/shared/header/Header';
-import ProductArticle from '@components/shared/product-article/ProductArticle';
-import Radio from '@components/shared/radio/Radio';
-import SearchBar from '@components/shared/search-bar/SearchBar';
-import Spacing from '@components/shared/spacing/Spacing';
-import Text from '@components/shared/text/Text';
+import BottomNav from '@shared/bottom-nav/BottomNav';
+import Banner from '@shared/carousel/Banner';
+import RecommendList from '@shared/carousel/RecommendList';
+import Flex from '@shared/flex/Flex';
+import Header from '@shared/header/Header';
+import ProductArticle from '@shared/product-article/ProductArticle';
+import Radio from '@shared/radio/Radio';
+import SearchBar from '@shared/search-bar/SearchBar';
+import Spacing from '@shared/spacing/Spacing';
+import Text from '@shared/text/Text';
 
 import styles from './page.module.scss';
 
-const Banner = dynamic(() => { return import('@components/shared/carousel/Banner'); });
-const RecommandList = dynamic(() => { return import('@components/shared/carousel/RecommandList'); });
-
 const cx = classNames.bind(styles);
 
 const bannerData = [
@@ -44,49 +42,49 @@ const bannerData = [
   },
 ];
 
-const recommandListData = [
+const recommendListData = [
   {
     id: 1,
     link: '/',
-    src: '/assets/recommandItem1.png',
+    src: '/assets/recommendItem1.png',
     alt: '그림',
     productName: '카샴푸',
   },
   {
     id: 2,
     link: '/',
-    src: '/assets/recommandItem2.png',
+    src: '/assets/recommendItem2.png',
     alt: '그림',
     productName: '휠 클리너',
   },
   {
     id: 3,
     link: '/',
-    src: '/assets/recommandItem3.png',
+    src: '/assets/recommendItem3.png',
     alt: '그림',
     productName: '타올',
 
   },
   {
     id: 4,
     link: '/',
-    src: '/assets/recommandItem4.png',
+    src: '/assets/recommendItem4.png',
     alt: '그림',
     productName: '먼지털이개',
 
   },
   {
     id: 5,
     link: '/',
-    src: '/assets/recommandItem4.png',
+    src: '/assets/recommendItem4.png',
     alt: '그림',
     productName: '먼지털이개',
 
   },
   {
     id: 6,
     link: '/',
-    src: '/assets/recommandItem4.png',
+    src: '/assets/recommendItem4.png',
     alt: '그림',
     productName: '먼지털이개',
 
@@ -139,23 +137,21 @@ export default function Home() {
           <SearchBar />
           <Spacing size={24} />
         </div>
-        <div className={cx('bannerWrapper')}>
-          <Banner bannerData={bannerData} />
-        </div>
+        <Banner bannerData={bannerData} />
         <Spacing size={32} />
-        <div className={cx('recommandTextWrapper')}>
+        <div className={cx('recommendTextWrapper')}>
           <Text bold>추천 세차용품</Text>
         </div>
         <Spacing size={16} />
-        <RecommandList recommandListData={recommandListData} />
+        <RecommendList recommendListData={recommendListData} />
         <Spacing size={32} />
         <div className={cx('productListContainer')}>
           <Text bold>WashPedia 랭킹</Text>
           <Spacing size={16} />
           <Flex justify="space-between" align="center" gap={8}>
             <Radio label="조회순" name="filter" type="filter" value="view" defaultChecked />
             <Radio label="위반제품" name="filter" type="filter" value="violatingProduct" />
-            <Radio label="추천순" name="filter" type="filter" value="recommand" />
+            <Radio label="추천순" name="filter" type="filter" value="recommend" />
             <Radio label="최신제품" name="filter" type="filter" value="latest" />
           </Flex>
           <Spacing size={16} />

diff --git a/...shared/carousel/RecommandList.stories.tsx → ...shared/carousel/RecommendList.stories.tsx b/...shared/carousel/RecommandList.stories.tsx → ...shared/carousel/RecommendList.stories.tsx
@@ -1,68 +1,68 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import RecommandList from './RecommandList';
+import RecommendList from './RecommendList';
 
 const meta = {
-  title: 'Shared/RecommandList',
-  component: RecommandList,
+  title: 'Shared/RecommendList',
+  component: RecommendList,
   parameters: {
   },
   tags: ['autodocs'],
   argTypes: {
-    recommandListData: {
+    recommendListData: {
       control: 'object',
     },
   },
-} satisfies Meta<typeof RecommandList>;
+} satisfies Meta<typeof RecommendList>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const AdBanner: Story = {
   args: {
-    recommandListData: [
+    recommendListData: [
       {
         id: 1,
         link: '/',
-        src: '/assets/recommandItem1.png',
+        src: '/assets/recommendItem1.png',
         alt: '그림',
         productName: '카샴푸',
       },
       {
         id: 2,
         link: '/',
-        src: '/assets/recommandItem2.png',
+        src: '/assets/recommendItem2.png',
         alt: '그림',
         productName: '휠 클리너',
       },
       {
         id: 3,
         link: '/',
-        src: '/assets/recommandItem3.png',
+        src: '/assets/recommendItem3.png',
         alt: '그림',
         productName: '타올',
 
       },
       {
         id: 4,
         link: '/',
-        src: '/assets/recommandItem4.png',
+        src: '/assets/recommendItem4.png',
         alt: '그림',
         productName: '먼지털이개',
 
       },
       {
         id: 5,
         link: '/',
-        src: '/assets/recommandItem4.png',
+        src: '/assets/recommendItem4.png',
         alt: '그림',
         productName: '먼지털이개',
 
       },
       {
         id: 6,
         link: '/',
-        src: '/assets/recommandItem4.png',
+        src: '/assets/recommendItem4.png',
         alt: '그림',
         productName: '먼지털이개',