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

src/lib/components/BottomSheet.svelte

@@ -18,10 +18,10 @@
     onclick={() => {
       isOpen = false;
     }}
-    class="fixed inset-0 flex items-end justify-center"
+    class="fixed inset-0 z-10 flex items-end justify-center"
   >
     <div class="absolute inset-0 bg-black bg-opacity-50" transition:fade={{ duration: 100 }}></div>
-    <div class="z-10">
+    <div class="z-20 w-full">
       <AdaptiveDiv>
         <div
           onclick={(e) => e.stopPropagation()}

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>

src/lib/components/buttons/Button.svelte

@@ -9,13 +9,13 @@
 
   let { children, color = "primary", onclick }: Props = $props();
 
-  let bgColorStyle = $derived(
+  const bgColorStyle = $derived(
     {
       primary: "bg-primary-600 active:bg-primary-500",
       gray: "bg-gray-300 active:bg-gray-400",
     }[color],
   );
-  let fontColorStyle = $derived(
+  const fontColorStyle = $derived(
     {
       primary: "text-white",
       gray: "text-gray-800",

src/lib/components/buttons/EntryButton.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import IconChevronRight from "~icons/material-symbols/chevron-right";
+
+  interface Props {
+    children: Snippet;
+    onclick?: () => void;
+  }
+
+  let { children, onclick }: Props = $props();
+</script>
+
+<button
+  onclick={() => {
+    setTimeout(() => {
+      onclick?.();
+    }, 100);
+  }}
+  class="w-full rounded-xl active:bg-gray-100"
+>
+  <div class="flex w-full items-stretch justify-between p-2 transition active:scale-95">
+    <div>
+      {@render children?.()}
+    </div>
+    <div class="flex items-center justify-center">
+      <IconChevronRight class="text-xl text-gray-800" />
+    </div>
+  </div>
+</button>

src/lib/components/buttons/FloatingButton.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+  import type { SvelteHTMLElements } from "svelte/elements";
+
+  interface Props {
+    icon: Component<SvelteHTMLElements["svg"]>;
+    onclick?: () => void;
+  }
+
+  let { icon: Icon, onclick }: Props = $props();
+</script>
+
+<button
+  onclick={() => {
+    setTimeout(() => {
+      onclick?.();
+    }, 100);
+  }}
+  class="absolute bottom-4 right-4 flex h-14 w-14 items-center justify-center rounded-full bg-gray-300 shadow-lg transition active:scale-95 active:bg-gray-400"
+>
+  <Icon class="text-xl" />
+</button>

src/lib/components/buttons/index.ts

@@ -1,2 +1,4 @@
 export { default as Button } from "./Button.svelte";
+export { default as EntryButton } from "./EntryButton.svelte";
+export { default as FloatingButton } from "./FloatingButton.svelte";
 export { default as TextButton } from "./TextButton.svelte";

src/lib/components/divs/AdaptiveDiv.svelte

@@ -2,6 +2,6 @@
   let { children } = $props();
 </script>
 
-<div class="mx-auto w-full max-w-screen-md">
+<div class="mx-auto h-full w-full max-w-screen-md">
   {@render children?.()}
 </div>

src/lib/components/divs/TitleDiv.svelte

@@ -7,13 +7,12 @@
     children: Snippet;
   }
 
-  let { icon, children }: Props = $props();
+  let { icon: Icon, children }: Props = $props();
 </script>
 
 <div>
   <div class="box-content flex min-h-[10vh] items-center pt-2">
-    {#if icon}
-      {@const Icon = icon}
+    {#if Icon}
       <Icon class="text-5xl text-gray-600" />
     {/if}
   </div>

src/lib/components/inputs/TextInput.svelte

@@ -8,7 +8,7 @@
   let { placeholder, type = "text", value = $bindable("") }: Props = $props();
 </script>
 
-<div class="relative mt-6">
+<div class="relative mt-5">
   <input
     bind:value
     {type}