From 07252126eceb6eacd921495a72bbaaa8317333c6 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Thu, 26 Dec 2024 01:20:01 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/buttons/Button.svelte   |  2 +-
 src/lib/components/inputs/TextInput.svelte |  2 +-
 src/routes/(fullscreen)/+layout.svelte     | 11 ++++++++
 src/routes/(fullscreen)/login/+page.svelte | 29 ++++++++++++++++++++++
 4 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/(fullscreen)/+layout.svelte
 create mode 100644 src/routes/(fullscreen)/login/+page.svelte

diff --git a/src/lib/components/buttons/Button.svelte b/src/lib/components/buttons/Button.svelte
index db27c33..78025ff 100644
--- a/src/lib/components/buttons/Button.svelte
+++ b/src/lib/components/buttons/Button.svelte
@@ -21,7 +21,7 @@
   );
 </script>
 
-<button {onclick} class="{bgColorStyle} {fontColorStyle} h-12 rounded-xl font-medium">
+<button {onclick} class="{bgColorStyle} {fontColorStyle} h-12 h-full w-full rounded-xl font-medium">
   <div class="h-full w-full p-3 transition active:scale-95">
     {@render children?.()}
   </div>
diff --git a/src/lib/components/inputs/TextInput.svelte b/src/lib/components/inputs/TextInput.svelte
index e8bee93..82b4182 100644
--- a/src/lib/components/inputs/TextInput.svelte
+++ b/src/lib/components/inputs/TextInput.svelte
@@ -30,6 +30,6 @@
   }
   input:focus + label,
   input:not(:placeholder-shown) + label {
-    @apply text-primary-400 top-0 -translate-y-full text-sm;
+    @apply top-0 -translate-y-full text-sm text-primary-400;
   }
 </style>
diff --git a/src/routes/(fullscreen)/+layout.svelte b/src/routes/(fullscreen)/+layout.svelte
new file mode 100644
index 0000000..48c7d63
--- /dev/null
+++ b/src/routes/(fullscreen)/+layout.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { AdaptiveDiv } from "$lib/components";
+
+  let { children } = $props();
+</script>
+
+<div class="h-screen w-screen p-2">
+  <AdaptiveDiv>
+    {@render children?.()}
+  </AdaptiveDiv>
+</div>
diff --git a/src/routes/(fullscreen)/login/+page.svelte b/src/routes/(fullscreen)/login/+page.svelte
new file mode 100644
index 0000000..191f4e2
--- /dev/null
+++ b/src/routes/(fullscreen)/login/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Button, TextButton } from "$lib/components/buttons";
+  import { TextInput } from "$lib/components/inputs";
+</script>
+
+<svelte:head>
+  <title>로그인</title>
+</svelte:head>
+
+<div class="flex h-full flex-col justify-between">
+  <div class="mt-[20%]">
+    <div class="flex flex-col gap-y-2">
+      <h1 class="text-3xl font-bold">환영합니다!</h1>
+      <p>서비스를 이용하려면 로그인을 해야해요.</p>
+    </div>
+    <div class="mt-4 flex flex-col gap-y-2">
+      <TextInput placeholder="아이디" />
+      <TextInput placeholder="비밀번호" type="password" />
+    </div>
+  </div>
+  <div class="sticky bottom-0 flex w-full flex-col items-center gap-y-2">
+    <div class="w-full">
+      <Button>로그인</Button>
+    </div>
+    <div class="w-fit">
+      <TextButton>계정이 없어요</TextButton>
+    </div>
+  </div>
+</div>