feat: [42] react-query 설정 및 로그인 / 회원가입 api 연동

web/package.json

@@ -19,11 +19,13 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
+    "@lukemorales/query-key-factory": "^1.3.4",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@reduxjs/toolkit": "^2.2.6",
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.50.1",
+    "axios": "^1.7.2",
     "eventemitter3": "^5.0.1",
     "framer-motion": "^11.3.8",
     "react": "^18.3.1",
@@ -32,6 +34,7 @@
     "react-hook-form": "^7.52.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.24.1",
+    "sonner": "^1.5.0",
     "styled-components": "^6.1.11",
     "zod": "^3.23.8",
     "zustand": "^4.5.4"

web/src/App.tsx

@@ -1,19 +1,19 @@
 import {
   AuthPage,
   CollectCommentsPage,
-  CreateSurveyPage,
   CrawlingPage,
+  CreateSurveyPage,
   HomePage,
-  ResultPage,
   MyEvent,
+  ResultPage,
   Root,
 } from '@/pages';
 import store from '@/store';
 import GlobalStyles from '@/styles/global-styles';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Provider } from 'react-redux';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import Components from './pages/components';
+import { Toaster } from 'sonner';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -49,6 +49,7 @@ export default function App() {
     <Provider store={store}>
       <QueryClientProvider client={queryClient}>
         <GlobalStyles />
+        <Toaster position="top-center" />
         <RouterProvider router={router} />
       </QueryClientProvider>
     </Provider>

web/src/components/auth/sign-in.tsx

@@ -9,21 +9,34 @@ import {
 } from '@/components/common/form';
 import { Input } from '@/components/common/input';
 import { signinSchema, SigninType } from '@/lib/schema/auth.schema';
+import { useSignin } from '@/services/queries/user.mutation';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
+import { Link, useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
 import Button from '../common/Btn_btns';
 
 export const SignIn = () => {
+  const { login, isSigninLoading } = useSignin();
+
+  const router = useNavigate();
+
   const form = useForm<SigninType>({
     resolver: zodResolver(signinSchema),
     defaultValues: {
-      username: '',
+      userId: '',
       password: '',
     },
   });
 
-  const submitHandler = (values: SigninType) => {
-    console.log(values);
+  const submitHandler = async (values: SigninType) => {
+    const data = await login(values);
+
+    if (data && data.code === '200') {
+      toast.success('로그인이 정상처리 되었습니다.');
+      form.reset();
+      router('/');
+    }
   };
 
   return (
@@ -33,7 +46,7 @@ export const SignIn = () => {
         <form onSubmit={form.handleSubmit(submitHandler)} className="form">
           <FormField
             control={form.control}
-            name="username"
+            name="userId"
             render={({ field }) => (
               <FormItem>
                 <FormControl>
@@ -55,7 +68,11 @@ export const SignIn = () => {
               </FormItem>
             )}
           />
-          <Button className="signin-btn" variant="add">
+          <Button
+            disabled={isSigninLoading}
+            className="signin-btn"
+            variant="add"
+          >
             로그인
           </Button>
         </form>
@@ -65,7 +82,9 @@ export const SignIn = () => {
         <div className="sep" />
         <span>아이디 찾기</span>
         <div className="sep" />
-        <span className="signup">회원가입</span>
+        <Link to="/auth?authType=up" className="signup">
+          회원가입
+        </Link>
       </div>
     </SigninWrapper>
   );

web/src/components/auth/sign-up.tsx

@@ -10,31 +10,43 @@ import {
 import { Input } from '@/components/common/input';
 import { signupSchema, SignupType } from '@/lib/schema/auth.schema';
 import { formatPhoneNumber } from '@/lib/utils';
+import { useSignup } from '@/services/queries/user.mutation';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
 import Button from '../common/Btn_btns';
 import { Label } from '../common/label';
 import { SignupWrapper } from './sign-up.styles';
 
 export const SignUp = () => {
+  const { join, isSignupLoading } = useSignup();
+
+  const router = useNavigate();
+
   const [formattedContact, setFormattedContact] = useState<string>('');
 
   const form = useForm<SignupType>({
     resolver: zodResolver(signupSchema),
     defaultValues: {
-      username: '',
+      userId: '',
       password: '',
       email: '',
       name: '',
       passwordConfirm: '',
       phone: '',
-      type: 'unselected',
     },
   });
 
-  const submitHandler = (values: SignupType) => {
-    console.log(values);
+  const submitHandler = async (values: SignupType) => {
+    const data = await join(values);
+
+    if (data && data.code === '200') {
+      toast.success('회원가입이 정상처리 되었습니다.');
+      form.reset();
+      router('/auth?authType=in');
+    }
   };
 
   return (
@@ -48,7 +60,7 @@ export const SignUp = () => {
           <div>
             <FormField
               control={form.control}
-              name="username"
+              name="userId"
               render={({ field }) => (
                 <FormItem className="form-item">
                   <FormLabel className="form-label form-username">
@@ -167,7 +179,12 @@ export const SignUp = () => {
               </div>
             </div>
           </div>
-          <Button className="signup-btn" type="submit" variant="add">
+          <Button
+            disabled={isSignupLoading}
+            className="signup-btn"
+            type="submit"
+            variant="add"
+          >
             회원가입하기
           </Button>
         </form>

web/src/lib/query-keys.ts

@@ -1,6 +1,7 @@
-export const queryKeys = {
-  users: {
-    all: ['users'],
-    user: (id: number) => ['user', id], // 예시
+import { createQueryKeyStore } from '@lukemorales/query-key-factory';
+
+export const queries = createQueryKeyStore({
+  user: {
+    all: null,
   },
-};
+});