issue # 로그인 화면 구현 중

src/data/form/login.schema.ts

@@ -3,6 +3,7 @@ import * as z from 'zod';
 export const LoginSchema = z.object({
 	email: z
 		.email()
+		.min(1, "이메일을 입력해주십시오.")
 	, password: z
 		.string()
 		.min(8, "비밀번호는 8-12 자리여야 합니다.")

src/ui/page/login/LoginPage.tsx

@@ -1,9 +1,12 @@
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardFooter } from '@/components/ui/card';
 import { LoginSchema } from '@/data/form';
+import { Field, FieldError, FieldGroup, FieldLabel, FieldLegend } from '@/components/ui/field';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import z from 'zod';
+import { Controller, useForm } from 'react-hook-form';
+import * as z from 'zod';
 
 export default function LoginPage() {
 
@@ -23,7 +26,22 @@ export default function LoginPage() {
         </CardHeader>
         <CardContent>
           <form id="form-login">
-            
+            <Controller
+              name="email"
+              control={loginForm.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="form-login-email">이메일</FieldLabel>
+                  <Input
+                    {...field}
+                    id="form-login-email"
+                    aria-invalid={fieldState.invalid}
+                  />
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            >
+            </Controller>
           </form>
         </CardContent>
       </Card>