페이지 레이아웃 리팩토링

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} />

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>

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

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>

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}