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

src/lib/components/molecules/IconEntryButton.svelte

@@ -13,11 +13,18 @@
     textClass?: ClassValue;
   }
 
-  let { children, icon, onclick, ...props }: Props = $props();
+  let {
+    children,
+    class: className,
+    icon,
+    iconClass: iconClassName,
+    onclick,
+    textClass: textClassName,
+  }: Props = $props();
 </script>
 
-<EntryButton {onclick} class={props.class}>
-  <IconLabel {icon} class="h-full" iconClass={props.iconClass} textClass={props.textClass}>
+<EntryButton {onclick} class={className}>
+  <IconLabel {icon} class="h-full" iconClass={iconClassName} textClass={textClassName}>
     {@render children?.()}
   </IconLabel>
 </EntryButton>

src/lib/components/molecules/SubCategories.svelte

@@ -19,13 +19,13 @@
   }
 
   let {
+    class: className,
     info,
     onSubCategoryClick,
     onSubCategoryCreateClick,
     onSubCategoryMenuClick,
     subCategoryCreatePosition = "bottom",
     subCategoryMenuIcon,
-    ...props
   }: Props = $props();
 
   let subCategories: Writable<CategoryInfo | null>[] = $state([]);
@@ -37,7 +37,7 @@
   });
 </script>
 
-<div class={["space-y-1", props.class]}>
+<div class={["space-y-1", className]}>
   {#snippet subCategoryCreate()}
     <IconEntryButton
       icon={IconAddCircle}

src/lib/components/molecules/TitledDiv.svelte

@@ -13,12 +13,20 @@
     titleClass?: ClassValue;
   }
 
-  let { children, description, icon, title, ...props }: Props = $props();
+  let {
+    children,
+    childrenClass: childrenClassName,
+    class: className,
+    description,
+    icon,
+    title,
+    titleClass: titleClassName,
+  }: Props = $props();
 </script>
 
-<div class={["space-y-4 py-4", props.class]}>
+<div class={["space-y-4 py-4", className]}>
   <div class="space-y-2 break-keep">
-    <TitleLabel {icon} textClass={props.titleClass}>
+    <TitleLabel {icon} textClass={titleClassName}>
       {@render title?.()}
     </TitleLabel>
     {#if description}
@@ -28,7 +36,7 @@
     {/if}
   </div>
   {#if children}
-    <div class={props.childrenClass}>
+    <div class={childrenClassName}>
       {@render children()}
     </div>
   {/if}

src/lib/components/molecules/TopBar.svelte

@@ -11,13 +11,13 @@
     title?: string;
   }
 
-  let { children, onBackClick, title, ...props }: Props = $props();
+  let { children, class: className, onBackClick, title }: Props = $props();
 </script>
 
 <div
   class={[
     "sticky top-0 z-10 flex items-center justify-between gap-x-2 px-2 py-3 backdrop-blur-2xl",
-    props.class,
+    className,
   ]}
 >
   <button

src/lib/components/molecules/labels/CategoryLabel.svelte

@@ -11,7 +11,7 @@
     textClass?: ClassValue;
   }
 
-  let { name, subtext, ...props }: Props = $props();
+  let { class: className, name, subtext, textClass: textClassName }: Props = $props();
 </script>
 
 {#snippet subtextSnippet()}
@@ -21,8 +21,8 @@
 <IconLabel
   icon={IconCategory}
   subtext={subtext ? subtextSnippet : undefined}
-  class={props.class}
-  textClass={props.textClass}
+  class={className}
+  textClass={textClassName}
 >
   {name}
 </IconLabel>

src/lib/components/molecules/labels/DirectoryEntryLabel.svelte

@@ -13,7 +13,7 @@
     type: "directory" | "file";
   }
 
-  let { name, subtext, type, ...props }: Props = $props();
+  let { class: className, name, subtext, textClass: textClassName, type }: Props = $props();
 </script>
 
 {#snippet subtextSnippet()}
@@ -24,8 +24,8 @@
   icon={type === "directory" ? IconFolder : IconDraft}
   iconClass={type === "file" ? "text-blue-400" : undefined}
   subtext={subtext ? subtextSnippet : undefined}
-  class={props.class}
-  textClass={props.textClass}
+  class={className}
+  textClass={textClassName}
 >
   {name}
 </IconLabel>

src/lib/components/molecules/labels/IconLabel.svelte

@@ -11,15 +11,22 @@
     textClass?: ClassValue;
   }
 
-  let { children, icon: Icon, subtext, ...props }: Props = $props();
+  let {
+    children,
+    class: className,
+    icon: Icon,
+    iconClass: iconClassName,
+    subtext,
+    textClass: textClassName,
+  }: Props = $props();
 </script>
 
-<div class={["flex items-center gap-x-4", props.class]}>
-  <div class={["flex-shrink-0 text-lg", props.iconClass]}>
+<div class={["flex items-center gap-x-4", className]}>
+  <div class={["flex-shrink-0 text-lg", iconClassName]}>
     <Icon />
   </div>
   <div class="flex flex-grow flex-col overflow-x-hidden text-left">
-    <p class={["truncate font-medium", props.textClass]}>
+    <p class={["truncate font-medium", textClassName]}>
       {@render children?.()}
     </p>
     {#if subtext}

src/lib/components/molecules/labels/TitleLabel.svelte

@@ -9,16 +9,16 @@
     textClass?: ClassValue;
   }
 
-  let { children, icon: Icon, ...props }: Props = $props();
+  let { children, class: className, icon: Icon, textClass: textClassName }: Props = $props();
 </script>
 
-<div class={props.class}>
+<div class={className}>
   <div class="flex min-h-[10vh] items-center">
     {#if Icon}
       <Icon class="text-5xl text-gray-600" />
     {/if}
   </div>
-  <p class={["text-3xl font-bold", props.textClass]}>
+  <p class={["text-3xl font-bold", textClassName]}>
     {@render children?.()}
   </p>
 </div>