Feat:팀 선택, 파트 선택 validation 추가

.env

@@ -1 +1 @@
-VITE_SERVER_API=http://3.38.6.154:8080
+VITE_SERVER_API=http://ec2-3-38-6-154.ap-northeast-2.compute.amazonaws.com:8080

src/common/utils/validateForm.ts

@@ -1,23 +1,36 @@
-import { FormState } from "@/features/form/states/form-data-state";
+import {
+  LoginFormState,
+  RegisterFormState,
+} from "@/features/form/states/form-data-state";
 
-export function validateForm(formData: FormState): [Record<string, string>] {
+export function validateForm(
+  formData: LoginFormState | RegisterFormState
+): [Record<string, string>] {
   const errorMessage: Record<string, string> = {};
-  const { username, userid, email, password, team, devPart } = formData;
 
-  if ("username" in formData && !username?.trim()) {
+  if ("username" in formData && !formData.username?.trim()) {
     errorMessage.username = "유저이름을 입력해주세요.";
   }
 
-  if ("userid" in formData && !userid?.trim()) {
+  if ("userid" in formData && !formData.userid?.trim()) {
     errorMessage.userid = "유저아이디를 입력해주세요.";
   }
-  if (!email.trim()) {
+
+  if (!formData.email.trim()) {
     errorMessage.email = "이메일을 입력해주세요.";
   }
 
-  if (!password.trim()) {
+  if (!formData.password.trim()) {
     errorMessage.password = "비밀번호를 입력해주세요.";
   }
 
+  if ("team" in formData && formData.team === -1) {
+    errorMessage.team = "팀을 선택해주세요.";
+  }
+
+  if ("devPart" in formData && formData.devPart === -1) {
+    errorMessage.team = "파트를 선택해주세요.";
+  }
+
   return [errorMessage];
 }

src/features/auth/queries/dto/login.ts → src/features/auth/queries/dto/auth-login.ts

@@ -1,4 +1,4 @@
-export interface LoginRequest {
+export interface AuthLoginRequest {
   email: string;
   password: string;
 }

src/features/auth/queries/dto/sign-up.ts → src/features/auth/queries/dto/auth-register.ts

@@ -1,8 +1,8 @@
-export interface SignUpRequest {
+export interface AuthRegisterRequest {
   username: string;
   userid: string;
   email: string;
   password: string;
   team: number;
-  devPart: string;
+  devPart: number;
 }

src/features/auth/queries/usePostLogin.tsx

@@ -1,8 +1,8 @@
 import { useMutation } from "@tanstack/react-query";
 import { axiosInstance } from "@/common/libs/axios";
-import { LoginRequest } from "./dto/login";
+import { AuthLoginRequest } from "./dto/auth-login";
 
-async function postLogin(data: LoginRequest) {
+async function postLogin(data: AuthLoginRequest) {
   const res = await axiosInstance.post("/app/auth/login", data);
   return res.data;
 }

src/features/auth/queries/usePostSignUp.tsx

@@ -1,8 +1,8 @@
 import { useMutation } from "@tanstack/react-query";
 import { axiosInstance } from "@/common/libs/axios";
-import { SignUpRequest } from "./dto/sign-up";
+import { AuthRegisterRequest } from "./dto/auth-register";
 
-async function postSignUp(data: SignUpRequest) {
+async function postSignUp(data: AuthRegisterRequest) {
   const res = await axiosInstance.post("/app/auth/signup", data);
   return res.data;
 }

src/features/form/components/Form/FormLayout/FormLayout.tsx

@@ -5,13 +5,16 @@ import FormInput from "../FormInput/FormInput";
 import AuthButton from "@/common/ui/buttons/AuthButton/AuthButton";
 import theme from "@/styles/theme";
 import useForm from "@/features/form/useForm";
-import { FormState } from "@/features/form/states/form-data-state";
 import { Select } from "@/common/ui/selections/Select/Select";
 import { PART_OPTIONS, TEAM_OPTIONS } from "@/common/constants/options";
+import {
+  LoginFormState,
+  RegisterFormState,
+} from "@/features/form/states/form-data-state";
 
 interface FormProps {
   type: FORM_TYPE;
-  onSubmit: (e: FormState) => void;
+  onSubmit: (formData: LoginFormState | RegisterFormState) => void;
 }
 
 export default function FormLayout({ type, onSubmit }: FormProps) {
@@ -53,7 +56,7 @@ export default function FormLayout({ type, onSubmit }: FormProps) {
         onChange={handlers.passwordChange}
         addClass="margin-bottom:3.5rem"
       />
-      {type === FORM_TYPE.REGISTER && (
+      {"team" in formData && "devPart" in formData && (
         <SelectContainer $isMobile={isMobile}>
           <Select
             options={TEAM_OPTIONS}

src/features/form/states/form-data-state.ts

@@ -1,8 +1,13 @@
-export interface FormState {
-  username?: string;
-  userid?: string;
+export interface LoginFormState {
   email: string;
   password: string;
-  team?: number;
-  devPart?: number;
+}
+
+export interface RegisterFormState {
+  username: string;
+  userid: string;
+  email: string;
+  password: string;
+  team: number;
+  devPart: number;
 }

src/features/form/useForm.tsx

@@ -1,7 +1,7 @@
 import { FormEvent, useState } from "react";
 import { FORM_TYPE } from "./constant/form-type";
-import { FormState } from "./states/form-data-state";
 import { validateForm } from "@/common/utils/validateForm";
+import { LoginFormState, RegisterFormState } from "./states/form-data-state";
 
 const FIELD = ["username", "userid", "email", "password", "team", "devPart"];
 
@@ -10,13 +10,13 @@ export default function useForm({
   onSubmit,
 }: {
   type: FORM_TYPE;
-  onSubmit: (e: FormState) => void;
+  onSubmit: (e: LoginFormState | RegisterFormState) => void;
 }) {
-  const [loginFormData, setLoginFormData] = useState<FormState>({
+  const [loginFormData, setLoginFormData] = useState<LoginFormState>({
     email: "",
     password: "",
   });
-  const [registerFormData, setRegisterFormData] = useState<FormState>({
+  const [registerFormData, setRegisterFormData] = useState<RegisterFormState>({
     username: "",
     userid: "",
     email: "",
@@ -65,7 +65,9 @@ export default function useForm({
     e.preventDefault();
     setShowError(true);
     if (!hasAnyError()) {
-      onSubmit(type === FORM_TYPE.LOGIN ? loginFormData : registerFormData);
+      type === FORM_TYPE.LOGIN
+        ? onSubmit(loginFormData)
+        : onSubmit(registerFormData);
     } else {
       for (const field of FIELD) {
         if (errorMessage[field]) {

src/pages/auth/Login.tsx

@@ -3,13 +3,13 @@ import PageMainText from "@/common/ui/text/PageMainText/PageMainText";
 import MediaQuery from "@/styles/mediaQuery";
 import { styled } from "styled-components";
 import { FORM_TYPE } from "@/features/form/constant/form-type";
-import { FormState } from "@/features/form/states/form-data-state";
 import { usePostLogin } from "@/features/auth/queries/usePostLogin";
+import { LoginFormState } from "@/features/form/states/form-data-state";
 
 export default function Login() {
   const { mutate: postLogin } = usePostLogin();
   const { isMobile } = MediaQuery();
-  const loginFormSubmit = (e: FormState) => {
+  const loginFormSubmit = (e: LoginFormState) => {
     postLogin(e);
   };
   return (

src/pages/auth/Register.tsx

@@ -3,12 +3,21 @@ import PageMainText from "@/common/ui/text/PageMainText/PageMainText";
 import MediaQuery from "@/styles/mediaQuery";
 import { styled } from "styled-components";
 import { FORM_TYPE } from "@/features/form/constant/form-type";
-import { FormState } from "@/features/form/states/form-data-state";
+import { usePostSignUp } from "@/features/auth/queries/usePostSignUp";
+import {
+  LoginFormState,
+  RegisterFormState,
+} from "@/features/form/states/form-data-state";
 
 export default function Register() {
+  const { mutate: postSignUp } = usePostSignUp();
   const { isMobile } = MediaQuery();
-  const registerFormSubmit = (e: FormState) => {
-    console.log(e);
+  const registerFormSubmit = (formData: LoginFormState | RegisterFormState) => {
+    if ("username" in formData) {
+      postSignUp(formData);
+    } else {
+      return;
+    }
   };
   return (
     <RegisterContainer $isMobile={isMobile}>