Store 초기화를 hooks.client.ts에서 수행하도록 변경

src/hooks.client.ts

@@ -0,0 +1,26 @@
+import type { ClientInit } from "@sveltejs/kit";
+import { getClientKey, getMasterKeys } from "$lib/indexedDB";
+import { clientKeyStore, masterKeyStore } from "$lib/stores";
+
+const prepareClientKeyStore = async () => {
+  const [encryptKey, decryptKey, signKey, verifyKey] = await Promise.all([
+    getClientKey("encrypt"),
+    getClientKey("decrypt"),
+    getClientKey("sign"),
+    getClientKey("verify"),
+  ]);
+  if (encryptKey && decryptKey && signKey && verifyKey) {
+    clientKeyStore.set({ encryptKey, decryptKey, signKey, verifyKey });
+  }
+};
+
+const prepareMasterKeyStore = async () => {
+  const masterKeys = await getMasterKeys();
+  if (masterKeys.length > 0) {
+    masterKeyStore.set(new Map(masterKeys.map((masterKey) => [masterKey.version, masterKey])));
+  }
+};
+
+export const init: ClientInit = async () => {
+  await Promise.all([prepareClientKeyStore(), prepareMasterKeyStore()]);
+};

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onMount } from "svelte";
   import { goto } from "$app/navigation";
   import { TitleDiv } from "$lib/components/divs";
   import { clientKeyStore, masterKeyStore } from "$lib/stores";
@@ -14,17 +15,13 @@
       : undefined,
   );
 
-  $effect(() => {
+  onMount(async () => {
-    if ($masterKeyStore) {
+    if (
-      goto(data.redirectPath);
+      $masterKeyStore ||
-    } else if ($clientKeyStore) {
+      ($clientKeyStore &&
-      requestMasterKeyDownload($clientKeyStore.decryptKey, $clientKeyStore.verifyKey).then(
+        (await requestMasterKeyDownload($clientKeyStore.decryptKey, $clientKeyStore.verifyKey)))
-        async (ok) => {
+    ) {
-          if (ok) {
+      await goto(data.redirectPath);
-            return await goto(data.redirectPath);
-          }
-        },
-      );
     }
   });
 </script>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onMount } from "svelte";
   import { goto } from "$app/navigation";
   import { Button, TextButton } from "$lib/components/buttons";
   import { TitleDiv, BottomDiv } from "$lib/components/divs";
@@ -44,9 +45,9 @@
     });
   };
 
-  $effect(() => {
+  onMount(async () => {
     if ($clientKeyStore) {
-      goto(data.redirectPath);
+      await goto(data.redirectPath);
     }
   });
 </script>

src/routes/+layout.svelte

@@ -1,24 +1,25 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { goto } from "$app/navigation";
+  import { goto as svelteGoto } from "$app/navigation";
+  import { clientKeyStore, masterKeyStore } from "$lib/stores";
   import "../app.css";
-  import { prepareClientKeyStore, prepareMasterKeyStore } from "./services";
 
   let { children } = $props();
 
   onMount(async () => {
-    const redirect = async (url: string) => {
+    const goto = async (url: string) => {
       const whitelist = ["/auth", "/key", "/client/pending"];
       if (!whitelist.some((path) => location.pathname.startsWith(path))) {
-        await goto(`${url}?redirect=${encodeURIComponent(location.pathname + location.search)}`);
+        await svelteGoto(
+          `${url}?redirect=${encodeURIComponent(location.pathname + location.search)}`,
+        );
       }
     };
 
-    if (!(await prepareClientKeyStore())) {
+    if (!$clientKeyStore) {
-      return await redirect("/key/generate");
+      await goto("/key/generate");
-    }
+    } else if (!$masterKeyStore) {
-    if (!(await prepareMasterKeyStore())) {
+      await goto("/client/pending");
-      return await redirect("/client/pending");
     }
   });
 </script>

src/routes/services.ts

@@ -1,27 +0,0 @@
-import { getClientKey, getMasterKeys } from "$lib/indexedDB";
-import { clientKeyStore, masterKeyStore } from "$lib/stores";
-
-export const prepareClientKeyStore = async () => {
-  const encryptKey = await getClientKey("encrypt");
-  const decryptKey = await getClientKey("decrypt");
-  const signKey = await getClientKey("sign");
-  const verifyKey = await getClientKey("verify");
-  if (encryptKey && decryptKey && signKey && verifyKey) {
-    clientKeyStore.set({ encryptKey, decryptKey, signKey, verifyKey });
-    return true;
-  } else {
-    return false;
-  }
-};
-
-export const prepareMasterKeyStore = async () => {
-  const masterKeys = await getMasterKeys();
-  if (masterKeys.length > 0) {
-    masterKeyStore.set(
-      new Map(masterKeys.map(({ version, state, key }) => [version, { version, state, key }])),
-    );
-    return true;
-  } else {
-    return false;
-  }
-};