페이지 레이아웃 리팩토링

src/routes/(fullscreen)/auth/login/+page.svelte

@@ -4,7 +4,7 @@
   import { Button, TextButton } from "$lib/components/buttons";
   import { TitleDiv, BottomDiv } from "$lib/components/divs";
   import { TextInput } from "$lib/components/inputs";
-  import { refreshToken } from "$lib/hooks/callApi";
+  import { refreshToken } from "$lib/hooks";
   import { clientKeyStore, masterKeyStore } from "$lib/stores";
   import { requestLogin, requestTokenUpgrade, requestMasterKeyDownload } from "./service";
 
@@ -56,8 +56,8 @@
 </svelte:head>
 
 <TitleDiv>
-  <div class="flex flex-col gap-y-2">
+  <div class="space-y-2 break-keep">
-    <h1 class="text-3xl font-bold">환영합니다!</h1>
+    <p class="text-3xl font-bold">환영합니다!</p>
     <p>서비스를 이용하려면 로그인을 해야해요.</p>
   </div>
   <div class="my-4 flex flex-col gap-y-2">
@@ -66,10 +66,6 @@
   </div>
 </TitleDiv>
 <BottomDiv>
-  <div class="w-full">
+  <Button onclick={login}>로그인</Button>
-    <Button onclick={login}>로그인</Button>
+  <TextButton>계정이 없어요</TextButton>
-  </div>
-  <div class="w-fit">
-    <TextButton>계정이 없어요</TextButton>
-  </div>
 </BottomDiv>

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

@@ -3,7 +3,7 @@
   import { goto } from "$app/navigation";
   import { TitleDiv } from "$lib/components/divs";
   import { clientKeyStore, masterKeyStore } from "$lib/stores";
-  import { generateEncryptKeyFingerprint, requestMasterKeyDownload } from "./service";
+  import { generatePublicKeyFingerprint, requestMasterKeyDownload } from "./service";
 
   import IconFingerprint from "~icons/material-symbols/fingerprint";
 
@@ -11,7 +11,7 @@
 
   const fingerprint = $derived(
     $clientKeyStore
-      ? generateEncryptKeyFingerprint($clientKeyStore.encryptKey, $clientKeyStore.verifyKey)
+      ? generatePublicKeyFingerprint($clientKeyStore.encryptKey, $clientKeyStore.verifyKey)
       : undefined,
   );
 
@@ -31,30 +31,28 @@
 </svelte:head>
 
 <TitleDiv>
-  <div class="flex flex-col gap-y-2">
+  <div class="space-y-2 break-keep">
-    <h1 class="text-3xl font-bold">승인을 기다리고 있어요.</h1>
+    <p class="text-3xl font-bold">승인을 기다리고 있어요.</p>
     <p>
       회원님의 다른 디바이스에서 이 디바이스의 데이터 접근을 승인해야 서비스를 이용할 수 있어요.
     </p>
   </div>
-  <div class="my-4 flex flex-col gap-y-2">
+  <div class="my-4 space-y-4">
     <div>
       <IconFingerprint class="mx-auto text-7xl" />
       <p class="text-center text-xl font-bold text-primary-500">암호 키 지문</p>
     </div>
