Feat:로그인,회원가입 dto 와 query 생성

.env

@@ -0,0 +1 @@
+VITE_SERVER_API=http://3.38.6.154:8080

package.json

@@ -11,6 +11,7 @@
     "@types/node": "^20.10.3",
     "@types/react": "^18.2.39",
     "@types/react-dom": "^18.2.17",
+    "axios": "^1.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-responsive": "^9.0.2",

src/common/libs/axios.ts

@@ -0,0 +1,14 @@
+import axios from "axios";
+import { getBearerToken } from "../utils/getBearerToken";
+
+export const axiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_SERVER_API,
+});
+
+axiosInstance.interceptors.request.use((config) => {
+  const token = getBearerToken();
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});

src/common/utils/getBearerToken.ts

@@ -0,0 +1,5 @@
+export function getBearerToken() {
+  const token = window.localStorage.getItem("token");
+
+  return token ? token : null;
+}

src/common/utils/validateForm.ts

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

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

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

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

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

src/features/auth/queries/usePostLogin.tsx

@@ -0,0 +1,15 @@
+import { useMutation } from "@tanstack/react-query";
+import { axiosInstance } from "@/common/libs/axios";
+import { LoginRequest } from "./dto/login";
+
+async function postLogin(data: LoginRequest) {
+  const res = await axiosInstance.post("/app/auth/login", data);
+  return res.data;
+}
+
+export function usePostLogin() {
+  return useMutation({
+    mutationKey: ["login"],
+    mutationFn: postLogin,
+  });
+}

src/features/auth/queries/usePostSignUp.tsx

@@ -0,0 +1,15 @@
+import { useMutation } from "@tanstack/react-query";
+import { axiosInstance } from "@/common/libs/axios";
+import { SignUpRequest } from "./dto/sign-up";
+
+async function postSignUp(data: SignUpRequest) {
+  const res = await axiosInstance.post("/app/auth/signup", data);
+  return res.data;
+}
+
+export function usePostSignUp() {
+  return useMutation({
+    mutationKey: ["signUp"],
+    mutationFn: postSignUp,
+  });
+}

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

