From 5aefbcf9d91ab071ebb26c36ffba241794abbf58 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Thu, 26 Dec 2024 21:30:07 +0900
Subject: [PATCH] =?UTF-8?q?TitleDiv,=20BottomDiv=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/{ => divs}/AdaptiveDiv.svelte      | 0
 src/lib/components/divs/BottomDiv.svelte              | 7 +++++++
 src/lib/components/divs/TitleDiv.svelte               | 7 +++++++
 src/lib/components/divs/index.ts                      | 3 +++
 src/lib/components/index.ts                           | 1 -
 src/routes/(fullscreen)/+layout.svelte                | 2 +-
 src/routes/(fullscreen)/auth/generateKey/+page.svelte | 9 +++++----
 src/routes/(fullscreen)/auth/login/+page.svelte       | 9 +++++----
 8 files changed, 28 insertions(+), 10 deletions(-)
 rename src/lib/components/{ => divs}/AdaptiveDiv.svelte (100%)
 create mode 100644 src/lib/components/divs/BottomDiv.svelte
 create mode 100644 src/lib/components/divs/TitleDiv.svelte
 create mode 100644 src/lib/components/divs/index.ts
 delete mode 100644 src/lib/components/index.ts

diff --git a/src/lib/components/AdaptiveDiv.svelte b/src/lib/components/divs/AdaptiveDiv.svelte
similarity index 100%
rename from src/lib/components/AdaptiveDiv.svelte
rename to src/lib/components/divs/AdaptiveDiv.svelte
diff --git a/src/lib/components/divs/BottomDiv.svelte b/src/lib/components/divs/BottomDiv.svelte
new file mode 100644
index 0000000..cfcfdd1
--- /dev/null
+++ b/src/lib/components/divs/BottomDiv.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+<div class="sticky bottom-0 flex w-full flex-col items-center gap-y-2 bg-white">
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/divs/TitleDiv.svelte b/src/lib/components/divs/TitleDiv.svelte
new file mode 100644
index 0000000..5b225e6
--- /dev/null
+++ b/src/lib/components/divs/TitleDiv.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+<div class="mt-[20%]">
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/divs/index.ts b/src/lib/components/divs/index.ts
new file mode 100644
index 0000000..7bd6a34
--- /dev/null
+++ b/src/lib/components/divs/index.ts
@@ -0,0 +1,3 @@
+export { default as AdaptiveDiv } from "./AdaptiveDiv.svelte";
+export { default as BottomDiv } from "./BottomDiv.svelte";
+export { default as TitleDiv } from "./TitleDiv.svelte";
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
deleted file mode 100644
index 85508da..0000000
--- a/src/lib/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as AdaptiveDiv } from "./AdaptiveDiv.svelte";
diff --git a/src/routes/(fullscreen)/+layout.svelte b/src/routes/(fullscreen)/+layout.svelte
index 48c7d63..27e0b1c 100644
--- a/src/routes/(fullscreen)/+layout.svelte
+++ b/src/routes/(fullscreen)/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { AdaptiveDiv } from "$lib/components";
+  import { AdaptiveDiv } from "$lib/components/divs";
 
   let { children } = $props();
 </script>
diff --git a/src/routes/(fullscreen)/auth/generateKey/+page.svelte b/src/routes/(fullscreen)/auth/generateKey/+page.svelte
index 64104ea..29bb56c 100644
--- a/src/routes/(fullscreen)/auth/generateKey/+page.svelte
+++ b/src/routes/(fullscreen)/auth/generateKey/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Button, TextButton } from "$lib/components/buttons";
+  import { TitleDiv, BottomDiv } from "$lib/components/divs";
   import Order from "./Order.svelte";
 
   import IconKey from "~icons/material-symbols/key";
@@ -29,7 +30,7 @@
 </svetle:head>
 
 <div class="flex h-full flex-col justify-between">
-  <div class="mt-[20%]">
+  <TitleDiv>
     <div class="flex flex-col gap-y-2">
       <h1 class="text-3xl font-bold">암호 키 생성하기</h1>
       <p>회원님의 디바이스 간의 안전한 데이터 동기화를 위해 암호 키를 생성해야 해요.</p>
@@ -45,13 +46,13 @@
         {/each}
       </div>
     </div>
-  </div>
-  <div class="sticky bottom-0 flex w-full flex-col items-center gap-y-2 bg-white">
+  </TitleDiv>
+  <BottomDiv>
     <div class="w-full">
       <Button>새 암호 키 생성하기</Button>
     </div>
     <div class="w-fit">
       <TextButton>키를 갖고 있어요</TextButton>
     </div>
-  </div>
+  </BottomDiv>
 </div>
diff --git a/src/routes/(fullscreen)/auth/login/+page.svelte b/src/routes/(fullscreen)/auth/login/+page.svelte
index 23a3a0b..0676741 100644
--- a/src/routes/(fullscreen)/auth/login/+page.svelte
+++ b/src/routes/(fullscreen)/auth/login/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Button, TextButton } from "$lib/components/buttons";
+  import { TitleDiv, BottomDiv } from "$lib/components/divs";
   import { TextInput } from "$lib/components/inputs";
   import { requestLogin } from "./service";
 
@@ -20,7 +21,7 @@
 </svelte:head>
 
 <div class="flex h-full flex-col justify-between">
-  <div class="mt-[20%]">
+  <TitleDiv>
     <div class="flex flex-col gap-y-2">
       <h1 class="text-3xl font-bold">환영합니다!</h1>
       <p>서비스를 이용하려면 로그인을 해야해요.</p>
@@ -29,13 +30,13 @@
       <TextInput bind:value={email} placeholder="이메일" />
       <TextInput bind:value={password} placeholder="비밀번호" type="password" />
     </div>
-  </div>
-  <div class="sticky bottom-0 flex w-full flex-col items-center gap-y-2 bg-white">
+  </TitleDiv>
+  <BottomDiv>
     <div class="w-full">
       <Button onclick={login}>로그인</Button>
     </div>
     <div class="w-fit">
       <TextButton>계정이 없어요</TextButton>
     </div>
-  </div>
+  </BottomDiv>
 </div>