fix: Storybook assets 이슈 수정 (#140)

src/components/home/CategorySlider/index.tsx

@@ -2,9 +2,72 @@ import { useMedia } from '@offer-ui/react'
 import { useState, useEffect, useRef, useCallback } from 'react'
 import type { ReactElement, TouchEventHandler } from 'react'
 import { Styled } from './styled'
-import type { CategorySliderProps } from './types'
+import { IMAGE } from '@constants'
 
-const CategorySlider = ({ imageList }: CategorySliderProps): ReactElement => {
+const CATEGORY_LIST = [
+  {
+    imageUrl: `${IMAGE.CATEGORY_MAN_GOODS}`,
+    title: '남성패션/잡화',
+    url: 'string'
+  },
+  {
+    imageUrl: `${IMAGE.CATEGORY_WOMAN_GOODS}`,
+    title: '여성패션/잡화',
+    url: 'string'
+  },
+  {
+    imageUrl: `${IMAGE.CATEGORY_GAME}`,
+    title: '게임',
+    url: 'string'
+  },
+  {
+    imageUrl: `${IMAGE.CATEGORY_SPORTS}`,
+    title: '스포츠/레저',
+    url: 'string'
+  },
+  {
+    imageUrl: `${IMAGE.CATEGORY_TOY}`,
+    title: '장난감/취미',
+    url: 'string'
+  },
+  {
+    imageUrl: `${IMAGE.CATEGORY_DIGITAL_DEVICE}`,
+    title: '디지털기기',
+    url: 'string'
+  },
+  {
+    imageUrl: `${IMAGE.CATEGORY_CAR}`,
+    title: '자동차/공구',
+    url: 'string'
+  },
+  {
+    imageUrl: `${IMAGE.CATEGORY_APPLIANCE}`,
+    title: '생활가전',
+    url: 'string'
+  },
+  {
+    imageUrl: `${IMAGE.CATEGORY_DIGITAL_FURNITURE}`,
+    title: '가구/인테리어',
+    url: 'string'
+  },
+  {
+    imageUrl: `${IMAGE.CATEGORY_BOOK}`,
+    title: '도서/티켓/음반',
+    url: 'string'
+  },
+  {
+    imageUrl: `${IMAGE.CATEGORY_PET_GOODS}`,
+    title: '반려동물용품',
+    url: 'string'
+  },
+  {
+    imageUrl: `${IMAGE.CATEGORY_MORE}`,
+    title: '더보기',
+    url: 'string'
+  }
+]
+
+const CategorySlider = (): ReactElement => {
   const containerRef = useRef<HTMLDivElement | null>(null)
   const [isDrag, setIsDrag] = useState(false)
   const [startX, setStartX] = useState<number>(0)
@@ -105,18 +168,22 @@ const CategorySlider = ({ imageList }: CategorySliderProps): ReactElement => {
           )}
           <Styled.CateGoryBoxWrapper
             isMoveFromArrowButton={isMoveFromArrowButton}>
-            {imageList.map(cateGory => (
+            {CATEGORY_LIST.map(cateGory => (
               <Styled.CategoryItem
                 key={cateGory.title}
                 onClick={(): void => {
                   alert(cateGory.title)
                 }}>
-                <Styled.CategoryImg
-                  key={cateGory.title}
-                  alt={`category-${cateGory.title}`}
-                  src={cateGory.imageUrl}
-                />
-                <Styled.CateGoryName> {cateGory.title}</Styled.CateGoryName>
+                <Styled.CategoryImgWrapper>
+                  <Styled.CategoryImg
+                    key={cateGory.title}
+                    alt={`category-${cateGory.title}`}
+                    height={58}
+                    src={cateGory.imageUrl}
+                    width={58}
+                  />
+                </Styled.CategoryImgWrapper>
+                <Styled.CateGoryName>{cateGory.title}</Styled.CateGoryName>
               </Styled.CategoryItem>
             ))}
           </Styled.CateGoryBoxWrapper>
@@ -125,4 +192,4 @@ const CategorySlider = ({ imageList }: CategorySliderProps): ReactElement => {
     </>
   )
 }
-export { CategorySlider, CategorySliderProps }
+export { CategorySlider }

src/components/home/CategorySlider/styled.ts

@@ -1,5 +1,7 @@
+import { css } from '@emotion/react'
 import styled from '@emotion/styled'
-import { IconButton, Image } from '@offer-ui/react'
+import { IconButton } from '@offer-ui/react'
+import Image from 'next/image'
 import type { CateGoryBoxWrapperProps } from './types'
 
 export const CategoryHeader = styled.div`
@@ -37,7 +39,10 @@ export const CateGoryBoxWrapper = styled.div<CateGoryBoxWrapperProps>`
   max-width: 1200px;
   height: 118px;
 
+  cursor: pointer;
+
   transition: 0.1s;
+
   ${({ theme }): string => theme.mediaQuery.desktop} {
     transform: ${({ isMoveFromArrowButton }): string =>
       `translateX(-${isMoveFromArrowButton}px)`};
@@ -119,17 +124,42 @@ export const CategoryItem = styled.div`
     height: 88px;
   }
 `
-export const CategoryImg = styled(Image)`
+
+export const CategoryImgWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   width: 108px;
   height: 86px;
+
+  ${({ theme }) => css`
+    border-radius: ${theme.radius.round12};
+
+    background-color: ${theme.colors.grayScale05};
+
+    ${theme.mediaQuery.tablet} {
+      width: 80px;
+      height: 80px;
+    }
+
+    ${theme.mediaQuery.mobile} {
+      width: 60px;
+      height: 60px;
+    }
+  `};
+`
+
+export const CategoryImg = styled(Image)`
   border-radius: 12px;
+
   ${({ theme }): string => theme.mediaQuery.tablet} {
-    width: 80px;
-    height: 80px;
+    width: 52px;
+    height: 52px;
   }
   ${({ theme }): string => theme.mediaQuery.mobile} {
-    width: 60px;
-    height: 60px;
+    width: 40px;
+    height: 40px;
   }
 `
 export const CateGoryName = styled.div`
@@ -156,6 +186,7 @@ export const Styled = {
   LeftArrow,
   RightArrow,
   CategoryItem,
+  CategoryImgWrapper,
   CategoryImg,
   CateGoryName
 }

src/components/home/CategorySlider/types.ts

@@ -1,11 +1,3 @@
-export type CategorySliderProps = {
-  imageList: {
-    title: string
-    url: string
-    imageUrl: string
-  }[]
-}
-
 export type CateGoryBoxWrapperProps = {
   isMoveFromArrowButton: number
 }

src/constants/images.ts

@@ -1,55 +1,35 @@
-import CATEGORY_APPLIANCE from '@assets/images/category_appliance.png'
-import CATEGORY_APPLIANCE_PC from '@assets/images/category_appliance_pc.png'
-import CATEGORY_BOOK from '@assets/images/category_book.png'
-import CATEGORY_BOOK_PC from '@assets/images/category_book_pc.png'
-import CATEGORY_CAR from '@assets/images/category_car.png'
-import CATEGORY_CAR_PC from '@assets/images/category_car_pc.png'
-import CATEGORY_DIGITAL_DIVICE from '@assets/images/category_digitaldevice.png'
-import CATEGORY_DIGITAL_DIVICE_PC from '@assets/images/category_digitaldevice_pc.png'
-import CATEGORY_ECT from '@assets/images/category_ect.png'
-import CATEGORY_ECT_PC from '@assets/images/category_ect_pc.png'
-import CATEGORY_DIGITAL_FURNITURE from '@assets/images/category_furniture.png'
-import CATEGORY_DIGITAL_FURNITURE_PC from '@assets/images/category_furniture_pc.png'
-import CATEGORY_GAME from '@assets/images/category_game.png'
-import CATEGORY_GAME_PC from '@assets/images/category_game_pc.png'
-import CATEGORY_MAN_GOODS from '@assets/images/category_mangoods.png'
-import CATEGORY_MAN_GOODS_PC from '@assets/images/category_mangoods_pc.png'
-import CATEGORY_MORE from '@assets/images/category_more.png'
-import CATEGORY_MORE_PC from '@assets/images/category_more_pc.png'
-import CATEGORY_PET_GOODS from '@assets/images/category_petgoods.png'
-import CATEGORY_PET_GOODS_PC from '@assets/images/category_petgoods_pc.png'
-import CATEGORY_SPORTS from '@assets/images/category_sports.png'
-import CATEGORY_SPORTS_PC from '@assets/images/category_sports_pc.png'
-import CATEGORY_TOY from '@assets/images/category_toy.png'
-import CATEGORY_TOY_PC from '@assets/images/category_toy_pc.png'
-import CATEGORY_WOMAN_GOODS from '@assets/images/category_womangoods.png'
-import CATEGORY_WOMAN_GOODS_PC from '@assets/images/category_womangoods_pc.png'
+import CATEGORY_APPLIANCE from '@assets/images/category_appliance.svg'
+import CATEGORY_BOOK from '@assets/images/category_book.svg'
+import CATEGORY_CAR from '@assets/images/category_car.svg'
+import CATEGORY_DIGITAL_DEVICE from '@assets/images/category_ditigaldevice.svg'
+import CATEGORY_DIGITAL_FURNITURE from '@assets/images/category_furniture.svg'
+import CATEGORY_GAME from '@assets/images/category_game.svg'
+import CATEGORY_MAN_GOODS from '@assets/images/category_mangoods.svg'
+import CATEGORY_MORE from '@assets/images/category_more.svg'
+import CATEGORY_PET_GOODS from '@assets/images/category_petgoods.svg'
+import CATEGORY_SPORTS from '@assets/images/category_sports.svg'
+import CATEGORY_TOY from '@assets/images/category_toy.svg'
+import CATEGORY_WOMAN_GOODS from '@assets/images/category_womangoods.svg'
+
+type ImageKey = keyof typeof IMAGE
 
 export const IMAGE = {
   CATEGORY_APPLIANCE,
-  CATEGORY_APPLIANCE_PC,
   CATEGORY_BOOK,
-  CATEGORY_BOOK_PC,
   CATEGORY_CAR,
-  CATEGORY_CAR_PC,
-  CATEGORY_DIGITAL_DIVICE,
-  CATEGORY_DIGITAL_DIVICE_PC,
+  CATEGORY_DIGITAL_DEVICE,
   CATEGORY_DIGITAL_FURNITURE,
-  CATEGORY_DIGITAL_FURNITURE_PC,
-  CATEGORY_ECT,
-  CATEGORY_ECT_PC,
   CATEGORY_GAME,
-  CATEGORY_GAME_PC,
   CATEGORY_MAN_GOODS,
-  CATEGORY_MAN_GOODS_PC,
   CATEGORY_MORE,
-  CATEGORY_MORE_PC,
   CATEGORY_PET_GOODS,
-  CATEGORY_PET_GOODS_PC,
   CATEGORY_SPORTS,
-  CATEGORY_SPORTS_PC,
   CATEGORY_TOY,
-  CATEGORY_TOY_PC,
-  CATEGORY_WOMAN_GOODS,
-  CATEGORY_WOMAN_GOODS_PC
+  CATEGORY_WOMAN_GOODS
+}
+
+for (const key in IMAGE) {
+  const imageKey = key as ImageKey
+
+  IMAGE[imageKey] = IMAGE[imageKey].src
 }