FullscreenDiv 컴포넌트 추가 및 TopBar 컴포넌트 리팩토링

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

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

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

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import { TopBar } from "$lib/components";
-  import { Button, BottomDiv, TextInput } from "$lib/components/atoms";
+  import { Button, BottomDiv, FullscreenDiv, TextInput } from "$lib/components/atoms";
   import { TitleDiv } from "$lib/components/divs";
+  import { TopBar } from "$lib/components/molecules";
   import { requestPasswordChange } from "./service";
 
   let oldPassword = $state("");
@@ -19,8 +19,8 @@
   <title>비밀번호 바꾸기</title>
 </svelte:head>
 
-<div>
-  <TopBar />
+<TopBar class="flex-shrink-0" />
+<FullscreenDiv>
   <TitleDiv topPadding={false}>
     <div class="space-y-2 break-keep">
       <p class="text-2xl font-bold">기존 비밀번호와 새 비밀번호를 입력해 주세요.</p>
@@ -31,7 +31,7 @@
       <TextInput bind:value={newPassword} placeholder="새 비밀번호" type="password" />
     </div>
   </TitleDiv>
-</div>
-<BottomDiv>
-  <Button onclick={changePassword} class="w-full">비밀번호 바꾸기</Button>
-</BottomDiv>
+  <BottomDiv>
+    <Button onclick={changePassword} class="w-full">비밀번호 바꾸기</Button>
+  </BottomDiv>
+</FullscreenDiv>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import { Button, TextButton, BottomDiv, TextInput } from "$lib/components/atoms";
+  import { Button, TextButton, BottomDiv, FullscreenDiv, TextInput } from "$lib/components/atoms";
   import { TitleDiv } from "$lib/components/divs";
   import { clientKeyStore, masterKeyStore } from "$lib/stores";
   import { requestLogin, requestSessionUpgrade, requestMasterKeyDownload } from "./service";
@@ -46,17 +46,19 @@
   <title>로그인</title>
 </svelte:head>
 
-<TitleDiv>
-  <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">
-    <TextInput bind:value={email} placeholder="이메일" />
-    <TextInput bind:value={password} placeholder="비밀번호" type="password" />
-  </div>
-</TitleDiv>
-<BottomDiv class="flex flex-col items-center gap-y-2">
-  <Button onclick={login} class="w-full">로그인</Button>
-  <TextButton>계정이 없어요</TextButton>
-</BottomDiv>
+<FullscreenDiv>
+  <TitleDiv>
+    <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">
+      <TextInput bind:value={email} placeholder="이메일" />
+      <TextInput bind:value={password} placeholder="비밀번호" type="password" />
+    </div>
+  </TitleDiv>
+  <BottomDiv class="flex flex-col items-center gap-y-2">
+    <Button onclick={login} class="w-full">로그인</Button>
+    <TextButton>계정이 없어요</TextButton>
+  </BottomDiv>
+</FullscreenDiv>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
+  import { FullscreenDiv } from "$lib/components/atoms";
   import { TitleDiv } from "$lib/components/divs";
   import { clientKeyStore, masterKeyStore } from "$lib/stores";
   import { generatePublicKeyFingerprint, requestMasterKeyDownload } from "./service";
@@ -30,32 +31,34 @@
   <title>승인을 기다리고 있어요.</title>
 </svelte:head>
 
-<TitleDiv>
-  <div class="space-y-2 break-keep">
-    <p class="text-3xl font-bold">승인을 기다리고 있어요.</p>
-    <p>
-      회원님의 다른 디바이스에서 이 디바이스의 데이터 접근을 승인해야 서비스를 이용할 수 있어요.
-    </p>
-  </div>
-  <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>
+<FullscreenDiv>
+  <TitleDiv>
+    <div class="space-y-2 break-keep">
+      <p class="text-3xl font-bold">승인을 기다리고 있어요.</p>
+      <p>
+        회원님의 다른 디바이스에서 이 디바이스의 데이터 접근을 승인해야 서비스를 이용할 수 있어요.
+      </p>
     </div>
