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

src/routes/(fullscreen)/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { AdaptiveDiv } from "$lib/components/divs";
+  import { AdaptiveDiv } from "$lib/components/atoms";
 
   let { children } = $props();
 </script>

src/routes/(fullscreen)/auth/changePassword/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { TopBar } from "$lib/components";
-  import { Button, TextInput } from "$lib/components/atoms";
-  import { TitleDiv, BottomDiv } from "$lib/components/divs";
+  import { Button, BottomDiv, TextInput } from "$lib/components/atoms";
+  import { TitleDiv } from "$lib/components/divs";
   import { requestPasswordChange } from "./service";
 
   let oldPassword = $state("");

src/routes/(fullscreen)/auth/login/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import { Button, TextButton, TextInput } from "$lib/components/atoms";
-  import { TitleDiv, BottomDiv } from "$lib/components/divs";
+  import { Button, TextButton, BottomDiv, TextInput } from "$lib/components/atoms";
+  import { TitleDiv } from "$lib/components/divs";
   import { clientKeyStore, masterKeyStore } from "$lib/stores";
   import { requestLogin, requestSessionUpgrade, requestMasterKeyDownload } from "./service";
 
@@ -56,7 +56,7 @@
     <TextInput bind:value={password} placeholder="비밀번호" type="password" />
   </div>
 </TitleDiv>
-<BottomDiv>
+<BottomDiv class="flex flex-col items-center gap-y-2">
   <Button onclick={login} class="w-full">로그인</Button>
   <TextButton>계정이 없어요</TextButton>
 </BottomDiv>

src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
   import { BottomSheet } from "$lib/components";
-  import { Button } from "$lib/components/atoms";
-  import { BottomDiv } from "$lib/components/divs";
+  import { Button, BottomDiv } from "$lib/components/atoms";
+  import { CategoryCreateModal } from "$lib/components/organisms/modals";
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
   import SubCategories from "$lib/molecules/SubCategories.svelte";
-  import CreateCategoryModal from "$lib/organisms/CreateCategoryModal.svelte";
   import { masterKeyStore } from "$lib/stores";
   import { requestCategoryCreation } from "./service";
 
@@ -18,15 +17,7 @@
 
   let category: Writable<CategoryInfo | null> | undefined = $state();
 
-  let isCreateCategoryModalOpen = $state(false);
-
-  const createCategory = async (name: string) => {
-    if (!$category) return; // TODO: Error handling
-
-    await requestCategoryCreation(name, $category.id, $masterKeyStore?.get(1)!);
-    isCreateCategoryModalOpen = false;
-    category = getCategoryInfo($category.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-  };
+  let isCategoryCreateModalOpen = $state(false);
 
   $effect(() => {
     if (isOpen) {
@@ -43,7 +34,7 @@
         info={$category}
         onSubCategoryClick={({ id }) =>
           (category = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!))}
-        onSubCategoryCreateClick={() => (isCreateCategoryModalOpen = true)}
+        onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
         subCategoryCreatePosition="top"
       />
       {#if $category.id !== "root"}
@@ -57,4 +48,13 @@
   </div>
 </BottomSheet>
 
-<CreateCategoryModal bind:isOpen={isCreateCategoryModalOpen} onCreateClick={createCategory} />
+<CategoryCreateModal
+  bind:isOpen={isCategoryCreateModalOpen}
+  oncreate={async (name: string) => {
+    if (await requestCategoryCreation(name, $category!.id, $masterKeyStore?.get(1)!)) {
+      category = getCategoryInfo($category!.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      return true;
+    }
+    return false;
+  }}
+/>

src/routes/(fullscreen)/key/export/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import FileSaver from "file-saver";
   import { goto } from "$app/navigation";
-  import { Button, TextButton } from "$lib/components/atoms";
-  import { TitleDiv, BottomDiv } from "$lib/components/divs";
+  import { Button, TextButton, BottomDiv } from "$lib/components/atoms";
+  import { TitleDiv } from "$lib/components/divs";
   import { clientKeyStore } from "$lib/stores";
   import BeforeContinueBottomSheet from "./BeforeContinueBottomSheet.svelte";
   import BeforeContinueModal from "./BeforeContinueModal.svelte";
@@ -100,7 +100,7 @@
     </div>
   </div>
 </TitleDiv>
-<BottomDiv>
+<BottomDiv class="flex flex-col items-center gap-y-2">
   <Button onclick={exportClientKeys} class="w-full">암호 키 내보내기</Button>
   <TextButton onclick={() => (isBeforeContinueModalOpen = true)}>내보내지 않을래요</TextButton>
 </BottomDiv>

src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { BottomSheet } from "$lib/components";
-  import { Button } from "$lib/components/atoms";
-  import { BottomDiv } from "$lib/components/divs";
+  import { Button, BottomDiv } from "$lib/components/atoms";
 
   interface Props {
     onRetryClick: () => void;
@@ -21,11 +20,9 @@
         한 번 확인해 주세요.
       </p>
     </div>
-    <BottomDiv>
-      <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 class="flex gap-x-2">
+      <Button color="gray" onclick={onRetryClick} class="flex-1">다시 저장할래요</Button>
+      <Button onclick={onContinueClick} class="flex-1">잘 저장되었어요</Button>
     </BottomDiv>
   </div>
 </BottomSheet>

src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { Modal } from "$lib/components";
-  import { Button } from "$lib/components/atoms";
+  import { Button, Modal } from "$lib/components/atoms";
 
   interface Props {
     onContinueClick: () => void;

src/routes/(fullscreen)/key/generate/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import { Button, TextButton } from "$lib/components/atoms";
-  import { TitleDiv, BottomDiv } from "$lib/components/divs";
+  import { Button, TextButton, BottomDiv } from "$lib/components/atoms";
+  import { TitleDiv } from "$lib/components/divs";
   import { gotoStateful } from "$lib/hooks";
   import { clientKeyStore } from "$lib/stores";
   import Order from "./Order.svelte";
@@ -79,7 +79,7 @@
     </div>
   </div>
 </TitleDiv>
-<BottomDiv>
+<BottomDiv class="flex flex-col items-center gap-y-2">
   <Button onclick={generateKeys} class="w-full">새 암호 키 생성하기</Button>
   <TextButton>키를 갖고 있어요</TextButton>
 </BottomDiv>