feat: 닉네임 중복 검사, 회원가입 api 연동 (SanE-Seo#26)

src/App.tsx

@@ -11,7 +11,7 @@ import Community from './pages/Community';
 import UserTrailEditor from './pages/UserTrailEditor';
 import SeoulTrailsDetail from './pages/SeoulTrailsDetail';
 import RedirectPage from './components/Login/RedirectPage';
-
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 function App() {
   return (
     <>
@@ -36,6 +36,7 @@ function App() {
           </Routes>
         </LocationProvider>
       </BrowserRouter>
+      <ReactQueryDevtools initialIsOpen={true} />
     </>
   );
 }

src/apis/user.ts

@@ -0,0 +1,36 @@
+import axios from 'axios';
+
+// 닉네임 중복 확인을 위한 API 응답 타입을 정의합니다.
+type AxiosResponse = {
+  success: boolean;
+  message: string;
+  data: any;
+};
+export const CheckNicknameDuplicate = async (nickname: string) => {
+  try {
+    const res = await axios.get<AxiosResponse>(
+      `/api/member/duplicate?username=${nickname}`,
+    );
+    console.log(res);
+    return res;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+export const RegisterUser = async (
+  email: string,
+  password: string,
+  nickname: string,
+) => {
+  try {
+    const res = await axios.post<AxiosResponse>('/api/auth/register', {
+      name: nickname,
+      password: password,
+      email: email,
+    });
+    return res;
+  } catch (error) {
+    console.log(error);
+  }
+};

src/index.tsx

@@ -5,15 +5,20 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { ThemeProvider } from 'styled-components';
 import theme from './styles/theme';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );
+
+const queryClient = new QueryClient();
 root.render(
   <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <App />
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={theme}>
+        <App />
+      </ThemeProvider>
+    </QueryClientProvider>
   </React.StrictMode>,
 );
 

src/pages/Signup.tsx

@@ -3,23 +3,17 @@ import * as S from '../styles/signup.style';
 import { ReactComponent as Logo } from '../assets/icons/logo.svg';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { emailRegex, passwordRegex } from '../utils/regex';
-import axios from 'axios';
-
-// 닉네임 중복 확인을 위한 API 응답 타입을 정의합니다.
-interface CheckNicknameResponse {
-  success: boolean; // 사용 가능 여부
-  message: string; // 추가 메시지 (옵션)
-  data: any;
-}
+import { CheckNicknameDuplicate, RegisterUser } from '../apis/user';
+import { useNavigate } from 'react-router-dom';
 function Signup() {
   //폼으로 입력받을 데이터 정의
-  interface FormValue {
+  type FormValue = {
     email: string;
     password: string;
     pw_confirm: string;
     nickname: string;
-  }
-
+  };
+  const navigate = useNavigate();
   //useForm 사용하기
   const {
     register,
@@ -37,11 +31,6 @@ function Signup() {
     },
   });
 
-  //서버 api 요청 코드 추가
-  const onSubmitHandler: SubmitHandler<FormValue> = (data) => {
-    const { email, password, pw_confirm, nickname } = getValues();
-    console.log(email, password, pw_confirm, nickname);
-  };
   //비밀번호 값 추적
   const password_watch = watch('password');
   const nickname_watch = watch('nickname');
@@ -53,13 +42,20 @@ function Signup() {
 
   const handleCheckDuplicate = async () => {
     const { nickname } = getValues();
-    try {
-      const res = await axios.get<CheckNicknameResponse>(
-        `/api/member/duplicate?username=${nickname}`,
-      );
-      console.log(res);
-    } catch (error) {
-      console.log(error);
+    const res = await CheckNicknameDuplicate(nickname);
+    if (res?.status == 200) {
+      alert('사용가능한 닉네임 입니다.');
+    }
+  };
+
+  //서버 api 요청 코드 추가
+  const onSubmitHandler: SubmitHandler<FormValue> = async () => {
+    const { email, password, pw_confirm, nickname } = getValues();
+    console.log(email, password, pw_confirm, nickname);
+    const res = await RegisterUser(email, password, nickname);
+    if (res?.status == 200) {
+      alert('회원가입 성공!');
+      navigate('/login');
     }
   };
   return (