FloatingActionButton 컴포넌트 리팩토링 2

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

@@ -4,12 +4,12 @@
   import { AdaptiveDiv } from "$lib/components/atoms";
 
   interface Props {
+    class: ClassValue;
     icon: Component<SvelteHTMLElements["svg"]>;
-    offset: ClassValue;
     onclick?: () => void;
   }
 
-  let { icon: Icon, offset, onclick }: Props = $props();
+  let { class: className, icon: Icon, onclick }: Props = $props();
 </script>
 
 <div class="pointer-events-none fixed inset-0">
@@ -17,11 +17,11 @@
     <button
       onclick={onclick && (() => setTimeout(onclick, 100))}
       class={[
-        "pointer-events-auto absolute bottom-4 right-4 flex h-14 w-14 items-center justify-center rounded-full bg-gray-300 shadow-lg transition active:scale-95 active:bg-gray-400",
-        offset,
+        "pointer-events-auto absolute flex h-14 w-14 items-center justify-center rounded-full bg-gray-300 text-xl shadow-lg transition active:scale-95 active:bg-gray-400",
+        className,
       ]}
     >
-      <Icon class="text-xl" />
+      <Icon />
     </button>
   </AdaptiveDiv>
 </div>

src/routes/(main)/directory/[[id]]/+page.svelte

@@ -110,11 +110,11 @@
 </div>
 
 <FloatingButton
-  offset="bottom-24 right-4"
   icon={IconAdd}
   onclick={() => {
     isEntryCreateBottomSheetOpen = true;
   }}
+  class="bottom-24 right-4"
 />
 <EntryCreateBottomSheet
   bind:isOpen={isEntryCreateBottomSheetOpen}