refactor: blob 이미지 가져오는 방식 수정

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();

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

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"

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"

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 }) {