From a5652f9f04062270d94b01b2cd5f7546898c7c7d Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 8 Apr 2025 14:33:11 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=97=85?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EB=A1=9C=EC=A7=81=EC=97=90=20=EA=B8=B0?=
 =?UTF-8?q?=EC=A1=B4=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=82=AD=EC=A0=9C=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../attachment/api/attachment-service.ts      |  4 ++++
 apps/cs/src/pages/image/ui/image-form.tsx     | 20 ++++++++++---------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/apps/cs/src/entities/attachment/api/attachment-service.ts b/apps/cs/src/entities/attachment/api/attachment-service.ts
index cabba36d0..31807a3cb 100644
--- a/apps/cs/src/entities/attachment/api/attachment-service.ts
+++ b/apps/cs/src/entities/attachment/api/attachment-service.ts
@@ -13,6 +13,10 @@ export class AttachmentApiService implements AttachmentService {
     return response.data;
   }
 
+  public async deleteAttachment(atflId: string): Promise<void> {
+    await client.delete(`${ENDPOINT.ATTACH_SERVICE.ATTACHMENTS}/${atflId}`);
+  }
+
   public async getImageUrl(atflId: string): Promise<string> {
     if (!atflId) return "";
     const response = await fetch(`${ENDPOINT.ATTACH_SERVICE.IMAGES}/${atflId}`);
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 18d5df554..236fee434 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -41,10 +41,10 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
   const [upload, setUpload] = useState<Upload | null>(null);
   const [progress, setProgress] = useState(0);
 
-  const { data: atflId } = useQuery({
+  const { data: attachmentData } = useQuery({
     queryKey: [ENDPOINT.ATTACH_SERVICE.ATTACHMENTS, atflCd],
     queryFn: () => AttachmentApi.getAttachments(atflCd!),
-    select: (data) => data?.[data.length - 1]?.atflId,
+    select: (data) => data?.[data.length - 1],
     enabled: !!atflCd,
   });
 
@@ -59,15 +59,17 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
     const { atflCd, atflId } = JSON.parse(fileInfo) ?? {};
     if (atflCd) form.setValue("atflCd", atflCd);
     if (atflId) setImageUrl(await AttachmentApi.getImageUrl(atflId));
+    if (attachmentData)
+      await AttachmentApi.deleteAttachment(attachmentData.atflId);
   };
 
   useEffect(() => {
-    if (!atflId) return;
+    if (!attachmentData) return;
 
     (async () => {
-      setImageUrl(await AttachmentApi.getImageUrl(atflId));
+      setImageUrl(await AttachmentApi.getImageUrl(attachmentData.atflId));
     })();
-  }, [atflId]);
+  }, [attachmentData]);
 
   return (
     <FormWrapper form={form} isModifyMode={!!imgSn} {...props}>
@@ -205,9 +207,6 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
                               <>
                                 <Label htmlFor="atflCd">
                                   <div className="relative h-[27rem] w-[48rem] overflow-hidden rounded-sm border border-border bg-accent">
-                                    <p className="absolute bottom-3 left-0 p-2 text-base leading-none">
-                                      {(upload?.file as File)?.name}
-                                    </p>
                                     <div className="relative h-full w-full">
                                       {imageUrl && (
                                         <Image
@@ -218,9 +217,12 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
                                         />
                                       )}
                                     </div>
+                                    <p className="absolute bottom-3 left-0 z-10 p-2 text-base leading-none">
+                                      {(upload?.file as File)?.name}
+                                    </p>
                                     <Progress
                                       value={progress}
-                                      className="absolute bottom-0 left-0"
+                                      className="absolute bottom-0 left-0 z-10"
                                     />
                                   </div>
                                 </Label>