레이아웃 수정

src/lib/components/BottomSheet.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import { fade, fly } from "svelte/transition";
+  import { AdaptiveDiv } from "$lib/components/divs";
 
   interface Props {
     children: Snippet;
@@ -20,12 +21,16 @@
     class="fixed inset-0 flex items-end justify-center"
   >
     <div class="absolute inset-0 bg-black bg-opacity-50" transition:fade={{ duration: 100 }}></div>
-    <div
-      onclick={(e) => e.stopPropagation()}
-      class="z-10 flex max-h-[70vh] min-h-[30vh] w-full items-stretch rounded-t-2xl bg-white p-4"
-      transition:fly={{ y: 100, duration: 200 }}
-    >
-      {@render children?.()}
+    <div class="z-10">
+      <AdaptiveDiv>
+        <div
+          onclick={(e) => e.stopPropagation()}
+          class="flex max-h-[70vh] min-h-[30vh] w-full items-stretch rounded-t-2xl bg-white p-4"
+          transition:fly={{ y: 100, duration: 200 }}
+        >
+          {@render children?.()}
+        </div>
+      </AdaptiveDiv>
     </div>
   </div>
 {/if}

src/lib/components/Modal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import { fade } from "svelte/transition";
+  import { AdaptiveDiv } from "$lib/components/divs";
 
   interface Props {
     children: Snippet;
@@ -20,8 +21,10 @@
     class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 px-2"
     transition:fade={{ duration: 100 }}
   >
-    <div onclick={(e) => e.stopPropagation()} class="max-w-full rounded-2xl bg-white p-4">
-      {@render children?.()}
-    </div>
+    <AdaptiveDiv>
+      <div onclick={(e) => e.stopPropagation()} class="max-w-full rounded-2xl bg-white p-4">
+        {@render children?.()}
+      </div>
+    </AdaptiveDiv>
   </div>
 {/if}

src/lib/components/divs/AdaptiveDiv.svelte

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

src/lib/components/divs/BottomDiv.svelte

@@ -2,6 +2,6 @@
   let { children } = $props();
 </script>
 
-<div class="sticky bottom-0 flex w-full flex-col items-center gap-y-2 bg-white">
+<div class="sticky bottom-0 flex w-full flex-col items-center gap-y-2 bg-white pb-2">
   {@render children?.()}
 </div>

src/lib/components/divs/TitleDiv.svelte

@@ -1,7 +1,21 @@
 <script lang="ts">
-  let { children } = $props();
+  import type { Component, Snippet } from "svelte";
+  import type { SvelteHTMLElements } from "svelte/elements";
+
+  interface Props {
+    icon?: Component<SvelteHTMLElements["svg"]>;
+    children: Snippet;
+  }
+
+  let { icon, children }: Props = $props();
 </script>
 
-<div class="mt-[20%]">
+<div>
+  <div class="box-content flex min-h-[10vh] items-center pt-2">
+    {#if icon}
+      {@const Icon = icon}
+      <Icon class="text-5xl text-gray-600" />
+    {/if}
+  </div>
   {@render children?.()}
 </div>