파일 페이지에서 즐겨찾기 설정이 가능하도록 변경 및 즐겨찾기에 추가된 경우 목록에서 즐겨찾기 여부를 아이콘으로 표시하도록 개선

2026-02-03 23:56:53 +00:00 · 2026-01-17 20:11:01 +09:00
parent 420e30f677
commit ff6ea3a0b9
18 changed files with 94 additions and 7 deletions
--- a/src/lib/components/atoms/buttons/FileThumbnailButton.svelte
+++ b/src/lib/components/atoms/buttons/FileThumbnailButton.svelte
@@ -2,6 +2,8 @@
  import { getFileThumbnail } from "$lib/modules/file";
  import type { SummarizedFileInfo } from "$lib/modules/filesystem";

+  import IconFavorite from "~icons/material-symbols/favorite";
+
  interface Props {
    info: SummarizedFileInfo;
    onclick?: (file: SummarizedFileInfo) => void;
@@ -14,11 +16,19 @@

 <button
  onclick={onclick && (() => setTimeout(() => onclick(info), 100))}
-  class="aspect-square overflow-hidden rounded transition active:scale-95 active:brightness-90"
+  class="relative aspect-square overflow-hidden rounded transition active:scale-95 active:brightness-90"
 >
  {#if $thumbnail}
    <img src={$thumbnail} alt={info.name} class="h-full w-full object-cover" />
  {:else}
    <div class="h-full w-full bg-gray-100"></div>
  {/if}
+  {#if info.isFavorite}
+    <div class={["absolute bottom-0 right-0", !thumbnail && "rounded-full bg-white p-0.5"]}>
+      <IconFavorite
+        class="text-sm text-red-500"
+        style="filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white);"
+      />
+    </div>
+  {/if}
 </button>
--- a/src/lib/components/molecules/labels/DirectoryEntryLabel.svelte
+++ b/src/lib/components/molecules/labels/DirectoryEntryLabel.svelte
@@ -5,9 +5,11 @@
  import IconFolder from "~icons/material-symbols/folder";
  import IconDriveFolderUpload from "~icons/material-symbols/drive-folder-upload";
  import IconDraft from "~icons/material-symbols/draft";
+  import IconFavorite from "~icons/material-symbols/favorite";

  interface Props {
    class?: ClassValue;
+    isFavorite?: boolean;
    name: string;
    subtext?: string;
    textClass?: ClassValue;
@@ -17,6 +19,7 @@

  let {
    class: className,
+    isFavorite = false,
    name,
    subtext,
    textClass: textClassName,
@@ -26,7 +29,7 @@
 </script>

 {#snippet iconSnippet()}
-  <div class="flex h-10 w-10 items-center justify-center text-xl">
+  <div class="relative flex h-10 w-10 items-center justify-center text-xl">
    {#if thumbnail}
      <img src={thumbnail} alt={name} loading="lazy" class="aspect-square rounded object-cover" />
    {:else if type === "directory"}
@@ -36,6 +39,14 @@
    {:else}
      <IconDraft class="text-blue-400" />
    {/if}
+    {#if isFavorite}
+      <div class={["absolute bottom-0 right-0", !thumbnail && "rounded-full bg-white p-0.5"]}>
+        <IconFavorite
+          class="text-xs text-red-500"
+          style="filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white);"
+        />
+      </div>
+    {/if}
  </div>
 {/snippet}

--- a/src/lib/indexedDB/filesystem.ts
+++ b/src/lib/indexedDB/filesystem.ts
@@ -4,6 +4,7 @@ interface DirectoryInfo {
  id: number;
  parentId: DirectoryId;
  name: string;
+  isFavorite?: boolean;
 }

 interface FileInfo {
@@ -14,6 +15,7 @@ interface FileInfo {
  createdAt?: Date;
  lastModifiedAt: Date;
  categoryIds?: number[];
+  isFavorite?: boolean;
 }

 interface CategoryInfo {
--- a/src/lib/modules/filesystem/category.ts
+++ b/src/lib/modules/filesystem/category.ts
@@ -22,6 +22,7 @@ const cache = new FilesystemCache<CategoryId, MaybeCategoryInfo>({
                  name: fileInfo.name,
                  createdAt: fileInfo.createdAt,
                  lastModifiedAt: fileInfo.lastModifiedAt,
+                  isFavorite: fileInfo.isFavorite,
                  isRecursive: file.isRecursive,
                }
              : undefined;
@@ -66,6 +67,7 @@ const cache = new FilesystemCache<CategoryId, MaybeCategoryInfo>({
              parentId: file.parent,
              contentType: file.contentType,
              isRecursive: file.isRecursive,
+              isFavorite: file.isFavorite,
              ...(await decryptFileMetadata(file, masterKey)),
            })),
          ),
--- a/src/lib/modules/filesystem/file.ts
+++ b/src/lib/modules/filesystem/file.ts
@@ -27,6 +27,7 @@ const cache = new FilesystemCache<number, MaybeFileInfo>({
        name: file.name,
        createdAt: file.createdAt,
        lastModifiedAt: file.lastModifiedAt,
+        isFavorite: file.isFavorite,
        categories: categories?.filter((category) => !!category) ?? [],
      };
    }
@@ -55,6 +56,7 @@ const cache = new FilesystemCache<number, MaybeFileInfo>({
        name: metadata.name,
        createdAt: metadata.createdAt,
        lastModifiedAt: metadata.lastModifiedAt,
+        isFavorite: file.isFavorite,
        categories,
      });
    } catch (e) {
@@ -121,6 +123,7 @@ const cache = new FilesystemCache<number, MaybeFileInfo>({
          parentId: metadataRaw.parent,
          contentType: metadataRaw.contentType,
          categories,
+          isFavorite: metadataRaw.isFavorite,
          ...metadata,
        };
      }),
--- a/src/lib/server/db/file.ts
+++ b/src/lib/server/db/file.ts
@@ -641,6 +641,7 @@ export const searchFiles = async (
    encName: file.encrypted_name,
    encCreatedAt: file.encrypted_created_at,
    encLastModifiedAt: file.encrypted_last_modified_at,
+    isFavorite: file.is_favorite,
  }));
 };

--- a/src/routes/(fullscreen)/file/[id]/+page.svelte
+++ b/src/routes/(fullscreen)/file/[id]/+page.svelte
@@ -18,6 +18,7 @@
    requestThumbnailUpload,
    requestFileAdditionToCategory,
    requestVideoStream,
+    requestFavoriteToggle,
  } from "./service";
  import TopBarMenu from "./TopBarMenu.svelte";

@@ -75,6 +76,15 @@
    void getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
  };

+  const toggleFavorite = async () => {
+    if (!info?.exists) return;
+    const isFavorite = !!info.isFavorite;
+    const success = await requestFavoriteToggle(data.id, isFavorite);
+    if (success) {
+      info.isFavorite = !isFavorite;
+    }
+  };
+
  $effect(() => {
    HybridPromise.resolve(getFileInfo(data.id, $masterKeyStore?.get(1)?.key!)).then((result) => {
      if (data.id === result.id) {
@@ -158,6 +168,8 @@
      {fileBlob}
      downloadUrl={videoStreamUrl}
      filename={info?.name}
+      isFavorite={info?.isFavorite}
+      onToggleFavorite={toggleFavorite}
    />
  </div>
 </TopBar>
--- a/src/routes/(fullscreen)/file/[id]/TopBarMenu.svelte
+++ b/src/routes/(fullscreen)/file/[id]/TopBarMenu.svelte
@@ -5,6 +5,8 @@
  import { fly } from "svelte/transition";
  import { goto } from "$app/navigation";

+  import IconFavorite from "~icons/material-symbols/favorite";
+  import IconFavoriteOutline from "~icons/material-symbols/favorite-outline";
  import IconFolderOpen from "~icons/material-symbols/folder-open";
  import IconCloudDownload from "~icons/material-symbols/cloud-download";

@@ -13,10 +15,20 @@
    downloadUrl?: string;
    fileBlob?: Blob;
    filename?: string;
+    isFavorite?: boolean;
    isOpen: boolean;
+    onToggleFavorite?: () => void;
  }

-  let { directoryId, downloadUrl, fileBlob, filename, isOpen = $bindable() }: Props = $props();
+  let {
+    directoryId,
+    downloadUrl,
+    fileBlob,
+    filename,
+    isFavorite,
+    isOpen = $bindable(),
+    onToggleFavorite,
+  }: Props = $props();

  const handleDownload = () => {
    if (fileBlob && filename) {
@@ -34,7 +46,7 @@

 {#if isOpen && (directoryId || downloadUrl || fileBlob)}
  <div
-    class="absolute right-2 top-full z-20 space-y-1 rounded-lg bg-white px-1 py-2 shadow-2xl"
+    class="absolute right-2 top-full z-20 min-w-44 space-y-1 rounded-lg bg-white px-1 py-2 shadow-2xl"
    transition:fly={{ y: -8, duration: 200 }}
  >
    <p class="px-3 pt-2 text-sm font-semibold text-gray-600">더보기</p>
@@ -54,6 +66,13 @@
        </button>
      {/snippet}

+      {#if typeof isFavorite === "boolean"}
+        {@render menuButton(
+          isFavorite ? IconFavorite : IconFavoriteOutline,
+          isFavorite ? "즐겨찾기 해제" : "즐겨찾기",
+          onToggleFavorite ?? (() => {}),
+        )}
+      {/if}
      {#if directoryId}
        {@render menuButton(IconFolderOpen, "폴더에서 보기", () =>
          goto(
--- a/src/routes/(fullscreen)/file/[id]/service.ts
+++ b/src/routes/(fullscreen)/file/[id]/service.ts
@@ -48,3 +48,16 @@ export const requestFileAdditionToCategory = async (fileId: number, categoryId:
    return false;
  }
 };
+
+export const requestFavoriteToggle = async (fileId: number, isFavorite: boolean) => {
+  try {
+    if (isFavorite) {
+      await trpc().favorites.removeFile.mutate({ id: fileId });
+    } else {
+      await trpc().favorites.addFile.mutate({ id: fileId });
+    }
+    return true;
+  } catch {
+    return false;
+  }
+};
--- a/src/routes/(fullscreen)/search/Directory.svelte
+++ b/src/routes/(fullscreen)/search/Directory.svelte
@@ -12,5 +12,5 @@
 </script>

 <ActionEntryButton class="h-14" {onclick}>
-  <DirectoryEntryLabel type="directory" name={info.name} />
+  <DirectoryEntryLabel type="directory" name={info.name} isFavorite={info.isFavorite} />
 </ActionEntryButton>
--- a/src/routes/(fullscreen)/search/File.svelte
+++ b/src/routes/(fullscreen)/search/File.svelte
@@ -21,5 +21,6 @@
    thumbnail={$thumbnail}
    name={info.name}
    subtext={formatDateTime(info.createdAt ?? info.lastModifiedAt)}
+    isFavorite={info.isFavorite}
  />
 </ActionEntryButton>
--- a/src/routes/(fullscreen)/search/service.ts
+++ b/src/routes/(fullscreen)/search/service.ts
@@ -46,6 +46,7 @@ export const requestSearch = async (filter: SearchFilter, masterKey: CryptoKey)
                exists: true,
                parentId: directory.parent,
                ...metadata,
+                isFavorite: !!directory.isFavorite,
              };
            },
          }),
@@ -65,6 +66,7 @@ export const requestSearch = async (filter: SearchFilter, masterKey: CryptoKey)
                exists: true,
                parentId: file.parent,
                contentType: file.contentType,
+                isFavorite: !!file.isFavorite,
                ...metadata,
              };
            },
--- a/src/routes/(main)/category/[[id]]/File.svelte
+++ b/src/routes/(main)/category/[[id]]/File.svelte
@@ -24,5 +24,10 @@
  actionButtonIcon={onRemoveClick && IconClose}
  onActionButtonClick={() => onRemoveClick?.(info)}
 >
-  <DirectoryEntryLabel type="file" thumbnail={$thumbnail} name={info.name} />
+  <DirectoryEntryLabel
+    type="file"
+    thumbnail={$thumbnail}
+    name={info.name}
+    isFavorite={info.isFavorite}
+  />
 </ActionEntryButton>
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte
@@ -40,5 +40,6 @@
    thumbnail={$thumbnail}
    name={info.name}
    subtext={formatDateTime(info.createdAt ?? info.lastModifiedAt)}
+    isFavorite={info.isFavorite}
  />
 </ActionEntryButton>
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte
@@ -31,5 +31,5 @@
  actionButtonIcon={IconMoreVert}
  onActionButtonClick={() => action(onOpenMenuClick)}
 >
-  <DirectoryEntryLabel type="directory" name={info.name} />
+  <DirectoryEntryLabel type="directory" name={info.name} isFavorite={info.isFavorite} />
 </ActionEntryButton>
--- a/src/trpc/routers/category.ts
+++ b/src/trpc/routers/category.ts
@@ -57,6 +57,7 @@ const categoryRouter = router({
          createdAtIv: file.encCreatedAt?.iv,
          lastModifiedAt: file.encLastModifiedAt.ciphertext,
          lastModifiedAtIv: file.encLastModifiedAt.iv,
+          isFavorite: file.isFavorite,
          isRecursive: file.isRecursive,
        })),
      };
--- a/src/trpc/routers/file.ts
+++ b/src/trpc/routers/file.ts
@@ -31,6 +31,7 @@ const fileRouter = router({
        createdAtIv: file.encCreatedAt?.iv,
        lastModifiedAt: file.encLastModifiedAt.ciphertext,
        lastModifiedAtIv: file.encLastModifiedAt.iv,
+        isFavorite: file.isFavorite,
        categories: categories.map((category) => ({
          id: category.id,
          parent: category.parentId,
@@ -65,6 +66,7 @@ const fileRouter = router({
        createdAtIv: file.encCreatedAt?.iv,
        lastModifiedAt: file.encLastModifiedAt.ciphertext,
        lastModifiedAtIv: file.encLastModifiedAt.iv,
+        isFavorite: file.isFavorite,
        categories: file.categories.map((category) => ({
          id: category.id,
          parent: category.parentId,
--- a/src/trpc/routers/search.ts
+++ b/src/trpc/routers/search.ts
@@ -32,6 +32,7 @@ const searchRouter = router({
          dekVersion: directory.dekVersion,
          name: directory.encName.ciphertext,
          nameIv: directory.encName.iv,
+          isFavorite: directory.isFavorite,
        })),
        files: files.map((file) => ({
          id: file.id,
@@ -46,6 +47,7 @@ const searchRouter = router({
          createdAtIv: file.encCreatedAt?.iv,
          lastModifiedAt: file.encLastModifiedAt.ciphertext,
          lastModifiedAtIv: file.encLastModifiedAt.iv,
+          isFavorite: file.isFavorite,
        })),
      };
    }),