hotfix: 아트워크 이미지 수정 함수 수정

STUDIO-EYE · Dec 6, 2024 · 875fdf3 · 875fdf3
1 parent 7fcfbd5
commit 875fdf3
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 51 deletions.
diff --git a/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkDetail.tsx b/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkDetail.tsx
@@ -136,49 +136,40 @@ const ArtworkDetail = () => {
         setIsTopMainArtwork(false);
       }
       if (data.mainImg) {
+        const mainImgFile = await urlToFile(data.mainImg);
+        setMainImage(mainImgFile);
         setGetModeMainImg(data.mainImg);
-        try {
-          const mainImgFile = await urlToFile(data.mainImg, `${data.mainimg}.png`);
-          setMainImage(mainImgFile);
-        } catch (error) {
-          console.error('Error fetching artwork details:', error);
-        }
       } else {
-        setGetModeMainImg('');
         setMainImage(null);
+        setGetModeMainImg('');
       }
+
       if (data.responsiveMainImg) {
+        const responsiveImgFile = await urlToFile(data.responsiveMainImg);
+        setResponsiveMainImage(responsiveImgFile);
         setGetModeResponsiveMainImg(data.responsiveMainImg);
-        try {
-          const responsiveMainImgFile = await urlToFile(data.responsiveMainImg, `${data.responsiveMainImg}.png`);
-          setResponsiveMainImage(responsiveMainImgFile);
-        } catch (error) {
-          console.error('Error fetching artwork details:', error);
-        }
       } else {
-        setGetModeResponsiveMainImg('');
         setResponsiveMainImage(null);
+        setGetModeResponsiveMainImg('');
       }
+
       if (data.projectImages && data.projectImages.length > 0) {
-        try {
-          const detailImageFiles = await Promise.all(
-            data.projectImages.map(async (image: { imageUrlList: string }) => {
-              const detailImgFile = await urlToFile(image.imageUrlList, `${image.imageUrlList}.png`);
-              console.log(detailImgFile);
-              return detailImgFile;
-            }),
-          );
-          setDetailImages(detailImageFiles);
-          console.log(detailImageFiles, 'detailImageFiles  Blob');
-          setPutData((prevState) => ({
-            ...prevState,
-            files: detailImageFiles,
-          }));
-        } catch (error) {
-          console.error('Error fetching artwork details:', error);
-        }
+        const detailImageFiles = await Promise.all(
+          data.projectImages.map(async (image: { imageUrlList: string }) => urlToFile(image.imageUrlList)),
+        );
+
+        setDetailImages(detailImageFiles);
+        setPutData((prevState) => ({
+          ...prevState,
+          files: detailImageFiles,
+        }));
+
         setGetModeDetailImgs(data.projectImages.map((image: { imageUrlList: string }) => image.imageUrlList));
+      } else {
+        setDetailImages([]);
+        setGetModeDetailImgs([]);
       }
+
       setCustomer(data.client);
       setOverview(data.overView);
     } catch (error) {

diff --git a/src/utils/urlToFile.ts b/src/utils/urlToFile.ts
@@ -1,46 +1,44 @@
+// 파일 이름을 URL에서 추출하는 함수
 export function extractFileNameFromUrl(url: string): string {
   try {
     if (!url || url.includes('undefined')) {
       console.error('Invalid URL:', url);
-      return 'default.png'; // 기본값
+      return 'default.png'; // 기본값 반환
     }
 
     const urlObject = new URL(url);
     let fileName = decodeURIComponent(urlObject.pathname.split('/').pop() || 'default.png');
 
-    // 파일 이름이 유효하지 않을 경우 기본값 설정
-    if (!fileName || fileName === 'undefined') {
-      return 'default.png';
-    }
-
     const maxFileNameLength = 50; // 파일 이름 길이 제한
-    const extensionMatch = fileName.match(/\.[^/.]+$/); // 확장자 확인
-    const extension = extensionMatch ? extensionMatch[0] : '.png'; // 확장자가 없으면 `.png`
+    const extensionMatch = fileName.match(/\.[^/.]+$/); // 확장자 추출
+    const extension = extensionMatch ? extensionMatch[0] : '.png'; // 확장자가 없으면 기본값 설정
     const baseName = fileName.replace(/\.[^/.]+$/, ''); // 확장자 제거
 
-    // 파일 이름 길이 제한 적용
+    // 파일 이름이 너무 길면 고유 식별자 추가
     if (baseName.length > maxFileNameLength - extension.length) {
-      const truncatedName = baseName.slice(0, maxFileNameLength - extension.length - 5); // 고유값 포함 길이 조정
-      const uniqueSuffix = Math.random().toString(36).slice(-4); // 고유 식별자 추가
+      const truncatedName = baseName.slice(0, maxFileNameLength - extension.length - 5);
+      const uniqueSuffix = Math.random().toString(36).slice(-4); // 고유값 추가
       fileName = `${truncatedName}_${uniqueSuffix}${extension}`;
     }
 
     return fileName;
   } catch (error) {
     console.error('Error extracting file name from URL:', error);
-    return 'default.png'; // 기본값 반환
+    return 'default.png'; // 에러 발생 시 기본값 반환
   }
 }
 
+// URL 유효성 검사 함수
 export const isValidUrl = (url: string): boolean => {
   try {
-    new URL(url); // URL 생성이 성공하면 유효
+    new URL(url); // URL이 유효하면 true 반환
     return true;
   } catch {
-    return false; // 실패 시 false 반환
+    return false; // 유효하지 않으면 false 반환
   }
 };
 
+// URL을 File 객체로 변환하는 함수
 export async function urlToFile(url: string | null, fileName?: string): Promise<File> {
   try {
     if (!url || !isValidUrl(url)) {
@@ -57,13 +55,12 @@ export async function urlToFile(url: string | null, fileName?: string): Promise<
     const blob = await response.blob();
     const finalFileName = fileName ? extractFileNameFromUrl(fileName) : extractFileNameFromUrl(url);
 
-    // 이미 `File` 형태의 데이터가 있으면 처리 반복 방지
-    if (finalFileName.includes('.png.png')) {
-      console.warn(`Skipping redundant processing for: ${finalFileName}`);
-      return new File([blob], finalFileName.replace(/(\.png)+$/, '.png'), { type: blob.type });
-    }
+    // 중복된 확장자 처리 방지
+    const sanitizedFileName = finalFileName.replace(/(\.[a-zA-Z0-9]+)+$/, (match) =>
+      match.split('.').slice(0, 2).join('.'),
+    );
 
-    return new File([blob], finalFileName, { type: blob.type });
+    return new File([blob], sanitizedFileName, { type: blob.type });
   } catch (error) {
     console.error('[Error converting URL to file]', { url, fileName, error });
     return new File([], fileName || 'default.png', { type: 'image/png' }); // 기본값 반환