암호 키 생성 후 내보내기 페이지로 이동하도록 구현

src/lib/hooks/goto.ts

@@ -0,0 +1,21 @@
+import { writable } from "svelte/store";
+import { goto as svelteGoto } from "$app/navigation";
+
+type Path = "/key/export";
+
+interface KeyExportState {
+  pubKeyBase64: string;
+  privKeyBase64: string;
+}
+
+export const keyExportState = writable<KeyExportState | null>(null);
+
+export function goto(path: "/key/export", state: KeyExportState): Promise<void>;
+
+export function goto(path: Path, state: unknown) {
+  switch (path) {
+    case "/key/export":
+      keyExportState.set(state as KeyExportState);
+      return svelteGoto(path);
+  }
+}

src/lib/hooks/index.ts

@@ -1 +1,2 @@
 export { default as callAPI } from "./callAPI";
+export { goto } from "./goto";

src/lib/stores/key.ts

@@ -0,0 +1,4 @@
+import { writable } from "svelte/store";
+
+export const pubKey = writable<CryptoKey | null>(null);
+export const privKey = writable<CryptoKey | null>(null);

src/routes/(fullscreen)/auth/generateKey/done/+page.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  import { Button, TextButton } from "$lib/components/buttons";
-  import { BottomDiv } from "$lib/components/divs";
-
-  import IconCheckCircle from "~icons/material-symbols/check-circle";
-</script>
-
-<svetle:head>
-  <title>암호 키 생성하기</title>
-</svetle:head>
-
-<div class="flex h-full flex-col justify-between">
-  <div class="mt-[40%] space-y-4">
-    <IconCheckCircle class="mx-auto text-8xl text-primary-500" />
-    <p class="text-center text-2xl font-bold text-primary-500">암호 키가 생성되었어요!</p>
-    <div class="space-y-2 break-keep text-center text-gray-800">
-      <p>모든 디바이스의 암호 키가 유실되면 서버에 저장된 데이터를 영원히 복호화할 수 없게 돼요.</p>
-      <p>복원을 위해 암호 키를 파일로 내보낼 수 있어요.</p>
-    </div>
-  </div>
-  <BottomDiv>
-    <div class="w-full">
-      <Button>암호 키 내보내기</Button>
-    </div>
-    <div class="w-fit">
-      <TextButton>내보내지 않을래요</TextButton>
-    </div>
-  </BottomDiv>
-</div>

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { Button, TextButton } from "$lib/components/buttons";
+  import { BottomDiv } from "$lib/components/divs";
+
+  import IconKey from "~icons/material-symbols/key";
+
+  let { data } = $props();
+</script>
+
+<svetle:head>
+  <title>암호 키 생성하기</title>
+</svetle:head>
+
+<div class="flex h-full flex-col">
+  <div class="flex h-[10%] items-center">
+    <IconKey class="text-5xl text-gray-600" />
+  </div>
+  <div class="flex flex-1 flex-col justify-between">
+    <div class="space-y-4">
+      <p class="break-keep text-3xl font-bold">암호 키를 파일로 내보낼까요?</p>
+      <div class="space-y-2 break-keep text-lg text-gray-800">
+        <p>
+          모든 디바이스의 암호 키가 유실되면, 서버에 저장된 데이터를 영원히 복호화할 수 없게 돼요.
+        </p>
+        <p>만약의 상황을 위해 암호 키를 파일로 내보낼 수 있어요.</p>
+      </div>
+    </div>
+    <BottomDiv>
+      <div class="w-full">
+        <Button
+          onclick={() => {
+            // TODO
+            console.log(data.privKeyBase64);
+            console.log(data.pubKeyBase64);
+          }}>암호 키 내보내기</Button
+        >
+      </div>
+      <div class="w-fit">
+        <TextButton>내보내지 않을래요</TextButton>
+      </div>
+    </BottomDiv>
+  </div>
+</div>

src/routes/(fullscreen)/key/export/+page.ts

