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

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);