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

src/lib/components/BottomSheet.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import { fade, fly } from "svelte/transition";
-  import { AdaptiveDiv } from "$lib/components/divs";
+  import { AdaptiveDiv } from "$lib/components/atoms";
 
   interface Props {
     children: Snippet;

src/lib/components/atoms/Modal.svelte

@@ -1,35 +1,30 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
   import { fade } from "svelte/transition";
-  import { AdaptiveDiv } from "$lib/components/divs";
+  import { AdaptiveDiv } from "$lib/components/atoms";
 
   interface Props {
-    children: Snippet;
-    onclose?: () => void;
+    children?: Snippet;
+    class?: ClassValue;
     isOpen: boolean;
+    onclose?: () => void;
   }
 
-  let { children, onclose, isOpen = $bindable() }: Props = $props();
-
-  const closeModal = $derived(
-    onclose ||
-      (() => {
-        isOpen = false;
-      }),
-  );
+  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={closeModal}
+    onclick={onclose || (() => (isOpen = false))}
     class="fixed inset-0 z-10 bg-black bg-opacity-50"
     transition:fade={{ duration: 100 }}
   >
-    <AdaptiveDiv>
+    <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">
+        <div onclick={(e) => e.stopPropagation()} class={["rounded-2xl bg-white p-4", props.class]}>
           {@render children?.()}
         </div>
       </div>

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>

src/lib/components/divs/AdaptiveDiv.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-  let { children } = $props();
-</script>
-
-<div class="mx-auto h-full w-full max-w-screen-md">
-  {@render children?.()}
-</div>

src/lib/components/divs/BottomDiv.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-  let { children } = $props();
-</script>
-
-<div class="sticky bottom-0 flex flex-col items-center gap-y-2 bg-white pb-4">
-  {@render children?.()}
-</div>

src/lib/components/divs/index.ts

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

src/lib/components/index.ts

@@ -1,3 +1,2 @@
 export { default as BottomSheet } from "./BottomSheet.svelte";
-export { default as Modal } from "./Modal.svelte";
 export { default as TopBar } from "./TopBar.svelte";

src/lib/components/molecules/ActionModal.svelte

@@ -0,0 +1,48 @@
+<script module lang="ts">
+  export type ConfirmHandler = () => void | Promise<void> | boolean | Promise<boolean>;
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { Button, Modal } from "$lib/components/atoms";
+
+  interface Props {
+    cancelText?: string;
+    children?: Snippet;
+    confirmText: string;
+    isOpen: boolean;
+    onbeforeclose?: () => void;
+    onconfirm: ConfirmHandler;
+    title: string;
+  }
+
+  let {
+    cancelText = "닫기",
+    children,
+    confirmText,
+    isOpen = $bindable(),
+    onbeforeclose,
+    onconfirm,
+    title,
+  }: Props = $props();
+
+  const closeModal = () => {
+    onbeforeclose?.();
+    isOpen = false;
+  };
+
+  const confirmAction = async () => {
+    if ((await onconfirm()) !== false) {
+      closeModal();
+    }
+  };
+</script>
+
+<Modal bind:isOpen onclose={closeModal} class="flex flex-col gap-y-2">
+  <p class="text-xl font-bold">{title}</p>
+  {@render children?.()}
+  <div class="flex gap-x-2">
+    <Button color="gray" onclick={closeModal} class="flex-1">{cancelText}</Button>
+    <Button onclick={confirmAction} class="flex-1">{confirmText}</Button>
+  </div>
+</Modal>

src/lib/components/molecules/index.ts

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

src/lib/components/organisms/index.ts

@@ -0,0 +1 @@
+export * from "./modals";

src/lib/components/organisms/modals/CategoryCreateModal.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { TextInputModal } from "$lib/components/organisms";
+
+  interface Props {
+    isOpen: boolean;
+    oncreate: (name: string) => Promise<boolean>;
+  }
+
+  let { isOpen = $bindable(), oncreate }: Props = $props();
+</script>
+
+<TextInputModal
+  bind:isOpen
+  title="새 카테고리"
+  placeholder="카테고리 이름"
+  submitText="만들기"
+  onsubmit={oncreate}
+/>

src/lib/components/organisms/modals/RenameModal.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { TextInputModal } from "$lib/components/organisms";
+
+  interface Props {
+    isOpen: boolean;
+    onbeforeclose?: () => void;
+    onrename: (newName: string) => Promise<boolean>;
+    originalName: string | undefined;
+  }
+
+  let { isOpen = $bindable(), onbeforeclose, onrename, originalName }: Props = $props();
+</script>
+
+<TextInputModal
+  bind:isOpen
+  {onbeforeclose}
+  title="이름 바꾸기"
+  placeholder="이름"
+  defaultValue={originalName}
+  submitText="바꾸기"
+  onsubmit={onrename}
+/>

src/lib/components/organisms/modals/TextInputModal.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { TextInput } from "$lib/components/atoms";
+  import { ActionModal, type ConfirmHandler } from "$lib/components/molecules";
+
+  interface Props {
+    defaultValue?: string;
+    isOpen: boolean;
+    onbeforeclose?: () => void;
+    onsubmit: (value: string) => ReturnType<ConfirmHandler>;
+    placeholder: string;
+    submitText: string;
+    title: string;
+  }
+
+  let {
+    defaultValue = "",
+    isOpen = $bindable(),
+    onbeforeclose,
+    onsubmit,
+    placeholder,
+    submitText,
+    title,
+  }: Props = $props();
+
+  let value = $state(defaultValue);
+
+  $effect.pre(() => {
+    if (isOpen) {
+      value = defaultValue;
+    }
+  });
+</script>
+
+<ActionModal
+  bind:isOpen
+  {onbeforeclose}
+  {title}
+  confirmText={submitText}
+  onconfirm={() => onsubmit(value)}
+>
+  <TextInput bind:value {placeholder} class="mb-5" />
+</ActionModal>

src/lib/components/organisms/modals/index.ts

@@ -0,0 +1,3 @@
+export { default as CategoryCreateModal } from "./CategoryCreateModal.svelte";
+export { default as RenameModal } from "./RenameModal.svelte";
+export { default as TextInputModal } from "./TextInputModal.svelte";

src/lib/organisms/CreateCategoryModal.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  import { Modal } from "$lib/components";
-  import { Button, TextInput } from "$lib/components/atoms";
-
-  interface Props {
-    onCreateClick: (name: string) => void;
-    isOpen: boolean;
-  }
-
-  let { onCreateClick, isOpen = $bindable() }: Props = $props();
-
-  let name = $state("");
-
-  const closeModal = () => {
-    name = "";
-    isOpen = false;
-  };
-</script>
-
-<Modal bind:isOpen onclose={closeModal}>
-  <p class="text-xl font-bold">새 카테고리</p>
-  <div class="mt-2 flex w-full">
-    <TextInput bind:value={name} placeholder="카테고리 이름" />
-  </div>
-  <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>

src/lib/services/category.ts

@@ -10,7 +10,8 @@ export const requestCategoryCreation = async (
 ) => {
   const { dataKey, dataKeyVersion } = await generateDataKey();
   const nameEncrypted = await encryptString(name, dataKey);
-  await callPostApi<CategoryCreateRequest>("/api/category/create", {
+
+  const res = await callPostApi<CategoryCreateRequest>("/api/category/create", {
     parent: parentId,
     mekVersion: masterKey.version,
     dek: await wrapDataKey(dataKey, masterKey.key),
@@ -18,6 +19,7 @@ export const requestCategoryCreation = async (
     name: nameEncrypted.ciphertext,
     nameIv: nameEncrypted.iv,
   });
+  return res.ok;
 };
 
 export const requestFileRemovalFromCategory = async (fileId: number, categoryId: number) => {