카테고리 페이지에서, 하위 카테고리에만 등록된 파일인 경우 삭제 버튼을 표시하지 않도록 변경

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>

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}