From 663a0f08b36ce6e3c7b2463e5d57a5623c64a0b4 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Sat, 4 Jan 2025 04:15:46 +0900
Subject: [PATCH] =?UTF-8?q?=EB=94=94=EB=A0=89=ED=84=B0=EB=A6=AC=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C,=20=ED=95=AD?=
 =?UTF-8?q?=EB=AA=A9=EC=9D=B4=20=EB=A7=8E=EC=9D=84=20=EB=95=8C=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=EC=9D=B4=20=EA=B9=A8=EC=A7=80?=
 =?UTF-8?q?=EB=8D=98=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/TopBar.svelte              |  2 +-
 .../components/buttons/FloatingButton.svelte  | 32 +++++++++++++------
 src/routes/(main)/+layout.svelte              |  8 +++--
 src/routes/(main)/BottomBar.svelte            | 10 +++---
 .../(main)/directory/[[id]]/+page.svelte      | 19 ++++++-----
 5 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/src/lib/components/TopBar.svelte b/src/lib/components/TopBar.svelte
index de2346e..38dc550 100644
--- a/src/lib/components/TopBar.svelte
+++ b/src/lib/components/TopBar.svelte
@@ -16,7 +16,7 @@
   });
 </script>
 
-<div class="relative mt-4 flex items-center justify-between">
+<div class="sticky top-0 flex items-center justify-between bg-white pt-4">
   <button onclick={back} class="rounded-full p-1 active:bg-gray-100">
     <IconArrowBack class="text-2xl" />
   </button>
diff --git a/src/lib/components/buttons/FloatingButton.svelte b/src/lib/components/buttons/FloatingButton.svelte
index 823af8d..4d5ee0f 100644
--- a/src/lib/components/buttons/FloatingButton.svelte
+++ b/src/lib/components/buttons/FloatingButton.svelte
@@ -1,22 +1,36 @@
 <script lang="ts">
   import type { Component } from "svelte";
   import type { SvelteHTMLElements } from "svelte/elements";
+  import { AdaptiveDiv } from "$lib/components/divs";
 
   interface Props {
+    bottom?: string;
     icon: Component<SvelteHTMLElements["svg"]>;
     onclick?: () => void;
   }
 
-  let { icon: Icon, onclick }: Props = $props();
-</script>
+  let { bottom = "bottom-20", icon: Icon, onclick }: Props = $props();
 
-<button
-  onclick={() => {
+  const click = () => {
     setTimeout(() => {
       onclick?.();
     }, 100);
-  }}
-  class="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"
->
-  <Icon class="text-xl" />
-</button>
+  };
+</script>
+
+<div class="pointer-events-none fixed inset-0">
+  <div class="absolute right-0 w-full {bottom}">
+    <AdaptiveDiv>
+      <div class="relative">
+        <div class="pointer-events-auto absolute bottom-4 right-4">
+          <button
+            onclick={click}
+            class="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>
+</div>
diff --git a/src/routes/(main)/+layout.svelte b/src/routes/(main)/+layout.svelte
index 0bebf88..f726970 100644
--- a/src/routes/(main)/+layout.svelte
+++ b/src/routes/(main)/+layout.svelte
@@ -6,8 +6,10 @@
 </script>
 
 <div class="flex h-screen w-full flex-col justify-between">
-  <AdaptiveDiv>
-    {@render children()}
-  </AdaptiveDiv>
+  <div class="flex-grow">
+    <AdaptiveDiv>
+      {@render children()}
+    </AdaptiveDiv>
+  </div>
   <BottomBar />
 </div>
diff --git a/src/routes/(main)/BottomBar.svelte b/src/routes/(main)/BottomBar.svelte
index f0c14db..3360a75 100644
--- a/src/routes/(main)/BottomBar.svelte
+++ b/src/routes/(main)/BottomBar.svelte
@@ -19,14 +19,14 @@
   // TODO: Navigation
 </script>
 
-<div class="sticky bottom-0 w-full rounded-t-2xl border-t border-gray-300 bg-white">
+<div
+  class="sticky bottom-0 h-20 w-full flex-shrink-0 rounded-t-2xl border-t border-gray-300 bg-white"
+>
   <AdaptiveDiv>
     <div class="flex w-full justify-evenly p-2">
       {#each pages as { path, label, icon: Icon }}
-        {@const isCurrent = page.url.pathname.startsWith(path)}
-        <button
-          class="w-16 active:rounded-xl active:bg-gray-100 {!isCurrent ? 'text-gray-600' : ''}"
-        >
+        {@const textColor = !page.url.pathname.startsWith(path) ? "text-gray-600" : ""}
+        <button class="w-16 active:rounded-xl active:bg-gray-100 {textColor}">
           <div class="gap-y flex flex-col items-center gap-y-1 p-1 transition active:scale-95">
             <Icon class="text-xl" fill="0" />
             <p class="text-sm">{label}</p>
diff --git a/src/routes/(main)/directory/[[id]]/+page.svelte b/src/routes/(main)/directory/[[id]]/+page.svelte
index 6e1e17d..ff116ec 100644
--- a/src/routes/(main)/directory/[[id]]/+page.svelte
+++ b/src/routes/(main)/directory/[[id]]/+page.svelte
@@ -57,7 +57,7 @@
   <title>파일</title>
 </svelte:head>
 
-<div class="relative flex h-full flex-col px-4">
+<div class="px-4">
   {#if data.id !== "root"}
     {#if !metadata}
       <TopBar />
@@ -69,8 +69,7 @@
       {/await}
     {/if}
   {/if}
-
-  <div class="mt-4">
+  <div class="my-4 pb-[4.5rem]">
     {#if subDirectories}
       {#await subDirectories then subDirectories}
         {#each subDirectories as { id, name }}
@@ -79,15 +78,15 @@
       {/await}
     {/if}
   </div>
-
-  <FloatingButton
-    icon={IconAdd}
-    onclick={() => {
-      isCreateBottomSheetOpen = true;
-    }}
-  />
 </div>
 
+<FloatingButton
+  icon={IconAdd}
+  onclick={() => {
+    isCreateBottomSheetOpen = true;
+  }}
+/>
+
 <CreateBottomSheet
   bind:isOpen={isCreateBottomSheetOpen}
   onDirectoryCreate={() => {