Button 및 Input 컴포넌트를 atoms 디렉터리로 이동 및 리팩토링

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import IconCheckCircle from "~icons/material-symbols/check-circle";
+  import IconCheckCircleOutline from "~icons/material-symbols/check-circle-outline";
+
+  interface Props {
+    checked?: boolean;
+    children?: Snippet;
+  }
+
+  let { checked = $bindable(false), children }: Props = $props();
+</script>
+
+<label class="flex items-center gap-x-1">
+  <input bind:checked type="checkbox" class="hidden" />
+  <div>
+    {@render children?.()}
+  </div>
+  {#if checked}
+    <IconCheckCircle class="text-primary-600" />
+  {:else}
+    <IconCheckCircleOutline class="text-gray-300" />
+  {/if}
+</label>

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+  interface Props {
+    placeholder: string;
+    type?: "text" | "password";
+    value?: string;
+  }
+
+  let { placeholder, type = "text", value = $bindable("") }: 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>
+
+<style>
+  input:focus,
+  input:not(:placeholder-shown) {
+    @apply border-primary-300;
+  }
+  input:focus + label,
+  input:not(:placeholder-shown) + label {
+    @apply top-0 -translate-y-full text-sm text-primary-400;
+  }
+</style>

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

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