issue #33

- 로그인 화면 기능 로직 1차 구현 중

src/data/form/emailVerification.schema.ts

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

src/data/form/login.schema.ts

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

src/data/form/resetPassword.schema.ts

@@ -3,7 +3,4 @@ import * as z from 'zod';
 export const ResetPasswordSchema = z.object({
 	email: z
 		.email()
-	, resetCode: z
-		.string()
-		.length(6)
 });

src/data/form/signup.schema.ts

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

src/data/request/account/CheckDuplicationRequest.ts

@@ -0,0 +1,9 @@
+export class CheckDuplicationRequest {
+  type: 'email' | 'accountId';
+  value: string;
+
+  constructor(type: 'email' | 'accountId', value: string) {
+    this.type = type;
+    this.value = value;
+  }
+}

src/data/request/account/LoginRequest.ts

@@ -0,0 +1,15 @@
+export class LoginRequest {
+  type: 'email' | 'accountId';
+  id: string;
+  password: string;
+
+  constructor(
+    type: 'email' | 'accountId',
+    id: string,
+    password: string
+  ) {
+    this.type = type;
+    this.id = id;
+    this.password = password;
+  }
+}

src/data/request/account/SendVerificationCodeRequest.ts

@@ -0,0 +1,7 @@
+export class SendVerificationCodeRequest {
+  email: string;
+
+  constructor(email: string) {
+    this.email = email;
+  }
+}

src/data/request/account/SignupRequest.ts

@@ -0,0 +1,15 @@
+export class SignupRequest {
+  accountId: string;
+  email: string;
+  name: string;
+  nickname: string;
+  password: string;
+
+  constructor(accountId: string, email: string, name: string, nickname: string, password: string) {
+    this.accountId = accountId;
+    this.email = email;
+    this.name = name;
+    this.nickname = nickname;
+    this.password = password;
+  }
+}

src/data/request/account/VerifyCodeRequest.ts

@@ -0,0 +1,9 @@
+export class VerifyCodeRequest {
+  email: string;
+  code: string;
+
+  constructor(email: string, code: string) {
+    this.email = email;
+    this.code = code;
+  }
+}

src/data/request/index.ts

@@ -0,0 +1,5 @@
+export * from './account/CheckDuplicationRequest';
+export * from './account/SendVerificationCodeRequest';
+export * from './account/VerifyCodeRequest';
+export * from './account/SignupRequest';
+export * from './account/LoginRequest';

src/data/response/BaseResponse.ts

@@ -0,0 +1,4 @@
+export class BaseResponse {
+  message?: string;
+  error?: string;
+}

src/data/response/account/CheckDuplicationResponse.ts

@@ -0,0 +1,5 @@
+import { BaseResponse } from "../BaseResponse";
+
+export class CheckDuplicationResponse extends BaseResponse{
+  isDuplicated!: boolean;
+}

src/data/response/account/LoginResponse.ts

@@ -0,0 +1,5 @@
+import { BaseResponse } from "../BaseResponse";
+
+export class LoginResponse extends BaseResponse {
+  success!: boolean;
+}

src/data/response/account/SendVerificationCodeResponse.ts

@@ -0,0 +1,5 @@
+import { BaseResponse } from "../BaseResponse";
+
+export class SendVerificationCodeResponse extends BaseResponse {
+  success!: boolean;
+}

src/data/response/account/SignupResponse.ts

@@ -0,0 +1,6 @@
+import { BaseResponse } from "../BaseResponse";
+
+export class SignupResponse extends BaseResponse {
+  success!: boolean;
+
+}

src/data/response/account/VerifyCodeResponse.ts

@@ -0,0 +1,5 @@
+import { BaseResponse } from "../BaseResponse";
+
+export class VerifyCodeResponse extends BaseResponse {
+  verified!: boolean;
+}

src/data/response/index.ts

@@ -0,0 +1,5 @@
+export * from './account/CheckDuplicationResponse';
+export * from './account/SendVerificationCodeResponse';
+export * from './account/VerifyCodeResponse';
+export * from './account/SignupResponse';
+export * from './account/LoginResponse';

src/network/AccountNetwork.ts