@@ -0,0 +1,14 @@
+import { error } from "@sveltejs/kit";
+import { get } from "svelte/store";
+import { keyExportState } from "$lib/hooks/goto";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async () => {
+  const state = get(keyExportState);
+  if (!state) {
+    error(403, "Forbidden");
+  }
+
+  keyExportState.set(null);
+  return state;
+};

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

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { Button, TextButton } from "$lib/components/buttons";
   import { TitleDiv, BottomDiv } from "$lib/components/divs";
+  import { goto } from "$lib/hooks";
   import Order from "./Order.svelte";
+  import { generateKeyPair } from "./service";
 
   import IconKey from "~icons/material-symbols/key";
 
@@ -23,6 +25,10 @@
         "서버를 포함한 제3자는 데이터의 내용을 알 수 없어요. 개인 키가 이 디바이스에만 저장되기 때문이에요.",
     },
   ];
+
+  const generate = async () => {
+    await goto("/key/export", await generateKeyPair());
+  };
 </script>
 
 <svetle:head>
@@ -49,7 +55,7 @@
   </TitleDiv>
   <BottomDiv>
     <div class="w-full">
-      <Button>새 암호 키 생성하기</Button>
+      <Button onclick={generate}>새 암호 키 생성하기</Button>
     </div>
     <div class="w-fit">
       <TextButton>키를 갖고 있어요</TextButton>

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

@@ -1,4 +1,5 @@
 import { storeKeyPairIntoIndexedDB } from "$lib/indexedDB";
+import { pubKey, privKey } from "$lib/stores/key";
 
 type KeyType = "public" | "private";
 
@@ -16,20 +17,6 @@ const generateRSAKeyPair = async () => {
   return keyPair;
 };
 
-const exportKeyAsPem = async (key: CryptoKey, type: KeyType) => {
-  const exportedKey = await window.crypto.subtle.exportKey(
-    type === "public" ? "spki" : "pkcs8",
-    key,
-  );
-  const exportedKeyBase64 = btoa(String.fromCharCode(...new Uint8Array(exportedKey)))
-    .match(/.{1,64}/g)!
-    .join("\n");
-
-  const pemHeader = type === "public" ? "PUBLIC" : "PRIVATE";
-  const pem = `-----BEGIN ${pemHeader} KEY-----\n${exportedKeyBase64}\n-----END ${pemHeader} KEY-----\n`;
-  return pem;
-};
-
 const makeRSAKeyNonextractable = async (key: CryptoKey, type: KeyType) => {
   const format = type === "public" ? "spki" : "pkcs8";
   const keyUsage = type === "public" ? "encrypt" : "decrypt";
@@ -45,13 +32,25 @@ const makeRSAKeyNonextractable = async (key: CryptoKey, type: KeyType) => {
   );
 };
 
+const exportKeyToBase64 = async (key: CryptoKey, type: KeyType) => {
+  const exportedKey = await window.crypto.subtle.exportKey(
+    type === "public" ? "spki" : "pkcs8",
+    key,
+  );
+  return btoa(String.fromCharCode(...new Uint8Array(exportedKey)));
+};
+
 export const generateKeyPair = async () => {
   const keyPair = await generateRSAKeyPair();
-
   const privKeySecure = await makeRSAKeyNonextractable(keyPair.privateKey, "private");
+
+  pubKey.set(keyPair.publicKey);
+  privKey.set(privKeySecure);
+
   await storeKeyPairIntoIndexedDB(keyPair.publicKey, privKeySecure);
 
-  const pubKeyPem = await exportKeyAsPem(keyPair.publicKey, "public");
+  return {
-  const privKeyPem = await exportKeyAsPem(keyPair.privateKey, "private");
+    pubKeyBase64: await exportKeyToBase64(keyPair.publicKey, "public"),
-  return { pubKeyPem, privKeyPem };
+    privKeyBase64: await exportKeyToBase64(keyPair.privateKey, "private"),
+  };
 };