From 07ee7adca5210139591fc2bf8865c4c297bc7df7 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 8 Apr 2025 15:57:19 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20atflCd=EB=A1=9C=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?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EB=A1=9C=EC=A7=81=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../attachment/api/attachment-service.ts      | 15 +++++++++
 .../attachment/model/attachment-interface.ts  |  3 ++
 .../pages/banner/model/banner-interface.ts    |  1 +
 .../banner/model/banner-table-columns.tsx     | 32 +++++++++++++++++--
 apps/cs/src/pages/banner/ui/banner-form.tsx   | 20 ++++++------
 apps/cs/src/pages/banner/ui/banner-page.tsx   |  2 +-
 apps/cs/src/pages/image/ui/image-form.tsx     |  6 ++--
 apps/cs/src/pages/image/ui/image-page.tsx     |  2 +-
 8 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/apps/cs/src/entities/attachment/api/attachment-service.ts b/apps/cs/src/entities/attachment/api/attachment-service.ts
index 31807a3cb..c930b7012 100644
--- a/apps/cs/src/entities/attachment/api/attachment-service.ts
+++ b/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();
diff --git a/apps/cs/src/entities/attachment/model/attachment-interface.ts b/apps/cs/src/entities/attachment/model/attachment-interface.ts
index a790efbef..5986a96d1 100644
--- a/apps/cs/src/entities/attachment/model/attachment-interface.ts
+++ b/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>;
 }
diff --git a/apps/cs/src/pages/banner/model/banner-interface.ts b/apps/cs/src/pages/banner/model/banner-interface.ts
index 839830dad..1226f63e6 100644
--- a/apps/cs/src/pages/banner/model/banner-interface.ts
+++ b/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;
diff --git a/apps/cs/src/pages/banner/model/banner-table-columns.tsx b/apps/cs/src/pages/banner/model/banner-table-columns.tsx
index 69833ab00..d30d28444 100644
--- a/apps/cs/src/pages/banner/model/banner-table-columns.tsx
+++ b/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>
+  );
+};
diff --git a/apps/cs/src/pages/banner/ui/banner-form.tsx b/apps/cs/src/pages/banner/ui/banner-form.tsx
index ade05f13e..2c901bd90 100644
--- a/apps/cs/src/pages/banner/ui/banner-form.tsx
+++ b/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>
diff --git a/apps/cs/src/pages/banner/ui/banner-page.tsx b/apps/cs/src/pages/banner/ui/banner-page.tsx
index a2019c126..2f8555fd5 100644
--- a/apps/cs/src/pages/banner/ui/banner-page.tsx
+++ b/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>
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 236fee434..3b4bb46d4 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/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]);
 
diff --git a/apps/cs/src/pages/image/ui/image-page.tsx b/apps/cs/src/pages/image/ui/image-page.tsx
index 648b8e410..18d2fa2fb 100644
--- a/apps/cs/src/pages/image/ui/image-page.tsx
+++ b/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>