즐겨찾기 기능 구현

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>