fix: 사용자 사진 업로드 시 미리보기가 안 바뀌는 문제 (#390)

* feat: url이 피움 static인지 확인하는 유틸 함수 * fix: src를 바꿔도 이미지가 변하지 않는 현상 - 맨 처음 주어진 src로 ref 안에 배열을 가두어 새로운 src가 주어져도 사진이 변하지 않음 - setErrorImage 자체는 일종의 비제어 컴포넌트처럼 동작, ref를 이용할 이유 X * refactor: useFileUpload 호출마다 새 url 생성 방지 * test: msw mock data image url 변경 피움 static 서버에서 받아오도록 수정
woowacourse-teams · Sep 22, 2023 · b11d7c6 · b11d7c6
1 parent 0aa77e2
commit b11d7c6
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 49 deletions.
diff --git a/frontend/src/components/@common/Image/index.tsx b/frontend/src/components/@common/Image/index.tsx
@@ -1,7 +1,7 @@
-import { forwardRef, useRef } from 'react';
+import { forwardRef } from 'react';
 import type { StyledImageProps } from './Image.style';
 import { StyledImage } from './Image.style';
-import { getResizedImageUrl } from 'utils/image';
+import { getResizedImageUrl, isServerStaticData } from 'utils/image';
 import sadpiumiPng from 'assets/sadpiumi-imageFail.png';
 
 type ImageProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'onError'> &
@@ -11,18 +11,18 @@ 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 = useRef<string[]>([
+  const fallbackImages = [
     sadpiumiPng,
     src,
-    getResizedImageUrl(src, sizeValue, 'png'),
-    getResizedImageUrl(src, sizeValue, 'webp'),
-  ]);
+    isServerStaticData(src) ? getResizedImageUrl(src, sizeValue, 'png') : src,
+    isServerStaticData(src) ? getResizedImageUrl(src, sizeValue, 'webp') : src,
+  ];
 
-  const currentImage = fallbackImages.current[fallbackImages.current.length - 1];
+  const currentImage = fallbackImages[fallbackImages.length - 1];
 
   const setErrorImage: React.ReactEventHandler<HTMLImageElement> = ({ currentTarget }) => {
-    fallbackImages.current.pop();
-    currentTarget.src = fallbackImages.current[fallbackImages.current.length - 1];
+    fallbackImages.pop();
+    currentTarget.src = fallbackImages[fallbackImages.length - 1];
   };
 
   return (

diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts
@@ -1,6 +1,7 @@
 import { Season, SeasonKor } from 'types/dictionaryPlant';
 
 export const BASE_URL = process.env.HOST;
+export const STATIC_BASE_URL = 'https://static.pium.life';
 
 export const URL_PATH = {
   main: '/',

diff --git a/frontend/src/hooks/image/useFileUpload.ts b/frontend/src/hooks/image/useFileUpload.ts
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import useAddToast from 'hooks/useAddToast';
 import basicImage from 'assets/piumi-emotionless.png';
 
@@ -13,7 +13,10 @@ const useFileUpload = ({ imageUrl = basicImage }: FileUploadParams) => {
   const [file, setFile] = useState<Blob | null>(null);
 
   const imgRef = useRef<HTMLInputElement>(null);
-
+  const uploadedImageUrl = useMemo(
+    () => (file ? URL.createObjectURL(file) : imageUrl),
+    [file, imageUrl]
+  );
   const addToast = useAddToast();
 
   const fileUploadHandler: React.ChangeEventHandler<HTMLInputElement> = (event) => {
@@ -50,7 +53,7 @@ const useFileUpload = ({ imageUrl = basicImage }: FileUploadParams) => {
 
   return {
     fileUploadHandler,
-    uploadedImageUrl: file ? URL.createObjectURL(file) : imageUrl,
+    uploadedImageUrl,
     imgRef,
     file,
   };

diff --git a/frontend/src/mocks/data/dictionaryPlant.ts b/frontend/src/mocks/data/dictionaryPlant.ts
@@ -2,7 +2,7 @@ const DICTIONARY_PLANT_DATA = [
   {
     id: 1,
     name: '스킨답서스',
-    image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+    image: 'https://static.pium.life/dict/dict_plants_1.jpg',
     familyName: '천남성과',
     smell: '거의 없음',
     poison: '많음',
@@ -23,7 +23,7 @@ const DICTIONARY_PLANT_DATA = [
   {
     id: 2,
     name: '투명 피우미',
-    image: 'https://images.unsplash.com/photo-1617677916288-7a5c8e88a285',
+    image: 'https://static.pium.life/dict/dict_plants_1000.jpg',
     familyName: '캠릿브지 대학의 연결구과',
     smell: '정보없음',
     poison: '정보없음',

diff --git a/frontend/src/mocks/data/garden.ts b/frontend/src/mocks/data/garden.ts
@@ -23,7 +23,7 @@ export const generateGardenPageData = (
           content: '이거 이렇게 키워보아요',
           manageLevel: '초보자',
           petPlant: {
-            imageUrl: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+            imageUrl: 'https://static.pium.life/dict/dict_plants_1.jpg',
             nickname: '루피',
             location: OPTIONS.location[0],
             flowerpot: OPTIONS.flowerPot[0],
@@ -41,7 +41,7 @@ export const generateGardenPageData = (
           content: '이거 이렇게 키워보아요',
           manageLevel: '전문가',
           petPlant: {
-            imageUrl: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+            imageUrl: 'https://static.pium.life/dict/dict_plants_2.jpg',
             nickname: '쵸파',
             location: OPTIONS.location[0],
             flowerpot: OPTIONS.flowerPot[0],
@@ -59,7 +59,7 @@ export const generateGardenPageData = (
           content: '이거 이렇게 키워보아요',
           manageLevel: '초보자',
           petPlant: {
-            imageUrl: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+            imageUrl: 'https://static.pium.life/dict/dict_plants_3.jpg',
             nickname: '토마토1호',
             location: OPTIONS.location[0],
             flowerpot: OPTIONS.flowerPot[0],
@@ -82,7 +82,7 @@ export const generateGardenPageData = (
           `,
           manageLevel: '초보자',
           petPlant: {
-            imageUrl: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+            imageUrl: 'https://static.pium.life/dict/dict_plants_4.jpg',
             nickname: '뉴기니아봉선화',
             location: OPTIONS.location[0],
             flowerpot: OPTIONS.flowerPot[0],
@@ -100,7 +100,7 @@ export const generateGardenPageData = (
           content: '이거 이렇게 키워보아요',
           manageLevel: '초보자',
           petPlant: {
-            imageUrl: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+            imageUrl: 'https://static.pium.life/dict/dict_plants_5.jpg',
             nickname: '상디',
             location: OPTIONS.location[0],
             flowerpot: OPTIONS.flowerPot[0],
@@ -120,7 +120,7 @@ export const generateGardenPageData = (
           content: '이거 이렇게 키워보아요',
           manageLevel: '초보자',
           petPlant: {
-            imageUrl: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+            imageUrl: 'https://static.pium.life/dict/dict_plants_6789.jpg',
             nickname: '브룩',
             location: OPTIONS.location[0],
             flowerpot: OPTIONS.flowerPot[0],

diff --git a/frontend/src/mocks/data/petPlantCardList.ts b/frontend/src/mocks/data/petPlantCardList.ts
@@ -4,55 +4,55 @@ const PET_PLANT_CARD_LIST = [
   {
     id: 2,
     nickname: '기영이',
-    imageUrl: 'https://images.unsplash.com/photo-1667342608690-828e1a839ead',
+    imageUrl: 'https://static.pium.life/dict/dict_plants_1.jpg',
     dictionaryPlantName: '스투키',
     birthDate: '2023-07-08',
     daySince: 95,
   },
   {
     id: 3,
     nickname: '참새',
-    imageUrl: 'https://images.unsplash.com/photo-1555841769-75541ae4fc9f',
+    imageUrl: 'https://static.pium.life/dict/dict_plants_2.jpg',
     dictionaryPlantName: '참새',
     birthDate: '1999-12-16',
     daySince: 1,
   },
   {
     id: 4,
     nickname: '참새',
-    imageUrl: 'https://images.unsplash.com/photo-1555841769-75541ae4fc9f',
+    imageUrl: 'https://static.pium.life/dict/dict_plants_3.jpg',
     dictionaryPlantName: '참새',
     birthDate: getDateToString(),
     daySince: 1,
   },
   {
     id: 5,
     nickname: '참새',
-    imageUrl: 'https://images.unsplash.com/photo-1555841769-75541ae4fc9f',
+    imageUrl: 'https://static.pium.life/dict/dict_plants_4.jpg',
     dictionaryPlantName: '참새',
     birthDate: '1999-12-16',
     daySince: 1,
   },
   {
     id: 6,
     nickname: '참새',
-    imageUrl: 'https://images.unsplash.com/photo-1555841769-75541ae4fc9f',
+    imageUrl: 'https://static.pium.life/dict/dict_plants_5.jpg',
     dictionaryPlantName: '참새',
     birthDate: '1999-12-16',
     daySince: 1,
   },
   {
     id: 7,
     nickname: '참새',
-    imageUrl: 'https://images.unsplash.com/photo-1555841769-75541ae4fc9f',
+    imageUrl: 'https://static.pium.life/dict/dict_plants_6.jpg',
     dictionaryPlantName: '참새',
     birthDate: '1999-12-16',
     daySince: 1,
   },
   {
     id: 8,
     nickname: '참새',
-    imageUrl: 'https://images.unsplash.com/photo-1555841769-75541ae4fc9f',
+    imageUrl: 'https://static.pium.life/dict/dict_plants_7777.jpg',
     dictionaryPlantName: '참새',
     birthDate: '1999-12-16',
     daySince: 1,

diff --git a/frontend/src/mocks/data/petPlants.ts b/frontend/src/mocks/data/petPlants.ts
@@ -10,7 +10,7 @@ const PET_PLANTS_DATA: PetPlantDetails[] = [
       id: 1,
       name: '백엔드1',
     },
-    imageUrl: 'https://images.unsplash.com/photo-1457530378978-8bac673b8062',
+    imageUrl: 'https://static.pium.life/dict/dict_plants_1.jpg',
     birthDate: '2023-03-03',
     daySince: 9,
 
@@ -32,7 +32,7 @@ const PET_PLANTS_DATA: PetPlantDetails[] = [
       id: 2,
       name: '백엔드2',
     },
-    imageUrl: 'https://images.unsplash.com/photo-1457530378978-8bac673b8062',
+    imageUrl: 'https://static.pium.life/dict/dict_plants_2.jpg',
     birthDate: '2023-04-04',
     daySince: 99,
 
@@ -54,7 +54,7 @@ const PET_PLANTS_DATA: PetPlantDetails[] = [
       id: 3,
       name: '백엔드3',
     },
-    imageUrl: 'https://images.unsplash.com/photo-1457530378978-8bac673b8062',
+    imageUrl: 'https://static.pium.life/dict/dict_plants_3.jpg',
     birthDate: '2023-05-05',
     daySince: 999,
 
@@ -76,7 +76,7 @@ const PET_PLANTS_DATA: PetPlantDetails[] = [
       id: 4,
       name: '백엔드4',
     },
-    imageUrl: 'https://images.unsplash.com/photo-1457530378978-8bac673b8062',
+    imageUrl: 'https://static.pium.life/dict/dict_plants_4.jpg',
     birthDate: getDateToString(),
     daySince: 9999,
 

diff --git a/frontend/src/mocks/data/reminder.ts b/frontend/src/mocks/data/reminder.ts
@@ -6,7 +6,7 @@ const REMINDER_DATA = {
   data: [
     {
       petPlantId: 0,
-      image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+      image: 'https://static.pium.life/dict/dict_plants_1.jpg',
       nickName: '내가 만든 쿠키이이이이 히? 너는 절대 못먹지 캔츄바레 원잇  플리즈',
       dictionaryPlantName: '이 편지는 영국에서 시작해서 그렇게 변화게 되어왔습니다.',
       dday: 20,
@@ -15,7 +15,7 @@ const REMINDER_DATA = {
     },
     {
       petPlantId: 1,
-      image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+      image: 'https://static.pium.life/dict/dict_plants_2.jpg',
       nickName: '참새 나무',
       dictionaryPlantName: '알로카시아',
       dday: 20,
@@ -24,7 +24,7 @@ const REMINDER_DATA = {
     },
     {
       petPlantId: 2,
-      image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+      image: 'https://static.pium.life/dict/dict_plants_3.jpg',
       nickName: '그레이 나무',
       dictionaryPlantName: '스투키',
       dday: 11,
@@ -33,7 +33,7 @@ const REMINDER_DATA = {
     },
     {
       petPlantId: 3,
-      image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+      image: 'https://static.pium.life/dict/dict_plants_4.jpg',
       nickName: '하마드 나무',
       dictionaryPlantName: '스투키',
       dday: 3,
@@ -42,7 +42,7 @@ const REMINDER_DATA = {
     },
     {
       petPlantId: 4,
-      image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+      image: 'https://static.pium.life/dict/dict_plants_5.jpg',
       nickName: '주노 나무',
       dictionaryPlantName: '스투키',
       dday: 3,
@@ -51,7 +51,7 @@ const REMINDER_DATA = {
     },
     {
       petPlantId: 5,
-      image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+      image: 'https://static.pium.life/dict/dict_plants_6.jpg',
       nickName: '조이 나무',
       dictionaryPlantName: '스투키',
       dday: 1,
@@ -60,7 +60,7 @@ const REMINDER_DATA = {
     },
     {
       petPlantId: 6,
-      image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+      image: 'https://static.pium.life/dict/dict_plants_7.jpg',
       nickName: '쵸파 나무',
       dictionaryPlantName: '스투키',
       dday: 0,
@@ -69,7 +69,7 @@ const REMINDER_DATA = {
     },
     {
       petPlantId: 7,
-      image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+      image: 'https://static.pium.life/dict/dict_plants_8.jpg',
       nickName: '클린 나무',
       dictionaryPlantName: '스투키',
       dday: 0,
@@ -78,7 +78,7 @@ const REMINDER_DATA = {
     },
     {
       petPlantId: 8,
-      image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+      image: 'https://static.pium.life/dict/dict_plants_9.jpg',
       nickName: '피움 나무',
       dictionaryPlantName: '스투키',
       dday: 0,
@@ -87,7 +87,7 @@ const REMINDER_DATA = {
     },
     {
       petPlantId: 9,
-      image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+      image: 'https://static.pium.life/dict/dict_plants_10.jpg',
       nickName: '포비 나무',
       dictionaryPlantName: '스투키',
       dday: -3,
@@ -96,7 +96,7 @@ const REMINDER_DATA = {
     },
     {
       petPlantId: 10,
-      image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+      image: 'https://static.pium.life/dict/dict_plants_11.jpg',
       nickName: '크론 나무',
       dictionaryPlantName: '스투키',
       dday: -3,
@@ -105,7 +105,7 @@ const REMINDER_DATA = {
     },
     {
       petPlantId: 11,
-      image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+      image: 'https://static.pium.life/dict/dict_plants_12.jpg',
       nickName: '빠삐용',
       dictionaryPlantName: '스투키',
       dday: -7,
@@ -114,7 +114,7 @@ const REMINDER_DATA = {
     },
     {
       petPlantId: 12,
-      image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
+      image: 'https://static.pium.life/dict/dict_plants_13.jpg',
       nickName: '우테코',
       dictionaryPlantName: '스투키',
       dday: -10,

diff --git a/frontend/src/mocks/data/search.ts b/frontend/src/mocks/data/search.ts
@@ -2,22 +2,22 @@ const SEARCH_DATA = [
   {
     id: 1,
     name: '아',
-    image: 'https://images.unsplash.com/photo-1667342608690-828e1a839ead',
+    image: 'https://static.pium.life/dict/dict_plants_1.jpg',
   },
   {
     id: 2,
     name: '아카',
-    image: 'https://images.unsplash.com/photo-1516205651411-aef33a44f7c2',
+    image: 'https://static.pium.life/dict/dict_plants_2.jpg',
   },
   {
     id: 3,
     name: '아카시',
-    image: 'https://images.unsplash.com/photo-1519567770579-c2fc5436bcf9',
+    image: 'https://static.pium.life/dict/dict_plants_3.jpg',
   },
   {
     id: 4,
     name: '아카시아',
-    image: 'https://images.unsplash.com/photo-1510325805092-2951ab330b7d',
+    image: 'https://static.pium.life/dict/dict_plants_1000.jpg',
   },
   {
     id: 5,