디렉터리 페이지 레이아웃 구현 및 디렉터리 생성 구현

src/lib/components/Modal.svelte

@@ -5,25 +5,33 @@
 
   interface Props {
     children: Snippet;
+    onClose?: () => void;
     isOpen: boolean;
   }
 
-  let { children, isOpen = $bindable() }: Props = $props();
+  let { children, onClose, isOpen = $bindable() }: Props = $props();
+
+  const closeModal = $derived(
+    onClose ||
+      (() => {
+        isOpen = false;
+      }),
+  );
 </script>
 
 {#if isOpen}
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    onclick={() => {
-      isOpen = false;
-    }}
-    class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 px-2"
+    onclick={closeModal}
+    class="fixed inset-0 z-10 bg-black bg-opacity-50 px-2"
     transition:fade={{ duration: 100 }}
   >
     <AdaptiveDiv>
-      <div onclick={(e) => e.stopPropagation()} class="max-w-full rounded-2xl bg-white p-4">
-        {@render children?.()}
+      <div class="flex h-full items-center justify-center">
+        <div onclick={(e) => e.stopPropagation()} class="max-w-full rounded-2xl bg-white p-4">
+          {@render children?.()}
+        </div>
       </div>
     </AdaptiveDiv>
   </div>