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

src/lib/components/TopBar.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-
-  import IconArrowBack from "~icons/material-symbols/arrow-back";
-
-  interface Props {
-    children?: Snippet;
-    onback?: () => void;
-    title?: string;
-    xPadding?: boolean;
-  }
-
-  let { children, onback, title, xPadding = false }: Props = $props();
-
-  const back = $derived(() => {
-    setTimeout(onback || (() => history.back()), 100);
-  });
-</script>
-
-<div
-  class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between bg-white py-4
-  {xPadding ? 'px-4' : ''}"
->
-  <button onclick={back} class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-gray-100">
-    <IconArrowBack class="text-2xl" />
-  </button>
-  {#if title}
-    <p class="flex-grow truncate px-2 text-center text-lg font-semibold">{title}</p>
-  {/if}
-  <div class="w-[2.3rem] flex-shrink-0">
-    {#if children}
-      {@render children?.()}
-    {/if}
-  </div>
-</div>

src/lib/components/atoms/divs/AdaptiveDiv.svelte

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

src/lib/components/atoms/divs/FullscreenDiv.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+<div class="flex flex-grow flex-col justify-between px-4">
+  {@render children?.()}
+</div>

src/lib/components/atoms/divs/index.ts

@@ -1,2 +1,3 @@
 export { default as AdaptiveDiv } from "./AdaptiveDiv.svelte";
 export { default as BottomDiv } from "./BottomDiv.svelte";
+export { default as FullscreenDiv } from "./FullscreenDiv.svelte";

src/lib/components/index.ts

@@ -1,2 +1 @@
 export { default as BottomSheet } from "./BottomSheet.svelte";
-export { default as TopBar } from "./TopBar.svelte";

src/lib/components/molecules/TopBar.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+
+  import IconArrowBack from "~icons/material-symbols/arrow-back";
+
+  interface Props {
+    children?: Snippet;
+    class?: ClassValue;
+    onBackClick?: () => void;
+    title?: string;
+  }
+
+  let { children, onBackClick, title, ...props }: Props = $props();
+</script>
+
+<div
+  class={[
+    "sticky top-0 z-10 flex items-center justify-between gap-x-2 px-2 py-3 backdrop-blur-2xl",
+    props.class,
+  ]}
+>
+  <button
+    onclick={onBackClick || (() => history.back())}
+    class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]"
+  >
+    <IconArrowBack class="text-2xl" />
+  </button>
+  {#if title}
+    <p class="flex-grow truncate text-center text-lg font-semibold">{title}</p>
+  {/if}
+  <div class="w-[2.3rem] flex-shrink-0">
+    {#if children}
+      {@render children?.()}
+    {/if}
+  </div>
+</div>

src/lib/components/molecules/index.ts

@@ -1,2 +1,3 @@
 export * from "./ActionModal.svelte";
 export { default as ActionModal } from "./ActionModal.svelte";
+export { default as TopBar } from "./TopBar.svelte";

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>

src/routes/(main)/category/[[id]]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
   import { goto } from "$app/navigation";
-  import { TopBar } from "$lib/components";
+  import { TopBar } from "$lib/components/molecules";
   import { CategoryCreateModal } from "$lib/components/organisms";
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
   import Category from "$lib/organisms/Category";
@@ -38,29 +38,27 @@
   <title>카테고리</title>
 </svelte:head>
 
-<div class="flex min-h-full flex-col">
-  {#if data.id !== "root"}
-    <TopBar title={$info?.name} xPadding />
+{#if data.id !== "root"}
+  <TopBar title={$info?.name} />
+{/if}
+<div class="min-h-full bg-gray-100 pb-[5.5em]">
+  {#if $info}
+    <Category
+      bind:isFileRecursive
+      info={$info}
+      onFileClick={({ id }) => goto(`/file/${id}`)}
+      onFileRemoveClick={async ({ id }) => {
+        await requestFileRemovalFromCategory(id, data.id as number);
+        info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      }}
+      onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
+      onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
+      onSubCategoryMenuClick={(subCategory) => {
+        context.selectedCategory = subCategory;
+        isCategoryMenuBottomSheetOpen = true;
+      }}
+    />
   {/if}
-  <div class="flex-grow bg-gray-100 pb-[5.5em]">
-    {#if $info}
-      <Category
-        bind:isFileRecursive
-        info={$info}
-        onFileClick={({ id }) => goto(`/file/${id}`)}
-        onFileRemoveClick={async ({ id }) => {
-          await requestFileRemovalFromCategory(id, data.id as number);
-          info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-        }}
-        onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
-        onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
-        onSubCategoryMenuClick={(subCategory) => {
-          context.selectedCategory = subCategory;
-          isCategoryMenuBottomSheetOpen = true;
-        }}
-      />
-    {/if}
-  </div>
 </div>
 
 <CategoryCreateModal

src/routes/(main)/directory/[[id]]/+page.svelte

@@ -2,8 +2,8 @@
   import { onMount } from "svelte";
   import type { Writable } from "svelte/store";
   import { goto } from "$app/navigation";
-  import { TopBar } from "$lib/components";
   import { FloatingButton } from "$lib/components/atoms";
+  import { TopBar } from "$lib/components/molecules";
   import { getDirectoryInfo, type DirectoryInfo } from "$lib/modules/filesystem";
   import { masterKeyStore, hmacSecretStore } from "$lib/stores";
   import DirectoryCreateModal from "./DirectoryCreateModal.svelte";
@@ -85,13 +85,12 @@
 
 <input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" />
 
-<div class="flex min-h-full flex-col px-4">
+<div class="flex h-full flex-col">
   {#if data.id !== "root"}
-    <TopBar title={$info?.name} />
+    <TopBar title={$info?.name} class="flex-shrink-0" />
   {/if}
   {#if $info}
-    {@const topMargin = data.id === "root" ? "mt-4" : ""}
-    <div class="mb-4 flex flex-grow flex-col {topMargin}">
+    <div class={["flex flex-grow flex-col px-4 pb-4", data.id === "root" && "pt-4"]}>
       <div class="flex gap-x-2">
         <UploadStatusCard onclick={() => goto("/file/uploads")} />
         <DownloadStatusCard onclick={() => goto("/file/downloads")} />