Merge pull request #464 from softeerbootcamp-2nd/dev

[FIX] 트림 선택 페이지 깜빡임 현상 해결
softeerbootcamp-2nd · Aug 27, 2023 · 569a9a2 · 569a9a2
2 parents 76a8e85 + 6011db0
commit 569a9a2
Showing 1 changed file with 47 additions and 38 deletions.
diff --git a/frontend/src/containers/TrimPage/TrimBannerContainer.tsx b/frontend/src/containers/TrimPage/TrimBannerContainer.tsx
@@ -13,83 +13,92 @@ import { ItemContext } from '../../context/ItemProvider';
 export default function TrimBannerContainer() {
   const { selectedItem, setSelectedItem } = useContext(ItemContext);
   const { data: trimData, loading, selectedImgIdx, setSelectedImgIdx } = useContext(TrimContext);
-  const [selectedData, setSelectedData] = useState<ICartype | null>(null);
+  const selectedData =
+    trimData && (trimData.find((item) => item.carId === selectedItem.trim.id) || trimData[0]);
   const imageUrls = useRef<string[]>([]);
   const [imagesLoading, setImagesLoading] = useState(true);
+  const [imgBlobUrls, setImgBlobUrls] = useState<{ [key: string]: string }>({});
   const handleSelectImg = useCallback(
     (idx: number) => {
       setSelectedImgIdx(idx);
     },
     [setSelectedImgIdx]
   );
 
-  const filterImageUrls = (trimData: ICartype[]) => {
+  const getFilteredImageUrls = (trimData: ICartype[]) => {
+    const filteredUrl: string[] = [];
     trimData.forEach((data) => {
       const innerImgUrl = data.innerImage !== '' && `${IMG_URL}${data.innerImage}`;
       const outerImgUrl = data.outerImage !== '' && `${IMG_URL}${data.outerImage}`;
       const wheelImgUrl = data.wheelImage !== '' && `${IMG_URL}${data.wheelImage}`;
       const filteredImagesUrl = [innerImgUrl, outerImgUrl, wheelImgUrl].filter(
         (url) => url
       ) as string[];
-      imageUrls.current.push(...filteredImagesUrl);
+      filteredUrl.push(...filteredImagesUrl);
     });
-  };
 
-  const downloadAndSaveImages = useCallback(async () => {
-    const imageBlobs = await Promise.all(
-      imageUrls.current.map(async (url, idx) => {
-        const response = await fetch(url + `?${idx}`);
-        const blob = await response.blob();
-        return blob;
-      })
-    );
-    imageBlobs.forEach((imageBlob, index) => {
-      const imageUrl = imageUrls.current[index];
-      localStorage.setItem(imageUrl, URL.createObjectURL(imageBlob));
-    });
-    setImagesLoading(false);
-  }, [imageUrls, setImagesLoading]);
+    return Array.from(new Set(filteredUrl));
+  };
 
-  const setImages = useCallback(() => {
-    if (!trimData) return;
-    setImagesLoading(true);
-    const data = trimData.find((item) => item.carId === selectedItem.trim.id) || trimData[0];
+  const downloadAndSaveImages = useCallback(
+    async (filterdUrls: string[]) => {
+      const imageBlobs = await Promise.all(
+        filterdUrls.map(async (url, idx) => {
+          const response = await fetch(url + `?${idx}`);
+          const blob = await response.blob();
+          return blob;
+        })
+      );
+      const _imgBlobUrls: { [key: string]: string } = {};
+      imageBlobs.map((imageBlob, index) => {
+        const bloburl = URL.createObjectURL(imageBlob);
+        _imgBlobUrls[filterdUrls[index]] = bloburl;
+      });
+
+      setImgBlobUrls(_imgBlobUrls);
+      setImagesLoading(false);
+    },
+    [setImagesLoading]
+  );
 
+  useEffect(() => {
+    if (!selectedData) return;
     setSelectedItem({
       type: 'SET_TRIM',
       value: {
-        id: data.carId,
-        name: data.trim,
-        price: data.carDefaultPrice,
+        id: selectedData.carId,
+        name: selectedData.trim,
+        price: selectedData.carDefaultPrice,
       },
     });
+  }, [trimData, selectedData, setSelectedItem]);
 
-    setSelectedData(data);
+  const setImages = useCallback(() => {
+    if (!trimData) return;
+    setImagesLoading(true);
     setSelectedImgIdx(0);
     imageUrls.current = [];
-    filterImageUrls(trimData);
-    downloadAndSaveImages();
-  }, [trimData, selectedItem.trim.id, setSelectedImgIdx, setSelectedItem, downloadAndSaveImages]);
+    const filterdUrls = getFilteredImageUrls(trimData);
+    downloadAndSaveImages(filterdUrls);
+  }, [trimData, setSelectedImgIdx, downloadAndSaveImages]);
 
   const displayImages = useCallback(() => {
-    if (!selectedData) return;
-    const outerUrl = `${IMG_URL}${selectedData.outerImage}`;
-    const innerUrl = `${IMG_URL}${selectedData.innerImage}`;
-    const wheelUrl = `${IMG_URL}${selectedData.wheelImage}`;
+    if (!selectedData || imagesLoading) return;
+
+    const outerUrl = selectedData.outerImage && `${IMG_URL}${selectedData.outerImage}`;
+    const innerUrl = selectedData.innerImage && `${IMG_URL}${selectedData.innerImage}`;
+    const wheelUrl = selectedData.wheelImage && `${IMG_URL}${selectedData.wheelImage}`;
     const imageUrls = [outerUrl, innerUrl, wheelUrl].filter((url) => url);
     const imageComponents = imageUrls.map((url, idx) => {
-      const imgSrc = localStorage.getItem(url);
-      if (!imgSrc) return;
+      const imgSrc = imgBlobUrls[url];
       return (
         <ImgWrapper key={idx} $selected={selectedImgIdx === idx}>
           <Img src={imgSrc} loading="lazy" alt="트림 이미지" onClick={() => handleSelectImg(idx)} />
         </ImgWrapper>
       );
     });
-
     return imageComponents;
-  }, [selectedImgIdx, selectedData, handleSelectImg]);
-
+  }, [imagesLoading, selectedImgIdx, selectedData, handleSelectImg, imgBlobUrls]);
   useEffect(setImages, [setImages]);
 
   const displayData = selectedData?.options.map((option, idx) => (