-    <div class="rounded-2xl bg-gray-100 p-4">
+    <p class="rounded-2xl bg-gray-100 p-4 text-center text-2xl font-medium text-gray-800">
-      <p class="text-center text-2xl font-medium text-gray-800">
+      {#if !fingerprint}
-        {#if !fingerprint}
+        지문 생성하는 중...
+      {:else}
+        {#await fingerprint}
           지문 생성하는 중...
-        {:else}
+        {:then fingerprint}
-          {#await fingerprint}
+          {fingerprint}
-            지문 생성하는 중...
+        {/await}
-          {:then fingerprint}
+      {/if}
-            {fingerprint}
+    </p>
-          {/await}
-        {/if}
-      </p>
-    </div>
     <p class="text-center">
       암호 키 지문은 디바이스마다 다르게 생성돼요. <br />
       지문이 일치하는지 확인 후 승인해 주세요.

src/routes/(fullscreen)/client/pending/service.ts

@@ -2,10 +2,7 @@ import { concatenateBuffers, exportRSAKey, digestMessage } from "$lib/modules/cr
 
 export { requestMasterKeyDownload } from "$lib/services/key";
 
-export const generateEncryptKeyFingerprint = async (
+export const generatePublicKeyFingerprint = async (encryptKey: CryptoKey, verifyKey: CryptoKey) => {
-  encryptKey: CryptoKey,
-  verifyKey: CryptoKey,
-) => {
   const { key: encryptKeyBuffer } = await exportRSAKey(encryptKey);
   const { key: verifyKeyBuffer } = await exportRSAKey(verifyKey);
   const digest = await digestMessage(concatenateBuffers(encryptKeyBuffer, verifyKeyBuffer));

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

@@ -89,9 +89,9 @@
 </svelte:head>
 
 <TitleDiv icon={IconKey}>
-  <div class="space-y-4">
+  <div class="space-y-4 break-keep">
-    <p class="break-keep text-3xl font-bold">암호 키를 파일로 내보낼까요?</p>
+    <p class="text-3xl font-bold">암호 키를 파일로 내보낼까요?</p>
-    <div class="space-y-2 break-keep text-lg text-gray-800">
+    <div class="space-y-2 text-lg text-gray-800">
       <p>
         모든 디바이스의 암호 키가 유실되면, 서버에 저장된 데이터를 영원히 복호화할 수 없게 돼요.
       </p>
@@ -100,18 +100,14 @@
   </div>
 </TitleDiv>
 <BottomDiv>
-  <div class="w-full">
+  <Button onclick={exportKeyPair}>암호 키 내보내기</Button>
-    <Button onclick={exportKeyPair}>암호 키 내보내기</Button>
+  <TextButton
-  </div>
+    onclick={() => {
-  <div class="w-fit">
+      isBeforeContinueModalOpen = true;
-    <TextButton
+    }}
-      onclick={() => {
+  >
-        isBeforeContinueModalOpen = true;
+    내보내지 않을래요
-      }}
+  </TextButton>
-    >
-      내보내지 않을래요
-    </TextButton>
-  </div>
 </BottomDiv>
 
 <BeforeContinueModal bind:isOpen={isBeforeContinueModalOpen} onContinueClick={registerPubKey} />

src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte

@@ -13,22 +13,18 @@
 </script>
 
 <BottomSheet bind:isOpen>
-  <div class="flex flex-col justify-between space-y-4 pt-4">
+  <div class="flex flex-col justify-between gap-y-4 pt-4">
-    <div class="space-y-2">
+    <div class="space-y-2 break-keep">
-      <p class="break-keep text-xl font-bold">암호 키 파일을 저장하셨나요?</p>
+      <p class="text-xl font-bold">암호 키 파일을 저장하셨나요?</p>
-      <p class="break-keep">
+      <p>
         암호 키 파일은 유출 방지를 위해 이 화면에서만 저장할 수 있어요. 파일이 잘 저장되었는지 다시
         한 번 확인해 주세요.
       </p>
     </div>
     <BottomDiv>
       <div class="flex w-full gap-2">
-        <div class="w-full">
+        <Button color="gray" onclick={onRetryClick}>다시 저장할래요</Button>
-          <Button color="gray" onclick={onRetryClick}>다시 저장할래요</Button>
+        <Button onclick={onContinueClick}>잘 저장되었어요</Button>
-        </div>
-        <div class="w-full">
-          <Button onclick={onContinueClick}>잘 저장되었어요</Button>
-        </div>
       </div>
     </BottomDiv>
   </div>

src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte

@@ -12,9 +12,9 @@
 
 <Modal bind:isOpen>
   <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>
+      <p class="text-xl font-bold">내보내지 않고 계속할까요?</p>
-      <p class="break-keep">암호 키 파일은 유출 방지를 위해 이 화면에서만 저장할 수 있어요.</p>
+      <p>암호 키 파일은 유출 방지를 위해 이 화면에서만 저장할 수 있어요.</p>
     </div>
     <div class="flex gap-2">
       <Button

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

@@ -57,16 +57,16 @@
 </svelte:head>
 
 <TitleDiv>
-  <div class="flex flex-col gap-y-2">
+  <div class="space-y-2 break-keep">
-    <h1 class="text-3xl font-bold">암호 키 생성하기</h1>
+    <p class="text-3xl font-bold">암호 키 생성하기</p>
     <p>회원님의 디바이스 간의 안전한 데이터 동기화를 위해 암호 키를 생성해야 해요.</p>
   </div>
-  <div class="my-4 flex flex-col gap-y-2">
+  <div class="my-4 space-y-4">
-    <div class="mb-4">
+    <div>
       <IconKey class="mx-auto text-7xl" />
       <p class="text-center text-xl font-bold text-primary-500">왜 암호 키가 필요한가요?</p>
     </div>
-    <div>
+    <div class="space-y-2">
       {#each orders as { title, description }, i}
         <Order order={i + 1} isLast={i === orders.length - 1} {title} {description} />
       {/each}
@@ -74,10 +74,6 @@
   </div>
 </TitleDiv>
 <BottomDiv>
-  <div class="w-full">
+  <Button onclick={generate}>새 암호 키 생성하기</Button>
-    <Button onclick={generate}>새 암호 키 생성하기</Button>
+  <TextButton>키를 갖고 있어요</TextButton>
-  </div>
-  <div class="w-fit">
-    <TextButton>키를 갖고 있어요</TextButton>
-  </div>
 </BottomDiv>

src/routes/(fullscreen)/key/generate/Order.svelte

@@ -9,7 +9,7 @@
   let { order, isLast = false, title, description }: Props = $props();
 </script>
 
-<div class="items-strech flex gap-x-3 {isLast ? 'mb-0' : 'mb-2'}">
+<div class="flex gap-x-3">
   <div class="flex flex-col">
     <p
       class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 text-lg font-bold text-gray-700"
@@ -20,11 +20,11 @@
       <div class="mx-auto mt-2 w-0.5 flex-grow rounded-full bg-gray-300"></div>
     {/if}
   </div>
-  <div>
+  <div class="mb-5 space-y-1 break-keep">
-    <p class="flex min-h-8 items-center break-keep text-lg font-medium">
+    <p class="flex min-h-8 items-center text-lg font-medium">
       {title}
     </p>
-    <p class="mb-5 mt-1 break-keep text-gray-600">
+    <p class="text-gray-600">
       {#if description}
         {description}
       {/if}

src/routes/(main)/BottomBar.svelte

@@ -16,8 +16,6 @@
     { path: "/category", label: "카테고리", icon: IconCategory },
     { path: "/menu", label: "전체", icon: IconMenu },
   ];
-
-  // TODO: Navigation
 </script>
 
 <div class="sticky bottom-0 h-20 flex-shrink-0 rounded-t-2xl border-t border-gray-300 bg-white">
@@ -30,7 +28,7 @@
           class="w-16 active:rounded-xl active:bg-gray-100 {textColor}"
         >
           <div class="flex flex-col items-center gap-y-1 p-1 transition active:scale-95">
-            <Icon class="text-xl" fill="0" />
+            <Icon class="text-xl" />
             <p class="text-sm">{label}</p>
           </div>
         </button>