로그인 페이지 레이아웃 구현

This commit is contained in:
static
2024-12-26 01:20:01 +09:00
parent 8771b324a1
commit 07252126ec
4 changed files with 42 additions and 2 deletions

View File

@@ -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>

View File

@@ -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>