디렉터리 페이지 레이아웃 구현 및 디렉터리 생성 구현

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

@@ -0,0 +1,35 @@
+import { error } from "@sveltejs/kit";
+import { z } from "zod";
+import type { DirectroyInfoResponse } from "$lib/server/schemas";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ params, fetch }) => {
+  const zodRes = z
+    .object({
+      id: z.coerce.number().int().positive().optional(),
+    })
+    .safeParse(params);
+  if (!zodRes.success) error(404, "Not found");
+  const { id } = zodRes.data;
+
+  const directoryId = id ? id : ("root" as const);
+  const res = await fetch(`/api/directory/${directoryId}`);
+  if (!res.ok) error(404, "Not found");
+
+  const directoryInfo: DirectroyInfoResponse = await res.json();
+  const subDirectoryInfos = await Promise.all(
+    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;
+    }),
+  );
+  const fileInfos = directoryInfo.files; // TODO
+
+  return {
+    id: directoryId,
+    metadata: directoryInfo.metadata,
+    subDirectories: subDirectoryInfos,
+    files: fileInfos,
+  };
+};

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

@@ -1,3 +1,91 @@
-{#each Array(300) as _}
-  <p>Hello!</p>
-{/each}
+<script lang="ts">
+  import { FloatingButton } from "$lib/components/buttons";
+  import { clientKeyStore, masterKeyStore } from "$lib/stores";
+  import CreateBottomSheet from "./CreateBottomSheet.svelte";
+  import CreateDirectoryModal from "./CreateDirectoryModal.svelte";
+  import DirectoryEntry from "./DirectoryEntry.svelte";
+  import { decryptDirectroyMetadata, requestDirectroyCreation } from "./service";
+
+  import IconAdd from "~icons/material-symbols/add";
+
+  let { data } = $props();
+
+  let isCreateBottomSheetOpen = $state(false);
+  let isCreateDirectoryModalOpen = $state(false);
+
+  // TODO: FIX ME
+  const metadata = $derived.by(() => {
+    const { metadata } = data;
+    if (metadata && $masterKeyStore) {
+      return decryptDirectroyMetadata(metadata, $masterKeyStore.get(metadata.mekVersion)!.key);
+    }
+  });
+  const subDirectoryMetadatas = $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,
+          );
+        }),
+      );
+    }
+  });
+  const entries = $derived.by(() => {
+    if (subDirectoryMetadatas) {
+      return subDirectoryMetadatas.then((subDirectroyMetadatas) => {
+        subDirectroyMetadatas.sort((a, b) => a.name.localeCompare(b.name));
+        return subDirectroyMetadatas;
+      });
+    }
+  });
+
+  const createDirectory = async (name: string) => {
+    await requestDirectroyCreation(
+      name,
+      data.id,
+      $masterKeyStore?.get(1)!,
+      $clientKeyStore?.signKey!,
+    );
+    isCreateDirectoryModalOpen = false;
+  };
+</script>
+
+<svelte:head>
+  <title>파일</title>
+</svelte:head>
+
+<div class="relative h-full">
+  <div>
+    {#if entries}
+      {#await entries then entries}
+        {#each entries as { name }}
+          <DirectoryEntry {name} />
+        {/each}
+      {/await}
+    {/if}
+  </div>
+
+  <FloatingButton
+    icon={IconAdd}
+    onclick={() => {
+      isCreateBottomSheetOpen = true;
+    }}
+  />
+</div>
+
+<CreateBottomSheet
+  bind:isOpen={isCreateBottomSheetOpen}
+  onDirectoryCreate={() => {
+    isCreateBottomSheetOpen = false;
+    isCreateDirectoryModalOpen = true;
+  }}
+  onFileUpload={() => {
+    isCreateBottomSheetOpen = false;
+    // TODO
+  }}
+/>
+<CreateDirectoryModal bind:isOpen={isCreateDirectoryModalOpen} onCreateClick={createDirectory} />

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { BottomSheet } from "$lib/components";
+  import { EntryButton } from "$lib/components/buttons";
+
+  import IconCreateNewFolder from "~icons/material-symbols/create-new-folder";
+  import IconUploadFile from "~icons/material-symbols/upload-file";
+
+  interface Props {
+    onDirectoryCreate: () => void;
+    onFileUpload: () => void;
+    isOpen: boolean;
+  }
+
+  let { onDirectoryCreate, onFileUpload, isOpen = $bindable() }: Props = $props();
+</script>
+
+<BottomSheet bind:isOpen>
+  <div class="flex w-full flex-col">
+    <EntryButton onclick={onDirectoryCreate}>
+      <div class="flex h-12 items-center justify-center gap-x-4">
+        <IconCreateNewFolder class="text-2xl text-yellow-500" />
+        <p class="font-medium">폴더 만들기</p>
+      </div>
+    </EntryButton>
+    <EntryButton onclick={onFileUpload}>
+      <div class="flex h-12 items-center justify-center gap-x-4">
+        <IconUploadFile class="text-2xl text-blue-400" />
+        <p class="font-medium">파일 업로드</p>
+      </div>
+    </EntryButton>
+  </div>
+</BottomSheet>

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Modal } from "$lib/components";
+  import { Button } from "$lib/components/buttons";
+  import { TextInput } from "$lib/components/inputs";
+
+  interface Props {
+    onCreateClick: (name: string) => void;
+    isOpen: boolean;
+  }
+
+  let { onCreateClick, isOpen = $bindable() }: Props = $props();
+
+  let name = $state("");
+
+  const closeModal = () => {
+    name = "";
+    isOpen = false;
+  };
+</script>
+
+<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">
+      <TextInput bind:value={name} placeholder="폴더 이름" />
+    </div>
+    <div class="mt-5 flex gap-2">
+      <Button color="gray" onclick={closeModal}>닫기</Button>
+      <Button onclick={() => onCreateClick(name)}>만들기</Button>
+    </div>
+  </div>
+</Modal>

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+  interface Props {
+    name: string;
+  }
+
+  let { name }: Props = $props();
+</script>
+
+<div>
+  <!-- TODO -->
+  <p>{name}</p>
+</div>

src/routes/(main)/directory/[[id]]/service.ts

@@ -0,0 +1,49 @@
+import { callSignedPostApi } from "$lib/hooks";
+import {
+  encodeToBase64,
+  decodeFromBase64,
+  generateAESDataKey,
+  encryptAESPlaintext,
+  decryptAESCiphertext,
+  wrapAESDataKey,
+  unwrapAESDataKey,
+} from "$lib/modules/crypto";
+import type { DirectroyInfoResponse, DirectoryCreateRequest } from "$lib/server/schemas";
+import type { MasterKey } from "$lib/stores";
+
+export const decryptDirectroyMetadata = async (
+  metadata: NonNullable<DirectroyInfoResponse["metadata"]>,
+  masterKey: CryptoKey,
+) => {
+  const dataDecryptKey = await unwrapAESDataKey(decodeFromBase64(metadata.dek), masterKey);
+  return {
+    name: new TextDecoder().decode(
+      await decryptAESCiphertext(
+        decodeFromBase64(metadata.name),
+        decodeFromBase64(metadata.nameIv),
+        dataDecryptKey,
+      ),
+    ),
+  };
+};
+
+export const requestDirectroyCreation = async (
+  name: string,
+  parentId: "root" | number,
+  masterKey: MasterKey,
+  signKey: CryptoKey,
+) => {
+  const dataKey = await generateAESDataKey();
+  const nameEncrypted = await encryptAESPlaintext(new TextEncoder().encode(name), dataKey);
+  return await callSignedPostApi<DirectoryCreateRequest>(
+    "/api/directory/create",
+    {
+      parentId,
+      mekVersion: masterKey.version,
+      dek: encodeToBase64(await wrapAESDataKey(dataKey, masterKey.key)),
+      name: encodeToBase64(nameEncrypted.ciphertext),
+      nameIv: encodeToBase64(nameEncrypted.iv.buffer),
+    },
+    signKey,
+  );
+};