레이아웃 수정

src/lib/components/BottomSheet.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import { fade, fly } from "svelte/transition";
+  import { AdaptiveDiv } from "$lib/components/divs";
 
   interface Props {
     children: Snippet;
@@ -20,12 +21,16 @@
     class="fixed inset-0 flex items-end justify-center"
   >
     <div class="absolute inset-0 bg-black bg-opacity-50" transition:fade={{ duration: 100 }}></div>
+    <div class="z-10">
+      <AdaptiveDiv>
         <div
           onclick={(e) => e.stopPropagation()}
-      class="z-10 flex max-h-[70vh] min-h-[30vh] w-full items-stretch rounded-t-2xl bg-white p-4"
+          class="flex max-h-[70vh] min-h-[30vh] w-full items-stretch rounded-t-2xl bg-white p-4"
           transition:fly={{ y: 100, duration: 200 }}
         >
           {@render children?.()}
         </div>
+      </AdaptiveDiv>
+    </div>
   </div>
 {/if}

src/lib/components/Modal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import { fade } from "svelte/transition";
+  import { AdaptiveDiv } from "$lib/components/divs";
 
   interface Props {
     children: Snippet;
@@ -20,8 +21,10 @@
     class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 px-2"
     transition:fade={{ duration: 100 }}
   >
+    <AdaptiveDiv>
       <div onclick={(e) => e.stopPropagation()} class="max-w-full rounded-2xl bg-white p-4">
         {@render children?.()}
       </div>
+    </AdaptiveDiv>
   </div>
 {/if}

src/lib/components/divs/AdaptiveDiv.svelte

@@ -2,6 +2,6 @@
   let { children } = $props();
 </script>
 
-<div class="mx-auto h-full w-full max-w-screen-md">
+<div class="mx-auto w-full max-w-screen-md">
   {@render children?.()}
 </div>

src/lib/components/divs/BottomDiv.svelte

@@ -2,6 +2,6 @@
   let { children } = $props();
 </script>
 
-<div class="sticky bottom-0 flex w-full flex-col items-center gap-y-2 bg-white">
+<div class="sticky bottom-0 flex w-full flex-col items-center gap-y-2 bg-white pb-2">
   {@render children?.()}
 </div>

src/lib/components/divs/TitleDiv.svelte

@@ -1,7 +1,21 @@
 <script lang="ts">
-  let { children } = $props();
+  import type { Component, Snippet } from "svelte";
+  import type { SvelteHTMLElements } from "svelte/elements";
+
+  interface Props {
+    icon?: Component<SvelteHTMLElements["svg"]>;
+    children: Snippet;
+  }
+
+  let { icon, children }: Props = $props();
 </script>
 
-<div class="mt-[20%]">
+<div>
+  <div class="box-content flex min-h-[10vh] items-center pt-2">
+    {#if icon}
+      {@const Icon = icon}
+      <Icon class="text-5xl text-gray-600" />
+    {/if}
+  </div>
   {@render children?.()}
 </div>

src/routes/(fullscreen)/+layout.svelte

@@ -4,8 +4,10 @@
   let { children } = $props();
 </script>
 
-<div class="h-dvh w-full p-2">
+<div class="h-screen w-full">
   <AdaptiveDiv>
+    <div class="flex flex-col justify-between px-2">
       {@render children()}
+    </div>
   </AdaptiveDiv>
 </div>

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

@@ -55,7 +55,6 @@
   <title>로그인</title>
 </svelte:head>
 
-<div class="flex h-full flex-col justify-between">
 <TitleDiv>
   <div class="flex flex-col gap-y-2">
     <h1 class="text-3xl font-bold">환영합니다!</h1>
@@ -74,4 +73,3 @@
     <TextButton>계정이 없어요</TextButton>
   </div>
 </BottomDiv>
-</div>

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

@@ -27,11 +27,10 @@
   });
 </script>
 
-<svetle:head>
+<svelte:head>
   <title>승인을 기다리고 있어요.</title>
-</svetle:head>
+</svelte:head>
 
-<div class="flex h-full flex-col">
 <TitleDiv>
   <div class="flex flex-col gap-y-2">
     <h1 class="text-3xl font-bold">승인을 기다리고 있어요.</h1>
@@ -63,4 +62,3 @@
     </p>
   </div>
 </TitleDiv>
-</div>

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

@@ -2,7 +2,7 @@
   import { saveAs } from "file-saver";
   import { goto } from "$app/navigation";
   import { Button, TextButton } from "$lib/components/buttons";
-  import { BottomDiv } from "$lib/components/divs";
+  import { TitleDiv, BottomDiv } from "$lib/components/divs";
   import { clientKeyStore } from "$lib/stores";
   import BeforeContinueBottomSheet from "./BeforeContinueBottomSheet.svelte";
   import BeforeContinueModal from "./BeforeContinueModal.svelte";
@@ -84,15 +84,11 @@
   };
 </script>
 
-<svetle:head>
+<svelte:head>
   <title>암호 키 생성하기</title>
-</svetle:head>
+</svelte:head>
 
-<div class="flex h-full flex-col">
+<TitleDiv icon={IconKey}>
-  <div class="flex h-[10%] items-center">
-    <IconKey class="text-5xl text-gray-600" />
-  </div>
-  <div class="flex flex-1 flex-col justify-between">
   <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">
@@ -102,6 +98,7 @@
       <p>만약의 상황을 위해 암호 키를 파일로 내보낼 수 있어요.</p>
     </div>
   </div>
+</TitleDiv>
 <BottomDiv>
   <div class="w-full">
     <Button onclick={exportKeyPair}>암호 키 내보내기</Button>
@@ -116,8 +113,6 @@
     </TextButton>
   </div>
 </BottomDiv>
-  </div>
-</div>
 
 <BeforeContinueModal bind:isOpen={isBeforeContinueModalOpen} onContinueClick={registerPubKey} />
 <BeforeContinueBottomSheet

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

@@ -51,11 +51,10 @@
   });
 </script>
 
-<svetle:head>
+<svelte:head>
   <title>암호 키 생성하기</title>
-</svetle:head>
+</svelte:head>
 
-<div class="flex h-full flex-col justify-between overflow-auto">
 <TitleDiv>
   <div class="flex flex-col gap-y-2">
     <h1 class="text-3xl font-bold">암호 키 생성하기</h1>
@@ -81,4 +80,3 @@
     <TextButton>키를 갖고 있어요</TextButton>
   </div>
 </BottomDiv>
-</div>

src/routes/(main)/+layout.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
+  import { AdaptiveDiv } from "$lib/components/divs";
   import BottomBar from "./BottomBar.svelte";
 
   let { children } = $props();
 </script>
 
-<div class="flex h-dvh w-full flex-col justify-between">
+<div class="flex h-screen w-full flex-col justify-between">
-  <div>
+  <AdaptiveDiv>
     {@render children()}
-  </div>
+  </AdaptiveDiv>
   <BottomBar />
 </div>