From d2aca276ac666ad3a79076f8f5debc9d179c933e Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Tue, 28 Jan 2025 22:53:50 +0900
Subject: [PATCH] =?UTF-8?q?FloatingButton=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../atoms/buttons/FloatingButton.svelte       | 29 +++++++++----------
 .../(fullscreen)/client/pending/+page.svelte  |  2 +-
 .../(fullscreen)/file/[id]/+page.svelte       |  2 +-
 .../(fullscreen)/file/downloads/+page.svelte  |  2 +-
 .../(fullscreen)/file/uploads/+page.svelte    |  2 +-
 .../(main)/directory/[[id]]/+page.svelte      |  1 +
 6 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/atoms/buttons/FloatingButton.svelte b/src/lib/components/atoms/buttons/FloatingButton.svelte
index 924b086..67956f6 100644
--- a/src/lib/components/atoms/buttons/FloatingButton.svelte
+++ b/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>
diff --git a/src/routes/(fullscreen)/client/pending/+page.svelte b/src/routes/(fullscreen)/client/pending/+page.svelte
index 389b9ce..4566602 100644
--- a/src/routes/(fullscreen)/client/pending/+page.svelte
+++ b/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,
diff --git a/src/routes/(fullscreen)/file/[id]/+page.svelte b/src/routes/(fullscreen)/file/[id]/+page.svelte
index 2ab7e32..325122f 100644
--- a/src/routes/(fullscreen)/file/[id]/+page.svelte
+++ b/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);
diff --git a/src/routes/(fullscreen)/file/downloads/+page.svelte b/src/routes/(fullscreen)/file/downloads/+page.svelte
index 4ce2e9c..e1bad0e 100644
--- a/src/routes/(fullscreen)/file/downloads/+page.svelte
+++ b/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)),
   );
 
diff --git a/src/routes/(fullscreen)/file/uploads/+page.svelte b/src/routes/(fullscreen)/file/uploads/+page.svelte
index bc18705..d456322 100644
--- a/src/routes/(fullscreen)/file/uploads/+page.svelte
+++ b/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)),
   );
 
diff --git a/src/routes/(main)/directory/[[id]]/+page.svelte b/src/routes/(main)/directory/[[id]]/+page.svelte
index 4e7d8dd..592f6be 100644
--- a/src/routes/(main)/directory/[[id]]/+page.svelte
+++ b/src/routes/(main)/directory/[[id]]/+page.svelte
@@ -110,6 +110,7 @@
 </div>
 
 <FloatingButton
+  offset="bottom-24 right-4"
   icon={IconAdd}
   onclick={() => {
     isEntryCreateBottomSheetOpen = true;