컴포넌트 관련 사소한 리팩토링

src/lib/components/atoms/BottomSheet.svelte

@@ -11,7 +11,7 @@
     onclose?: () => void;
   }
 
-  let { children, isOpen = $bindable(), onclose, ...props }: Props = $props();
+  let { children, class: className, isOpen = $bindable(), onclose }: Props = $props();
 </script>
 
 {#if isOpen}
@@ -32,7 +32,7 @@
           class="flex max-h-[70vh] min-h-[30vh] flex-col rounded-t-2xl bg-white"
           transition:fly|global={{ y: 100, duration: 200 }}
         >
-          <div class={["flex-grow overflow-y-auto", props.class]}>
+          <div class={["flex-grow overflow-y-auto", className]}>
             {@render children?.()}
           </div>
         </div>

src/lib/components/atoms/Modal.svelte

@@ -11,7 +11,7 @@
     onclose?: () => void;
   }
 
-  let { children, isOpen = $bindable(), onclose, ...props }: Props = $props();
+  let { children, class: className, isOpen = $bindable(), onclose }: Props = $props();
 </script>
 
 {#if isOpen}
@@ -24,7 +24,7 @@
   >
     <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", props.class]}>
+        <div onclick={(e) => e.stopPropagation()} class={["rounded-2xl bg-white p-4", className]}>
           {@render children?.()}
         </div>
       </div>

src/lib/components/atoms/buttons/ActionEntryButton.svelte

@@ -13,10 +13,11 @@
 
   let {
     actionButtonIcon: ActionButtonIcon,
+    actionButtonClass: actionButtonClassName,
     children,
+    class: className,
     onActionButtonClick,
     onclick,
-    ...props
   }: Props = $props();
 </script>
 
@@ -25,7 +26,7 @@
 <div
   id="container"
   onclick={onclick && (() => setTimeout(onclick, 100))}
-  class={["rounded-xl", props.class]}
+  class={["rounded-xl", className]}
 >
   <div id="children" class="flex h-full items-center justify-between gap-x-4 p-2 transition">
     <div class="flex-grow overflow-x-hidden">
@@ -40,10 +41,7 @@
             setTimeout(onActionButtonClick, 100);
           }
         }}
-        class={[
-          "flex-shrink-0 rounded-full p-1 text-lg active:bg-gray-100",
-          props.actionButtonClass,
-        ]}
+        class={["flex-shrink-0 rounded-full p-1 text-lg active:bg-gray-100", actionButtonClassName]}
       >
         <ActionButtonIcon />
       </button>

src/lib/components/atoms/buttons/Button.svelte

@@ -9,7 +9,7 @@
     onclick?: () => void;
   }
 
-  let { children, color = "primary", onclick, ...props }: Props = $props();
+  let { children, class: className, color = "primary", onclick }: Props = $props();
 
   let bgColor = $derived(
     {
@@ -31,7 +31,7 @@
     "h-12 min-w-fit rounded-xl p-3 font-medium transition active:scale-95",
     bgColor,
     textColor,
-    props.class,
+    className,
   ]}
 >
   {@render children?.()}

src/lib/components/atoms/buttons/EntryButton.svelte

@@ -10,12 +10,12 @@
     onclick?: () => void;
   }
 
-  let { children, onclick, ...props }: Props = $props();
+  let { children, class: className, onclick }: Props = $props();
 </script>
 
 <button
   onclick={onclick && (() => setTimeout(onclick, 100))}
-  class={["rounded-xl active:bg-gray-100", props.class]}
+  class={["rounded-xl active:bg-gray-100", className]}
 >
   <div class="flex h-full gap-x-4 p-2 transition active:scale-95">
     <div class="h-full flex-grow">

src/lib/components/atoms/divs/AdaptiveDiv.svelte

@@ -7,9 +7,9 @@
     class?: ClassValue;
   }
 
-  let { children, ...props }: Props = $props();
+  let { children, class: className }: Props = $props();
 </script>
 
-<div class={["mx-auto max-w-screen-md", props.class]}>
+<div class={["mx-auto max-w-screen-md", className]}>
   {@render children?.()}
 </div>

src/lib/components/atoms/divs/BottomDiv.svelte

@@ -7,9 +7,9 @@
     class?: ClassValue;
   }
 
-  let { children, ...props }: Props = $props();
+  let { children, class: className }: Props = $props();
 </script>
 
-<div class={["sticky bottom-0 bg-white pb-4", props.class]}>
+<div class={["sticky bottom-0 bg-white pb-4", className]}>
   {@render children?.()}
 </div>

src/lib/components/atoms/inputs/TextInput.svelte

@@ -8,10 +8,10 @@
     value?: string;
   }
 
-  let { placeholder, type = "text", value = $bindable(""), ...props }: Props = $props();
+  let { class: className, placeholder, type = "text", value = $bindable("") }: Props = $props();
 </script>
 
-<div class={props.class}>
+<div class={className}>
   <div class="relative mt-5">
     <input
       bind:value