refactor: atflCd로 기존 이미지 삭제하는 로직으로 수정

apps/cs/src/entities/attachment/api/attachment-service.ts

@@ -17,12 +17,27 @@ export class AttachmentApiService implements AttachmentService {
     await client.delete(`${ENDPOINT.ATTACH_SERVICE.ATTACHMENTS}/${atflId}`);
   }
 
+  public async deleteAttachmentByAtflCd(atflCd: string): Promise<void> {
+    await client.delete(
+      `${ENDPOINT.ATTACH_SERVICE.ATTACHMENTS}/atflCd/${atflCd}`,
+    );
+  }
+
   public async getImageUrl(atflId: string): Promise<string> {
     if (!atflId) return "";
     const response = await fetch(`${ENDPOINT.ATTACH_SERVICE.IMAGES}/${atflId}`);
     const blob = await response.blob();
     return URL.createObjectURL(blob);
   }
+
+  public async getImageUrlByAtflCd(atflCd: string): Promise<string> {
+    if (!atflCd) return "";
+    const response = await fetch(
+      `${ENDPOINT.ATTACH_SERVICE.IMAGES}/atflCd/${atflCd}`,
+    );
+    const blob = await response.blob();
+    return URL.createObjectURL(blob);
+  }
 }
 
 export const AttachmentApi = new AttachmentApiService();

apps/cs/src/entities/attachment/model/attachment-interface.ts

@@ -15,5 +15,8 @@ export interface Attachment {
 
 export interface AttachmentService {
   getAttachments: (atflCd: string) => Promise<Attachment[]>;
+  deleteAttachment: (atflId: string) => Promise<void>;
+  deleteAttachmentByAtflCd: (atflCd: string) => Promise<void>;
   getImageUrl: (atflId: string) => Promise<string>;
+  getImageUrlByAtflCd: (atflCd: string) => Promise<string>;
 }

apps/cs/src/pages/banner/model/banner-interface.ts

@@ -21,6 +21,7 @@ export interface Banner {
   bnrTtl: string;
   lnkgUrlAddr: string;
   useYn: string;
+  atflCd: string;
   mdfcnDt: string;
   mdfr: string;
   mdfrNm: string;

apps/cs/src/pages/banner/model/banner-table-columns.tsx

@@ -1,9 +1,12 @@
 "use client";
 
 import dayjs from "dayjs";
-import { type ColumnDef } from "@tanstack/react-table";
+import Image from "next/image";
+import type { ColumnDef } from "@tanstack/react-table";
 import { Checkbox } from "@common/components/ui";
-import { type Banner } from "./banner-interface";
+import { AttachmentApi } from "@/entities/attachment";
+import type { Banner } from "./banner-interface";
+import { useEffect, useState } from "react";
 
 export const columns: ColumnDef<Banner>[] = [
   {
@@ -27,7 +30,10 @@ export const columns: ColumnDef<Banner>[] = [
       />
     ),
   },
-  // TODO: 배너 이미지 셀 추가
+  {
+    header: "배너 이미지",
+    cell: ({ row }) => <BannerImage atflCd={row.original.atflCd} />,
+  },
   {
     accessorKey: "bnrTtl",
     header: "배너명",
@@ -53,3 +59,23 @@ export const columns: ColumnDef<Banner>[] = [
     },
   },
 ];
+
+const BannerImage = ({ atflCd }: { atflCd: string }) => {
+  const [imageUrl, setImageUrl] = useState("");
+
+  useEffect(() => {
+    if (!atflCd) return;
+
+    (async () => {
+      setImageUrl(await AttachmentApi.getImageUrlByAtflCd(atflCd));
+    })();
+  }, [atflCd]);
+
+  if (!imageUrl) return null;
+
+  return (
+    <div className="relative flex h-[4rem] w-[16rem] items-center justify-center">
+      <Image src={imageUrl} alt="배너 이미지" fill objectFit="contain" />
+    </div>
+  );
+};

apps/cs/src/pages/banner/ui/banner-form.tsx

@@ -41,10 +41,10 @@ function BannerForm({ form, bnrSn, ...props }: BannerFormProps) {
   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 BannerForm({ form, bnrSn, ...props }: BannerFormProps) {
     const { atflCd, atflId } = JSON.parse(fileInfo) ?? {};
     if (atflCd) form.setValue("atflCd", atflCd);
     if (atflId) setImageUrl(await AttachmentApi.getImageUrl(atflId));
+    if (attachmentData)
+      await AttachmentApi.deleteAttachmentByAtflCd(attachmentData.atflCd);
   };
 
   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={!!bnrSn} {...props}>
@@ -147,9 +149,6 @@ function BannerForm({ form, bnrSn, ...props }: BannerFormProps) {
                             <>
                               <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
@@ -160,9 +159,12 @@ function BannerForm({ form, bnrSn, ...props }: BannerFormProps) {
                                       />
                                     )}
                                   </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>

apps/cs/src/pages/banner/ui/banner-page.tsx

@@ -125,7 +125,7 @@ function BannerPage() {
             </div>
           </div>
         </div>
-        <div className="card !m-[1.2rem] h-[30.4rem] overflow-auto !p-0">
+        <div className="card !m-[1.2rem] h-full overflow-auto !p-0">
           <DataTable table={table} onRowClick={handleRowClick} viewPagination />
         </div>
       </div>

apps/cs/src/pages/image/ui/image-form.tsx

@@ -60,14 +60,16 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
     if (atflCd) form.setValue("atflCd", atflCd);
     if (atflId) setImageUrl(await AttachmentApi.getImageUrl(atflId));
     if (attachmentData)
-      await AttachmentApi.deleteAttachment(attachmentData.atflId);
+      await AttachmentApi.deleteAttachmentByAtflCd(attachmentData.atflCd);
   };
 
   useEffect(() => {
     if (!attachmentData) return;
 
     (async () => {
-      setImageUrl(await AttachmentApi.getImageUrl(attachmentData.atflId));
+      setImageUrl(
+        await AttachmentApi.getImageUrlByAtflCd(attachmentData.atflCd),
+      );
     })();
   }, [attachmentData]);
 

apps/cs/src/pages/image/ui/image-page.tsx

@@ -125,7 +125,7 @@ function ImagePage() {
             </div>
           </div>
         </div>
-        <div className="card !m-[1.2rem] h-[30.4rem] overflow-auto !p-0">
+        <div className="card !m-[1.2rem] h-full overflow-auto !p-0">
           <DataTable table={table} onRowClick={handleRowClick} viewPagination />
         </div>
       </div>