kegorii/frovide.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

로그인 폼 손질하기
All checks were successful
main-branch-frovide/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Insub Kim 2025-06-11 10:35:59 +00:00
parent 3d08574401
commit 26b5707800
1 changed files with 55 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
src/routes/(public)/login/login-form.svelte
View File

@ -8,16 +8,12 @@
superForm,
} from "sveltekit-superforms";
import { zodClient } from "sveltekit-superforms/adapters";
import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import { Label } from "$lib/components/ui/label/index.js";
import { Switch } from "$lib/components/ui/switch/index.js";
import { cn } from "$lib/utils.js";
import type { HTMLAttributes } from "svelte/elements";
let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
const id = $props.id();
import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import { Label } from "$lib/components/ui/label/index.js";
import { Switch } from "$lib/components/ui/switch/index.js";
import { cn } from "$lib/utils.js";
import type { HTMLAttributes } from "svelte/elements";
let { data }: { data: { form: SuperValidated<Infer<FormSchema>> } } =
$props();
@ -29,69 +25,53 @@
const { form: formData, enhance } = form;
</script>
<form method="POST" use:enhance>
<Form.Field {form} name="login">
<Form.Control>
{#snippet children({ props })}
<Form.Label>Email</Form.Label>
<Input {...props} bind:value={$formData.email} />
{/snippet}
</Form.Control>
<Form.Description>This is your public display name.</Form.Description>
<Form.FieldErrors />
</Form.Field>
<Form.Button>Submit</Form.Button>
</form>
<div class={cn("flex flex-col gap-6", className)} {...restProps}>
<Card.Root>
<Card.Header class="text-center">
<Card.Title class="text-xl">:: LOGIN ::</Card.Title>
</Card.Header>
<Card.Content>
<form>
<div class="grid gap-6">
<div class="grid gap-6">
<div class="grid gap-3">
<Label for="email-{id}">이메일</Label>
<Input
id="email-{id}"
type="email"
placeholder="abcd@example.com"
required
/>
</div>
<div class="grid gap-3">
<div class="flex items-center">
<Label for="password-{id}">비밀번호</Label>
<a
href="##"
class="ml-auto text-sm underline-offset-4 hover:underline"
>
비밀번호 찾기
</a>
</div>
<Input id="password-{id}" type="password" required />
</div>
<div class="flex items-center space-x-2">
<Switch id="airplane-mode" />
<Label for="airplane-mode">이메일 저장</Label>
</div>
<Button type="submit" class="w-full">로그인</Button>
</div>
<div class="text-center text-sm">
이메일 인증을 통한
<a href="##" class="underline underline-offset-4"> 회원가입</a>
</div>
</div>
</form>
</Card.Content>
</Card.Root>
<div
class="text-muted-foreground *:[a]:hover:text-primary *:[a]:underline *:[a]:underline-offset-4 text-balance text-center text-xs"
>
로그인 진행시 사이트의 <a href="##">서비스 이용약관</a>
과 <a href="##">개인정보 보호정책</a> 에 동의합니다.
</div>
<div class={cn("flex flex-col gap-6")}>
<Card.Root>
<Card.Header class="text-center">
<Card.Title class="text-xl font-semibold">LOGIN</Card.Title>
</Card.Header>
<Card.Content>
<form method="POST" use:enhance>
<div class="grid gap-6">
<div class="grid gap-6">
<div class="grid gap-3">
<Form.Field {form} name="email">
<Form.Control>
{#snippet children({ props })}
<Form.Label>Email</Form.Label>
<Input {...props} bind:value={$formData.email} />
{/snippet}
</Form.Control>
<Form.FieldErrors />
</Form.Field>
</div>
<div class="grid gap-3">
<Form.Field {form} name="password">
<Form.Control>
{#snippet children({ props })}
<Form.Label>password</Form.Label>
<Input
{...props}
bind:value={$formData.password}
type="password"
/>
{/snippet}
</Form.Control>
<Form.FieldErrors />
</Form.Field>
</div>
<div class="flex items-center space-x-2">
<Switch id="airplane-mode" />
<Label for="airplane-mode">이메일 저장</Label>
</div>
<Form.Button class="w-full">로그인</Form.Button>
</div>
<div class="text-center text-sm">
이메일 인증을 통한
<a href="##" class="underline underline-offset-4"> 회원가입</a>
</div>
</div>
</form>
</Card.Content>
</Card.Root>
</div>
-->