diff --git a/apps/cs/src/entities/attachment/api/attachment-service.ts b/apps/cs/src/entities/attachment/api/attachment-service.ts index b0c613c5f..cabba36d0 100644 --- a/apps/cs/src/entities/attachment/api/attachment-service.ts +++ b/apps/cs/src/entities/attachment/api/attachment-service.ts @@ -12,6 +12,13 @@ export class AttachmentApiService implements AttachmentService { ); return response.data; } + + public async getImageUrl(atflId: string): Promise { + if (!atflId) return ""; + const response = await fetch(`${ENDPOINT.ATTACH_SERVICE.IMAGES}/${atflId}`); + const blob = await response.blob(); + return URL.createObjectURL(blob); + } } export const AttachmentApi = new AttachmentApiService(); diff --git a/apps/cs/src/entities/attachment/model/attachment-interface.ts b/apps/cs/src/entities/attachment/model/attachment-interface.ts index 367e54127..a790efbef 100644 --- a/apps/cs/src/entities/attachment/model/attachment-interface.ts +++ b/apps/cs/src/entities/attachment/model/attachment-interface.ts @@ -15,4 +15,5 @@ export interface Attachment { export interface AttachmentService { getAttachments: (atflCd: string) => Promise; + getImageUrl: (atflId: string) => Promise; } diff --git a/apps/cs/src/pages/banner/ui/banner-form.tsx b/apps/cs/src/pages/banner/ui/banner-form.tsx index 6ebf9cffd..4e283d45d 100644 --- a/apps/cs/src/pages/banner/ui/banner-form.tsx +++ b/apps/cs/src/pages/banner/ui/banner-form.tsx @@ -47,7 +47,7 @@ function BannerForm({ const router = useRouter(); const { confirm } = useConfirm(); - const [attachmentFileId, setAttachmentFileId] = useState(""); + const [imageUrl, setImageUrl] = useState(""); const [upload, setUpload] = useState(null); const [progress, setProgress] = useState(0); @@ -84,11 +84,15 @@ function BannerForm({ const { atflCd, atflId } = JSON.parse(fileInfo) ?? {}; if (atflCd) form.setValue("atflCd", atflCd); - if (atflId) setAttachmentFileId(atflId); + if (atflId) setImageUrl(await AttachmentApi.getImageUrl(atflId)); }; useEffect(() => { - if (atflId) setAttachmentFileId(atflId); + if (!atflId) return; + + (async () => { + setImageUrl(await AttachmentApi.getImageUrl(atflId)); + })(); }, [atflId]); return ( @@ -175,9 +179,9 @@ function BannerForm({ {(upload?.file as File)?.name}

- {attachmentFileId && ( + {imageUrl && ( 업로드된 이미지(null); const [progress, setProgress] = useState(0); @@ -79,11 +79,15 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) { const { atflCd, atflId } = JSON.parse(fileInfo) ?? {}; if (atflCd) form.setValue("atflCd", atflCd); - if (atflId) setAttachmentFileId(atflId); + if (atflId) setImageUrl(await AttachmentApi.getImageUrl(atflId)); }; useEffect(() => { - if (atflId) setAttachmentFileId(atflId); + if (!atflId) return; + + (async () => { + setImageUrl(await AttachmentApi.getImageUrl(atflId)); + })(); }, [atflId]); return ( @@ -228,9 +232,9 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) { {(upload?.file as File)?.name}

- {attachmentFileId && ( + {imageUrl && ( 업로드된 이미지([]); function isPathMatched(path: string) { - return currentPath === path; + if (!path) return false; + return currentPath?.startsWith(path); } function MenuItem({ item }: { item: MenuItem }) {