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

2025-12-12 21:08:46 +00:00 · 2025-01-24 16:39:09 +09:00
parent a01137bbf9
commit 1c09d93b41
33 changed files with 145 additions and 172 deletions
--- a/src/lib/components/atoms/buttons/Button.svelte
+++ b/src/lib/components/atoms/buttons/Button.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+
+  interface Props {
+    children?: Snippet;
+    class?: ClassValue;
+    color?: "primary" | "gray";
+    onclick?: () => void;
+  }
+
+  let { children, color = "primary", onclick, ...props }: Props = $props();
+
+  let bgColor = $derived(
+    {
+      primary: "bg-primary-600 active:bg-primary-500",
+      gray: "bg-gray-300 active:bg-gray-400",
+    }[color],
+  );
+  let textColor = $derived(
+    {
+      primary: "text-white",
+      gray: "text-gray-800",
+    }[color],
+  );
+</script>
+
+<button
+  onclick={onclick && (() => setTimeout(onclick, 100))}
+  class={["h-12 min-w-fit rounded-xl font-medium", bgColor, textColor, props.class]}
+>
+  <div class="h-full p-3 transition active:scale-95">
+    {@render children?.()}
+  </div>
+</button>
--- a/src/lib/components/atoms/buttons/EntryButton.svelte
+++ b/src/lib/components/atoms/buttons/EntryButton.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+
+  import IconChevronRight from "~icons/material-symbols/chevron-right";
+
+  interface Props {
+    children?: Snippet;
+    class?: ClassValue;
+    onclick?: () => void;
+  }
+
+  let { children, onclick, ...props }: Props = $props();
+</script>
+
+<button
+  onclick={onclick && (() => setTimeout(onclick, 100))}
+  class={["rounded-xl active:bg-gray-100", props.class]}
+>
+  <div class="flex h-full p-2 transition active:scale-95">
+    <div class="flex-grow">
+      {@render children?.()}
+    </div>
+    <div class="flex flex-shrink-0 items-center">
+      <IconChevronRight class="text-xl text-gray-800" />
+    </div>
+  </div>
+</button>
--- a/src/lib/components/atoms/buttons/FloatingButton.svelte
+++ b/src/lib/components/atoms/buttons/FloatingButton.svelte
@@ -1,30 +1,24 @@
 <script lang="ts">
  import type { Component } from "svelte";
-  import type { SvelteHTMLElements } from "svelte/elements";
+  import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
  import { AdaptiveDiv } from "$lib/components/divs";

  interface Props {
    icon: Component<SvelteHTMLElements["svg"]>;
-    offset?: string;
+    offset?: ClassValue;
    onclick?: () => void;
  }

  let { icon: Icon, offset = "bottom-20", onclick }: Props = $props();
-
-  const click = () => {
-    setTimeout(() => {
-      onclick?.();
-    }, 100);
-  };
 </script>

 <div class="pointer-events-none fixed inset-0">
-  <div class="absolute w-full {offset}">
+  <div class={["absolute w-full", offset]}>
    <AdaptiveDiv>
      <div class="relative">
        <div class="absolute bottom-4 right-4">
          <button
-            onclick={click}
+            onclick={onclick && (() => setTimeout(onclick, 100))}
            class="pointer-events-auto 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" />
--- a/src/lib/components/atoms/buttons/TextButton.svelte
+++ b/src/lib/components/atoms/buttons/TextButton.svelte
@@ -2,7 +2,7 @@
  import type { Snippet } from "svelte";

  interface Props {
-    children: Snippet;
+    children?: Snippet;
    onclick?: () => void;
  }

@@ -10,14 +10,10 @@
 </script>

 <button
-  onclick={() => {
-    setTimeout(() => {
-      onclick?.();
-    }, 100);
-  }}
+  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">
+  <div class="h-full p-1 transition active:scale-95">
    {@render children?.()}
  </div>
 </button>
--- a/src/lib/components/atoms/buttons/index.ts
+++ b/src/lib/components/atoms/buttons/index.ts
--- a/src/lib/components/atoms/index.ts
+++ b/src/lib/components/atoms/index.ts
@@ -0,0 +1,2 @@
+export * from "./buttons";
+export * from "./inputs";
--- a/src/lib/components/atoms/inputs/CheckBox.svelte
+++ b/src/lib/components/atoms/inputs/CheckBox.svelte
@@ -5,16 +5,18 @@
  import IconCheckCircleOutline from "~icons/material-symbols/check-circle-outline";

  interface Props {
-    children: Snippet;
    checked?: boolean;
+    children?: Snippet;
  }

