Refactor: 로그인, 회원가입 api 요청 리팩토링

- page에서 api 보내기 전에 비밀번호 유효성 검사를 하지 않고 넥스트 서버 측에서 api 콜 하기 전에 비밀번호 일치 여부를 확인하도록 했습니다
- axios에서 중복된 header application/json을 인스턴스 정의할 때 관리하도록 했습니다.

src/pages/signup/index.tsx

@@ -21,27 +21,18 @@ const Signup = () => {
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    console.log(password, confirmPassword);
-
-    if (password !== confirmPassword) {
-      // TODO: 비밀번호 일치 여부 확인 후 실패시 알려주는 UI가 필요함
-      alert('비밀번호를 다시 확인해주세요!');
-      return;
-    }
     const signupData = await credentialsSignupAPI({
-      email, name: username, password, provider: 'credential',
+      email, username, password, confirmPassword,
     });
 
-    console.log(signupData);
-
     if ('error' in signupData) {
       // TODO: 회원가입 실패시 알려주는 UI가 필요함
       alert('회원가입 실패');
       return;
     }
     // 회원가입 성공!
     router.push({
-      pathname: '/user/login',
+      pathname: '/login',
     });
   };
 

src/utils/api/clientServer.ts

@@ -5,28 +5,32 @@ interface Credentials {
 }
 
 interface SignupForm {
-  email: string, name: string, password: string, provider: string
+  email: string, username: string, password: string, confirmPassword: string
 }
 
 interface Socials {
   email: string, provider: string,
 }
 
 export const credentialsLoginAPI = async (credentials : Credentials) => {
-  const result = await clientServerInstance.post('members/login', JSON.stringify(credentials), {
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
+  const result = await clientServerInstance.post('members/login', JSON.stringify(credentials));
   return result.data;
 };
 
 export const credentialsSignupAPI = async (signupForm : SignupForm) => {
-  const result = await clientServerInstance.post('members/signup', JSON.stringify(signupForm), {
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
+  if (signupForm.password !== signupForm.confirmPassword) {
+    // TODO: 비밀번호 일치 여부 확인 후 실패시 알려주는 UI가 필요함
+    return { error: '비밀번호를 다시 확인해주세요.' };
+  }
+
+  const sendSignupData = {
+    email: signupForm.email,
+    name: signupForm.username,
+    password: signupForm.password,
+    provider: 'Credential',
+  };
+
+  const result = await clientServerInstance.post('members/signup', JSON.stringify(sendSignupData));
   return result.data;
 };
 

src/utils/axiosInstance/defaultInstance.ts

@@ -2,6 +2,7 @@ import axios, { AxiosError } from 'axios';
 
 const defaultInstance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:8080/',
+  headers: { 'Content-Type': 'application/json' },
 });
 
 defaultInstance.interceptors.response.use((response) => response, (error: AxiosError) => {