DirectroyEntry 컴포넌트 구현

src/lib/components/Modal.svelte

@@ -5,14 +5,14 @@
 
   interface Props {
     children: Snippet;
-    onClose?: () => void;
+    onclose?: () => void;
     isOpen: boolean;
   }
 
-  let { children, onClose, isOpen = $bindable() }: Props = $props();
+  let { children, onclose, isOpen = $bindable() }: Props = $props();
 
   const closeModal = $derived(
-    onClose ||
+    onclose ||
       (() => {
         isOpen = false;
       }),

src/lib/components/TopBar.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import IconArrowBack from "~icons/material-symbols/arrow-back";
+
+  interface Props {
+    children?: Snippet;
+    onback?: () => void;
+    title?: string;
+  }
+
+  let { children, onback, title }: Props = $props();
+
+  const back = $derived(() => {
+    setTimeout(onback || (() => history.back()), 100);
+  });
+</script>
+
+<div class="relative mt-4 flex items-center justify-between">
+  <button onclick={back} class="rounded-full p-1 active:bg-gray-100">
+    <IconArrowBack class="text-2xl" />
+  </button>
+  {#if title}
+    <p class="absolute left-1/2 -translate-x-1/2 transform text-xl font-semibold">{title}</p>
+  {/if}
+  {#if children}
+    {@render children?.()}
+  {/if}
+</div>

src/lib/components/index.ts

@@ -1,2 +1,3 @@
 export { default as BottomSheet } from "./BottomSheet.svelte";
 export { default as Modal } from "./Modal.svelte";
+export { default as TopBar } from "./TopBar.svelte";

src/routes/(fullscreen)/auth/login/+page.svelte

@@ -46,7 +46,7 @@
   onMount(async () => {
     const res = await refreshToken();
     if (res.ok) {
-      await goto(data.redirectPath);
+      await goto(data.redirectPath, { replaceState: true });
     }
   });
 </script>

src/routes/(fullscreen)/client/pending/+page.svelte

@@ -21,7 +21,7 @@
       ($clientKeyStore &&
         (await requestMasterKeyDownload($clientKeyStore.decryptKey, $clientKeyStore.verifyKey)))
     ) {
-      await goto(data.redirectPath);
+      await goto(data.redirectPath, { replaceState: true });
     }
   });
 </script>

src/routes/(fullscreen)/key/generate/+page.svelte

@@ -47,7 +47,7 @@
 
   onMount(async () => {
     if ($clientKeyStore) {
-      await goto(data.redirectPath);
+      await goto(data.redirectPath, { replaceState: true });
     }
   });
 </script>

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

@@ -21,7 +21,10 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
     directoryInfo.subDirectories.map(async (subDirectoryId) => {
       const res = await fetch(`/api/directory/${subDirectoryId}`);
       if (!res.ok) error(500, "Internal server error");
-      return (await res.json()) as DirectroyInfoResponse;
+      return {
+        ...((await res.json()) as DirectroyInfoResponse),
+        id: subDirectoryId,
+      };
     }),
   );
   const fileInfos = directoryInfo.files; // TODO

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { TopBar } from "$lib/components";
   import { FloatingButton } from "$lib/components/buttons";
   import { clientKeyStore, masterKeyStore } from "$lib/stores";
   import CreateBottomSheet from "./CreateBottomSheet.svelte";
@@ -20,25 +21,23 @@
       return decryptDirectroyMetadata(metadata, $masterKeyStore.get(metadata.mekVersion)!.key);
     }
   });
-  const subDirectoryMetadatas = $derived.by(() => {
+  const subDirectories = $derived.by(() => {
     const { subDirectories } = data;
     if ($masterKeyStore) {
       return Promise.all(
         subDirectories.map(async (subDirectory) => {
           const metadata = subDirectory.metadata!;
-          return await decryptDirectroyMetadata(
-            metadata,
-            $masterKeyStore.get(metadata.mekVersion)!.key,
-          );
+          return {
+            ...(await decryptDirectroyMetadata(
+              metadata,
+              $masterKeyStore.get(metadata.mekVersion)!.key,
+            )),
+            id: subDirectory.id,
+          };
         }),
-      );
-    }
-  });
-  const entries = $derived.by(() => {
-    if (subDirectoryMetadatas) {
-      return subDirectoryMetadatas.then((subDirectroyMetadatas) => {
-        subDirectroyMetadatas.sort((a, b) => a.name.localeCompare(b.name));
-        return subDirectroyMetadatas;
+      ).then((subDirectories) => {
+        subDirectories.sort((a, b) => a.name.localeCompare(b.name));
+        return subDirectories;
       });
     }
   });
@@ -58,12 +57,24 @@
   <title>파일</title>
 </svelte:head>
 
-<div class="relative h-full">
-  <div>
-    {#if entries}
-      {#await entries then entries}
-        {#each entries as { name }}
-          <DirectoryEntry {name} />
+<div class="relative flex h-full flex-col px-4">
+  {#if data.id !== "root"}
+    {#if !metadata}
+      <TopBar />
+    {:else}
+      {#await metadata}
+        <TopBar />
+      {:then metadata}
+        <TopBar title={metadata.name} />
+      {/await}
+    {/if}
+  {/if}
+
+  <div class="mt-4">
+    {#if subDirectories}
+      {#await subDirectories then subDirectories}
+        {#each subDirectories as { id, name }}
+          <DirectoryEntry {id} {name} />
         {/each}
       {/await}
     {/if}

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

@@ -18,7 +18,7 @@
   };
 </script>
 
-<Modal bind:isOpen onClose={closeModal}>
+<Modal bind:isOpen onclose={closeModal}>
   <div class="flex flex-col px-1">
     <p class="text-xl font-bold">새 폴더</p>
     <div class="my-4 flex w-full">

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

@@ -1,12 +1,46 @@
 <script lang="ts">
+  import { goto } from "$app/navigation";
+
+  import IconFolder from "~icons/material-symbols/folder";
+  import IconMoreVert from "~icons/material-symbols/more-vert";
+
   interface Props {
+    id: number;
     name: string;
   }
 
-  let { name }: Props = $props();
+  let { id, name }: Props = $props();
+
+  const openDirectory = () => {
+    setTimeout(() => {
+      goto(`/directory/${id}`);
+    }, 100);
+  };
 </script>
 
-<div>
-  <!-- TODO -->
-  <p>{name}</p>
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div id="button" onclick={openDirectory} class="h-12 w-full rounded-xl">
+  <div id="button-content" class="flex h-full items-center justify-between p-2 transition">
+    <div class="flex items-center gap-x-2">
+      <IconFolder class="text-lg" />
+      <p class="font-medium">{name}</p>
+    </div>
+    <button
+      id="open-menu"
+      onclick={(e) => e.stopPropagation()}
+      class="rounded-full p-1 active:bg-gray-100"
+    >
+      <IconMoreVert class="text-lg transition active:scale-95" />
+    </button>
+  </div>
 </div>
+
+<style>
+  #button:active:not(:has(#open-menu:active)) {
+    @apply bg-gray-100;
+  }
+  #button-content:active:not(:has(#open-menu:active)) {
+    @apply scale-95;
+  }
+</style>