로그인 폼 손질하기

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

@@ -15,10 +15,6 @@
   import { cn } from "$lib/utils.js";
   import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
-
-	const id = $props.id();
-
   let { data }: { data: { form: SuperValidated<Infer<FormSchema>> } } =
     $props();
 
@@ -29,55 +25,46 @@
   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>
-  <Form.Field {form} name="login">
+        <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.Description>This is your public display name.</Form.Description>
                 <Form.FieldErrors />
               </Form.Field>
-  <Form.Button>Submit</Form.Button>
+            </div>
-</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>
+              <Form.Field {form} name="password">
+                <Form.Control>
+                  {#snippet children({ props })}
+                    <Form.Label>password</Form.Label>
                     <Input
-								id="email-{id}"
+                      {...props}
-								type="email"
+                      bind:value={$formData.password}
-								placeholder="abcd@example.com"
+                      type="password"
-								required
                     />
-						</div>
+                  {/snippet}
-						<div class="grid gap-3">
+                </Form.Control>
-							<div class="flex items-center">
+                <Form.FieldErrors />
-								<Label for="password-{id}">비밀번호</Label>
+              </Form.Field>
-								<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>
+            <Form.Button class="w-full">로그인</Form.Button>
           </div>
           <div class="text-center text-sm">
             이메일 인증을 통한
@@ -87,11 +74,4 @@
       </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>
--->