feat: 이미지 업로드 로직에 기존 이미지 삭제 로직 추가

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}`);

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>