Fix : KakaoLogin

hustle_web/package.json

@@ -17,6 +17,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.1",
     "react-icons": "^4.10.1",
+    "react-kakao-login": "^2.1.1",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.0",

hustle_web/src/Router.tsx

@@ -39,7 +39,7 @@ const Router = () => {
             <Route index element={<Home />} />
             <Route path='/login' element={<Login />} />
             <Route path='/signIn' element={<SignIn />} />
-            <Route path='/kakaoLogin' element={<KakaoLoginRedirect />}/>
+            <Route path='/oauth/kakaoLogin' element={<KakaoLoginRedirect />}/>
             <Route path='/competitions' element={<Competition />} />
             <Route
               path='/competitions/apply/:competitionId'

hustle_web/src/components/Login/Kakao/KakaoLogin.tsx

@@ -1,43 +1,63 @@
 import axios from 'axios';
-import { useEffect } from 'react';
+import { useContext, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { AuthContext } from '../../Auth/AuthProvider';
+import UniversitySearch from '../../SignIn/UniversitySearch';
 
-const kakaoLogin = () => {
-  useEffect(() => {
-    const code = new URL(window.location.href).searchParams.get('code');
-    const grantType = 'authorization_code';
-    const REST_API_KEY = process.env.REACT_API_KEY;
-    const REDIRECT_URI = process.env.REDIRECT_URI;
-
-    axios.post(
-      `https://kauth.kakao.com/oauth/token?grant_type=${grantType}&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&code=${code}`,
-      {},
-      { headers: { 'Content-type': 'application/x-www-form-urlencoded;charset=utf-8' }}
-    )
+const KakaoLoginRedirect = () => {
+  const navigate = useNavigate();
+  const { setIsLoggedIn, setAccessToken, refreshAccessToken } = useContext(AuthContext);
+  const code = new URL(window.location.href).searchParams.get('code');
+  const [selectedUniversity, setSelectedUniversity] = useState('');
+
+  const handleUniversitySelection = (universityId: number) => {
+    const university = `${universityId}`;
+    setSelectedUniversity(university);
+    console.log(selectedUniversity);
+  };
+
+  const handleSubmit = () => {
+    axios.get(`https://api.sport-hustle.com/api/oauth/kakao/token?code=${code}`)
     .then((res) => {
-      console.log(res);
-      const accessToken = res.data.accessToken;
-      axios.post('https://api.sport-hustle.com/api/auth/signin/oauth',
-      {},
-      {
+      console.log('카카오 정보 : ',res.data);
+      console.log('카카오 accessToken : ',res.data.accessToken);
+      const token = res.data.accessToken;
+      const postData = {
+        kakaoInfo : res.data,
+        university : selectedUniversity, // 선택된 대학교 아이디 값
+      };
+      axios.post('카카오 회원가입 정보 api', postData,{
         headers : {
-          Authorization : `Bearer ${accessToken}`,
-          'Content-type' : 'application/x-www-form-urlencoded;charset=utf-8',
+          'Authorization' : `Bearer ${token}`
         }
       })
-      .then((res: any) => {
-        console.log('seconde : ', res.data.accessToken);
+      .then((res) => {
+        console.log('회원가입 성공 : ', res);
+        setIsLoggedIn(true);
+        const accessToken = res.data.accessToken;
+        localStorage.setItem('카카오 허슬 토큰', accessToken);
+        localStorage.setItem('카카오 허슬 리프레시 토큰', res.data.refreshToken);
+        setAccessToken(accessToken);
+        navigate('/');
       })
+    }).catch((error) => {
+      console.log('카카오 정보 가져오기 실패',error);
+      if(error.res && error.res.status === 400){
+        refreshAccessToken();
+      } else {
+        navigate('/login');
+      }
     })
-    .catch((error) => {
-      console.log(error);
-    })
-  },[])
+  }
+
 
   return (
     <div>
-      로그인 중입니다. 잠시만 기다려주세요
+      <div>카카오 추가 정보</div>
+      <UniversitySearch onSelecteUniversity={handleUniversitySelection} />
+      <button type='submit' onClick={handleSubmit}>회원가입</button>
     </div>
   );
 };
 
-export default kakaoLogin;
+export default KakaoLoginRedirect;

hustle_web/src/components/Login/Login.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import * as L from './LoginStyle';
 import { useNavigate } from 'react-router-dom';
 import { LoginProps } from '../../constants/interfaces';
@@ -7,8 +7,6 @@ import { defaultLoginValue } from '../../constants/defaultFormOption';
 import FormRequirements from '../../constants/FormRequirements';
 import axios from 'axios';
 import { AuthContext } from '../Auth/AuthProvider';
-import { userAtom } from '../../recoil/login/login';
-import { useRecoilState } from 'recoil';
 
 const { idRequirements, passwordRequirements } = FormRequirements;
 const defaultValue = defaultLoginValue;
@@ -73,14 +71,12 @@ const LoginMain = () => {
     }
   };
 
-  const kakaoLoginHandler = () => {
-    const REST_API_KEY = process.env.REACT_API_KEY;
-    const REDIRECT_URL = process.env.REDIRECT_URI;
-    const kakaoUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URL}&response_type=code`
-
-    window.location.href = kakaoUrl;
-
-  }
+    function loginwithKakao() {
+      const REST_API_KEY = '170a8a097251697cc023f05857280065';
+      const REDIRECT_URL = 'http://localhost:3000/oauth/kakaoLogin';
+      const kakaoUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URL}&response_type=code`;
+      window.location.href = kakaoUrl;
+    }
 
 
   return (
@@ -116,7 +112,7 @@ const LoginMain = () => {
       <L.Line></L.Line>
       <L.ButtonDiv>
         <L.KakaoButton
-          onClick={kakaoLoginHandler}
+          onClick={loginwithKakao}
         >카카오 로그인</L.KakaoButton>
       </L.ButtonDiv>
       <L.ButtonDiv>

hustle_web/src/components/SignIn/UniversitySearch.tsx

@@ -4,106 +4,60 @@ import { useState, useEffect } from 'react';
 import { UniversityProps } from '../../constants/interfaces';
 import Select from 'react-select';
 
-// interface UniversitySearchProps {
-//   onSelectUniversity: (universityName: string) => void;
-// }
-
 const UniversitySearch = ({
   onSelecteUniversity
 }: {
   onSelecteUniversity: (UniversityId: number) => void;
 }) => {
   const [universityList, setUniversityList] = useState<UniversityProps[]>([]);
-  const [searchQuery, setSearchQuery] = useState(''); // 검색어 상태 추가
-  const [selectedId, setSelectedId] = useState(0);
+  const [searchQuery,] = useState(''); // 검색어 상태 추가
+  const [selectedUniversity, setSelectedUniversity] = useState<UniversityProps | null>(null);
 
   const handleSearchUniversity = async () => {
-    // setUniversityList(dummyUniversityData);
     try {
       const response = await axios.get(
         `https://api.sport-hustle.com/api/university?keyword=${searchQuery}`
       );
-      setUniversityList(response.data.universities);
+      setUniversityList(response.data.data);
     } catch (error) {
       console.error('대학교 검색 오류:', error);
       setUniversityList([]);
     }
   };
 
-  const options = universityList.map((university) => ({
+  const options = universityList
+  .filter((university) => typeof university.id === 'number')
+  .map((university) => ({
     value: university.id,
-    label: university.name
+    label: university.name,
+    address : university.address
   }));
 
-  // const handleUniversitySelection = (universityId: number) => {
-  //   const selectedUniversity = universityList.find(university => university.id === universityId);
-
-  //   if(selectedUniversity){
-  //     setSearchQuery(selectedUniversity.name); // 선택된 대학교 이름을 검색창에 표시
-  //     onSelecteUniversity(selectedUniversity.id); // 선택된 대학교 이름을 부모 컴포넌트로 전달
-  //   }
-  // };
-
   const handleUniversitySelection = (selectedOption: any) => {
-    if (selectedOption) {
-      setSearchQuery(selectedOption.label); // 선택된 대학교 이름을 검색창에 표시
-      onSelecteUniversity(selectedOption.value); // 선택된 대학교 ID를 부모 컴포넌트로 전달
-    }
+    setSelectedUniversity(selectedOption);
   };
 
   useEffect(() => {
     handleSearchUniversity();
-  });
+  },[searchQuery]);
+
+  useEffect(() => {
+    if (selectedUniversity !== null) {
+      onSelecteUniversity(selectedUniversity.id);
+    }
+  }, [selectedUniversity, onSelecteUniversity]);
+
 
   return (
     <>
       <S.InputLabel>소속 대학교</S.InputLabel>
-      {/* <S.InputLarge
-        type='university'
-        placeholder='재학 중인 대학교를 입력하세요'
-        value={searchQuery} // 입력창에 표시될 값은 searchQuery 상태
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-          setSearchQuery(e.target.value);
-        }}
-      /> */}
       {universityList.length > 0 && (
         <Select
           options={options}
           onChange={handleUniversitySelection}
           placeholder='대학교를 선택하세요'
         />
       )}
-      {/* <S.SubmitButton
-        type='button'
-        onClick={() => {
-          handleSearchUniversity();
-        }} // 검색 버튼 클릭 시 대학교 목록 검색
-      >
-        검색
-      </S.SubmitButton> */}
-
-      {/* {universityList.length > 0 && (
-        <S.UniversityList>
-          {universityList.map((university, id) => (
-            <div key={id}>
-              <S.NameText>{university.name}</S.NameText>
-              <div>
-                <S.AddressText>{university.address}</S.AddressText>
-              </div>
-              <S.RightContainer>
-                <button
-                  type='button'
-                  onClick={() => {
-                    handleUniversitySelection(university.id);
-                  }}
-                >
-                  선택
-                </button>
-              </S.RightContainer>
-            </div>
-          ))}
-        </S.UniversityList>
-      )} */}
     </>
   );
 };

hustle_web/src/constants/interfaces.ts

@@ -12,6 +12,10 @@ export interface kakaoLoginProps {
   onSuccess: string;
 }
 
+export interface kakaoSignupProps {
+  locationaddress: string;
+}
+
 export interface AuthContextType {
   isLoggedIn: boolean;
   setIsLoggedIn: (value: boolean) => void;

hustle_web/src/recoil/login/loginState.tsx

@@ -27,4 +27,3 @@ export const TokenState = atom<string | null>({
   default: null,
   effects_UNSTABLE: [persistAtom],
 });
-

hustle_web/src/routes.ts

@@ -104,7 +104,7 @@ const routes = [
   { path: '/maincompetition', element: MainCompetition },
   { path: '/maincompetition/apply', element: ApplyCompetition },
   { path: '/ranking', element: RankingPage },
-  { path: '/kakaoLogin', element: KakaoLoginRedirect }
+  { path: '/oauth/kakaoLogin', element: KakaoLoginRedirect }
 ];
 
 export default routes;