파일/폴더 삭제 및 이름 변경 레이아웃 구현

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

@@ -1,28 +1,28 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
-
   import IconFolder from "~icons/material-symbols/folder";
   import IconDraft from "~icons/material-symbols/draft";
   import IconMoreVert from "~icons/material-symbols/more-vert";
 
   interface Props {
-    id: number;
     name: string;
+    onclick: () => void;
+    onOpenMenuClick: () => void;
     type: "directory" | "file";
   }
 
-  let { id, name, type }: Props = $props();
+  let { name, onclick, onOpenMenuClick, type }: Props = $props();
 
-  const open = () => {
+  const openMenu = (e: Event) => {
+    e.stopPropagation();
     setTimeout(() => {
-      goto(`/${type}/${id}`);
+      onOpenMenuClick();
     }, 100);
   };
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
-<div id="button" onclick={open} class="h-12 w-full rounded-xl">
+<div id="button" onclick={() => setTimeout(onclick, 100)} class="h-12 w-full 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">
       {#if type === "directory"}
@@ -36,7 +36,7 @@
     </p>
     <button
       id="open-menu"
-      onclick={(e) => e.stopPropagation()}
+      onclick={openMenu}
       class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
     >
       <IconMoreVert class="text-lg transition active:scale-95" />