feat: 한 번 불러오기 실패한 사진은 다시 요청하지 않기 (#421)

* test: mock data 변경

* feat: 실패한 이미지 url은 재요청하지 않음

frontend/src/components/@common/Image/index.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import type { StyledImageProps } from './Image.style';
 import { StyledImage } from './Image.style';
-import { getResizedImageUrl, isServerStaticData } from 'utils/image';
+import ImageSourceList from 'models/ImageSourceList';
 import sadpiumiPng from 'assets/sadpiumi-imageFail.png';
 
 type ImageProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'onError'> &
@@ -11,18 +11,10 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(props, ref
   const { type = 'circle', size = '77px', src = sadpiumiPng, ...imageProps } = props;
 
   const sizeValue = Number(size.slice(0, -2));
-  const fallbackImages = [
-    sadpiumiPng,
-    src,
-    isServerStaticData(src) ? getResizedImageUrl(src, sizeValue, 'png') : src,
-    isServerStaticData(src) ? getResizedImageUrl(src, sizeValue, 'webp') : src,
-  ];
-
-  const currentImage = fallbackImages[fallbackImages.length - 1];
+  const imageSources = new ImageSourceList(src, sizeValue);
 
   const setErrorImage: React.ReactEventHandler<HTMLImageElement> = ({ currentTarget }) => {
-    fallbackImages.pop();
-    currentTarget.src = fallbackImages[fallbackImages.length - 1];
+    currentTarget.src = imageSources.getNext();
   };
 
   return (
@@ -32,7 +24,7 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(props, ref
       size={size}
       onError={setErrorImage}
       loading="lazy"
-      src={currentImage}
+      src={imageSources.getCurrent()}
       {...imageProps}
     />
   );

frontend/src/mocks/data/reminder.ts

@@ -6,7 +6,7 @@ const REMINDER_DATA = {
   data: [
     {
       petPlantId: 0,
-      image: 'https://static.pium.life/dict/dict_plants_1.jpg',
+      image: 'https://static.pium.life/dev/petPlant/032e28c1_1695347817381.jpg',
       nickName: '내가 만든 쿠키이이이이 히? 너는 절대 못먹지 캔츄바레 원잇  플리즈',
       dictionaryPlantName: '이 편지는 영국에서 시작해서 그렇게 변화게 되어왔습니다.',
       dday: 20,

frontend/src/models/ImageSourceList.ts

@@ -0,0 +1,37 @@
+import { getResizedImageUrl, isServerStaticData } from 'utils/image';
+import sadpiumiPng from 'assets/sadpiumi-imageFail.png';
+
+const failedImageUrls = new Set<string>();
+
+class ImageSourceList {
+  private fallbackImages: string[] = [sadpiumiPng];
+  /**
+   * @param src img src
+   * @param imageSize 사용할 크기 (픽셀, px)
+   */
+  constructor(src: string, imageSize: number) {
+    if (!failedImageUrls.has(src)) this.fallbackImages.push(src);
+
+    if (isServerStaticData(src)) {
+      const pngUrl = getResizedImageUrl(src, imageSize, 'png');
+      const webpUrl = getResizedImageUrl(src, imageSize, 'webp');
+
+      if (!failedImageUrls.has(pngUrl)) this.fallbackImages.push(pngUrl);
+      if (!failedImageUrls.has(webpUrl)) this.fallbackImages.push(webpUrl);
+    }
+  }
+
+  getCurrent() {
+    return this.fallbackImages[this.fallbackImages.length - 1];
+  }
+
+  getNext() {
+    if (this.fallbackImages.length > 1) {
+      const failed = this.fallbackImages.pop();
+      if (failed) failedImageUrls.add(failed);
+    }
+    return this.getCurrent();
+  }
+}
+
+export default ImageSourceList;