diff --git a/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkDetail.tsx b/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkDetail.tsx index 23406b5..dca865c 100644 --- a/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkDetail.tsx +++ b/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkDetail.tsx @@ -39,24 +39,6 @@ const ArtworkDetail = () => { const [linkRegexMessage, setLinkRegexMessage] = useState(''); const [isTopMainArtwork, setIsTopMainArtwork] = useState(false); useUnsavedChangesWarning(MSG.CONFIRM_MSG.EXIT, !isGetMode); - const [putData, setPutData] = useState({ - request: { - projectId: 0, - department: '', - category: '', - name: '', - client: '', - date: '', - link: '', - overView: '', - projectType: 'others', - isPosted: false, - deletedImageId: [], - }, - file: '', - responsiveFile: '', - files: [], - }); useEffect(() => { setSubmitButtonDisabled( @@ -110,66 +92,52 @@ const ArtworkDetail = () => { setIsProjectOpened(data.isPosted); setProjectType(data.projectType); setLink(data.link); - setPutData({ - request: { - projectId: data.id, - department: '', - category: data.category, - name: data.name, - client: data.client, - date: data.date, - link: data.link, - projectType: data.projectType, - isPosted: data.isPosted, - overView: data.overView, - deletedImageId: [], - }, - file: data.mainImg, - responsiveFile: data.responsiveMainImg, - files: [], - }); + setCustomer(data.client); + setOverview(data.overView); + if (data.projectType === 'top' || data.projectType === 'main') { setIsTopMainArtwork(true); } else { setIsTopMainArtwork(false); } + if (data.mainImg) { - const mainImgFile = await urlToFile(data.mainImg); - setMainImage(mainImgFile); - setGetModeMainImg(data.mainImg); - } else { - setMainImage(null); - setGetModeMainImg(''); + try { + const mainImgFile = await urlToFile(data.mainImg); + setMainImage(mainImgFile); + setGetModeMainImg(data.mainImg); + } catch (error) { + console.error('[ArtworkDetail Failed to load main image]', error); + setMainImage(null); + setGetModeMainImg(''); + } } if (data.responsiveMainImg) { - const responsiveImgFile = await urlToFile(data.responsiveMainImg); - setResponsiveMainImage(responsiveImgFile); - setGetModeResponsiveMainImg(data.responsiveMainImg); - } else { - setResponsiveMainImage(null); - setGetModeResponsiveMainImg(''); + try { + const responsiveImgFile = await urlToFile(data.responsiveMainImg); + setResponsiveMainImage(responsiveImgFile); + setGetModeResponsiveMainImg(data.responsiveMainImg); + } catch (error) { + console.error('[ArtworkDetail Failed to load responsive main image]', error); + setResponsiveMainImage(null); + setGetModeResponsiveMainImg(''); + } } if (data.projectImages && data.projectImages.length > 0) { - 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([]); + try { + const detailImageFiles = await Promise.all( + data.projectImages.map(async (image: { imageUrlList: string }) => urlToFile(image.imageUrlList)), + ); + setDetailImages(detailImageFiles); + setGetModeDetailImgs(data.projectImages.map((image: { imageUrlList: string }) => image.imageUrlList)); + } catch (error) { + console.error('[ArtworkDetail Failed to load detail images]', error); + setDetailImages([]); + setGetModeDetailImgs([]); + } } - - setCustomer(data.client); - setOverview(data.overView); } catch (error) { console.error('[Error fetching artwork details]', error); } diff --git a/src/utils/urlToFile.ts b/src/utils/urlToFile.ts index 609be8b..b0a88fb 100644 --- a/src/utils/urlToFile.ts +++ b/src/utils/urlToFile.ts @@ -41,7 +41,10 @@ export async function urlToFile(url: string | null, fileName?: string): Promise< return new File([], fileName || `default_${uniqueSuffix}.png`, { type: 'image/png' }); } - const response = await fetch(url, { + // 캐시 무효화를 위해 URL에 타임스탬프 추가 + const cacheBusterUrl = `${url}?t=${Date.now()}`; + + const response = await fetch(cacheBusterUrl, { method: 'GET', mode: 'cors', // CORS 모드 활성화 headers: { @@ -50,7 +53,7 @@ export async function urlToFile(url: string | null, fileName?: string): Promise< }); if (!response.ok) { - console.error(`[Fetch failed] Status: ${response.status}, URL: ${url}`); + console.error(`[Fetch failed] Status: ${response.status}, URL: ${cacheBusterUrl}`); throw new Error(`[Failed to fetch resource] ${response.status} ${response.statusText}`); }