Modal, AdaptiveDiv, BottomDiv 컴포넌트를 molecules 디렉터리로 이동 및 리팩토링

src/lib/components/atoms/Modal.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+  import { fade } from "svelte/transition";
+  import { AdaptiveDiv } from "$lib/components/atoms";
+
+  interface Props {
+    children?: Snippet;
+    class?: ClassValue;
+    isOpen: boolean;
+    onclose?: () => void;
+  }
+
+  let { children, isOpen = $bindable(), onclose, ...props }: Props = $props();
+</script>
+
+{#if isOpen}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    onclick={onclose || (() => (isOpen = false))}
+    class="fixed inset-0 z-10 bg-black bg-opacity-50"
+    transition:fade={{ duration: 100 }}
+  >
+    <AdaptiveDiv class="h-full">
+      <div class="flex h-full items-center justify-center px-4">
+        <div onclick={(e) => e.stopPropagation()} class={["rounded-2xl bg-white p-4", props.class]}>
+          {@render children?.()}
+        </div>
+      </div>
+    </AdaptiveDiv>
+  </div>
+{/if}

src/lib/components/atoms/buttons/FloatingButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Component } from "svelte";
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
-  import { AdaptiveDiv } from "$lib/components/divs";
+  import { AdaptiveDiv } from "$lib/components/atoms";
 
   interface Props {
     icon: Component<SvelteHTMLElements["svg"]>;

src/lib/components/atoms/divs/AdaptiveDiv.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+
+  interface Props {
+    children?: Snippet;
+    class?: ClassValue;
+  }
+
+  let { children, ...props }: Props = $props();
+</script>
+
+<div class={["mx-auto w-full max-w-screen-md", props.class]}>
+  {@render children?.()}
+</div>

src/lib/components/atoms/divs/BottomDiv.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+
+  interface Props {
+    children?: Snippet;
+    class?: ClassValue;
+  }
+
+  let { children, ...props }: Props = $props();
+</script>
+
+<div class={["sticky bottom-0 bg-white pb-4", props.class]}>
+  {@render children?.()}
+</div>

src/lib/components/atoms/divs/index.ts

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

src/lib/components/atoms/index.ts

@@ -1,2 +1,4 @@
 export * from "./buttons";
+export * from "./divs";
 export * from "./inputs";
+export { default as Modal } from "./Modal.svelte";

src/lib/components/atoms/inputs/TextInput.svelte

@@ -1,26 +1,31 @@
 <script lang="ts">
+  import type { ClassValue } from "svelte/elements";
+
   interface Props {
+    class?: ClassValue;
     placeholder: string;
     type?: "text" | "password";
     value?: string;
   }
 
-  let { placeholder, type = "text", value = $bindable("") }: Props = $props();
+  let { placeholder, type = "text", value = $bindable(""), ...props }: Props = $props();
 </script>
 
-<div class="relative mt-5">
-  <input
-    bind:value
-    {type}
-    placeholder=""
-    class="w-full border-b-2 border-gray-300 py-1 text-xl outline-none transition duration-300 ease-in-out"
-  />
-  <!-- svelte-ignore a11y_label_has_associated_control -->
-  <label
-    class="pointer-events-none absolute left-0 top-1/2 -translate-y-1/2 transform text-xl text-gray-400 transition-all duration-300 ease-in-out"
-  >
-    {placeholder}
-  </label>
+<div class={props.class}>
+  <div class="relative mt-5">
+    <input
+      bind:value
+      {type}
+      placeholder=""
+      class="w-full border-b-2 border-gray-300 py-1 text-xl outline-none transition duration-300 ease-in-out"
+    />
+    <!-- svelte-ignore a11y_label_has_associated_control -->
+    <label
+      class="pointer-events-none absolute left-0 top-1/2 -translate-y-1/2 transform text-xl text-gray-400 transition-all duration-300 ease-in-out"
+    >
+      {placeholder}
+    </label>
+  </div>
 </div>
 
 <style>