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

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>

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>

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>

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}

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} />

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>

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>

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>