@@ -0,0 +1,41 @@
+import {
+  CheckDuplicationRequest,
+  SendVerificationCodeRequest,
+  VerifyCodeRequest,
+  SignupRequest,
+  LoginRequest
+} from "@/data/request";
+import {
+  CheckDuplicationResponse,
+  SendVerificationCodeResponse,
+  VerifyCodeResponse,
+  SignupResponse,
+  LoginResponse
+} from "@/data/response";
+import { BaseNetwork } from "./BaseNetwork";
+
+export class AccountNetwork extends BaseNetwork {
+  private baseUrl = "/account";
+
+  async checkDuplication(data: CheckDuplicationRequest) {
+    const { type, value } = data;
+
+    return await this.instance.get<CheckDuplicationResponse>(`${this.baseUrl}/check-duplication?type=${type}&value=${value}`);
+  }
+
+  async sendVerificationCode(data: SendVerificationCodeRequest) {
+    return await this.instance.post<SendVerificationCodeResponse>(this.baseUrl + "/send-verification-code", data);
+  }
+
+  async verifyCode(data: VerifyCodeRequest) {
+    return await this.instance.post<VerifyCodeResponse>(this.baseUrl + "/verify-code", data);
+  }
+
+  async signup(data: SignupRequest) {
+    return await this.instance.post<SignupResponse>(this.baseUrl + "/signup", data);
+  }
+
+  async login(data: LoginRequest) {
+    return await this.instance.post<LoginResponse>(this.baseUrl + "/login", data);
+  }
+}

src/network/BaseNetwork.ts

