frovide.com/src/routes/(public)/login/login-form.svelte

<script lang="ts">
  import * as Form from "$lib/components/ui/form/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
  import { formSchema, type FormSchema } from "./schema";
  import {
    type SuperValidated,
    type Infer,
    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 { data }: { data: { form: SuperValidated<Infer<FormSchema>> } } =
    $props();

  const form = superForm(data.form, {
    validators: zodClient(formSchema),
  });

  const { form: formData, enhance } = form;
</script>

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