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

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>