즐겨찾기 기능 구현

src/routes/(main)/favorites/+page.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { goto } from "$app/navigation";
+  import { RowVirtualizer } from "$lib/components/atoms";
+  import { masterKeyStore } from "$lib/stores";
+  import Directory from "./Directory.svelte";
+  import File from "./File.svelte";
+  import { requestFavoriteEntries, requestRemoveFavorite, type FavoriteEntry } from "./service";
+
+  let { data } = $props();
+
+  let entries: FavoriteEntry[] = $state([]);
+  let isLoading = $state(true);
+
+  onMount(async () => {
+    const masterKey = $masterKeyStore?.get(1)?.key;
+    if (masterKey) {
+      entries = await requestFavoriteEntries(data.favorites, masterKey);
+    }
+    isLoading = false;
+  });
+
+  const handleRemove = async (entry: FavoriteEntry) => {
+    if (await requestRemoveFavorite(entry.type, entry.details.id)) {
+      entries = entries.filter(
+        (e) => !(e.type === entry.type && e.details.id === entry.details.id),
+      );
+    }
+  };
+
+  const handleClick = (entry: FavoriteEntry) => {
+    goto(
+      entry.type === "file"
+        ? `/file/${entry.details.id}?from=favorite`
+        : `/directory/${entry.details.id}?from=favorite`,
+    );
+  };
+</script>
+
+<svelte:head>
+  <title>즐겨찾기</title>
+</svelte:head>
+
+<div class="flex h-full flex-col p-4">
+  {#if isLoading}
+    <div class="flex flex-grow items-center justify-center">
+      <p class="text-gray-500">
+        {#if data.favorites.files.length === 0 && data.favorites.directories.length === 0}
+          즐겨찾기한 항목이 없어요.
+        {:else}
+          로딩 중...
+        {/if}
+      </p>
+    </div>
+  {:else if entries.length === 0}
+    <div class="flex flex-grow items-center justify-center">
+      <p class="text-gray-500">즐겨찾기한 항목이 없어요.</p>
+    </div>
+  {:else}
+    <RowVirtualizer
+      count={entries.length}
+      getItemKey={(index) => `${entries[index]!.type}-${entries[index]!.details.id}`}
+      estimateItemHeight={() => 56}
+      itemGap={4}
+    >
+      {#snippet item(index)}
+        {@const entry = entries[index]!}
+        {#if entry.type === "directory"}
+          <Directory
+            info={entry.details}
+            onclick={() => handleClick(entry)}
+            onRemoveClick={() => handleRemove(entry)}
+          />
+        {:else}
+          <File
+            info={entry.details}
+            onclick={() => handleClick(entry)}
+            onRemoveClick={() => handleRemove(entry)}
+          />
+        {/if}
+      {/snippet}
+    </RowVirtualizer>
+  {/if}
+</div>