From d6b48ea55405234f86eb48253e2baef8a8a4d931 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 8 Apr 2025 10:39:04 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20blob=20=EC=9D=B4=EB=AF=B8=EC=A7=80?=
 =?UTF-8?q?=20=EA=B0=80=EC=A0=B8=EC=98=A4=EB=8A=94=20=EB=B0=A9=EC=8B=9D=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

---
 .../entities/attachment/api/attachment-service.ts  |  7 +++++++
 .../attachment/model/attachment-interface.ts       |  1 +
 apps/cs/src/pages/banner/ui/banner-form.tsx        | 14 +++++++++-----
 apps/cs/src/pages/image/ui/image-form.tsx          | 14 +++++++++-----
 packages/common/components/src/ui/lnb/index.tsx    |  3 ++-
 5 files changed, 28 insertions(+), 11 deletions(-)

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<string> {
+    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<Attachment[]>;
+  getImageUrl: (atflId: string) => Promise<string>;
 }
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<Upload | null>(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}
                                       </p>
                                       <div className="relative h-full w-full">
-                                        {attachmentFileId && (
+                                        {imageUrl && (
                                           <Image
-                                            src={`${ENDPOINT.ATTACH_SERVICE.IMAGES}/${attachmentFileId}`}
+                                            src={imageUrl}
                                             alt="업로드된 이미지"
                                             fill
                                             objectFit="contain"
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 13c306a2d..96e7f755d 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -42,7 +42,7 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
 
   const router = useRouter();
   const { confirm } = useConfirm();
-  const [attachmentFileId, setAttachmentFileId] = useState("");
+  const [imageUrl, setImageUrl] = useState("");
   const [upload, setUpload] = useState<Upload | null>(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}
                                         </p>
                                         <div className="relative h-full w-full">
-                                          {attachmentFileId && (
+                                          {imageUrl && (
                                             <Image
-                                              src={`${ENDPOINT.ATTACH_SERVICE.IMAGES}/${attachmentFileId}`}
+                                              src={imageUrl}
                                               alt="업로드된 이미지"
                                               fill
                                               objectFit="contain"
diff --git a/packages/common/components/src/ui/lnb/index.tsx b/packages/common/components/src/ui/lnb/index.tsx
index 41dc06bfd..f2655be9d 100644
--- a/packages/common/components/src/ui/lnb/index.tsx
+++ b/packages/common/components/src/ui/lnb/index.tsx
@@ -37,7 +37,8 @@ export function LNB({
   const [openMenuIds, setOpenMenuIds] = useState<number[]>([]);
 
   function isPathMatched(path: string) {
-    return currentPath === path;
+    if (!path) return false;
+    return currentPath?.startsWith(path);
   }
 
   function MenuItem({ item }: { item: MenuItem }) {