페이지 레이아웃 리팩토링

2025-12-12 21:08:46 +00:00 · 2025-01-09 01:44:57 +09:00
parent 64e949509a
commit 122f802b19
9 changed files with 53 additions and 76 deletions
--- a/src/routes/(fullscreen)/auth/login/+page.svelte
+++ b/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">
-    <h1 class="text-3xl font-bold">환영합니다!</h1>
+  <div class="space-y-2 break-keep">
+    <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>
-  </div>
-  <div class="w-fit">
-    <TextButton>계정이 없어요</TextButton>
-  </div>
+  <Button onclick={login}>로그인</Button>
+  <TextButton>계정이 없어요</TextButton>
 </BottomDiv>
--- a/src/routes/(fullscreen)/client/pending/+page.svelte
+++ b/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">
-    <h1 class="text-3xl font-bold">승인을 기다리고 있어요.</h1>
+  <div class="space-y-2 break-keep">
+    <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="text-center text-2xl font-medium text-gray-800">
-        {#if !fingerprint}
+    <p class="rounded-2xl bg-gray-100 p-4 text-center text-2xl font-medium text-gray-800">
+      {#if !fingerprint}
+        지문 생성하는 중...
+      {:else}
+        {#await fingerprint}
          지문 생성하는 중...
-        {:else}
-          {#await fingerprint}
-            지문 생성하는 중...
-          {:then fingerprint}
-            {fingerprint}
-          {/await}
-        {/if}
-      </p>
-    </div>
+        {:then fingerprint}
+          {fingerprint}
+        {/await}
+      {/if}
+    </p>
    <p class="text-center">
      암호 키 지문은 디바이스마다 다르게 생성돼요. <br />
      지문이 일치하는지 확인 후 승인해 주세요.
--- a/src/routes/(fullscreen)/client/pending/service.ts
+++ b/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 (
-  encryptKey: CryptoKey,
-  verifyKey: CryptoKey,
-) => {
+export const generatePublicKeyFingerprint = async (encryptKey: CryptoKey, verifyKey: CryptoKey) => {
  const { key: encryptKeyBuffer } = await exportRSAKey(encryptKey);
  const { key: verifyKeyBuffer } = await exportRSAKey(verifyKey);
  const digest = await digestMessage(concatenateBuffers(encryptKeyBuffer, verifyKeyBuffer));
--- a/src/routes/(fullscreen)/key/export/+page.svelte
+++ b/src/routes/(fullscreen)/key/export/+page.svelte
@@ -89,9 +89,9 @@
 </svelte:head>

 <TitleDiv icon={IconKey}>
-  <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">
+  <div class="space-y-4 break-keep">
+    <p class="text-3xl font-bold">암호 키를 파일로 내보낼까요?</p>
+    <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>
-  </div>
-  <div class="w-fit">
-    <TextButton
-      onclick={() => {
-        isBeforeContinueModalOpen = true;
-      }}
-    >
-      내보내지 않을래요
-    </TextButton>
-  </div>
+  <Button onclick={exportKeyPair}>암호 키 내보내기</Button>
+  <TextButton
+    onclick={() => {
+      isBeforeContinueModalOpen = true;
+    }}
+  >
+    내보내지 않을래요
+  </TextButton>
 </BottomDiv>

 <BeforeContinueModal bind:isOpen={isBeforeContinueModalOpen} onContinueClick={registerPubKey} />
--- a/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
+++ b/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="space-y-2">
-      <p class="break-keep text-xl font-bold">암호 키 파일을 저장하셨나요?</p>
-      <p class="break-keep">
+  <div class="flex flex-col justify-between gap-y-4 pt-4">
+    <div class="space-y-2 break-keep">
+      <p class="text-xl font-bold">암호 키 파일을 저장하셨나요?</p>
+      <p>
        암호 키 파일은 유출 방지를 위해 이 화면에서만 저장할 수 있어요. 파일이 잘 저장되었는지 다시
        한 번 확인해 주세요.
      </p>
    </div>
    <BottomDiv>
      <div class="flex w-full gap-2">
-        <div class="w-full">
-          <Button color="gray" onclick={onRetryClick}>다시 저장할래요</Button>
-        </div>
-        <div class="w-full">
-          <Button onclick={onContinueClick}>잘 저장되었어요</Button>
-        </div>
+        <Button color="gray" onclick={onRetryClick}>다시 저장할래요</Button>
+        <Button onclick={onContinueClick}>잘 저장되었어요</Button>
      </div>
    </BottomDiv>
  </div>
--- a/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
+++ b/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
@@ -12,9 +12,9 @@

 <Modal bind:isOpen>
  <div class="space-y-4">
-    <div class="space-y-2">
-      <p class="break-keep text-xl font-bold">내보내지 않고 계속할까요?</p>
-      <p class="break-keep">암호 키 파일은 유출 방지를 위해 이 화면에서만 저장할 수 있어요.</p>
+    <div class="space-y-2 break-keep">
+      <p class="text-xl font-bold">내보내지 않고 계속할까요?</p>
+      <p>암호 키 파일은 유출 방지를 위해 이 화면에서만 저장할 수 있어요.</p>
    </div>
    <div class="flex gap-2">
      <Button
--- a/src/routes/(fullscreen)/key/generate/+page.svelte
+++ b/src/routes/(fullscreen)/key/generate/+page.svelte
@@ -57,16 +57,16 @@
 </svelte:head>

 <TitleDiv>
-  <div class="flex flex-col gap-y-2">
-    <h1 class="text-3xl font-bold">암호 키 생성하기</h1>
+  <div class="space-y-2 break-keep">
+    <p class="text-3xl font-bold">암호 키 생성하기</p>
    <p>회원님의 디바이스 간의 안전한 데이터 동기화를 위해 암호 키를 생성해야 해요.</p>
  </div>
-  <div class="my-4 flex flex-col gap-y-2">
-    <div class="mb-4">
+  <div class="my-4 space-y-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>
-  </div>
-  <div class="w-fit">
-    <TextButton>키를 갖고 있어요</TextButton>
-  </div>
+  <Button onclick={generate}>새 암호 키 생성하기</Button>
+  <TextButton>키를 갖고 있어요</TextButton>
 </BottomDiv>
--- a/src/routes/(fullscreen)/key/generate/Order.svelte
+++ b/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>
-    <p class="flex min-h-8 items-center break-keep text-lg font-medium">
+  <div class="mb-5 space-y-1 break-keep">
+    <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}
--- a/src/routes/(main)/BottomBar.svelte
+++ b/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>