-    <p class="rounded-2xl bg-gray-100 p-4 text-center text-2xl font-medium text-gray-800">
-      {#if !fingerprint}
-        지문 생성하는 중...
-      {:else}
-        {#await fingerprint}
+    <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>
+      <p class="rounded-2xl bg-gray-100 p-4 text-center text-2xl font-medium text-gray-800">
+        {#if !fingerprint}
           지문 생성하는 중...
-        {:then fingerprint}
-          {fingerprint}
-        {/await}
-      {/if}
-    </p>
-    <p class="text-center">
-      암호 키 지문은 디바이스마다 다르게 생성돼요. <br />
-      지문이 일치하는지 확인 후 승인해 주세요.
-    </p>
-  </div>
-</TitleDiv>
+        {:else}
+          {#await fingerprint}
+            지문 생성하는 중...
+          {:then fingerprint}
+            {fingerprint}
+          {/await}
+        {/if}
+      </p>
+      <p class="text-center">
+        암호 키 지문은 디바이스마다 다르게 생성돼요. <br />
+        지문이 일치하는지 확인 후 승인해 주세요.
+      </p>
+    </div>
+  </TitleDiv>
+</FullscreenDiv>

src/routes/(fullscreen)/file/[id]/+page.svelte

@@ -3,8 +3,8 @@
   import { untrack } from "svelte";
   import { get, type Writable } from "svelte/store";
   import { goto } from "$app/navigation";
-  import { TopBar } from "$lib/components";
-  import { EntryButton } from "$lib/components/atoms";
+  import { EntryButton, FullscreenDiv } from "$lib/components/atoms";
+  import { TopBar } from "$lib/components/molecules";
   import {
     getFileInfo,
     getCategoryInfo,
@@ -116,8 +116,8 @@
   <title>파일</title>
 </svelte:head>
 
-<div class="flex h-full flex-col">
-  <TopBar title={$info?.name} />
+<TopBar title={$info?.name} />
+<FullscreenDiv>
   <div class="space-y-4 pb-4">
     <DownloadStatus status={downloadStatus} />
     {#if $info && viewerType}
@@ -160,7 +160,7 @@
       </div>
     </div>
   </div>
-</div>
+</FullscreenDiv>
 
 <AddToCategoryBottomSheet
   bind:isOpen={isAddToCategoryBottomSheetOpen}

src/routes/(fullscreen)/file/downloads/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { get } from "svelte/store";
-  import { TopBar } from "$lib/components";
+  import { FullscreenDiv } from "$lib/components/atoms";
+  import { TopBar } from "$lib/components/molecules";
   import { fileDownloadStatusStore, isFileDownloading } from "$lib/stores";
   import File from "./File.svelte";
 
@@ -19,11 +20,11 @@
   <title>진행 중인 다운로드</title>
 </svelte:head>
 
-<div class="flex flex-col">
-  <TopBar />
+<TopBar />
+<FullscreenDiv>
   <div class="space-y-2 pb-4">
     {#each downloadingFiles as status}
       <File {status} />
     {/each}
   </div>
-</div>
+</FullscreenDiv>

src/routes/(fullscreen)/file/uploads/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { get } from "svelte/store";
-  import { TopBar } from "$lib/components";
+  import { FullscreenDiv } from "$lib/components/atoms";
+  import { TopBar } from "$lib/components/molecules";
   import { fileUploadStatusStore, isFileUploading } from "$lib/stores";
   import File from "./File.svelte";
 
@@ -19,11 +20,11 @@
   <title>진행 중인 업로드</title>
 </svelte:head>
 
-<div class="flex flex-col">
-  <TopBar />
+<TopBar />
+<FullscreenDiv>
   <div class="space-y-2 pb-4">
     {#each uploadingFiles as status}
       <File {status} />
     {/each}
   </div>
-</div>
+</FullscreenDiv>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import FileSaver from "file-saver";
   import { goto } from "$app/navigation";
-  import { Button, TextButton, BottomDiv } from "$lib/components/atoms";
+  import { Button, TextButton, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
   import { TitleDiv } from "$lib/components/divs";
   import { clientKeyStore } from "$lib/stores";
   import BeforeContinueBottomSheet from "./BeforeContinueBottomSheet.svelte";
@@ -89,21 +89,23 @@
   <title>암호 키 생성하기</title>
 </svelte:head>
 
-<TitleDiv icon={IconKey}>
-  <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>
-      <p>만약의 상황을 위해 암호 키를 파일로 내보낼 수 있어요.</p>
+<FullscreenDiv>
+  <TitleDiv icon={IconKey}>
+    <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>
+        <p>만약의 상황을 위해 암호 키를 파일로 내보낼 수 있어요.</p>
+      </div>
     </div>
-  </div>
-</TitleDiv>
-<BottomDiv class="flex flex-col items-center gap-y-2">
-  <Button onclick={exportClientKeys} class="w-full">암호 키 내보내기</Button>
-  <TextButton onclick={() => (isBeforeContinueModalOpen = true)}>내보내지 않을래요</TextButton>
-</BottomDiv>
+  </TitleDiv>
+  <BottomDiv class="flex flex-col items-center gap-y-2">
+    <Button onclick={exportClientKeys} class="w-full">암호 키 내보내기</Button>
+    <TextButton onclick={() => (isBeforeContinueModalOpen = true)}>내보내지 않을래요</TextButton>
+  </BottomDiv>
+</FullscreenDiv>
 
 <BeforeContinueModal bind:isOpen={isBeforeContinueModalOpen} onContinueClick={registerPubKeys} />
 <BeforeContinueBottomSheet

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import { Button, TextButton, BottomDiv } from "$lib/components/atoms";
+  import { Button, TextButton, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
   import { TitleDiv } from "$lib/components/divs";
   import { gotoStateful } from "$lib/hooks";
   import { clientKeyStore } from "$lib/stores";
@@ -62,24 +62,26 @@
   <title>암호 키 생성하기</title>
 </svelte:head>
 
-<TitleDiv>
-  <div class="space-y-2 break-keep">
-    <p class="text-3xl font-bold">암호 키 생성하기</p>
-    <p>회원님의 디바이스 간의 안전한 데이터 동기화를 위해 암호 키를 생성해야 해요.</p>
-  </div>
-  <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>
+<FullscreenDiv>
+  <TitleDiv>
+    <div class="space-y-2 break-keep">
+      <p class="text-3xl font-bold">암호 키 생성하기</p>
+      <p>회원님의 디바이스 간의 안전한 데이터 동기화를 위해 암호 키를 생성해야 해요.</p>
     </div>
-    <div class="space-y-2">
-      {#each orders as { title, description }, i}
-        <Order order={i + 1} isLast={i === orders.length - 1} {title} {description} />
-      {/each}
+    <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 class="space-y-2">
+        {#each orders as { title, description }, i}
+          <Order order={i + 1} isLast={i === orders.length - 1} {title} {description} />
+        {/each}
+      </div>
     </div>
-  </div>
-</TitleDiv>
-<BottomDiv class="flex flex-col items-center gap-y-2">
-  <Button onclick={generateKeys} class="w-full">새 암호 키 생성하기</Button>
-  <TextButton>키를 갖고 있어요</TextButton>
-</BottomDiv>
+  </TitleDiv>
+  <BottomDiv class="flex flex-col items-center gap-y-2">
+    <Button onclick={generateKeys} class="w-full">새 암호 키 생성하기</Button>
+    <TextButton>키를 갖고 있어요</TextButton>
+  </BottomDiv>
+</FullscreenDiv>

src/routes/(fullscreen)/settings/cache/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import type { Writable } from "svelte/store";
-  import { TopBar } from "$lib/components";
+  import { FullscreenDiv } from "$lib/components/atoms";
+  import { TopBar } from "$lib/components/molecules";
   import type { FileCacheIndex } from "$lib/indexedDB";
   import { getFileCacheIndex } from "$lib/modules/file";
   import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
@@ -43,8 +44,8 @@
   <title>캐시 설정</title>
 </svelte:head>
 
-<div class="flex h-full flex-col">
-  <TopBar title="캐시" />
+<TopBar title="캐시" />
+<FullscreenDiv>
   {#if fileCache && fileCache.length > 0}
     <div class="space-y-4 pb-4">
       <div class="space-y-1 break-keep text-gray-800">
@@ -71,4 +72,4 @@
       </p>
     </div>
   {/if}
-</div>
+</FullscreenDiv>