FloatingButton 컴포넌트 리팩토링

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

@@ -5,26 +5,23 @@
 
   interface Props {
     icon: Component<SvelteHTMLElements["svg"]>;
-    offset?: ClassValue;
+    offset: ClassValue;
     onclick?: () => void;
   }
 
-  let { icon: Icon, offset = "bottom-20", onclick }: Props = $props();
+  let { icon: Icon, offset, onclick }: Props = $props();
 </script>
 
 <div class="pointer-events-none fixed inset-0">
-  <div class={["absolute w-full", offset]}>
-    <AdaptiveDiv>
-      <div class="relative">
-        <div class="absolute bottom-4 right-4">
-          <button
-            onclick={onclick && (() => setTimeout(onclick, 100))}
-            class="pointer-events-auto flex h-14 w-14 items-center justify-center rounded-full bg-gray-300 shadow-lg transition active:scale-95 active:bg-gray-400"
-          >
-            <Icon class="text-xl" />
-          </button>
-        </div>
-      </div>
-    </AdaptiveDiv>
-  </div>
+  <AdaptiveDiv class="relative h-full">
+    <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,
+      ]}
+    >
+      <Icon class="text-xl" />
+    </button>
+  </AdaptiveDiv>
 </div>

src/routes/(fullscreen)/client/pending/+page.svelte

@@ -10,7 +10,7 @@
 
   let { data } = $props();
 
-  const fingerprint = $derived(
+  let fingerprint = $derived(
     $clientKeyStore
       ? generatePublicKeyFingerprint($clientKeyStore.encryptKey, $clientKeyStore.verifyKey)
       : undefined,

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

@@ -30,7 +30,7 @@
 
   let isAddToCategoryBottomSheetOpen = $state(false);
 
-  const downloadStatus = $derived(
+  let downloadStatus = $derived(
     $fileDownloadStatusStore.find((statusStore) => {
       const { id, status } = get(statusStore);
       return id === data.id && isFileDownloading(status);

src/routes/(fullscreen)/file/downloads/+page.svelte

@@ -5,7 +5,7 @@
   import { fileDownloadStatusStore, isFileDownloading } from "$lib/stores";
   import File from "./File.svelte";
 
-  const downloadingFiles = $derived(
+  let downloadingFiles = $derived(
     $fileDownloadStatusStore.filter((status) => isFileDownloading(get(status).status)),
   );
 

src/routes/(fullscreen)/file/uploads/+page.svelte

@@ -5,7 +5,7 @@
   import { fileUploadStatusStore, isFileUploading } from "$lib/stores";
   import File from "./File.svelte";
 
-  const uploadingFiles = $derived(
+  let uploadingFiles = $derived(
     $fileUploadStatusStore.filter((status) => isFileUploading(get(status).status)),
   );
 

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

@@ -110,6 +110,7 @@
 </div>
 
 <FloatingButton
+  offset="bottom-24 right-4"
   icon={IconAdd}
   onclick={() => {
     isEntryCreateBottomSheetOpen = true;