Modal, BeforeContinueModal 컴포넌트 추가

src/lib/components/Modal.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { fade } from "svelte/transition";
+
+  interface Props {
+    children: Snippet;
+    isOpen: boolean;
+  }
+
+  let { children, isOpen = $bindable() }: Props = $props();
+
+  const closeModal = () => {
+    isOpen = false;
+  };
+</script>
+
+{#if isOpen}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    onclick={closeModal}
+    class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 px-2"
+  >
+    <div
+      onclick={(e) => e.stopPropagation()}
+      class="max-w-full rounded-2xl bg-white p-4"
+      transition:fade={{ duration: 100 }}
+    >
+      {@render children?.()}
+    </div>
+  </div>
+{/if}

src/lib/components/buttons/Button.svelte

@@ -23,7 +23,14 @@
   );
 </script>
 
-<button {onclick} class="{bgColorStyle} {fontColorStyle} h-12 h-full w-full rounded-xl font-medium">
+<button
+  onclick={() => {
+    setTimeout(() => {
+      onclick?.();
+    }, 100);
+  }}
+  class="{bgColorStyle} {fontColorStyle} h-12 w-full rounded-xl font-medium"
+>
   <div class="h-full w-full p-3 transition active:scale-95">
     {@render children?.()}
   </div>

src/lib/components/buttons/TextButton.svelte

@@ -9,7 +9,11 @@
 </script>
 
 <button
-  {onclick}
+  onclick={() => {
+    setTimeout(() => {
+      onclick?.();
+    }, 100);
+  }}
   class="text-sm font-medium text-gray-800 underline underline-offset-2 active:rounded-xl active:bg-gray-100"
 >
   <div class="h-full w-full p-1 transition active:scale-95">

src/lib/components/index.ts

@@ -0,0 +1 @@
+export { default as Modal } from "./Modal.svelte";