Feat/qa

package.json

@@ -19,6 +19,7 @@
     "react": "^18.2.0",
     "react-cookie": "^6.1.1",
     "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
     "react-hook-form": "^7.51.0",
     "react-infinite-scroller": "^1.2.6",
     "react-query": "^3.39.3",

src/App.jsx

@@ -5,6 +5,7 @@ import { CookiesProvider } from 'react-cookie';
 import { ChakraProvider } from '@chakra-ui/react';
 import spinner from './assets/spinner.gif';
 import Router from './shared/components/common/Router';
+import { BrowserRouter } from 'react-router-dom';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -30,7 +31,9 @@ function App() {
           <QueryClientProvider client={queryClient}>
             <ChakraProvider>
               <Suspense fallback={<Loading />}>
-                <Router />
+                <BrowserRouter>
+                  <Router />
+                </BrowserRouter>
               </Suspense>
             </ChakraProvider>
           </QueryClientProvider>

src/index.jsx

@@ -2,6 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import ReactGA from "react-ga4";
+
+if (import.meta.env.VITE_GOOGLE_ANALYTICS) {
+  ReactGA.initialize(import.meta.env.VITE_GOOGLE_ANALYTICS);
+}
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

src/pages/MakeStudy/components/steps/AddStudyMember.jsx

@@ -1,16 +1,18 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { BaekjoonIdTag } from '../../../../shared/components/Tag';
 import ModalLayout from '../../../../shared/layout/ModalLayout';
 import InputContainer from '../../../../shared/components/InputContainer';
 import Input from '../../../../shared/components/Input';
 import useCheckId from '../../../../shared/hooks/api/useCheckId';
-import { useStudyStore, useStudyActions } from '../../../../store/studyStore';
+import { useStudyStore } from '../../../../store/studyStore';
 import usePostStudy from '../../hooks/api/usePostStudy';
 import { makeStudyStepTitle } from '../../../../shared/constants/steps';
 import { useQueryClient } from 'react-query';
+import useSearchUserId from '../../../../shared/hooks/api/useSearchUserId';
 
 const AddStudyMember = ({ onPrev, clickHandler }) => {
   const [term, setTerm] = useState('');
+  const [bjId, setBjId] = useState('')
   const {
     studyName,
     description,
@@ -26,12 +28,19 @@ const AddStudyMember = ({ onPrev, clickHandler }) => {
     members,
   } = useStudyStore();
 
-  const { addMember } = useStudyActions();
+  const { refetch: refetchSearchUserId } = useSearchUserId(bjId)
   const onCheckIdSuccessCallback = data => {
     if (data.valid) {
-      addMember(data.bjname);
+      setBjId(data.bjname)
     }
   };
+
+  useEffect(() => {
+    if (bjId) {
+      refetchSearchUserId();
+    }
+  }, [bjId])
+
   const { refetch } = useCheckId(term, onCheckIdSuccessCallback);
 
   const handleKeyDown = e => {
@@ -62,7 +71,7 @@ const AddStudyMember = ({ onPrev, clickHandler }) => {
       openchat: kakaoUrl,
       main_language: language,
       level,
-      members,
+      members: members.map(item => item.userId),
       area: studyArea.area === '전국' ? 'ALL' : studyArea.area,
       city: studyArea.city === '전체' ? 'ALL' : studyArea.city,
       how_many: solvedProblemNumber,
@@ -92,7 +101,7 @@ const AddStudyMember = ({ onPrev, clickHandler }) => {
         <div className="flex flex-wrap gap-2">
           {members &&
             members.map((member, idx) => (
-              <BaekjoonIdTag key={`member#${idx}`}>{member}</BaekjoonIdTag>
+              <BaekjoonIdTag key={`member#${idx}`}>{member.bjId}</BaekjoonIdTag>
             ))}
         </div>
       </InputContainer>

src/shared/components/common/Router.jsx

@@ -1,7 +1,7 @@
 import { lazy, useEffect } from 'react';
 import useGetUserInfo from '../../hooks/api/useGetUserInfo';
 import { useUserActions } from '../../../store/userStore';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 import { getAccessToken } from '../../utils/auth';
 
 const Landing = lazy(() => import('../../../pages/Landing'));
@@ -36,7 +36,7 @@ const Router = () => {
   }, [userInfo]);
 
   return (
-    <BrowserRouter>
+
       <Routes>
         <Route path="/" element={<Landing />} />
         <Route path="/login" element={<Login />} />
@@ -53,7 +53,7 @@ const Router = () => {
         <Route path="/apply-list" exact element={<ApplyList />} />
         <Route path="/manager-change" exact element={<ManagerChange />} />
       </Routes>
-    </BrowserRouter>
+
   );
 };
 

src/shared/hooks/api/useSearchUserId.js

@@ -0,0 +1,25 @@
+import { useQuery } from 'react-query';
+import { api } from '.';
+import { useStudyActions } from '../../../store/studyStore';
+
+const useSearchUserId = bjId => {
+  const { addMember } = useStudyActions();
+  return useQuery(
+    'searchUserId',
+    async () => {
+      const response = await api.get(`/api/user/search/userId?bjId=${bjId}`);
+      return response.data;
+    },
+    {
+      enabled: false,
+      onSuccess: data => {
+        addMember({
+          userId: data.userId,
+          bjId: bjId,
+        });
+      },
+    },
+  );
+};
+
+export default useSearchUserId;