@@ -24,32 +24,32 @@ export default function FormLayout({ type, onSubmit }: FormProps) {
   return (
     <FormContainer $isMobile={isMobile} onSubmit={handlers.submit}>
       {type === FORM_TYPE.REGISTER && (
-        <FormInput
-          placeholder="이름"
-          errorMsg={getErrorMessage("name")}
-          onChange={handlers.nameChange}
-          addClass="margin-bottom:3.5rem"
-        />
+        <>
+          <FormInput
+            placeholder="유저이름"
+            errorMsg={getErrorMessage("username")}
+            onChange={handlers.userNameChange}
+            addClass="margin-bottom:3.5rem"
+          />
+          <FormInput
+            placeholder="아이디"
+            errorMsg={getErrorMessage("userid")}
+            onChange={handlers.userIdChange}
+            addClass="margin-bottom:3.5rem"
+          />
+        </>
       )}
       <FormInput
-        placeholder="아이디"
-        errorMsg={getErrorMessage("id")}
-        onChange={handlers.idChange}
+        placeholder="이메일"
+        errorMsg={getErrorMessage("email")}
+        onChange={handlers.emailChange}
         addClass="margin-bottom:3.5rem"
       />
       <FormInput
         placeholder="비밀번호"
         errorMsg={getErrorMessage("password")}
         onChange={handlers.passwordChange}
-        addClass="margin-bottom:3.5rem"
       />
-      {type === FORM_TYPE.REGISTER && (
-        <FormInput
-          placeholder="비밀번호 확인"
-          errorMsg={getErrorMessage("check_password")}
-          onChange={handlers.checkPasswordChange}
-        />
-      )}
       <FormButtonContainer>
         <AuthButton
           width="20.2rem"

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

@@ -1,6 +1,8 @@
 export interface FormState {
-  name?: string;
-  id: string;
+  username?: string;
+  userid?: string;
+  email: string;
   password: string;
-  check_password?: string;
+  team?: number;
+  devPart?: string;
 }

src/features/form/useForm.tsx

@@ -3,7 +3,7 @@ import { FORM_TYPE } from "./constant/form-type";
 import { FormState } from "./states/form-data-state";
 import { validateForm } from "@/common/utils/validateForm";
 
-const FIELD = ["name", "id", "password", "check_password"];
+const FIELD = ["username", "userid", "email", "password", "team", "devPart"];
 
 export default function useForm({
   type,
@@ -13,29 +13,35 @@ export default function useForm({
   onSubmit: (e: FormState) => void;
 }) {
   const [loginFormData, setLoginFormData] = useState<FormState>({
-    id: "",
+    email: "",
     password: "",
   });
   const [registerFormData, setRegisterFormData] = useState<FormState>({
-    name: "",
-    id: "",
+    username: "",
+    userid: "",
+    email: "",
     password: "",
-    check_password: "",
+    team: -1,
+    devPart: "",
   });
   const [showError, setShowError] = useState(false);
   const [errorMessage] = validateForm(
     type === FORM_TYPE.LOGIN ? loginFormData : registerFormData
   );
 
-  const handleNameChange = (text: string) => {
-    setRegisterFormData({ ...registerFormData, name: text });
+  const handleUserNameChange = (text: string) => {
+    setRegisterFormData({ ...registerFormData, username: text });
   };
 
-  const handleIdChange = (text: string) => {
+  const handleUserIdChange = (text: string) => {
+    setRegisterFormData({ ...registerFormData, userid: text });
+  };
+
+  const handleEmailChange = (text: string) => {
     if (type === FORM_TYPE.LOGIN) {
-      setLoginFormData({ ...loginFormData, id: text });
+      setLoginFormData({ ...loginFormData, email: text });
     } else {
-      setRegisterFormData({ ...registerFormData, id: text });
+      setRegisterFormData({ ...registerFormData, email: text });
     }
   };
 
@@ -47,10 +53,6 @@ export default function useForm({
     }
   };
 
-  const handleCheckPasswordChange = (text: string) => {
-    setRegisterFormData({ ...registerFormData, check_password: text });
-  };
-
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setShowError(true);
@@ -81,10 +83,10 @@ export default function useForm({
     showError,
     errorMessage,
     handlers: {
-      nameChange: handleNameChange,
-      idChange: handleIdChange,
+      userNameChange: handleUserNameChange,
+      userIdChange: handleUserIdChange,
+      emailChange: handleEmailChange,
       passwordChange: handlePasswordChange,
-      checkPasswordChange: handleCheckPasswordChange,
       submit: handleSubmit,
     },
   };

src/pages/auth/Login.tsx

@@ -4,12 +4,13 @@ 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";
 
 export default function Login() {
+  const { mutate: postLogin } = usePostLogin();
   const { isMobile } = MediaQuery();
   const loginFormSubmit = (e: FormState) => {
-    console.log(e);
-    console.log("로그인 제출");
+    postLogin(e);
   };
   return (
     <LoginContainer $isMobile={isMobile}>

src/pages/auth/Register.tsx

@@ -9,7 +9,6 @@ export default function Register() {
   const { isMobile } = MediaQuery();
   const registerFormSubmit = (e: FormState) => {
     console.log(e);
-    console.log("회원가입 제출");
   };
   return (
     <RegisterContainer $isMobile={isMobile}>

yarn.lock

@@ -6541,6 +6541,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axios@npm:^1.6.2":
+  version: 1.6.2
+  resolution: "axios@npm:1.6.2"
+  dependencies:
+    follow-redirects: ^1.15.0
+    form-data: ^4.0.0
+    proxy-from-env: ^1.1.0
+  checksum: 4a7429e2b784be0f2902ca2680964391eae7236faa3967715f30ea45464b98ae3f1c6f631303b13dfe721b17126b01f486c7644b9ef276bfc63112db9fd379f8
+  languageName: node
+  linkType: hard
+
 "axobject-query@npm:^3.2.1":
   version: 3.2.1
   resolution: "axobject-query@npm:3.2.1"
@@ -9722,7 +9733,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"follow-redirects@npm:^1.0.0":
+"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.15.0":
   version: 1.15.3
   resolution: "follow-redirects@npm:1.15.3"
   peerDependenciesMeta:
@@ -14745,7 +14756,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"proxy-from-env@npm:^1.0.0":
+"proxy-from-env@npm:^1.0.0, proxy-from-env@npm:^1.1.0":
   version: 1.1.0
   resolution: "proxy-from-env@npm:1.1.0"
   checksum: ed7fcc2ba0a33404958e34d95d18638249a68c430e30fcb6c478497d72739ba64ce9810a24f53a7d921d0c065e5b78e3822759800698167256b04659366ca4d4
@@ -15253,6 +15264,7 @@ __metadata:
     "@types/react": ^18.2.39
     "@types/react-dom": ^18.2.17
     "@vitejs/plugin-react": ^4.2.0
+    axios: ^1.6.2
     babel-plugin-named-exports-order: ^0.0.2
     eslint: ^8.55.0
     eslint-config-react-app: ^7.0.1