디렉터리 페이지에서, 항목이 많을 때 레이아웃이 깨지던 버그 수정

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>

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();
+  let { bottom = "bottom-20", icon: Icon, onclick }: Props = $props();
-</script>
 
-<button
+  const click = () => {
-  onclick={() => {
     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"
+</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>
+          </button>
+        </div>
+      </div>
+    </AdaptiveDiv>
+  </div>
+</div>

src/routes/(main)/+layout.svelte

@@ -6,8 +6,10 @@
 </script>
 
 <div class="flex h-screen w-full flex-col justify-between">
+  <div class="flex-grow">
     <AdaptiveDiv>
       {@render children()}
     </AdaptiveDiv>
+  </div>
   <BottomBar />
 </div>

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)}
+        {@const textColor = !page.url.pathname.startsWith(path) ? "text-gray-600" : ""}
-        <button
+        <button class="w-16 active:rounded-xl active:bg-gray-100 {textColor}">
-          class="w-16 active:rounded-xl active:bg-gray-100 {!isCurrent ? 'text-gray-600' : ''}"
-        >
           <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>

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="my-4 pb-[4.5rem]">
-  <div class="mt-4">
     {#if subDirectories}
       {#await subDirectories then subDirectories}
         {#each subDirectories as { id, name }}
@@ -79,14 +78,14 @@
       {/await}
     {/if}
   </div>
+</div>
 
-  <FloatingButton
+<FloatingButton
   icon={IconAdd}
   onclick={() => {
     isCreateBottomSheetOpen = true;
   }}
-  />
+/>
-</div>
 
 <CreateBottomSheet
   bind:isOpen={isCreateBottomSheetOpen}