BottomBar 구현

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

@@ -4,7 +4,7 @@
   let { children } = $props();
 </script>
 
-<div class="h-screen w-screen p-2">
+<div class="h-full w-full p-2">
   <AdaptiveDiv>
     {@render children?.()}
   </AdaptiveDiv>

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import BottomBar from "./BottomBar.svelte";
+
+  let { children } = $props();
+</script>
+
+<div class="flex h-full w-full flex-col justify-between">
+  <div>
+    {@render children?.()}
+  </div>
+  <BottomBar />
+</div>

src/routes/(main)/BottomBar.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { page } from "$app/state";
+  import { AdaptiveDiv } from "$lib/components/divs";
+
+  import IconHome from "~icons/material-symbols/home";
+  import IconFolder from "~icons/material-symbols/folder";
+  import IconFavorite from "~icons/material-symbols/favorite";
+  import IconCategory from "~icons/material-symbols/category";
+  import IconMenu from "~icons/material-symbols/menu";
+
+  const pages = [
+    { path: "/home", label: "홈", icon: IconHome },
+    { path: "/directory", label: "파일", icon: IconFolder },
+    { path: "/favorite", label: "즐겨찾기", icon: IconFavorite },
+    { path: "/category", label: "카테고리", icon: IconCategory },
+    { path: "/menu", label: "전체", icon: IconMenu },
+  ];
+
+  // TODO: Navigation
+</script>
+
+<div class="sticky bottom-0 w-full 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' : ''}"
+        >
+          <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>
+          </div>
+        </button>
+      {/each}
+    </div>
+  </AdaptiveDiv>
+</div>

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

@@ -0,0 +1,3 @@
+{#each Array(300) as _}
+  <p>Hello!</p>
+{/each}