[#4] fix : login 수정

package.json

@@ -13,6 +13,7 @@
     "react-router-dom": "^6.21.0",
     "react-scripts": "5.0.1",
     "recoil": "^0.7.7",
+    "recoil-persist": "^5.1.0",
     "styled-components": "^6.1.1",
     "web-vitals": "^2.1.4"
   },

src/Router.js

@@ -11,8 +11,9 @@ import { TestResult5 } from "./pages/TestResult5";
 import { TestResult6 } from "./pages/TestResult6";
 import { TestResult7 } from "./pages/TestResult7";
 import { TestResult8 } from "./pages/TestResult8";
-import KakaoShareButton from './pages/Kakao';
+import KakaoShareButton from "./pages/Kakao";
 import { Frame } from "./pages/Frame";
+import Login from "./pages/Login";
 
 const Router = () => {
   return (
@@ -21,6 +22,7 @@ const Router = () => {
         <Route path="/" element={<Main />} />
         <Route path="/test/:step" element={<TestPage />} />
         <Route path="/loading" element={<Loading />} />
+        <Route path="/login" element={<Login />} />
         <Route path="/one" element={<TestResult1 />} />
         <Route path="/two" element={<TestResult2 />} />
         <Route path="/three" element={<TestResult3 />} />
@@ -30,7 +32,7 @@ const Router = () => {
         <Route path="/seven" element={<TestResult7 />} />
         <Route path="/eight" element={<TestResult8 />} />
         <Route path="/nine" element={<Frame />} />
-        <Route path="/ten" element={<KakaoShareButton/>} />
+        <Route path="/ten" element={<KakaoShareButton />} />
       </Routes>
     </BrowserRouter>
   );

src/components/LoginModal/index.jsx

@@ -1,5 +1,6 @@
-import React from "react";
-import { useNavigate } from "react-router-dom";
+import React, { useEffect } from "react";
+import axios from "axios";
+import { useNavigate, useLocation } from "react-router-dom";
 import {
   Container,
   GoogleButton,
@@ -11,26 +12,36 @@ import kakao from "../../assets/images/kakao.png";
 
 const LoginModal = () => {
   const navigate = useNavigate();
+  const location = useLocation();
 
   const handleNonmemberButtonClick = () => {
     navigate("/test/0");
   };
 
-  const handleGoogleLogin = () => {
-    window.location.href = `https://www.noonsachin.com/oauth2/authorization/google`;
+  const handleLogin = provider => {
+    window.location.href = `https://www.noonsachin.com/oauth2/authorization/${provider}`;
   };
 
-  const handleKakaoLogin = () => {
-    window.location.href = `https://www.noonsachin.com/oauth2/authorization/kakao`;
-  };
+  useEffect(() => {
+    // Parse the URL to get the JWT
+    const jwt = new URL(window.location.href).searchParams.get("jwt");
+    console.log(jwt);
+    if (jwt) {
+      // If JWT exists, set it in the headers
+      axios.defaults.headers.common["Authorization"] = `Bearer ${jwt}`;
+
+      // Redirect to the home screen
+      navigate("/");
+    }
+  }, [navigate, location.search]);
 
   return (
     <Container>
-      <GoogleButton onClick={handleGoogleLogin}>
+      <GoogleButton onClick={() => handleLogin("google")}>
         <img src={google} alt="google" />
         &nbsp;Google 계정으로 로그인
       </GoogleButton>
-      <KakaoButton onClick={handleKakaoLogin}>
+      <KakaoButton onClick={() => handleLogin("kakao")}>
         <img src={kakao} alt="kakao" />
         &nbsp;카카오톡으로 로그인
       </KakaoButton>

src/pages/Login/index.jsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+import axios from "axios";
+import { useNavigate, useLocation } from "react-router-dom";
+import { useSetRecoilState } from "recoil";
+import { loginState } from "../../store/atoms";
+
+const Login = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const setLoginState = useSetRecoilState(loginState);
+
+  useEffect(() => {
+    // Parse the URL to get the JWT
+    const jwt = new URL(window.location.href).searchParams.get("jwt");
+
+    if (jwt) {
+      // If JWT exists, set it in the headers
+      axios.defaults.headers.common["Authorization"] = `Bearer ${jwt}`;
+
+      // Set login state to true
+      setLoginState(true);
+
+      // Redirect to the home screen
+      navigate("/");
+      console.log("로그인!");
+    }
+  }, [navigate, location.search, setLoginState]);
+
+  return (
+    <div>
+      {/* You can add a loading spinner or other UI elements here */}
+      Logging in...
+    </div>
+  );
+};
+
+export default Login;

src/store/atoms.js

@@ -1,4 +1,5 @@
 import { atom } from "recoil";
+import { recoilPersist } from "recoil-persist";
 
 export const testState = atom({
   key: "testState",
@@ -12,3 +13,14 @@ export const testState = atom({
     O: 0,
   },
 });
+
+const { persistAtom } = recoilPersist({
+  key: "recoil-persist",
+  storage: sessionStorage,
+});
+
+export const loginState = atom({
+  key: "loginState",
+  default: false,
+  effects_UNSTABLE: [persistAtom],
+});