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

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>