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

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={[
+        class={["flex-shrink-0 rounded-full p-1 text-lg active:bg-gray-100", actionButtonClassName]}
-          "flex-shrink-0 rounded-full p-1 text-lg active:bg-gray-100",
-          props.actionButtonClass,
-        ]}
       >
         <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

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}>
+<EntryButton {onclick} class={className}>
-  <IconLabel {icon} class="h-full" iconClass={props.iconClass} textClass={props.textClass}>
+  <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}
+  class={className}
-  textClass={props.textClass}
+  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}
+  class={className}
-  textClass={props.textClass}
+  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 items-center gap-x-4", className]}>
-  <div class={["flex-shrink-0 text-lg", props.iconClass]}>
+  <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>

src/routes/(fullscreen)/auth/changePassword/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import { Button, BottomDiv, FullscreenDiv, TextInput } from "$lib/components/atoms";
+  import { BottomDiv, Button, FullscreenDiv, TextInput } from "$lib/components/atoms";
   import { TitledDiv, TopBar } from "$lib/components/molecules";
   import { requestPasswordChange } from "./service";
 

src/routes/(fullscreen)/auth/login/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import { Button, TextButton, BottomDiv, FullscreenDiv, TextInput } from "$lib/components/atoms";
+  import { BottomDiv, Button, FullscreenDiv, TextButton, TextInput } from "$lib/components/atoms";
   import { TitledDiv } from "$lib/components/molecules";
   import { clientKeyStore, masterKeyStore } from "$lib/stores";
   import { requestLogin, requestSessionUpgrade, requestMasterKeyDownload } from "./service";

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
-  import { BottomSheet, Button, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
+  import { BottomDiv, BottomSheet, Button, FullscreenDiv } from "$lib/components/atoms";
   import { SubCategories } from "$lib/components/molecules";
   import { CategoryCreateModal } from "$lib/components/organisms";
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";

src/routes/(fullscreen)/key/export/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import FileSaver from "file-saver";
   import { goto } from "$app/navigation";
-  import { Button, TextButton, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
+  import { BottomDiv, Button, FullscreenDiv, TextButton } from "$lib/components/atoms";
   import { TitledDiv } from "$lib/components/molecules";
   import { clientKeyStore } from "$lib/stores";
   import BeforeContinueBottomSheet from "./BeforeContinueBottomSheet.svelte";

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { BottomSheet, Button, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
+  import { BottomDiv, BottomSheet, Button, FullscreenDiv } from "$lib/components/atoms";
 
   interface Props {
     onRetryClick: () => void;

src/routes/(fullscreen)/key/generate/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import { Button, TextButton, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
+  import { BottomDiv, Button, FullscreenDiv, TextButton } from "$lib/components/atoms";
   import { TitledDiv } from "$lib/components/molecules";
   import { gotoStateful } from "$lib/hooks";
   import { clientKeyStore } from "$lib/stores";