카테고리 페이지의 주요 요소를 별도 컴포넌트로 분리

src/lib/organisms/Category/File.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import type { FileInfo } from "$lib/modules/filesystem";
+  import type { SelectedFile } from "./service";
+
+  import IconDraft from "~icons/material-symbols/draft";
+  import IconMoreVert from "~icons/material-symbols/more-vert";
+
+  interface Props {
+    info: Writable<FileInfo | null>;
+    onclick: (selectedFile: SelectedFile) => void;
+  }
+
+  let { info, onclick }: Props = $props();
+
+  const openFile = () => {
+    const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
+    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
+
+    setTimeout(() => {
+      onclick({ id, dataKey, dataKeyVersion, name });
+    }, 100);
+  };
+
+  const openMenu = (e: Event) => {
+    e.stopPropagation();
+
+    // TODO
+  };
+</script>
+
+{#if $info}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div id="button" onclick={openFile} class="h-12 rounded-xl">
+    <div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
+      <div class="flex-shrink-0 text-lg text-blue-400">
+        <IconDraft />
+      </div>
+      <p title={$info.name} class="flex-grow truncate font-medium">
+        {$info.name}
+      </p>
+      <button
+        id="open-menu"
+        onclick={openMenu}
+        class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
+      >
+        <IconMoreVert class="text-lg" />
+      </button>
+    </div>
+  </div>
+{/if}
+
+<style>
+  #button:active:not(:has(#open-menu:active)) {
+    @apply bg-gray-100;
+  }
+  #button-content:active:not(:has(#open-menu:active)) {
+    @apply scale-95;
+  }
+</style>