레이아웃 수정

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
+    <div class="z-10">
-      onclick={(e) => e.stopPropagation()}
+      <AdaptiveDiv>
-      class="z-10 flex max-h-[70vh] min-h-[30vh] w-full items-stretch rounded-t-2xl bg-white p-4"
+        <div
-      transition:fly={{ y: 100, duration: 200 }}
+          onclick={(e) => e.stopPropagation()}
-    >
+          class="flex max-h-[70vh] min-h-[30vh] w-full items-stretch rounded-t-2xl bg-white p-4"
-      {@render children?.()}
+          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 }}
   >
-    <div onclick={(e) => e.stopPropagation()} class="max-w-full rounded-2xl bg-white p-4">
+    <AdaptiveDiv>
-      {@render children?.()}
+      <div onclick={(e) => e.stopPropagation()} class="max-w-full rounded-2xl bg-white p-4">
-    </div>
+        {@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>
-    {@render children()}
+    <div class="flex flex-col justify-between px-2">
+      {@render children()}
+    </div>
   </AdaptiveDiv>
 </div>

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

@@ -55,23 +55,21 @@
   <title>로그인</title>
 </svelte:head>
 
-<div class="flex h-full flex-col justify-between">
+<TitleDiv>
-  <TitleDiv>
+  <div class="flex flex-col gap-y-2">
-    <div class="flex flex-col gap-y-2">
+    <h1 class="text-3xl font-bold">환영합니다!</h1>
-      <h1 class="text-3xl font-bold">환영합니다!</h1>
+    <p>서비스를 이용하려면 로그인을 해야해요.</p>
-      <p>서비스를 이용하려면 로그인을 해야해요.</p>
+  </div>
-    </div>
+  <div class="my-4 flex flex-col gap-y-2">
-    <div class="my-4 flex flex-col gap-y-2">
+    <TextInput bind:value={email} placeholder="이메일" />
-      <TextInput bind:value={email} placeholder="이메일" />
+    <TextInput bind:value={password} placeholder="비밀번호" type="password" />
-      <TextInput bind:value={password} placeholder="비밀번호" type="password" />
+  </div>
-    </div>
+</TitleDiv>
-  </TitleDiv>
+<BottomDiv>
-  <BottomDiv>
+  <div class="w-full">
-    <div class="w-full">
+    <Button onclick={login}>로그인</Button>
-      <Button onclick={login}>로그인</Button>
+  </div>
-    </div>
+  <div class="w-fit">
-    <div class="w-fit">
+    <TextButton>계정이 없어요</TextButton>
-      <TextButton>계정이 없어요</TextButton>
+  </div>
-    </div>
+</BottomDiv>
-  </BottomDiv>
-</div>

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

@@ -27,40 +27,38 @@
   });
 </script>
 
-<svetle:head>
+<svelte:head>
   <title>승인을 기다리고 있어요.</title>
-</svetle:head>
+</svelte:head>
 
-<div class="flex h-full flex-col">
+<TitleDiv>
-  <TitleDiv>
+  <div class="flex flex-col gap-y-2">
-    <div class="flex flex-col gap-y-2">
+    <h1 class="text-3xl font-bold">승인을 기다리고 있어요.</h1>
-      <h1 class="text-3xl font-bold">승인을 기다리고 있어요.</h1>
+    <p>
-      <p>
+      회원님의 다른 디바이스에서 이 디바이스의 데이터 접근을 승인해야 서비스를 이용할 수 있어요.
-        회원님의 다른 디바이스에서 이 디바이스의 데이터 접근을 승인해야 서비스를 이용할 수 있어요.
+    </p>
-      </p>
+  </div>
+  <div class="my-4 flex flex-col gap-y-2">
+    <div>
+      <IconFingerprint class="mx-auto text-7xl" />
+      <p class="text-center text-xl font-bold text-primary-500">암호 키 지문</p>
     </div>
-    <div class="my-4 flex flex-col gap-y-2">
+    <div class="rounded-2xl bg-gray-100 p-4">
-      <div>
+      <p class="text-center text-2xl font-medium text-gray-800">
-        <IconFingerprint class="mx-auto text-7xl" />
+        {#if !fingerprint}
-        <p class="text-center text-xl font-bold text-primary-500">암호 키 지문</p>
+          지문 생성하는 중...
-      </div>
+        {:else}
-      <div class="rounded-2xl bg-gray-100 p-4">
+          {#await fingerprint}
-        <p class="text-center text-2xl font-medium text-gray-800">
-          {#if !fingerprint}
             지문 생성하는 중...
-          {:else}
+          {:then fingerprint}
-            {#await fingerprint}
+            {fingerprint}
-              지문 생성하는 중...
+          {/await}
-            {:then fingerprint}
+        {/if}
-              {fingerprint}
-            {/await}
-          {/if}
-        </p>
-      </div>
-      <p class="text-center">
-        암호 키 지문은 디바이스마다 다르게 생성돼요. <br />
-        지문이 일치하는지 확인 후 승인해 주세요.
       </p>
     </div>
-  </TitleDiv>
+    <p class="text-center">
-</div>
+      암호 키 지문은 디바이스마다 다르게 생성돼요. <br />
+      지문이 일치하는지 확인 후 승인해 주세요.
+    </p>
+  </div>
+</TitleDiv>

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,40 +84,35 @@
   };
 </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">
+  <div class="space-y-4">
-    <IconKey class="text-5xl text-gray-600" />
+    <p class="break-keep text-3xl font-bold">암호 키를 파일로 내보낼까요?</p>
-  </div>
+    <div class="space-y-2 break-keep text-lg text-gray-800">
-  <div class="flex flex-1 flex-col justify-between">
+      <p>
-    <div class="space-y-4">
+        모든 디바이스의 암호 키가 유실되면, 서버에 저장된 데이터를 영원히 복호화할 수 없게 돼요.
-      <p class="break-keep text-3xl font-bold">암호 키를 파일로 내보낼까요?</p>
+      </p>
-      <div class="space-y-2 break-keep text-lg text-gray-800">
+      <p>만약의 상황을 위해 암호 키를 파일로 내보낼 수 있어요.</p>
-        <p>
-          모든 디바이스의 암호 키가 유실되면, 서버에 저장된 데이터를 영원히 복호화할 수 없게 돼요.
-        </p>
-        <p>만약의 상황을 위해 암호 키를 파일로 내보낼 수 있어요.</p>
-      </div>
     </div>
-    <BottomDiv>
-      <div class="w-full">
-        <Button onclick={exportKeyPair}>암호 키 내보내기</Button>
-      </div>
-      <div class="w-fit">
-        <TextButton
-          onclick={() => {
-            isBeforeContinueModalOpen = true;
-          }}
-        >
-          내보내지 않을래요
-        </TextButton>
-      </div>
-    </BottomDiv>
   </div>
-</div>
+</TitleDiv>
+<BottomDiv>
+  <div class="w-full">
+    <Button onclick={exportKeyPair}>암호 키 내보내기</Button>
+  </div>
+  <div class="w-fit">
+    <TextButton
+      onclick={() => {
+        isBeforeContinueModalOpen = true;
+      }}
+    >
+      내보내지 않을래요
+    </TextButton>
+  </div>
+</BottomDiv>
 
 <BeforeContinueModal bind:isOpen={isBeforeContinueModalOpen} onContinueClick={registerPubKey} />
 <BeforeContinueBottomSheet

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

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

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>