feat: ImageModal, Carousel src-> url로 타입 수정

price-offer · Jan 31, 2024 · 8bed547 · 8bed547
1 parent c8cd72d
commit 8bed547
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 17 deletions.
diff --git a/packages/react/src/components/Carousel/Carousel.stories.tsx b/packages/react/src/components/Carousel/Carousel.stories.tsx
@@ -14,9 +14,9 @@ export default meta
 export const Default: StoryObj<CarouselProps> = {
   args: {
     images: [
-      { id: 1, src: 'https://picsum.photos/400' },
-      { id: 2, src: 'https://picsum.photos/400' },
-      { id: 3, src: 'https://picsum.photos/400' }
+      { id: 1, url: 'https://picsum.photos/400' },
+      { id: 2, url: 'https://picsum.photos/400' },
+      { id: 3, url: 'https://picsum.photos/400' }
     ],
     isArrow: true,
     name: 'products',

diff --git a/packages/react/src/components/Carousel/index.tsx b/packages/react/src/components/Carousel/index.tsx
@@ -5,11 +5,16 @@ import { useMedia } from '@offer-ui/hooks/useMedia'
 import type { ForwardedRef, HTMLAttributes, TouchEventHandler } from 'react'
 import { forwardRef, useEffect, useState } from 'react'
 
+type ImageInfo = {
+  id: number
+  url: string
+}
+
 export type CarouselProps = {
   /** Carousel 컴포넌트에 들어갈 이미지들을 정합니다.
-   * @type { src: string, id: number } []
+   * @type ImageInfo []
    */
-  images: { src: string; id: number }[]
+  images: ImageInfo[]
   /** Carousel 에서 처음에 보여줄 이미지를 선택합니다.
    * @type number
    */
@@ -145,7 +150,7 @@ export const Carousel = forwardRef(function Carousel(
                 key={image.id}
                 alt={`${name}- ${image.id}`}
                 size={carouselWidthSize}
-                src={image.src}
+                src={image.url}
               />
             )
           })}

diff --git a/packages/react/src/components/ImageModal/ImageModal.stories.tsx b/packages/react/src/components/ImageModal/ImageModal.stories.tsx
@@ -16,15 +16,15 @@ export const Default: StoryObj<ImageModal> = {
     images: [
       {
         id: 1,
-        src: 'errorImage'
+        url: 'errorImage'
       },
       {
         id: 2,
-        src: 'http://placekitten.com/500/600'
+        url: 'http://placekitten.com/500/600'
       },
       {
         id: 3,
-        src: 'http://placekitten.com/400/800'
+        url: 'http://placekitten.com/400/800'
       }
     ],
     name: 'cat-detail'

diff --git a/packages/react/src/components/ImageModal/index.tsx b/packages/react/src/components/ImageModal/index.tsx
@@ -10,7 +10,7 @@ import { createPortal } from 'react-dom'
 
 type ImageInfo = {
   id: number
-  src: string
+  url: string
 }
 export type ImageModalProps = {
   /**
@@ -20,7 +20,7 @@ export type ImageModalProps = {
   isOpen?: boolean
   /**
    * ImageModal에 띄울 이미지들을 정합니다.
-   * @type IconType
+   * @type ImageInfo
    */
   images: ImageInfo[]
   /**
@@ -114,16 +114,16 @@ export const ImageModal = forwardRef(function ImageModal(
   }, [isOpen, selectedIndex])
 
   const getImagesInfo = async (): Promise<void> => {
-    const fulfilledImages = images.map(({ src, id }) => {
+    const fulfilledImages = images.map(({ url, id }) => {
       const image = new Image()
-      image.src = src
+      image.src = url
 
       return new Promise(resolve => {
         image.onload = (): void => {
           resolve({
             height: image.height,
             id,
-            src,
+            url,
             width: (image.width * DEFAULT_RESIZE_IMAGE.HEIGHT) / image.height
           })
         }
@@ -132,7 +132,7 @@ export const ImageModal = forwardRef(function ImageModal(
           resolve({
             height: DEFAULT_RESIZE_IMAGE.HEIGHT,
             id,
-            src: null,
+            url: null,
             width: DEFAULT_RESIZE_IMAGE.WIDTH
           })
         }
@@ -211,15 +211,15 @@ export const ImageModal = forwardRef(function ImageModal(
             ref={ref}
             currentIndex={currentIndex}
             currentTranslateX={currentTranslateX}>
-            {imagesInfo.current.map(({ src, id, width, height }) => (
+            {imagesInfo.current.map(({ url, id, width, height }) => (
               <StyledImage
                 key={id}
                 alt={`${name}-${id}`}
                 height={`${height}px`}
                 isFixedHeight={
                   calculateSizeRate(width, height) < IMAGE_MAX_RATE
                 }
-                src={src}
+                src={url}
                 width={`${width}px`}
               />
             ))}