DirectroyEntry 컴포넌트 구현

src/lib/components/Modal.svelte

@@ -5,14 +5,14 @@
 
   interface Props {
     children: Snippet;
-    onClose?: () => void;
+    onclose?: () => void;
     isOpen: boolean;
   }
 
-  let { children, onClose, isOpen = $bindable() }: Props = $props();
+  let { children, onclose, isOpen = $bindable() }: Props = $props();
 
   const closeModal = $derived(
-    onClose ||
+    onclose ||
       (() => {
         isOpen = false;
       }),

src/lib/components/TopBar.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import IconArrowBack from "~icons/material-symbols/arrow-back";
+
+  interface Props {
+    children?: Snippet;
+    onback?: () => void;
+    title?: string;
+  }
+
+  let { children, onback, title }: Props = $props();
+
+  const back = $derived(() => {
+    setTimeout(onback || (() => history.back()), 100);
+  });
+</script>
+
+<div class="relative mt-4 flex items-center justify-between">
+  <button onclick={back} class="rounded-full p-1 active:bg-gray-100">
+    <IconArrowBack class="text-2xl" />
+  </button>
+  {#if title}
+    <p class="absolute left-1/2 -translate-x-1/2 transform text-xl font-semibold">{title}</p>
+  {/if}
+  {#if children}
+    {@render children?.()}
+  {/if}
+</div>

src/lib/components/index.ts

@@ -1,2 +1,3 @@
 export { default as BottomSheet } from "./BottomSheet.svelte";
 export { default as Modal } from "./Modal.svelte";
+export { default as TopBar } from "./TopBar.svelte";