-  let { children, checked = $bindable(false) }: Props = $props();
+  let { checked = $bindable(false), children }: Props = $props();
 </script>

 <label class="flex items-center gap-x-1">
  <input bind:checked type="checkbox" class="hidden" />
-  {@render children?.()}
+  <div>
+    {@render children?.()}
+  </div>
  {#if checked}
    <IconCheckCircle class="text-primary-600" />
  {:else}
--- a/src/lib/components/atoms/inputs/TextInput.svelte
+++ b/src/lib/components/atoms/inputs/TextInput.svelte
@@ -17,7 +17,7 @@
  />
  <!-- svelte-ignore a11y_label_has_associated_control -->
  <label
-    class="absolute left-0 top-1/2 -translate-y-1/2 transform text-xl text-gray-400 transition-all duration-300 ease-in-out"
+    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>
--- a/src/lib/components/atoms/inputs/index.ts
+++ b/src/lib/components/atoms/inputs/index.ts
--- a/src/lib/components/buttons/Button.svelte
+++ b/src/lib/components/buttons/Button.svelte
@@ -1,37 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-
-  interface Props {
-    children: Snippet;
-    color?: "primary" | "gray";
-    onclick?: () => void;
-  }
-
-  let { children, color = "primary", onclick }: Props = $props();
-
-  const bgColorStyle = $derived(
-    {
-      primary: "bg-primary-600 active:bg-primary-500",
-      gray: "bg-gray-300 active:bg-gray-400",
-    }[color],
-  );
-  const fontColorStyle = $derived(
-    {
-      primary: "text-white",
-      gray: "text-gray-800",
-    }[color],
-  );
-</script>
-
-<button
-  onclick={() => {
-    setTimeout(() => {
-      onclick?.();
-    }, 100);
-  }}
-  class="{bgColorStyle} {fontColorStyle} h-12 w-full min-w-fit rounded-xl font-medium"
->
-  <div class="h-full w-full p-3 transition active:scale-95">
-    {@render children?.()}
-  </div>
-</button>
--- a/src/lib/components/buttons/EntryButton.svelte
+++ b/src/lib/components/buttons/EntryButton.svelte
@@ -1,30 +0,0 @@
-<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 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>
--- a/src/lib/molecules/SubCategories.svelte
+++ b/src/lib/molecules/SubCategories.svelte
@@ -2,7 +2,7 @@
  import type { Component } from "svelte";
  import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
  import type { Writable } from "svelte/store";
-  import { EntryButton } from "$lib/components/buttons";
+  import { EntryButton } from "$lib/components/atoms";
  import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
  import Categories, { type SelectedCategory } from "$lib/molecules/Categories";
  import { masterKeyStore } from "$lib/stores";
@@ -40,7 +40,7 @@

 <div class={["space-y-1", props.class]}>
  {#snippet subCategoryCreate()}
-    <EntryButton onclick={onSubCategoryCreateClick}>
+    <EntryButton onclick={onSubCategoryCreateClick} class="w-full">
      <div class="flex h-8 items-center gap-x-4">
        <IconAddCircle class="text-lg text-gray-600" />
        <p class="font-medium text-gray-700">카테고리 추가하기</p>
--- a/src/lib/organisms/Category/Category.svelte
+++ b/src/lib/organisms/Category/Category.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { untrack } from "svelte";
  import { get, type Writable } from "svelte/store";
-  import { CheckBox } from "$lib/components/inputs";
+  import { CheckBox } from "$lib/components/atoms";
  import { getFileInfo, type FileInfo, type CategoryInfo } from "$lib/modules/filesystem";
  import { SortBy, sortEntries } from "$lib/modules/util";
  import type { SelectedCategory } from "$lib/molecules/Categories";
--- a/src/lib/organisms/CreateCategoryModal.svelte
+++ b/src/lib/organisms/CreateCategoryModal.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
  import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
-  import { TextInput } from "$lib/components/inputs";
+  import { Button, TextInput } from "$lib/components/atoms";

  interface Props {
    onCreateClick: (name: string) => void;
@@ -23,8 +22,8 @@
  <div class="mt-2 flex w-full">
    <TextInput bind:value={name} placeholder="카테고리 이름" />
  </div>
-  <div class="mt-7 flex gap-2">
-    <Button color="gray" onclick={closeModal}>닫기</Button>
-    <Button onclick={() => onCreateClick(name)}>만들기</Button>
+  <div class="mt-7 flex gap-x-2">
+    <Button color="gray" onclick={closeModal} class="flex-1">닫기</Button>
+    <Button onclick={() => onCreateClick(name)} class="flex-1">만들기</Button>
  </div>
 </Modal>
--- a/src/routes/(fullscreen)/auth/changePassword/+page.svelte
+++ b/src/routes/(fullscreen)/auth/changePassword/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
  import { goto } from "$app/navigation";
  import { TopBar } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
+  import { Button, TextInput } from "$lib/components/atoms";
  import { TitleDiv, BottomDiv } from "$lib/components/divs";
-  import { TextInput } from "$lib/components/inputs";
  import { requestPasswordChange } from "./service";

  let oldPassword = $state("");
@@ -34,5 +33,5 @@
  </TitleDiv>
 </div>
 <BottomDiv>
-  <Button onclick={changePassword}>비밀번호 바꾸기</Button>
+  <Button onclick={changePassword} class="w-full">비밀번호 바꾸기</Button>
 </BottomDiv>
--- a/src/routes/(fullscreen)/auth/login/+page.svelte
+++ b/src/routes/(fullscreen)/auth/login/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
  import { goto } from "$app/navigation";
-  import { Button, TextButton } from "$lib/components/buttons";
+  import { Button, TextButton, TextInput } from "$lib/components/atoms";
  import { TitleDiv, BottomDiv } from "$lib/components/divs";
-  import { TextInput } from "$lib/components/inputs";
  import { clientKeyStore, masterKeyStore } from "$lib/stores";
  import { requestLogin, requestSessionUpgrade, requestMasterKeyDownload } from "./service";

@@ -58,6 +57,6 @@
  </div>
 </TitleDiv>
 <BottomDiv>
-  <Button onclick={login}>로그인</Button>
+  <Button onclick={login} class="w-full">로그인</Button>
  <TextButton>계정이 없어요</TextButton>
 </BottomDiv>
--- a/src/routes/(fullscreen)/file/[id]/+page.svelte
+++ b/src/routes/(fullscreen)/file/[id]/+page.svelte
@@ -4,7 +4,7 @@
  import { get, type Writable } from "svelte/store";
  import { goto } from "$app/navigation";
  import { TopBar } from "$lib/components";
-  import { EntryButton } from "$lib/components/buttons";
+  import { EntryButton } from "$lib/components/atoms";
  import {
    getFileInfo,
    getCategoryInfo,
@@ -151,7 +151,7 @@
          onCategoryClick={({ id }) => goto(`/category/${id}`)}
          onCategoryMenuClick={({ id }) => removeFromCategory(id)}
        />
-        <EntryButton onclick={() => (isAddToCategoryBottomSheetOpen = true)}>
+        <EntryButton onclick={() => (isAddToCategoryBottomSheetOpen = true)} class="w-full">
          <div class="flex h-8 items-center gap-x-4">
            <IconAddCircle class="text-lg text-gray-600" />
            <p class="font-medium text-gray-700">카테고리에 추가하기</p>
--- a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
+++ b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import type { Writable } from "svelte/store";
  import { BottomSheet } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
+  import { Button } from "$lib/components/atoms";
  import { BottomDiv } from "$lib/components/divs";
  import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
  import SubCategories from "$lib/molecules/SubCategories.svelte";
@@ -48,7 +48,9 @@
      />
      {#if $category.id !== "root"}
        <BottomDiv>
-          <Button onclick={() => onAddToCategoryClick($category.id)}>이 카테고리에 추가하기</Button>
+          <Button onclick={() => onAddToCategoryClick($category.id)} class="w-full">
+            이 카테고리에 추가하기
+          </Button>
        </BottomDiv>
      {/if}
    {/if}
--- a/src/routes/(fullscreen)/key/export/+page.svelte
+++ b/src/routes/(fullscreen)/key/export/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import FileSaver from "file-saver";
  import { goto } from "$app/navigation";
-  import { Button, TextButton } from "$lib/components/buttons";
+  import { Button, TextButton } from "$lib/components/atoms";
  import { TitleDiv, BottomDiv } from "$lib/components/divs";
  import { clientKeyStore } from "$lib/stores";
  import BeforeContinueBottomSheet from "./BeforeContinueBottomSheet.svelte";
@@ -101,14 +101,8 @@
  </div>
 </TitleDiv>
 <BottomDiv>
-  <Button onclick={exportClientKeys}>암호 키 내보내기</Button>
-  <TextButton
-    onclick={() => {
-      isBeforeContinueModalOpen = true;
-    }}
-  >
-    내보내지 않을래요
-  </TextButton>
+  <Button onclick={exportClientKeys} class="w-full">암호 키 내보내기</Button>
+  <TextButton onclick={() => (isBeforeContinueModalOpen = true)}>내보내지 않을래요</TextButton>
 </BottomDiv>

 <BeforeContinueModal bind:isOpen={isBeforeContinueModalOpen} onContinueClick={registerPubKeys} />
--- a/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
+++ b/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { BottomSheet } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
+  import { Button } from "$lib/components/atoms";
  import { BottomDiv } from "$lib/components/divs";

  interface Props {
@@ -22,9 +22,9 @@
      </p>
    </div>
    <BottomDiv>
-      <div class="flex w-full gap-2">
-        <Button color="gray" onclick={onRetryClick}>다시 저장할래요</Button>
-        <Button onclick={onContinueClick}>잘 저장되었어요</Button>
+      <div class="flex w-full gap-x-2">
+        <Button color="gray" onclick={onRetryClick} class="flex-1">다시 저장할래요</Button>
+        <Button onclick={onContinueClick} class="flex-1">잘 저장되었어요</Button>
      </div>
    </BottomDiv>
  </div>
--- a/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
+++ b/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
+  import { Button } from "$lib/components/atoms";

  interface Props {
    onContinueClick: () => void;
@@ -16,16 +16,9 @@
      <p class="text-xl font-bold">내보내지 않고 계속할까요?</p>
      <p>암호 키 파일은 유출 방지를 위해 이 화면에서만 저장할 수 있어요.</p>
    </div>
-    <div class="flex gap-2">
-      <Button
-        color="gray"
-        onclick={() => {
-          isOpen = false;
-        }}
-      >
-        아니요
-      </Button>
-      <Button onclick={onContinueClick}>계속할게요</Button>
+    <div class="flex gap-x-2">
+      <Button color="gray" onclick={() => (isOpen = false)} class="flex-1">아니요</Button>
+      <Button onclick={onContinueClick} class="flex-1">계속할게요</Button>
    </div>
  </div>
 </Modal>
--- a/src/routes/(fullscreen)/key/generate/+page.svelte
+++ b/src/routes/(fullscreen)/key/generate/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { onMount } from "svelte";
  import { goto } from "$app/navigation";
-  import { Button, TextButton } from "$lib/components/buttons";
+  import { Button, TextButton } from "$lib/components/atoms";
  import { TitleDiv, BottomDiv } from "$lib/components/divs";
  import { gotoStateful } from "$lib/hooks";
  import { clientKeyStore } from "$lib/stores";
@@ -80,6 +80,6 @@
  </div>
 </TitleDiv>
 <BottomDiv>
-  <Button onclick={generateKeys}>새 암호 키 생성하기</Button>
+  <Button onclick={generateKeys} class="w-full">새 암호 키 생성하기</Button>
  <TextButton>키를 갖고 있어요</TextButton>
 </BottomDiv>
--- a/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
+++ b/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { BottomSheet } from "$lib/components";
-  import { EntryButton } from "$lib/components/buttons";
+  import { EntryButton } from "$lib/components/atoms";
  import type { SelectedCategory } from "$lib/molecules/Categories";

  import IconCategory from "~icons/material-symbols/category";
@@ -41,13 +41,13 @@
      </div>
      <div class="my-2 h-px w-full bg-gray-200"></div>
    {/if}
-    <EntryButton onclick={onRenameClick}>
+    <EntryButton onclick={onRenameClick} class="w-full">
      <div class="flex h-8 items-center gap-x-4">
        <IconEdit class="text-lg" />
        <p class="font-medium">이름 바꾸기</p>
      </div>
    </EntryButton>
-    <EntryButton onclick={onDeleteClick}>
+    <EntryButton onclick={onDeleteClick} class="w-full">
      <div class="flex h-8 items-center gap-x-4 text-red-500">
        <IconDelete class="text-lg" />
        <p class="font-medium">삭제하기</p>
--- a/src/routes/(main)/category/[[id]]/DeleteCategoryModal.svelte
+++ b/src/routes/(main)/category/[[id]]/DeleteCategoryModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
+  import { Button } from "$lib/components/atoms";
  import type { SelectedCategory } from "$lib/molecules/Categories";

  interface Props {
@@ -39,9 +39,9 @@
          하지만 카테고리에 추가된 파일들은 삭제되지 않아요.
        </p>
      </div>
-      <div class="flex gap-2">
-        <Button color="gray" onclick={closeModal}>아니요</Button>
-        <Button onclick={deleteEntry}>삭제할게요</Button>
+      <div class="flex gap-x-2">
+        <Button color="gray" onclick={closeModal} class="flex-1">아니요</Button>
+        <Button onclick={deleteEntry} class="flex-1">삭제할게요</Button>
      </div>
    </div>
  {/if}
--- a/src/routes/(main)/category/[[id]]/RenameCategoryModal.svelte
+++ b/src/routes/(main)/category/[[id]]/RenameCategoryModal.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
  import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
-  import { TextInput } from "$lib/components/inputs";
+  import { Button, TextInput } from "$lib/components/atoms";
  import type { SelectedCategory } from "$lib/molecules/Categories";

  interface Props {
@@ -20,7 +19,7 @@
    selectedCategory = undefined;
  };

-  const renameEntry = async () => {
+  const renameCategory = async () => {
    // TODO: Validation

    if (await onRenameClick(name)) {
@@ -40,8 +39,8 @@
  <div class="mt-2 flex w-full">
    <TextInput bind:value={name} placeholder="이름" />
  </div>
-  <div class="mt-7 flex gap-2">
-    <Button color="gray" onclick={closeModal}>닫기</Button>
-    <Button onclick={renameEntry}>바꾸기</Button>
+  <div class="mt-7 flex gap-x-2">
+    <Button color="gray" onclick={closeModal} class="flex-1">닫기</Button>
+    <Button onclick={renameCategory} class="flex-1">바꾸기</Button>
  </div>
 </Modal>
--- a/src/routes/(main)/directory/[[id]]/+page.svelte
+++ b/src/routes/(main)/directory/[[id]]/+page.svelte
@@ -3,7 +3,7 @@
  import type { Writable } from "svelte/store";
  import { goto } from "$app/navigation";
  import { TopBar } from "$lib/components";
-  import { FloatingButton } from "$lib/components/buttons";
+  import { FloatingButton } from "$lib/components/atoms";
  import { getDirectoryInfo, type DirectoryInfo } from "$lib/modules/filesystem";
  import { masterKeyStore, hmacSecretStore } from "$lib/stores";
  import CreateBottomSheet from "./CreateBottomSheet.svelte";
--- a/src/routes/(main)/directory/[[id]]/CreateBottomSheet.svelte
+++ b/src/routes/(main)/directory/[[id]]/CreateBottomSheet.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { BottomSheet } from "$lib/components";
-  import { EntryButton } from "$lib/components/buttons";
+  import { EntryButton } from "$lib/components/atoms";

  import IconCreateNewFolder from "~icons/material-symbols/create-new-folder";
  import IconUploadFile from "~icons/material-symbols/upload-file";
@@ -16,13 +16,13 @@

 <BottomSheet bind:isOpen>
  <div class="w-full py-4">
-    <EntryButton onclick={onDirectoryCreateClick}>
+    <EntryButton onclick={onDirectoryCreateClick} class="w-full">
      <div class="flex h-12 items-center gap-x-4">
        <IconCreateNewFolder class="text-2xl text-yellow-500" />
        <p class="font-medium">폴더 만들기</p>
      </div>
    </EntryButton>
-    <EntryButton onclick={onFileUploadClick}>
+    <EntryButton onclick={onFileUploadClick} class="w-full">
      <div class="flex h-12 items-center gap-x-4">
        <IconUploadFile class="text-2xl text-blue-400" />
        <p class="font-medium">파일 업로드</p>
--- a/src/routes/(main)/directory/[[id]]/CreateDirectoryModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/CreateDirectoryModal.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
  import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
-  import { TextInput } from "$lib/components/inputs";
+  import { Button, TextInput } from "$lib/components/atoms";

  interface Props {
    onCreateClick: (name: string) => void;
@@ -23,8 +22,8 @@
  <div class="mt-2 flex w-full">
    <TextInput bind:value={name} placeholder="폴더 이름" />
  </div>
-  <div class="mt-7 flex gap-2">
-    <Button color="gray" onclick={closeModal}>닫기</Button>
-    <Button onclick={() => onCreateClick(name)}>만들기</Button>
+  <div class="mt-7 flex gap-x-2">
+    <Button color="gray" onclick={closeModal} class="flex-1">닫기</Button>
+    <Button onclick={() => onCreateClick(name)} class="flex-1">만들기</Button>
  </div>
 </Modal>
--- a/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
+  import { Button } from "$lib/components/atoms";
  import type { SelectedDirectoryEntry } from "./service";

  interface Props {
@@ -47,9 +47,9 @@
          {/if}
        </p>
      </div>
-      <div class="flex gap-2">
-        <Button color="gray" onclick={closeModal}>아니요</Button>
-        <Button onclick={deleteEntry}>삭제할게요</Button>
+      <div class="flex gap-x-2">
+        <Button color="gray" onclick={closeModal} class="flex-1">아니요</Button>
+        <Button onclick={deleteEntry} class="flex-1">삭제할게요</Button>
      </div>
    </div>
  {/if}
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntryMenuBottomSheet.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryEntryMenuBottomSheet.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { BottomSheet } from "$lib/components";
-  import { EntryButton } from "$lib/components/buttons";
+  import { EntryButton } from "$lib/components/atoms";
  import type { SelectedDirectoryEntry } from "./service";

  import IconFolder from "~icons/material-symbols/folder";
@@ -46,13 +46,13 @@
      </div>
      <div class="my-2 h-px w-full bg-gray-200"></div>
    {/if}
-    <EntryButton onclick={onRenameClick}>
+    <EntryButton onclick={onRenameClick} class="w-full">
      <div class="flex h-8 items-center gap-x-4">
        <IconEdit class="text-lg" />
        <p class="font-medium">이름 바꾸기</p>
      </div>
    </EntryButton>
-    <EntryButton onclick={onDeleteClick}>
+    <EntryButton onclick={onDeleteClick} class="w-full">
      <div class="flex h-8 items-center gap-x-4 text-red-500">
        <IconDelete class="text-lg" />
        <p class="font-medium">삭제하기</p>
--- a/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
+  import { Button } from "$lib/components/atoms";

  interface Props {
    file: File | undefined;
@@ -21,9 +21,9 @@
        <p class="text-xl font-bold">'{nameShort}' 파일이 있어요.</p>
        <p>예전에 이미 업로드된 파일이에요. 그래도 업로드할까요?</p>
      </div>
-      <div class="flex gap-2">
-        <Button color="gray" onclick={onclose}>아니요</Button>
-        <Button onclick={onDuplicateClick}>업로드할게요</Button>
+      <div class="flex gap-x-2">
+        <Button color="gray" onclick={onclose} class="flex-1">아니요</Button>
+        <Button onclick={onDuplicateClick} class="flex-1">업로드할게요</Button>
      </div>
    </div>
  {/if}
--- a/src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
  import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/buttons";
-  import { TextInput } from "$lib/components/inputs";
+  import { Button, TextInput } from "$lib/components/atoms";
  import type { SelectedDirectoryEntry } from "./service";

  interface Props {
@@ -40,8 +39,8 @@
  <div class="mt-2 flex w-full">
    <TextInput bind:value={name} placeholder="이름" />
  </div>
-  <div class="mt-7 flex gap-2">
-    <Button color="gray" onclick={closeModal}>닫기</Button>
-    <Button onclick={renameEntry}>바꾸기</Button>
+  <div class="mt-7 flex gap-x-2">
+    <Button color="gray" onclick={closeModal} class="flex-1">닫기</Button>
+    <Button onclick={renameEntry} class="flex-1">바꾸기</Button>
  </div>
 </Modal>
--- a/src/routes/(main)/menu/MenuEntryButton.svelte
+++ b/src/routes/(main)/menu/MenuEntryButton.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import type { Component, Snippet } from "svelte";
  import type { SvelteHTMLElements } from "svelte/elements";
-  import { EntryButton } from "$lib/components/buttons";
+  import { EntryButton } from "$lib/components/atoms";

  interface Props {
    children: Snippet;
@@ -13,7 +13,7 @@
  let { children, icon: Icon, iconColor, onclick }: Props = $props();
 </script>

-<EntryButton {onclick}>
+<EntryButton {onclick} class="w-full">
  <div class="flex items-center gap-x-4">
    <div class="rounded-lg bg-gray-200 p-1 {iconColor}">
      <Icon />