BottomSheet 컴포넌트 리팩토링

src/lib/components/atoms/BottomSheet.svelte

@@ -1,28 +1,26 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
   import { fade, fly } from "svelte/transition";
   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 closeBottomSheet = $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={closeBottomSheet} class="fixed inset-0 z-10 flex items-end justify-center">
+  <div
+    onclick={onclose || (() => (isOpen = false))}
+    class="fixed inset-0 z-10 flex items-end justify-center"
+  >
     <div
       class="absolute inset-0 bg-black bg-opacity-50"
       transition:fade|global={{ duration: 100 }}
@@ -31,10 +29,12 @@
       <AdaptiveDiv>
         <div
           onclick={(e) => e.stopPropagation()}
-          class="flex max-h-[70vh] min-h-[30vh] overflow-y-auto rounded-t-2xl bg-white px-4"
+          class="flex max-h-[70vh] min-h-[30vh] flex-col rounded-t-2xl bg-white"
           transition:fly|global={{ y: 100, duration: 200 }}
         >
-          {@render children?.()}
+          <div class={["flex-grow overflow-y-auto", props.class]}>
+            {@render children?.()}
+          </div>
         </div>
       </AdaptiveDiv>
     </div>

src/lib/components/atoms/index.ts

@@ -1,3 +1,4 @@
+export { default as BottomSheet } from "./BottomSheet.svelte";
 export * from "./buttons";
 export * from "./divs";
 export * from "./inputs";

src/lib/components/index.ts

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

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
-  import { BottomSheet } from "$lib/components";
-  import { Button, BottomDiv } from "$lib/components/atoms";
+  import { BottomSheet, Button, BottomDiv, FullscreenDiv } 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";
@@ -26,11 +25,11 @@
   });
 </script>
 
