즐겨찾기 기능 구현

src/routes/(main)/directory/[[id]]/+page.svelte

@@ -23,6 +23,7 @@
     requestFileUpload,
     requestEntryRename,
     requestEntryDeletion,
+    requestFavoriteToggle,
   } from "./service.svelte";
 
   import IconSearch from "~icons/material-symbols/search";
@@ -45,7 +46,7 @@
   let isEntryDeleteModalOpen = $state(false);
 
   let showParentEntry = $derived(
-    ["file", "search"].includes(page.url.searchParams.get("from") ?? ""),
+    ["file", "search", "favorite"].includes(page.url.searchParams.get("from") ?? ""),
   );
   let showBackButton = $derived(data.id !== "root" || showParentEntry);
 
@@ -194,6 +195,12 @@
     isEntryMenuBottomSheetOpen = false;
     isEntryDeleteModalOpen = true;
   }}
+  onFavoriteClick={async () => {
+    if (await requestFavoriteToggle(context.selectedEntry!)) {
+      isEntryMenuBottomSheetOpen = false;
+      void getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+    }
+  }}
 />
 <EntryRenameModal
   bind:isOpen={isEntryRenameModalOpen}

src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte

@@ -19,7 +19,13 @@
   let thumbnail = $derived(getFileThumbnail(info));
 
   const action = (callback: typeof onclick) => {
-    callback({ type: "file", id: info.id, dataKey: info.dataKey, name: info.name });
+    callback({
+      type: "file",
+      id: info.id,
+      dataKey: info.dataKey,
+      name: info.name,
+      isFavorite: info.isFavorite ?? false,
+    });
   };
 </script>
 

src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte

@@ -15,7 +15,13 @@
   let { info, onclick, onOpenMenuClick }: Props = $props();
 
   const action = (callback: typeof onclick) => {
-    callback({ type: "directory", id: info.id, dataKey: info.dataKey, name: info.name });
+    callback({
+      type: "directory",
+      id: info.id,
+      dataKey: info.dataKey,
+      name: info.name,
+      isFavorite: info.isFavorite ?? false,
+    });
   };
 </script>
 

src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte

@@ -3,24 +3,35 @@
   import { DirectoryEntryLabel, IconEntryButton } from "$lib/components/molecules";
   import { useContext } from "./service.svelte";
 
+  import IconFavorite from "~icons/material-symbols/favorite";
+  import IconFavoriteBorder from "~icons/material-symbols/favorite-outline";
   import IconEdit from "~icons/material-symbols/edit";
   import IconDelete from "~icons/material-symbols/delete";
 
   interface Props {
     isOpen: boolean;
     onDeleteClick: () => void;
+    onFavoriteClick: () => void;
     onRenameClick: () => void;
   }
 
-  let { isOpen = $bindable(), onDeleteClick, onRenameClick }: Props = $props();
+  let { isOpen = $bindable(), onDeleteClick, onFavoriteClick, onRenameClick }: Props = $props();
   let context = useContext();
 </script>
 
 {#if context.selectedEntry}
-  {@const { name, type } = context.selectedEntry}
+  {@const { name, type, isFavorite } = context.selectedEntry}
   <BottomSheet bind:isOpen class="p-4">
     <DirectoryEntryLabel {type} {name} class="h-12 p-2" textClass="!font-semibold" />
     <div class="my-2 h-px w-full bg-gray-200"></div>
+    <IconEntryButton
+      icon={isFavorite ? IconFavorite : IconFavoriteBorder}
+      onclick={onFavoriteClick}
+      class="h-12 w-full"
+      iconClass={isFavorite ? "text-red-500" : ""}
+    >
+      {isFavorite ? "즐겨찾기에서 해제하기" : "즐겨찾기에 추가하기"}
+    </IconEntryButton>
     <IconEntryButton icon={IconEdit} onclick={onRenameClick} class="h-12 w-full">
       이름 바꾸기
     </IconEntryButton>

src/routes/(main)/directory/[[id]]/service.svelte.ts

@@ -17,6 +17,7 @@ export interface SelectedEntry {
   id: number;
   dataKey: DataKey | undefined;
   name: string;
+  isFavorite: boolean;
 }
 
 export const createContext = () => {
@@ -149,3 +150,25 @@ export const requestEntryDeletion = async (entry: SelectedEntry) => {
     return false;
   }
 };
+
+export const requestFavoriteToggle = async (entry: SelectedEntry) => {
+  try {
+    if (entry.type === "directory") {
+      if (entry.isFavorite) {
+        await trpc().favorites.removeDirectory.mutate({ id: entry.id });
+      } else {
+        await trpc().favorites.addDirectory.mutate({ id: entry.id });
+      }
+    } else {
+      if (entry.isFavorite) {
+        await trpc().favorites.removeFile.mutate({ id: entry.id });
+      } else {
+        await trpc().favorites.addFile.mutate({ id: entry.id });
+      }
+    }
+    return true;
+  } catch {
+    // TODO: Error Handling
+    return false;
+  }
+};