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";