issue # ci/cd 테스트

.gitlab-ci.yml

@@ -0,0 +1,9 @@
+stages:
+  -build
+
+build:
+  stage: build
+  image: node:25.1.0
+  script:
+    - npm run build
+    - ls

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },

src/data/form/emailVerification.schema.ts

@@ -0,0 +1,9 @@
+import * as z from 'zod';
+
+export const EmailVerificationSchema = z.object({
+  email: z
+    .email()
+  , verificationCode: z
+    .string()
+    .length(6, "이메일 인증 번호 6자리를 입력해주십시오.")
+});

src/data/form/index.ts

@@ -1,3 +1,4 @@
 export { SignUpSchema } from './signup.schema';
 export { LoginSchema } from './login.schema';
-export { ResetPasswordSchema } from './resetPassword.schema';
+export { ResetPasswordSchema } from './resetPassword.schema';
+export { EmailVerificationSchema } from './emailVerification.schema';

src/data/form/login.schema.ts

@@ -1,13 +1,11 @@
 import * as z from 'zod';
-import { zodResolver } from '@/hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
 
-const LoginSchema = z.object({
+export const LoginSchema = z.object({
 	email: z
 		.email()
 	, password: z
-	 	.string()
+		.string()
 		.min(8, "비밀번호는 8-12 자리여야 합니다.")
 		.max(12, "비밀번호는 8-12 자리여야 합니다.")
-		.regex(\^[a-z](?=.*[0-9])(?=.*[!@#$]).*$\)
+		.regex(/^[a-z](?=.*[0-9])(?=.*[!@#$]).*$/, "비밀번호는 영소문자로 시작하여 숫자, 특수문자(!@#$)를 한 개 이상 포함하여야 합니다.")
 });

src/data/form/resetPassword.schema.ts

@@ -1,8 +1,6 @@
 import * as z from 'zod';
-import { zodResolver } from '@/hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
 
-const ResetPasswordSchema = z.object({
+export const ResetPasswordSchema = z.object({
 	email: z
 		.email()
 });

src/data/form/signup.schema.ts

@@ -1,19 +1,20 @@
 import * as z from 'zod';
-import { zodResolver } from '@/hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
 
-const SignUpSchema = z.object({
+export const SignUpSchema = z.object({
 	email: z
-		.email()
+		.string()
+		.min(1, "이메일을 입력해주십시오.")
 	, password: z
-	 	.string()
+		.string()
 		.min(8, "비밀번호는 8-12 자리여야 합니다.")
 		.max(12, "비밀번호는 8-12 자리여야 합니다.")
-		.regex(\^[a-z](?=.*[0-9])(?=.*[!@#$]).*$\, "영문 소문자로 시작하고 숫자와 특수문자(!@#$)를 포함해야 합니다.")
+		.regex(/^[a-z](?=.*[0-9])(?=.*[!@#$]).*$/, "영문 소문자로 시작하고 숫자와 특수문자(!@#$)를 포함해야 합니다.")
 	, name: z
 		.string()
+		.min(1, "이름을 입력해주시십시오.")
 	, nickname: z
 		.string()
+		.min(1, "닉네임을 입력해주십시오.")
 	, passwordConfirm: z
 		.string()
 })

src/hooks/useModal.tsx

@@ -0,0 +1,40 @@
+import { useState, type ReactNode } from "react";
+import { Dialog, DialogTrigger, DialogTitle, DialogContent, DialogHeader, DialogFooter} from "@/components/ui/dialog";
+import { type DialogProps } from "@radix-ui/react-dialog";
+
+export function useModal() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+
+  type ModalProps = DialogProps & {
+    children: ReactNode;
+    trigger: ReactNode;
+    title: string;
+    footer: ReactNode;
+  };
+
+  const Modal = ({ children, trigger, title, footer, ...props }: ModalProps) => (
+    <Dialog
+      open={isOpen}
+      onOpenChange={val => setIsOpen(val)}
+      modal={true}
+      {...props}>
+      <DialogTrigger asChild>
+        {trigger}
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        {children}
+        <DialogFooter>
+          {footer}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+
+  return { isOpen, open, close, Modal };
+}

src/index.css

@@ -122,3 +122,15 @@
 html, body, #root {
     height: 100%;
 }
+
+/* Chrome, Safari, Edge */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}

src/ui/component/modal/EmailVerificationModal.tsx

@@ -0,0 +1,98 @@
+import { Button } from "@/components/ui/button";
+import { useModal } from "@/hooks/useModal";
+import { useState, type ReactNode } from "react";
+import { EmailVerificationSchema } from "@/data/form";
+import { Controller, useForm } from "react-hook-form";
+import z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
+
+type EmailVerificationModalProps = {
+  trigger: ReactNode;
+  email: string;
+  handler: () => void;
+}
+export default function EmailVerificationModal(
+  { trigger, email, handler } : EmailVerificationModalProps
+) {
+  const [isVerifying, setIsVerifying] = useState<boolean>(false);
+  const { open, close, Modal } = useModal();
+
+  const emailVerificationForm = useForm<z.infer<typeof EmailVerificationSchema>>({
+    resolver: zodResolver(EmailVerificationSchema),
+    defaultValues: {
+      email: email,
+      verificationCode: ""
+    }
+  });
+
+  const handleOnOpenChange = (isOpen: boolean) => {
+    if (!isVerifying) {
+      if (isOpen) {
+        open();
+      } else {
+        emailVerificationForm.clearErrors();
+        close();
+      }
+    }
+  }
+
+  const verifyCode = () => {
+    console.log(emailVerificationForm.getValues("verificationCode"));
+  }
+
+  const handleOnOTPComplete = (otp: string) => {
+    setIsVerifying(true);
+    emailVerificationForm.setValue("verificationCode", otp, { shouldValidate: true });
+    emailVerificationForm.handleSubmit(verifyCode)();
+  }
+
+  return (<Modal
+    onOpenChange={handleOnOpenChange}
+    children={
+      <form id="form-email-verification" onSubmit={verifyCode}>
+        <FieldGroup>
+          <Controller
+            name="verificationCode"
+            control={emailVerificationForm.control}
+            render={({ field, fieldState }) => (
+              <Field
+                data-invalid={fieldState.invalid}
+                className="w-full flex flex-col justify-center items-center"
+              >
+                <FieldLabel htmlFor="form-email-verification-code">
+                  인증 번호
+                </FieldLabel>
+                <div
+                  className="flex flex-row justify-center items-center"
+                >
+                  <InputOTP
+                    maxLength={6}
+                    inputMode="numeric"
+                    pattern="\d*"
+                    id="form-email-verification-code"
+                    onComplete={handleOnOTPComplete}
+                    required>
+                    <InputOTPGroup className="gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border">
+                      <InputOTPSlot index={0} />
+                      <InputOTPSlot index={1} />
+                      <InputOTPSlot index={2} />
+                      <InputOTPSlot index={3} />
+                      <InputOTPSlot index={4} />
+                      <InputOTPSlot index={5} />
+                    </InputOTPGroup>
+                  </InputOTP>
+                </div>
+                <FieldError errors={[fieldState.error]} />
+              </Field>
+            )}
+          />
+        </FieldGroup>
+      </form>
+    }
+    trigger={trigger}
+    title="이메일 인증"
+    footer={null}
+  />);
+}

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