From b48b9719ca0d532b8cb273991ffff210ed7c25a3 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Wed, 22 Jan 2025 23:19:06 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C,=20=ED=95=98?=
 =?UTF-8?q?=EC=9C=84=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=EC=97=90?=
 =?UTF-8?q?=EB=A7=8C=20=EB=93=B1=EB=A1=9D=EB=90=9C=20=ED=8C=8C=EC=9D=BC?=
 =?UTF-8?q?=EC=9D=B8=20=EA=B2=BD=EC=9A=B0=20=EC=82=AD=EC=A0=9C=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=EC=9D=84=20=ED=91=9C=EC=8B=9C=ED=95=98=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=8A=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/organisms/Category/Category.svelte | 17 ++++++++++++-----
 src/lib/organisms/Category/File.svelte     | 20 +++++++++++---------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/lib/organisms/Category/Category.svelte b/src/lib/organisms/Category/Category.svelte
index 563293d..fcae77f 100644
--- a/src/lib/organisms/Category/Category.svelte
+++ b/src/lib/organisms/Category/Category.svelte
@@ -30,13 +30,16 @@
     isFileRecursive = $bindable(),
   }: Props = $props();
 
-  let files: Writable<FileInfo | null>[] = $state([]);
+  let files: { info: Writable<FileInfo | null>; isRecursive: boolean }[] = $state([]);
 
   $effect(() => {
     files =
       info.files
         ?.filter(({ isRecursive }) => isFileRecursive || !isRecursive)
-        .map(({ id }) => getFileInfo(id, $masterKeyStore?.get(1)?.key!)) ?? [];
+        .map(({ id, isRecursive }) => ({
+          info: getFileInfo(id, $masterKeyStore?.get(1)?.key!),
+          isRecursive,
+        })) ?? [];
 
     // TODO: Sorting
   });
@@ -65,10 +68,14 @@
       </div>
       <div class="space-y-1">
         {#key info}
-          {#each files as file}
-            <File info={file} onclick={onFileClick} onRemoveClick={onFileRemoveClick} />
+          {#each files as { info, isRecursive }}
+            <File
+              {info}
+              onclick={onFileClick}
+              onRemoveClick={!isRecursive ? onFileRemoveClick : undefined}
+            />
           {:else}
-            <p>이 카테고리에 추가된 파일이 없어요.</p>
+            <p class="text-gray-500 text-center">이 카테고리에 추가된 파일이 없어요.</p>
           {/each}
         {/key}
       </div>
diff --git a/src/lib/organisms/Category/File.svelte b/src/lib/organisms/Category/File.svelte
index f15f9b0..e611b0b 100644
--- a/src/lib/organisms/Category/File.svelte
+++ b/src/lib/organisms/Category/File.svelte
@@ -9,7 +9,7 @@
   interface Props {
     info: Writable<FileInfo | null>;
     onclick: (selectedFile: SelectedFile) => void;
-    onRemoveClick: (selectedFile: SelectedFile) => void;
+    onRemoveClick?: (selectedFile: SelectedFile) => void;
   }
 
   let { info, onclick, onRemoveClick }: Props = $props();
@@ -30,7 +30,7 @@
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
     setTimeout(() => {
-      onRemoveClick({ id, dataKey, dataKeyVersion, name });
+      onRemoveClick!({ id, dataKey, dataKeyVersion, name });
     }, 100);
   };
 </script>
@@ -46,13 +46,15 @@
       <p title={$info.name} class="flex-grow truncate font-medium">
         {$info.name}
       </p>
-      <button
-        id="remove-file"
-        onclick={removeFile}
-        class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
-      >
-        <IconClose class="text-lg" />
-      </button>
+      {#if onRemoveClick}
+        <button
+          id="remove-file"
+          onclick={removeFile}
+          class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
+        >
+          <IconClose class="text-lg" />
+        </button>
+      {/if}
     </div>
   </div>
 {/if}