[#4] feat : fix kakao login

donggukthon · Dec 20, 2023 · 448f8c3 · 448f8c3
1 parent a344d98
commit 448f8c3
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 46 deletions.
diff --git a/src/components/LoginModal/index.jsx b/src/components/LoginModal/index.jsx
@@ -1,6 +1,7 @@
-import React, { useEffect } from "react";
-import axios from "axios";
-import { useNavigate, useLocation } from "react-router-dom";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { useRecoilValue } from "recoil";
+import { loginState } from "../../store/atoms";
 import {
   Container,
   GoogleButton,
@@ -12,7 +13,7 @@ import kakao from "../../assets/images/kakao.png";
 
 const LoginModal = () => {
   const navigate = useNavigate();
-  const location = useLocation();
+  const isLoggedIn = useRecoilValue(loginState);
 
   const handleNonmemberButtonClick = () => {
     navigate("/test/0");
@@ -22,32 +23,27 @@ const LoginModal = () => {
     window.location.href = `https://www.noonsachin.com/oauth2/authorization/${provider}`;
   };
 
-  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={() => handleLogin("google")}>
-        <img src={google} alt="google" />
-        &nbsp;Google 계정으로 로그인
-      </GoogleButton>
-      <KakaoButton onClick={() => handleLogin("kakao")}>
-        <img src={kakao} alt="kakao" />
-        &nbsp;카카오톡으로 로그인
-      </KakaoButton>
-      <NonmemberButton onClick={handleNonmemberButtonClick}>
-        &nbsp;비회원으로 테스트 하기&nbsp;
-      </NonmemberButton>
+      {isLoggedIn ? (
+        <NonmemberButton onClick={handleNonmemberButtonClick}>
+          &nbsp;테스트 하기&nbsp;
+        </NonmemberButton>
+      ) : (
+        <>
+          <GoogleButton onClick={() => handleLogin("google")}>
+            <img src={google} alt="google" />
+            &nbsp;Google 계정으로 로그인
+          </GoogleButton>
+          <KakaoButton onClick={() => handleLogin("kakao")}>
+            <img src={kakao} alt="kakao" />
+            &nbsp;카카오톡으로 로그인
+          </KakaoButton>
+          <NonmemberButton onClick={handleNonmemberButtonClick}>
+            &nbsp;비회원으로 테스트 하기&nbsp;
+          </NonmemberButton>
+        </>
+      )}
     </Container>
   );
 };

diff --git a/src/components/SideMenu/index.jsx b/src/components/SideMenu/index.jsx
@@ -1,4 +1,6 @@
 import React from "react";
+import { useRecoilValue } from "recoil";
+import { loginState } from "../../store/atoms";
 import {
   MenuContainer,
   Header,
@@ -11,6 +13,8 @@ import snow from "../../assets/images/sidesnow.png";
 import snowman from "../../assets/images/sidesnowman.png";
 
 const SideMenu = ({ onClose }) => {
+  const isLoggedIn = useRecoilValue(loginState);
+
   return (
     <MenuContainer>
       <Close onClick={onClose}>X</Close>
@@ -19,11 +23,17 @@ const SideMenu = ({ onClose }) => {
         눈사친
         <Image src={snow} alt="snow" />
       </Header>
-      <Button>Snow Village 구경하기</Button>
-      <Button>눈사람 정보 확인하기</Button>
-      <Button>따듯한 눈 확인하기</Button>
-      <Button>로그아웃</Button>
-      <Button>로그인 후 이용가능합니다.</Button>
+
+      {isLoggedIn ? (
+        <>
+          <Button>Snow Village 구경하기</Button>
+          <Button>눈사람 정보 확인하기</Button>
+          <Button>따듯한 눈 확인하기</Button>
+          <Button>로그아웃</Button>
+        </>
+      ) : (
+        <Button>로그인 후 이용가능합니다.</Button>
+      )}
 
       <FooterImage src={snowman} alt="snowman" />
     </MenuContainer>

diff --git a/src/pages/ResultLoading/index.jsx b/src/pages/ResultLoading/index.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { useRecoilValue } from "recoil";
-import { axiosInstance } from "../../apis";
+import { useNavigate } from "react-router-dom";
 import { testState } from "../../store/atoms";
 import { TestHeader } from "../../components";
 import {
@@ -19,20 +19,34 @@ const ResultLoading = () => {
   const values = `${testStateValue.T}${testStateValue.F}${testStateValue.E}${testStateValue.I}${testStateValue.X}${testStateValue.O}`;
   console.log(values);
 
-  const getResult = async () => {
-    try {
-      const response = await axiosInstance.get(
-        `/api/v1/test-result?result=${values}`,
-      );
-      console.log(response);
-    } catch (err) {
-      console.error(err);
-    }
-  };
+  const navigate = useNavigate();
 
   useEffect(() => {
-    getResult();
-  }, []);
+    const routeMap = {
+      303030: "/one",
+      212121: "/one",
+      "031203": "/two",
+      120312: "/two",
+      "030330": "/three",
+      121221: "/three",
+      "033030": "/four",
+      122121: "/four",
+      301203: "/five",
+      210312: "/five",
+      300330: "/six",
+      211221: "/six",
+      "032103": "/seven",
+      123012: "/seven",
+      302103: "/eight",
+      213012: "/eight",
+    };
+
+    const route = routeMap[values];
+
+    setTimeout(() => {
+      navigate(route);
+    }, 2000);
+  }, [navigate, values]);
 
   return (
     <>