-<BottomSheet bind:isOpen>
-  <div class="flex w-full flex-col justify-between">
-    {#if $category}
+{#if $category}
+  <BottomSheet bind:isOpen class="flex flex-col">
+    <FullscreenDiv>
       <SubCategories
-        class="h-fit py-4"
+        class="py-4"
         info={$category}
         onSubCategoryClick={({ id }) =>
           (category = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!))}
@@ -44,9 +43,9 @@
           </Button>
         </BottomDiv>
       {/if}
-    {/if}
-  </div>
-</BottomSheet>
+    </FullscreenDiv>
+  </BottomSheet>
+{/if}
 
 <CategoryCreateModal
   bind:isOpen={isCategoryCreateModalOpen}

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

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { BottomSheet } from "$lib/components";
-  import { Button, BottomDiv } from "$lib/components/atoms";
+  import { BottomSheet, Button, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
 
   interface Props {
     onRetryClick: () => void;
@@ -11,9 +10,9 @@
   let { onRetryClick, onContinueClick, isOpen = $bindable() }: Props = $props();
 </script>
 
-<BottomSheet bind:isOpen>
-  <div class="flex flex-col justify-between gap-y-4 pt-4">
-    <div class="space-y-2 break-keep">
+<BottomSheet bind:isOpen class="flex flex-col">
+  <FullscreenDiv>
+    <div class="space-y-2 break-keep py-4">
       <p class="text-xl font-bold">암호 키 파일을 저장하셨나요?</p>
       <p>
         암호 키 파일은 유출 방지를 위해 이 화면에서만 저장할 수 있어요. 파일이 잘 저장되었는지 다시
@@ -24,5 +23,5 @@
       <Button color="gray" onclick={onRetryClick} class="flex-1">다시 저장할래요</Button>
       <Button onclick={onContinueClick} class="flex-1">잘 저장되었어요</Button>
     </BottomDiv>
-  </div>
+  </FullscreenDiv>
 </BottomSheet>

src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { BottomSheet } from "$lib/components";
+  import { BottomSheet } from "$lib/components/atoms";
   import { CategoryLabel, IconEntryButton } from "$lib/components/molecules";
   import { useContext } from "./service.svelte";
 
@@ -18,16 +18,14 @@
 
 {#if context.selectedCategory}
   {@const { name } = context.selectedCategory}
-  <BottomSheet bind:isOpen>
-    <div class="w-full py-4">
-      <CategoryLabel {name} class="h-12 p-2" textClass="!font-semibold" />
-      <div class="my-2 h-px w-full bg-gray-200"></div>
-      <IconEntryButton icon={IconEdit} onclick={onRenameClick} class="h-12 w-full">
-        이름 바꾸기
-      </IconEntryButton>
-      <IconEntryButton icon={IconDelete} onclick={onDeleteClick} class="h-12 w-full text-red-500">
-        삭제하기
-      </IconEntryButton>
-    </div>
+  <BottomSheet bind:isOpen class="p-4">
+    <CategoryLabel {name} class="h-12 p-2" textClass="!font-semibold" />
+    <div class="my-2 h-px w-full bg-gray-200"></div>
+    <IconEntryButton icon={IconEdit} onclick={onRenameClick} class="h-12 w-full">
+      이름 바꾸기
+    </IconEntryButton>
+    <IconEntryButton icon={IconDelete} onclick={onDeleteClick} class="h-12 w-full text-red-500">
+      삭제하기
+    </IconEntryButton>
   </BottomSheet>
 {/if}

src/routes/(main)/directory/[[id]]/EntryCreateBottomSheet.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { BottomSheet } from "$lib/components";
+  import { BottomSheet } from "$lib/components/atoms";
   import { IconEntryButton } from "$lib/components/molecules";
 
   import IconCreateNewFolder from "~icons/material-symbols/create-new-folder";
@@ -14,23 +14,21 @@
   let { isOpen = $bindable(), onDirectoryCreateClick, onFileUploadClick }: Props = $props();
 </script>
 
-<BottomSheet bind:isOpen>
-  <div class="w-full py-4">
-    <IconEntryButton
-      icon={IconCreateNewFolder}
-      onclick={onDirectoryCreateClick}
-      class="h-16 w-full"
-      iconClass="!text-2xl text-yellow-500"
-    >
-      폴더 만들기
-    </IconEntryButton>
-    <IconEntryButton
-      icon={IconUploadFile}
-      onclick={onFileUploadClick}
-      class="h-16 w-full"
-      iconClass="!text-2xl text-blue-400"
-    >
-      파일 업로드
-    </IconEntryButton>
-  </div>
+<BottomSheet bind:isOpen class="p-4">
+  <IconEntryButton
+    icon={IconCreateNewFolder}
+    onclick={onDirectoryCreateClick}
+    class="h-16 w-full"
+    iconClass="!text-2xl text-yellow-500"
+  >
+    폴더 만들기
+  </IconEntryButton>
+  <IconEntryButton
+    icon={IconUploadFile}
+    onclick={onFileUploadClick}
+    class="h-16 w-full"
+    iconClass="!text-2xl text-blue-400"
+  >
+    파일 업로드
+  </IconEntryButton>
 </BottomSheet>

src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { BottomSheet } from "$lib/components";
+  import { BottomSheet } from "$lib/components/atoms";
   import { DirectoryEntryLabel, IconEntryButton } from "$lib/components/molecules";
   import { useContext } from "./service.svelte";
 
@@ -18,16 +18,14 @@
 
 {#if context.selectedEntry}
   {@const { name, type } = context.selectedEntry}
-  <BottomSheet bind:isOpen>
-    <div class="w-full py-4">
-      <DirectoryEntryLabel {type} {name} class="h-12 p-2" textClass="!font-semibold" />
-      <div class="my-2 h-px w-full bg-gray-200"></div>
-      <IconEntryButton icon={IconEdit} onclick={onRenameClick} class="h-12 w-full">
-        이름 바꾸기
-      </IconEntryButton>
-      <IconEntryButton icon={IconDelete} onclick={onDeleteClick} class="h-12 w-full text-red-500">
-        삭제하기
-      </IconEntryButton>
-    </div>
+  <BottomSheet bind:isOpen class="p-4">
+    <DirectoryEntryLabel {type} {name} class="h-12 p-2" textClass="!font-semibold" />
+    <div class="my-2 h-px w-full bg-gray-200"></div>
+    <IconEntryButton icon={IconEdit} onclick={onRenameClick} class="h-12 w-full">
+      이름 바꾸기
+    </IconEntryButton>
+    <IconEntryButton icon={IconDelete} onclick={onDeleteClick} class="h-12 w-full text-red-500">
+      삭제하기
+    </IconEntryButton>
   </BottomSheet>
 {/if}