@@ -0,0 +1,71 @@
+import axios from 'axios';
+import type {
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosError,
+  AxiosResponse,
+} from "axios";
+
+export class BaseNetwork {
+  protected instance: AxiosInstance;
+
+  constructor() {
+    this.instance = axios.create({
+      baseURL: import.meta.env.VITE_API_URL || "http://localhost:3000",
+      timeout: 10_000,
+      withCredentials: true,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    this.setInterceptors();
+  }
+
+  /**
+   * 요청/응답 인터셉터 설정
+   */
+  protected setInterceptors() {
+    // ★ 요청 인터셉터
+    this.instance.interceptors.request.use(
+      (config) => {
+        // 예: 자동 토큰 추가
+        // const token = localStorage.getItem("token");
+        // if (token) {
+        //   config.headers.Authorization = `Bearer ${token}`;
+        // }
+
+        return config;
+      },
+      (error: AxiosError) => Promise.reject(error)
+    );
+
+    // ★ 응답 인터셉터
+    this.instance.interceptors.response.use(
+      (response: AxiosResponse) => response,
+      (error: AxiosError) => {
+        const message =
+          (error.response?.data as any)?.message ||
+          error.message ||
+          "Unknown error";
+
+        return Promise.reject({
+          status: error.response?.status,
+          message,
+          raw: error,
+        });
+      }
+    );
+  }
+
+  /**
+   * 기본 CRUD 메서드
+   */
+  protected async get<T = any>(url: string, config?: AxiosRequestConfig) {
+    return await this.instance.get<T>(url, config);
+  }
+
+  protected async post<T = any>(url: string, data?: any, config?: AxiosRequestConfig) {
+    return await this.instance.post<T>(url, data, config);
+  }
+}

src/ui/component/modal/EmailVerificationModal.tsx

@@ -1,98 +1,156 @@
-import { Button } from "@/components/ui/button";
+import { useState, type ReactNode, useEffect } from "react";
-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";
+import { AccountNetwork } from "@/network/AccountNetwork";
+import { SendVerificationCodeRequest } from "@/data/request";
+import { toast } from "sonner";
+import { DialogHeader, Dialog, DialogTrigger, DialogContent, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 
 type EmailVerificationModalProps = {
   trigger: ReactNode;
   email: string;
-  handler: () => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  onVerifySuccess: () => Promise<any>;
 }
-export default function EmailVerificationModal(
+export default function EmailVerificationModal({
-  { trigger, email, handler } : EmailVerificationModalProps
+  trigger,
-) {
+  email,
-  const [isVerifying, setIsVerifying] = useState<boolean>(false);
+  open,
-  const { open, close, Modal } = useModal();
+  setOpen,
+  onVerifySuccess
+}: EmailVerificationModalProps) {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const accountNetwork = new AccountNetwork();
 
   const emailVerificationForm = useForm<z.infer<typeof EmailVerificationSchema>>({
     resolver: zodResolver(EmailVerificationSchema),
-    defaultValues: {
+    mode: "onSubmit",
-      email: email,
+    defaultValues: { email: "", code: "" }
-      verificationCode: ""
-    }
   });
 
-  const handleOnOpenChange = (isOpen: boolean) => {
+  useEffect(() => {
-    if (!isVerifying) {
+    if (open) {
-      if (isOpen) {
+      init();
-        open();
+    } else {
+      emailVerificationForm.setValue("code", "");
+    }
+  }, [open]);
+
+  const init = async () => {
+    try {
+      const data = new SendVerificationCodeRequest(email);
+      const result = await accountNetwork.sendVerificationCode(data);
+      if (!result.data.success) {
+        openErrorToast();
       } else {
-        emailVerificationForm.clearErrors();
+        emailVerificationForm.setValue("email", email);
-        close();
       }
+    } catch (err) {
+      openErrorToast();
     }
   }
 
-  const verifyCode = () => {
+  const openErrorToast = () => {
-    console.log(emailVerificationForm.getValues("verificationCode"));
+    toast.error("이메일 인증 코드 발송에 실패하였습니다.", {
+      duration: 3000,
+      onDismiss: () => setOpen(false)
+    });
   }
 
-  const handleOnOTPComplete = (otp: string) => {
+  const onSubmit = async () => {
-    setIsVerifying(true);
+    if (isLoading) return;
-    emailVerificationForm.setValue("verificationCode", otp, { shouldValidate: true });
+
-    emailVerificationForm.handleSubmit(verifyCode)();
+    const { email, code } = emailVerificationForm.getValues();
+
+    const verifyCodePromise = accountNetwork.verifyCode({ email, code });
+
+    toast.promise(
+      verifyCodePromise,
+      {
+        loading: "이메일 인증 확인 중입니다.",
+        success: (res) => res.data.verified ? "이메일 인증이 완료되었습니다." : "잘못된 인증 코드입니다.",
+        error: "이메일 인증에 실패하였습니다.",
+      }
+    );
+
+    verifyCodePromise.then((res) => {
+      if (res.data.verified) {
+        onVerifySuccess();
+      }
+    })
+
   }
 
-  return (<Modal
+  const handleOnOTPComplete = async (otp: string) => {
-    onOpenChange={handleOnOpenChange}
+    if (otp.length < 6) return;
-    children={
+    setIsLoading(true);
-      <form id="form-email-verification" onSubmit={verifyCode}>
+    emailVerificationForm.setValue("code", otp, { shouldValidate: true });
-        <FieldGroup>
+    const isValid = await emailVerificationForm.trigger("code");
-          <Controller
+    if (isValid) await onSubmit();
-            name="verificationCode"
+    setIsLoading(false);
-            control={emailVerificationForm.control}
+  }
-            render={({ field, fieldState }) => (
+
-              <Field
+  return (
-                data-invalid={fieldState.invalid}
+    <Dialog open={open} onOpenChange={setOpen} modal>
-                className="w-full flex flex-col justify-center items-center"
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
-              >
+      <DialogContent>
-                <FieldLabel htmlFor="form-email-verification-code">
+        <DialogHeader>
-                  인증 번호
+          <DialogTitle>이메일 인증</DialogTitle>
-                </FieldLabel>
+        </DialogHeader>
-                <div
+
-                  className="flex flex-row justify-center items-center"
+        <form id="form-email-verification" onSubmit={emailVerificationForm.handleSubmit(onSubmit)}>
+          <FieldGroup>
+            <Controller
+              name="code"
+              control={emailVerificationForm.control}
+              render={
+                ({ field, fieldState }) => ( 
+                <Field
+                  data-invalid={fieldState.invalid}
+                  className="w-full flex flex-col justify-center items-center"
                 >
-                  <InputOTP
+                  <FieldLabel htmlFor="form-email-verification-code">
-                    maxLength={6}
+                    인증 번호
-                    inputMode="numeric"
+                  </FieldLabel>
-                    pattern="\d*"
+                  <div className="flex flex-row justify-center items-center">
-                    id="form-email-verification-code"
+                    <InputOTP
-                    onComplete={handleOnOTPComplete}
+                      maxLength={6}
-                    required>
+                      inputMode="numeric"
-                    <InputOTPGroup className="gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border">
+                      pattern="\d*"
-                      <InputOTPSlot index={0} />
+                      id="form-email-verification-code"
-                      <InputOTPSlot index={1} />
+                      onComplete={handleOnOTPComplete}
-                      <InputOTPSlot index={2} />
+                      value={field.value}
-                      <InputOTPSlot index={3} />
+                      onChange={(value) => field.onChange(value)}
-                      <InputOTPSlot index={4} />
+                      onBlur={field.onBlur}
-                      <InputOTPSlot index={5} />
+                      required
-                    </InputOTPGroup>
+                    >
-                  </InputOTP>
+                      <InputOTPGroup 
-                </div>
+                        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>
+              </Field> )}
-            )}
+            />
-          />
+          </FieldGroup>
-        </FieldGroup>
+        </form>
-      </form>
+
-    }
+        <DialogFooter>
-    trigger={trigger}
+          {/* 필요시 footer 버튼 */}
-    title="이메일 인증"
+        </DialogFooter>
-    footer={null}
+      </DialogContent>
-  />);
+    </Dialog>
-}
+  );
+}

src/ui/page/login/LoginPage.tsx

@@ -4,20 +4,25 @@ import { Field, FieldError, FieldLabel } from '@/components/ui/field';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { PageRouting } from '@/data/RoutingData';
 import * as z from 'zod';
 import { Separator } from '@/components/ui/separator';
+import { Validator } from '@/util/Validator';
+import { LoginRequest } from '@/data/request/account/LoginRequest';
+import { AccountNetwork } from '@/network/AccountNetwork';
+import { toast } from 'sonner';
 
 export default function LoginPage() {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const navigate = useNavigate();
-
+  const accountNetwork = new AccountNetwork();
   const loginForm = useForm<z.infer<typeof LoginSchema>>({
     resolver: zodResolver(LoginSchema),
     defaultValues: {
-      email: "",
+      id: "",
       password: ""
     }
   });
@@ -30,8 +35,35 @@ export default function LoginPage() {
     navigate(PageRouting["RESET_PASSWORD"].path);
   }, []);
 
+  const moveToMainPage = useCallback(() => {
+
+  }, []);
+
+  // TODO 33 로그인 기능 구현
   const login = async () => {
-    //
+    if (isLoading) return;
+
+    const { id, password } = loginForm.getValues();
+    const type = Validator.isEmail(id) ? 'email' : 'accountId';
+
+    const data: LoginRequest = new LoginRequest(type, id, password);
+
+    const loginPromise = accountNetwork.login(data);
+
+    toast.promise(
+      loginPromise,
+      {
+        loading: "로그인 중입니다.",
+        success: (res) => res.data.success ? "로그인이 완료되었습니다." : res.data.message,
+        error: "로그인에 실패하였습니다."
+      }
+    );
+
+    loginPromise.then((res) => {
+      if (res.data.success) {
+        moveToMainPage();
+      }
+    });
   }
 
   const TextSeparator = ({ text }: { text: string }) => {
@@ -53,15 +85,15 @@ export default function LoginPage() {
         <CardContent>
           <form id="form-login" className="w-full flex flex-col gap-2.5">
             <Controller
-              name="email"
+              name="id"
               control={loginForm.control}
               render={({ field, fieldState }) => (
                 <Field data-invalid={fieldState.invalid}>
-                  <FieldLabel htmlFor="form-login-email">이메일</FieldLabel>
+                  <FieldLabel htmlFor="form-login-id">이메일</FieldLabel>
                   <Input
                     {...field}
-                    type="email"
+                    type="text"
-                    id="form-login-email"
+                    id="form-login-id"
                     aria-invalid={fieldState.invalid}
                   />
                   <FieldError errors={[fieldState.error]} />
@@ -104,7 +136,7 @@ export default function LoginPage() {
             type="submit"
             form="form-login"
             disabled={
-              (loginForm.getValues("email").trim.length < 1)
+              (loginForm.getValues("id").trim.length < 1)
               && (loginForm.getValues("password").trim.length < 1)
             }>
             로그인

src/ui/page/resetPassword/ResetPasswordPage.tsx

@@ -1,6 +1,6 @@
 import { Card, CardContent, CardHeader, CardFooter } from '@/components/ui/card';
 import { ResetPasswordSchema } from '@/data/form';
-import { Field, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator } from '@/components/ui/field';
+import { Field, FieldError, FieldLabel } from '@/components/ui/field';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -9,8 +9,6 @@ import { Controller, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { PageRouting } from '@/data/RoutingData';
 import * as z from 'zod';
-import { Separator } from '@/components/ui/separator';
-import { Label } from '@/components/ui/label';
 
 export default function ResetPasswordPage() {
   const navigate = useNavigate();
@@ -18,8 +16,7 @@ export default function ResetPasswordPage() {
   const loginForm = useForm<z.infer<typeof ResetPasswordSchema>>({
     resolver: zodResolver(ResetPasswordSchema),
     defaultValues: {
-      email: "",
+      email: ""
-      resetCode: ""
     }
   });
 
@@ -63,7 +60,6 @@ export default function ResetPasswordPage() {
             form="form-reset-password"
             disabled={
               (loginForm.getValues("email").trim.length < 1)
-              && (loginForm.getValues("resetCode").trim.length < 1)
             }>
             인증 번호 발송
           </Button>

src/ui/page/signup/SignUpPage.tsx

@@ -1,5 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
-import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { 
@@ -8,21 +7,32 @@ import {
   CardHeader,
   CardFooter
 } from '@/components/ui/card';
-import { Field, FieldError, FieldGroup, FieldLabel, FieldLegend } from '@/components/ui/field';
+import { Field, FieldError, FieldGroup, FieldLabel } 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';
+import { CheckDuplicationRequest, SignupRequest } from '@/data/request';
+import { AccountNetwork } from '@/network/AccountNetwork';
+import { toast } from 'sonner';
+import { useNavigate } from 'react-router-dom';
+import { PageRouting } from '@/data/RoutingData';
 
 export default function SignUpPage() {
-  const [isCheckedEmailDuplication, setIsCheckdEmailDupliation] = useState<boolean>(false);
+  const [emailVerificationModalOpen, setEmailVerificationModalOpen] = useState<boolean>(false);
-  const [isEmailVerificated, setIsEmailVerificated] = useState<boolean>(false);
+  const [isCheckedEmailDuplication, setIsCheckedEmailDuplication] = useState<boolean>(false);
+  const [isCheckedAccountIdDuplication, setIsCheckedAccountIdDuplication] = useState<boolean>(false);
   const [duplicationCheckedEmail, setDuplicationCheckedEmail] = useState<string>("");
+  const [duplicationCheckedAccountId, setDuplicationCheckedAccountId] = useState<string>("");
+
+  const accountNetwork = new AccountNetwork();
+  const navigate = useNavigate();
 
   const signUpForm = useForm<z.infer<typeof SignUpSchema>>({
     resolver: zodResolver(SignUpSchema),
     defaultValues: {
+      accountId: "",
       email: "",
       password: "",
       passwordConfirm: "",
@@ -31,28 +41,81 @@ export default function SignUpPage() {
     }
   });
 
+  const goToLogin = useCallback(() => {
+    navigate(PageRouting["LOGIN"].path);
+  }, [navigate]);
+
+  const checkDuplication = async (type: 'email' | 'accountId', value: string) => {
+    const data: CheckDuplicationRequest = new CheckDuplicationRequest(type, value);
+    return await accountNetwork.checkDuplication(data);
+  }
+
+  const signup = async () => {
+    const { email, accountId, name, nickname, password } = signUpForm.getValues();
+    const data: SignupRequest = new SignupRequest(accountId, email, name, nickname, password);
+
+    const signupPromise = accountNetwork.signup(data);
+
+    toast.promise(
+      signupPromise,
+      {
+        loading: "회원가입 진행 중입니다.",
+        success: (res) => {
+          if (!res.data.success) return "회원가입에 실패하였습니다.\n잠시 후 다시 시도해주십시오.";
+          
+          return <SuccessToast onClose={goToLogin} />
+        },
+        error: "회원가입에 실패하였습니다.\n잠시 후 다시 시도해주십시오.",
+      }
+    );
+  }
+
+  const handleOnChangeAccountId = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setIsCheckedAccountIdDuplication(
+      e.currentTarget.value === duplicationCheckedAccountId
+    );
+  }
+
   const handleOnChangeEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setIsCheckdEmailDupliation(
+    setIsCheckedEmailDuplication(
       e.currentTarget.value === duplicationCheckedEmail
     );
-    // setIsEmailVerificated(
-    //   e.currentTarget.value === duplicationCheckedEmail
-    // );
   }
 
-  const handleEmailDuplicationCheckButtonClick = () => {
+  const handleDuplicationCheckButtonClick = async (type: 'email' | 'accountId') => {
-    console.log(signUpForm.getValues("email"));
+    const value = signUpForm.getValues(type);
-    setDuplicationCheckedEmail(signUpForm.getValues("email"));
+    const duplicatedMessage = type === 'email' ? '사용할 수 없는 이메일입니다.' : '사용할 수 없는 아이디입니다.';
-    setIsCheckdEmailDupliation(true);
+
+    if (!value) return;
+
+    const isDuplicated = (await checkDuplication(type, value)).data.isDuplicated;
+
+    if (isDuplicated) {
+      signUpForm.setError(type, { message: duplicatedMessage });
+    } else {
+      signUpForm.clearErrors(type);
+      if (type === 'email') {
+        setIsCheckedEmailDuplication(true);
+        setDuplicationCheckedEmail(value);
+      } else {
+        setIsCheckedAccountIdDuplication(true);
+        setDuplicationCheckedAccountId(value);
+      }
+    }
   }
 
-  const handleOnSubmitSignUpForm = () => {
+  const handleOnSignUpButtonClick = () => {
+    if (!isCheckedAccountIdDuplication) {
+      signUpForm.setError("accountId", { message: "아이디 중복 확인이 필요합니다."});
+      return;
+    }
+
     if (!isCheckedEmailDuplication) {
       signUpForm.setError("email", { message: "이메일 중복 확인이 필요합니다." });
+      return;
     }
-    // if (!isEmailVerificated) {
+
-    //   signUpForm.setError("email", { message: "이메일 인증이 완료되지 않았습니다." });
+    setEmailVerificationModalOpen(true);
-    // }
   }
 
   return (
@@ -60,8 +123,34 @@ export default function SignUpPage() {
       <Card className="w-md pl-2 pr-2">
         <CardHeader>회원가입</CardHeader>
         <CardContent>
-          <form id="form-signup" onSubmit={signUpForm.handleSubmit(handleOnSubmitSignUpForm)}>
+          <form id="form-signup">
             <FieldGroup>
+              <Controller
+                name="accountId"
+                control={signUpForm.control}
+                render={({ field, fieldState  }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor="form-signup-account-id">아이디</FieldLabel>
+                    <div id="accountId-group" className="w-full flex flex-row justify-between gap-2.5">
+                      <Input
+                        {...field}
+                        id="form-signup-account-id"
+                        aria-invalid={fieldState.invalid}
+                        onInput={handleOnChangeAccountId}
+                      />
+                      <Button
+                        type="button"
+                        onClick={() => handleDuplicationCheckButtonClick('accountId')}
+                        className="bg-indigo-500 hover:bg-indigo-400"
+                      >
+                        중복 확인
+                      </Button>
+                    </div>
+                    { isCheckedAccountIdDuplication && <p className="text-green-500 text-sm font-normal">사용할 수 있는 아이디입니다</p> }
+                    <FieldError errors={[fieldState.error]}/>
+                  </Field>
+                )} 
+              />
               <Controller
                 name="name"
                 control={signUpForm.control}
@@ -108,11 +197,14 @@ export default function SignUpPage() {
                         onInput={handleOnChangeEmail}
                       />
                       <Button
-                        onClick={handleEmailDuplicationCheckButtonClick}
+                        type="button"
+                        onClick={() => handleDuplicationCheckButtonClick('email')}
+                        className="bg-indigo-500 hover:bg-indigo-400"
                       >
                         중복 확인
                       </Button>
                     </div>
+                    { isCheckedEmailDuplication && <p className="text-green-500 text-sm font-normal">사용할 수 있는 이메일입니다</p> }
                     <FieldError errors={[fieldState.error]}/>
                   </Field>
                 )} 
@@ -155,16 +247,31 @@ export default function SignUpPage() {
         <CardFooter>
           <EmailVerificationModal 
             trigger={
-              <Button type="submit" form="form-signup">
+              <Button type="button" onClick={handleOnSignUpButtonClick} className="0">
                 회원가입
               </Button>
             }
             email={duplicationCheckedEmail}
-            handler={() => {}}
+            open={emailVerificationModalOpen}          // ✅ 부모 상태 연결
+            setOpen={setEmailVerificationModalOpen}    // ✅ 부모 상태 변경 함수 전달
+            onVerifySuccess={signup}                   // ✅ 인증 성공 시 signup 호출
           />
-          
         </CardFooter>
       </Card>
     </div>
   );
+}
+
+function SuccessToast({ onClose }: { onClose: () => void }) {
+  useEffect(() => {
+    const timer = setTimeout(() => onClose(), 3000); // 3초 후 이동
+    return () => clearTimeout(timer);
+  }, [onClose]);
+
+  return (
+    <div className="w-full flex flex-row justify-between items-center">
+      회원가입 성공!
+      <button onClick={onClose}>로그인 페이지로 이동</button>
+    </div>
+  );
 }

src/util/Validator.ts

@@ -0,0 +1,5 @@
+export class Validator {
+  static isEmail = (value: string): boolean => {
+    return /^[^\s@]+@[^\s@]+\.[*\s@]+$/.test(value);
+  }
+}