자잘한 리팩토링

src/lib/components/buttons/EntryButton.svelte

@@ -19,7 +19,7 @@
   }}
   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 class="flex w-full justify-between p-2 transition active:scale-95">
     <div>
       {@render children?.()}
     </div>

src/lib/components/buttons/FloatingButton.svelte

@@ -4,12 +4,12 @@
   import { AdaptiveDiv } from "$lib/components/divs";
 
   interface Props {
-    bottom?: string;
     icon: Component<SvelteHTMLElements["svg"]>;
+    offset?: string;
     onclick?: () => void;
   }
 
-  let { bottom = "bottom-20", icon: Icon, onclick }: Props = $props();
+  let { icon: Icon, offset = "bottom-20", onclick }: Props = $props();
 
   const click = () => {
     setTimeout(() => {
@@ -19,13 +19,13 @@
 </script>
 
 <div class="pointer-events-none fixed inset-0">
-  <div class="absolute right-0 w-full {bottom}">
+  <div class="absolute w-full {offset}">
     <AdaptiveDiv>
       <div class="relative">
-        <div class="pointer-events-auto absolute bottom-4 right-4">
+        <div class="absolute bottom-4 right-4">
           <button
             onclick={click}
-            class="flex h-14 w-14 items-center justify-center rounded-full bg-gray-300 shadow-lg transition active:scale-95 active:bg-gray-400"
+            class="pointer-events-auto 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/services/auth.ts

@@ -13,9 +13,7 @@ export const requestTokenUpgrade = async (
 ) => {
   let res = await fetch("/api/auth/upgradeToken", {
     method: "POST",
-    headers: {
+    headers: { "Content-Type": "application/json" },
-      "Content-Type": "application/json",
-    },
     body: JSON.stringify({
       encPubKey: encryptKeyBase64,
       sigPubKey: verifyKeyBase64,
@@ -29,9 +27,7 @@ export const requestTokenUpgrade = async (
 
   res = await fetch("/api/auth/upgradeToken/verify", {
     method: "POST",
-    headers: {
+    headers: { "Content-Type": "application/json" },
-      "Content-Type": "application/json",
-    },
     body: JSON.stringify({
       answer: encodeToBase64(answer),
       answerSig: encodeToBase64(answerSig),

src/lib/services/key.ts

@@ -50,7 +50,7 @@ export const requestMasterKeyDownload = async (decryptKey: CryptoKey, verifyKey:
         return {
           version,
           state,
-          masterKey,
+          key: masterKey,
           isValid: await verifyMasterKeyWrapped(
             masterKeyWrapped,
             version,
@@ -63,17 +63,8 @@ export const requestMasterKeyDownload = async (decryptKey: CryptoKey, verifyKey:
   );
   if (!masterKeys.every(({ isValid }) => isValid)) return false;
 
-  await storeMasterKeys(
+  await storeMasterKeys(masterKeys);
-    masterKeys.map(({ version, state, masterKey }) => ({ version, state, key: masterKey })),
+  masterKeyStore.set(new Map(masterKeys.map((masterKey) => [masterKey.version, masterKey])));
-  );
-  masterKeyStore.set(
-    new Map(
-      masterKeys.map(({ version, state, masterKey }) => [
-        version,
-        { version, state, key: masterKey },
-      ]),
-    ),
-  );
 
   return true;
 };

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

@@ -42,12 +42,9 @@
 
   const registerPubKeys = async () => {
     if (!$clientKeyStore) {
-      throw new Error("Failed to find key pair");
+      throw new Error("Failed to find client keys");
     }
 
-    isBeforeContinueModalOpen = false;
-    isBeforeContinueBottomSheetOpen = false;
-
     try {
       if (
         !(await requestClientRegistration(

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

@@ -36,10 +36,12 @@ export const serializeClientKeys = (
 };
 
 export const storeClientKeys = async (clientKeys: ClientKeys) => {
-  await storeClientKey(clientKeys.encryptKey, "encrypt");
+  await Promise.all([
-  await storeClientKey(clientKeys.decryptKey, "decrypt");
+    storeClientKey(clientKeys.encryptKey, "encrypt"),
-  await storeClientKey(clientKeys.signKey, "sign");
+    storeClientKey(clientKeys.decryptKey, "decrypt"),
-  await storeClientKey(clientKeys.verifyKey, "verify");
+    storeClientKey(clientKeys.signKey, "sign"),
+    storeClientKey(clientKeys.verifyKey, "verify"),
+  ]);
 };
 
 export const requestInitialMasterKeyRegistration = async (

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

@@ -15,15 +15,15 @@
 </script>
 
 <BottomSheet bind:isOpen>
-  <div class="flex w-full flex-col py-4">
+  <div class="w-full py-4">
     <EntryButton onclick={onDirectoryCreateClick}>
-      <div class="flex h-12 items-center justify-center gap-x-4">
+      <div class="flex h-12 items-center gap-x-4">
         <IconCreateNewFolder class="text-2xl text-yellow-500" />
         <p class="font-medium">폴더 만들기</p>
       </div>
     </EntryButton>
     <EntryButton onclick={onFileUploadClick}>
-      <div class="flex h-12 items-center justify-center gap-x-4">
+      <div class="flex h-12 items-center gap-x-4">
         <IconUploadFile class="text-2xl text-blue-400" />
         <p class="font-medium">파일 업로드</p>
       </div>

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

@@ -19,14 +19,12 @@
 </script>
 
 <Modal bind:isOpen onclose={closeModal}>
-  <div class="flex flex-col px-1">
+  <p class="text-xl font-bold">새 폴더</p>
-    <p class="text-xl font-bold">새 폴더</p>
+  <div class="mt-2 flex w-full">
-    <div class="my-4 flex w-full">
+    <TextInput bind:value={name} placeholder="폴더 이름" />
-      <TextInput bind:value={name} placeholder="폴더 이름" />
+  </div>
-    </div>
+  <div class="mt-7 flex gap-2">
-    <div class="mt-5 flex gap-2">
+    <Button color="gray" onclick={closeModal}>닫기</Button>
-      <Button color="gray" onclick={closeModal}>닫기</Button>
+    <Button onclick={() => onCreateClick(name)}>만들기</Button>
-      <Button onclick={() => onCreateClick(name)}>만들기</Button>
-    </div>
   </div>
 </Modal>

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

@@ -30,15 +30,15 @@
     {@const { type, name } = selectedEntry}
     {@const nameShort = name.length > 20 ? `${name.slice(0, 20)}...` : name}
     <div class="space-y-4">
-      <div class="space-y-2">
+      <div class="space-y-2 break-keep">
-        <p class="break-keep text-xl font-bold">
+        <p class="text-xl font-bold">
           {#if type === "directory"}
             '{nameShort}' 폴더를 삭제할까요?
           {:else}
             '{nameShort}' 파일을 삭제할까요?
           {/if}
         </p>
-        <p class="break-keep">
+        <p>
           {#if type === "directory"}
             삭제한 폴더는 복구할 수 없어요. <br />
             폴더 안의 모든 파일과 폴더도 함께 삭제돼요.

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

@@ -34,7 +34,7 @@
 {#if $info}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div id="button" onclick={openFile} class="h-12 w-full rounded-xl">
+  <div id="button" onclick={openFile} class="h-12 rounded-xl">
     <div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
       <div class="flex-shrink-0 text-lg">
         <IconDraft class="text-blue-400" />
@@ -47,7 +47,7 @@
         onclick={openMenu}
         class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
       >
-        <IconMoreVert class="text-lg transition active:scale-95" />
+        <IconMoreVert class="text-lg" />
       </button>
     </div>
   </div>

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

@@ -36,7 +36,7 @@
 {#if $info}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div id="button" onclick={openDirectory} class="h-12 w-full rounded-xl">
+  <div id="button" onclick={openDirectory} class="h-12 rounded-xl">
     <div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
       <div class="flex-shrink-0 text-lg">
         <IconFolder />
@@ -49,7 +49,7 @@
         onclick={openMenu}
         class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
       >
-        <IconMoreVert class="text-lg transition active:scale-95" />
+        <IconMoreVert class="text-lg" />
       </button>
     </div>
   </div>

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

@@ -29,14 +29,14 @@
 </script>
 
 <BottomSheet bind:isOpen onclose={closeBottomSheet}>
-  <div class="flex w-full flex-col py-4">
+  <div class="w-full py-4">
     {#if selectedEntry}
       {@const { type, name } = selectedEntry}
       <div class="flex h-12 items-center gap-x-4 p-2">
         <div class="flex-shrink-0 text-lg">
           {#if type === "directory"}
             <IconFolder />
-          {:else if type === "file"}
+          {:else}
             <IconDraft class="text-blue-400" />
           {/if}
         </div>
@@ -47,13 +47,13 @@
       <div class="my-2 h-px w-full bg-gray-200"></div>
     {/if}
     <EntryButton onclick={onRenameClick}>
-      <div class="flex h-8 items-center justify-center gap-x-4">
+      <div class="flex h-8 items-center gap-x-4">
         <IconEdit class="text-lg" />
         <p class="font-medium">이름 바꾸기</p>
       </div>
     </EntryButton>
     <EntryButton onclick={onDeleteClick}>
-      <div class="flex h-8 items-center justify-center gap-x-4 text-red-500">
+      <div class="flex h-8 items-center gap-x-4 text-red-500">
         <IconDelete class="text-lg" />
         <p class="font-medium">삭제하기</p>
       </div>

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

@@ -36,14 +36,12 @@
 </script>
 
 <Modal bind:isOpen onclose={closeModal}>
-  <div class="flex flex-col px-1">
+  <p class="text-xl font-bold">이름 바꾸기</p>
-    <p class="text-xl font-bold">이름 바꾸기</p>
+  <div class="mt-2 flex w-full">
-    <div class="my-4 flex w-full">
+    <TextInput bind:value={name} placeholder="이름" />
-      <TextInput bind:value={name} placeholder="이름" />
+  </div>
-    </div>
+  <div class="mt-7 flex gap-2">
-    <div class="mt-5 flex gap-2">
+    <Button color="gray" onclick={closeModal}>닫기</Button>
-      <Button color="gray" onclick={closeModal}>닫기</Button>
+    <Button onclick={renameEntry}>바꾸기</Button>
-      <Button onclick={renameEntry}>바꾸기</Button>
-    </div>
   </div>
 </Modal>