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

src/lib/components/BottomSheet.svelte

@@ -18,10 +18,10 @@
     onclick={() => {
       isOpen = false;
     }}
-    class="fixed inset-0 flex items-end justify-center"
+    class="fixed inset-0 z-10 flex items-end justify-center"
   >
     <div class="absolute inset-0 bg-black bg-opacity-50" transition:fade={{ duration: 100 }}></div>
-    <div class="z-10">
+    <div class="z-20 w-full">
       <AdaptiveDiv>
         <div
           onclick={(e) => e.stopPropagation()}

src/lib/components/Modal.svelte

@@ -5,25 +5,33 @@
 
   interface Props {
     children: Snippet;
+    onClose?: () => void;
     isOpen: boolean;
   }
 
-  let { children, isOpen = $bindable() }: Props = $props();
+  let { children, onClose, isOpen = $bindable() }: Props = $props();
+
+  const closeModal = $derived(
+    onClose ||
+      (() => {
+        isOpen = false;
+      }),
+  );
 </script>
 
 {#if isOpen}
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    onclick={() => {
-      isOpen = false;
-    }}
-    class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 px-2"
+    onclick={closeModal}
+    class="fixed inset-0 z-10 bg-black bg-opacity-50 px-2"
     transition:fade={{ duration: 100 }}
   >
     <AdaptiveDiv>
-      <div onclick={(e) => e.stopPropagation()} class="max-w-full rounded-2xl bg-white p-4">
-        {@render children?.()}
+      <div class="flex h-full items-center justify-center">
+        <div onclick={(e) => e.stopPropagation()} class="max-w-full rounded-2xl bg-white p-4">
+          {@render children?.()}
+        </div>
       </div>
     </AdaptiveDiv>
   </div>

src/lib/components/buttons/Button.svelte

@@ -9,13 +9,13 @@
 
   let { children, color = "primary", onclick }: Props = $props();
 
-  let bgColorStyle = $derived(
+  const bgColorStyle = $derived(
     {
       primary: "bg-primary-600 active:bg-primary-500",
       gray: "bg-gray-300 active:bg-gray-400",
     }[color],
   );
-  let fontColorStyle = $derived(
+  const fontColorStyle = $derived(
     {
       primary: "text-white",
       gray: "text-gray-800",

src/lib/components/buttons/EntryButton.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import IconChevronRight from "~icons/material-symbols/chevron-right";
+
+  interface Props {
+    children: Snippet;
+    onclick?: () => void;
+  }
+
+  let { children, onclick }: Props = $props();
+</script>
+
+<button
+  onclick={() => {
+    setTimeout(() => {
+      onclick?.();
+    }, 100);
+  }}
+  class="w-full rounded-xl active:bg-gray-100"
+>
+  <div class="flex w-full items-stretch justify-between p-2 transition active:scale-95">
+    <div>
+      {@render children?.()}
+    </div>
+    <div class="flex items-center justify-center">
+      <IconChevronRight class="text-xl text-gray-800" />
+    </div>
+  </div>
+</button>

src/lib/components/buttons/FloatingButton.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+  import type { SvelteHTMLElements } from "svelte/elements";
+
+  interface Props {
+    icon: Component<SvelteHTMLElements["svg"]>;
+    onclick?: () => void;
+  }
+
+  let { icon: Icon, onclick }: Props = $props();
+</script>
+
+<button
+  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"
+>
+  <Icon class="text-xl" />
+</button>

src/lib/components/buttons/index.ts

@@ -1,2 +1,4 @@
 export { default as Button } from "./Button.svelte";
+export { default as EntryButton } from "./EntryButton.svelte";
+export { default as FloatingButton } from "./FloatingButton.svelte";
 export { default as TextButton } from "./TextButton.svelte";

src/lib/components/divs/AdaptiveDiv.svelte

@@ -2,6 +2,6 @@
   let { children } = $props();
 </script>
 
-<div class="mx-auto w-full max-w-screen-md">
+<div class="mx-auto h-full w-full max-w-screen-md">
   {@render children?.()}
 </div>

src/lib/components/divs/TitleDiv.svelte

@@ -7,13 +7,12 @@
     children: Snippet;
   }
 
-  let { icon, children }: Props = $props();
+  let { icon: Icon, children }: Props = $props();
 </script>
 
 <div>
   <div class="box-content flex min-h-[10vh] items-center pt-2">
-    {#if icon}
-      {@const Icon = icon}
+    {#if Icon}
       <Icon class="text-5xl text-gray-600" />
     {/if}
   </div>

src/lib/components/inputs/TextInput.svelte

@@ -8,7 +8,7 @@
   let { placeholder, type = "text", value = $bindable("") }: Props = $props();
 </script>
 
-<div class="relative mt-6">
+<div class="relative mt-5">
   <input
     bind:value
     {type}

src/lib/modules/crypto.ts

@@ -92,7 +92,18 @@ export const verifyRSASignature = async (
   );
 };
 
-export const generateAESKey = async () => {
+export const generateAESMasterKey = async () => {
+  return await window.crypto.subtle.generateKey(
+    {
+      name: "AES-KW",
+      length: 256,
+    } satisfies AesKeyGenParams,
+    true,
+    ["wrapKey", "unwrapKey"],
+  );
+};
+
+export const generateAESDataKey = async () => {
   return await window.crypto.subtle.generateKey(
     {
       name: "AES-GCM",
@@ -117,13 +128,45 @@ export const exportAESKey = async (key: CryptoKey) => {
   return await window.crypto.subtle.exportKey("raw", key);
 };
 
-export const wrapAESKeyUsingRSA = async (aesKey: CryptoKey, rsaPublicKey: CryptoKey) => {
+export const encryptAESPlaintext = async (plaintext: BufferSource, aesKey: CryptoKey) => {
+  const iv = window.crypto.getRandomValues(new Uint8Array(12));
+  const ciphertext = await window.crypto.subtle.encrypt(
+    {
+      name: "AES-GCM",
+      iv,
+    } satisfies AesGcmParams,
+    aesKey,
+    plaintext,
+  );
+  return { ciphertext, iv };
+};
+
+export const decryptAESCiphertext = async (
+  ciphertext: BufferSource,
+  iv: BufferSource,
+  aesKey: CryptoKey,
+) => {
+  return await window.crypto.subtle.decrypt(
+    {
+      name: "AES-GCM",
+      iv,
+    } satisfies AesGcmParams,
+    aesKey,
+    ciphertext,
+  );
+};
+
+export const wrapAESMasterKey = async (aesKey: CryptoKey, rsaPublicKey: CryptoKey) => {
   return await window.crypto.subtle.wrapKey("raw", aesKey, rsaPublicKey, {
     name: "RSA-OAEP",
   } satisfies RsaOaepParams);
 };
 
-export const unwrapAESKeyUsingRSA = async (wrappedKey: BufferSource, rsaPrivateKey: CryptoKey) => {
+export const wrapAESDataKey = async (aesKey: CryptoKey, aesWrapKey: CryptoKey) => {
+  return await window.crypto.subtle.wrapKey("raw", aesKey, aesWrapKey, "AES-KW");
+};
+
+export const unwrapAESMasterKey = async (wrappedKey: BufferSource, rsaPrivateKey: CryptoKey) => {
   return await window.crypto.subtle.unwrapKey(
     "raw",
     wrappedKey,
@@ -131,11 +174,20 @@ export const unwrapAESKeyUsingRSA = async (wrappedKey: BufferSource, rsaPrivateK
     {
       name: "RSA-OAEP",
     } satisfies RsaOaepParams,
-    {
-      name: "AES-GCM",
-      length: 256,
-    } satisfies AesKeyGenParams,
+    "AES-KW",
     true,
+    ["wrapKey", "unwrapKey"],
+  );
+};
+
+export const unwrapAESDataKey = async (wrappedKey: BufferSource, aesMasterKey: CryptoKey) => {
+  return await window.crypto.subtle.unwrapKey(
+    "raw",
+    wrappedKey,
+    aesMasterKey,
+    "AES-KW",
+    "AES-GCM",
+    false,
     ["encrypt", "decrypt"],
   );
 };

src/lib/services/key.ts

@@ -6,7 +6,7 @@ import {
   decryptRSACiphertext,
   signRSAMessage,
   makeAESKeyNonextractable,
-  unwrapAESKeyUsingRSA,
+  unwrapAESMasterKey,
   verifyMasterKeyWrappedSig,
 } from "$lib/modules/crypto";
 import type {
@@ -51,7 +51,7 @@ export const requestMasterKeyDownload = async (decryptKey: CryptoKey, verfiyKey:
         version,
         state,
         masterKey: await makeAESKeyNonextractable(
-          await unwrapAESKeyUsingRSA(decodeFromBase64(masterKeyWrapped), decryptKey),
+          await unwrapAESMasterKey(decodeFromBase64(masterKeyWrapped), decryptKey),
         ),
         isValid: await verifyMasterKeyWrappedSig(
           version,
@@ -68,7 +68,12 @@ export const requestMasterKeyDownload = async (decryptKey: CryptoKey, verfiyKey:
     masterKeys.map(({ version, state, masterKey }) => ({ version, state, key: masterKey })),
   );
   masterKeyStore.set(
-    new Map(masterKeys.map(({ version, state, masterKey }) => [version, { state, masterKey }])),
+    new Map(
+      masterKeys.map(({ version, state, masterKey }) => [
+        version,
+        { version, state, key: masterKey },
+      ]),
+    ),
   );
 
   return true;

src/lib/stores/key.ts

@@ -8,8 +8,9 @@ export interface ClientKeys {
 }
 
 export interface MasterKey {
+  version: number;
   state: "active" | "retired" | "dead";
-  masterKey: CryptoKey;
+  key: CryptoKey;
 }
 
 export const clientKeyStore = writable<ClientKeys | null>(null);

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

@@ -8,7 +8,7 @@
 
   let { data } = $props();
 
-  let fingerprint = $derived(
+  const fingerprint = $derived(
     $clientKeyStore ? generateEncryptKeyFingerprint($clientKeyStore.encryptKey) : undefined,
   );
 

src/routes/(fullscreen)/key/generate/service.ts

@@ -2,9 +2,8 @@ import {
   generateRSAKeyPair,
   makeRSAKeyNonextractable,
   exportRSAKeyToBase64,
-  generateAESKey,
-  makeAESKeyNonextractable,
-  wrapAESKeyUsingRSA,
+  generateAESMasterKey,
+  wrapAESMasterKey,
 } from "$lib/modules/crypto";
 import { clientKeyStore } from "$lib/stores";
 
@@ -29,9 +28,8 @@ export const generateClientKeys = async () => {
 };
 
 export const generateInitialMasterKey = async (encryptKey: CryptoKey) => {
-  const masterKey = await generateAESKey();
+  const masterKey = await generateAESMasterKey();
   return {
-    masterKey: await makeAESKeyNonextractable(masterKey),
-    masterKeyWrapped: await wrapAESKeyUsingRSA(masterKey, encryptKey),
+    masterKeyWrapped: await wrapAESMasterKey(masterKey, encryptKey),
   };
 };

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,
+  );
+};

src/routes/services.ts

@@ -18,7 +18,7 @@ export const prepareMasterKeyStore = async () => {
   const masterKeys = await getMasterKeys();
   if (masterKeys.length > 0) {
     masterKeyStore.set(
-      new Map(masterKeys.map(({ version, state, key }) => [version, { state, masterKey: key }])),
+      new Map(masterKeys.map(({ version, state, key }) => [version, { version, state, key }])),
     );
     return true;
   } else {