From cb279402af3b2c99e5ad351bc6057b97d710dda5 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Wed, 1 Jan 2025 23:29:23 +0900
Subject: [PATCH] =?UTF-8?q?BottomBar=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/(fullscreen)/+layout.svelte        |  2 +-
 src/routes/(main)/+layout.svelte              | 12 ++++++
 src/routes/(main)/BottomBar.svelte            | 38 +++++++++++++++++++
 .../(main)/directory/[[id]]/+page.svelte      |  3 ++
 4 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/(main)/+layout.svelte
 create mode 100644 src/routes/(main)/BottomBar.svelte
 create mode 100644 src/routes/(main)/directory/[[id]]/+page.svelte

diff --git a/src/routes/(fullscreen)/+layout.svelte b/src/routes/(fullscreen)/+layout.svelte
index 27e0b1c..39e4b10 100644
--- a/src/routes/(fullscreen)/+layout.svelte
+++ b/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>
diff --git a/src/routes/(main)/+layout.svelte b/src/routes/(main)/+layout.svelte
new file mode 100644
index 0000000..d51c84f
--- /dev/null
+++ b/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>
diff --git a/src/routes/(main)/BottomBar.svelte b/src/routes/(main)/BottomBar.svelte
new file mode 100644
index 0000000..f0c14db
--- /dev/null
+++ b/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>
diff --git a/src/routes/(main)/directory/[[id]]/+page.svelte b/src/routes/(main)/directory/[[id]]/+page.svelte
new file mode 100644
index 0000000..0f34ad6
--- /dev/null
+++ b/src/routes/(main)/directory/[[id]]/+page.svelte
@@ -0,0 +1,3 @@
+{#each Array(300) as _}
+  <p>Hello!</p>
+{/each}