issue # ci/cd 테스트

src/ui/page/signup/SignUpPage.tsx

@@ -5,23 +5,165 @@ import { Input } from '@/components/ui/input';
 import { 
   Card,
   CardContent,
-  CardDescription,
   CardHeader,
-  CardTitle
+  CardFooter
 } from '@/components/ui/card';
-import { Form, FormField } from '@/components/ui/form';
+import { Field, FieldError, FieldGroup, FieldLabel, FieldLegend } from '@/components/ui/field';
+import { SignUpSchema } from '@/data/form';
+import { Controller, useForm } from 'react-hook-form';
+import * as z from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import EmailVerificationModal from '@/ui/component/modal/EmailVerificationModal';
 
 export default function SignUpPage() {
-  const [open, setOpen] = useState<boolean>(false);
+  const [isCheckedEmailDuplication, setIsCheckdEmailDupliation] = useState<boolean>(false);
+  const [isEmailVerificated, setIsEmailVerificated] = useState<boolean>(false);
+  const [duplicationCheckedEmail, setDuplicationCheckedEmail] = useState<string>("");
+
+  const signUpForm = useForm<z.infer<typeof SignUpSchema>>({
+    resolver: zodResolver(SignUpSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+      passwordConfirm: "",
+      name: "",
+      nickname: "",
+    }
+  });
+
+  const handleOnChangeEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setIsCheckdEmailDupliation(
+      e.currentTarget.value === duplicationCheckedEmail
+    );
+    // setIsEmailVerificated(
+    //   e.currentTarget.value === duplicationCheckedEmail
+    // );
+  }
+
+  const handleEmailDuplicationCheckButtonClick = () => {
+    console.log(signUpForm.getValues("email"));
+    setDuplicationCheckedEmail(signUpForm.getValues("email"));
+    setIsCheckdEmailDupliation(true);
+  }
+
+  const handleOnSubmitSignUpForm = () => {
+    if (!isCheckedEmailDuplication) {
+      signUpForm.setError("email", { message: "이메일 중복 확인이 필요합니다." });
+    }
+    // if (!isEmailVerificated) {
+    //   signUpForm.setError("email", { message: "이메일 인증이 완료되지 않았습니다." });
+    // }
+  }
+
   return (
     <div className="w-full h-full flex flex-col justify-center items-center">
-      <Card className="w-xl h-4/6">
-        <CardHeader className="ml-2.5 select-none">
-          <CardTitle className="text-3xl">로그인</CardTitle>
-        </CardHeader>
+      <Card className="w-md pl-2 pr-2">
+        <CardHeader>회원가입</CardHeader>
         <CardContent>
-          <Label>a</Label>
+          <form id="form-signup" onSubmit={signUpForm.handleSubmit(handleOnSubmitSignUpForm)}>
+            <FieldGroup>
+              <Controller
+                name="name"
+                control={signUpForm.control}
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor="form-signup-name">이름</FieldLabel>
+                    <Input
+                      {...field}
+                      id="form-signup-name"
+                      aria-invalid={fieldState.invalid}
+                    />
+                    <FieldError errors={[fieldState.error]} />
+                  </Field>
+                )}
+              />
+              <Controller
+                name="nickname"
+                control={signUpForm.control}
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor="form-signup-nickname">닉네임</FieldLabel>
+                    <Input
+                      {...field}
+                      id="form-signup-nickname"
+                      aria-invalid={fieldState.invalid}
+                    />
+                    <FieldError errors={[fieldState.error]} />
+                  </Field>
+                )}
+              />
+              <Controller
+                name="email"
+                control={signUpForm.control}
+                render={({ field, fieldState  }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor="form-signup-email">이메일</FieldLabel>
+                    <div id="email-group" className="w-full flex flex-row justify-between gap-2.5">
+                      <Input
+                        {...field}
+                        id="form-signup-email"
+                        aria-invalid={fieldState.invalid}
+                        placeholder="example@domain.com"
+                        type="email"
+                        onInput={handleOnChangeEmail}
+                      />
+                      <Button
+                        onClick={handleEmailDuplicationCheckButtonClick}
+                      >
+                        중복 확인
+                      </Button>
+                    </div>
+                    <FieldError errors={[fieldState.error]}/>
+                  </Field>
+                )} 
+              />
+              <Controller
+                name="password"
+                control={signUpForm.control}
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor="form-signup-password">비밀번호</FieldLabel>
+                    <Input
+                      {...field}
+                      id="form-signup-password"
+                      aria-invalid={fieldState.invalid}
+                      type="password"
+                    />
+                    <FieldError errors={[fieldState.error]} />
+                  </Field>
+                )}
+              />
+              <Controller
+                name="passwordConfirm"
+                control={signUpForm.control}
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor="form-signup-password-confirm">비밀번호 확인</FieldLabel>
+                    <Input
+                      {...field}
+                      id="form-signup-password-confirm"
+                      aria-invalid={fieldState.invalid}
+                      type="password"
+                    />
+                    <FieldError errors={[fieldState.error]} />
+                  </Field>
+                )}
+              />
+            </FieldGroup>
+          </form>
         </CardContent>
+        <CardFooter>
+          <EmailVerificationModal 
+            trigger={
+              <Button type="submit" form="form-signup">
+                회원가입
+              </Button>
+            }
+            email={duplicationCheckedEmail}
+            handler={() => {}}
+          />
+          
+        </CardFooter>
       </Card>
     </div>
   );