240619 lej : logout test

src/pages/Login/Redirection.jsx

@@ -1,31 +1,75 @@
-import React, { useEffect } from 'react'
+import axios from 'axios';
+import React, { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
+// fnUserInfoCheck > 유저 정보 가져옴 
+const fnUserInfoCheck = async (kakaoId, nickname) => {
+  try {
+    // 백엔드에 넣기 
+    const response = await axios.post('https://kapi.kakao.com/v2/user/me', {
+      kakaoId: kakaoId,
+      nickname: nickname
+    });
+
+    // Handle the response from your backend
+    if (response.data.success) {
+      alert('test하고 지우기 | 사용자 : , ', response.data.user);
+      // You can use the navigate hook if needed
+    } else {
+      console.error('User info check failed:', response.data.message);
+    }
+  } catch (error) {
+    console.error('Error checking In fnUserInfoCheck:', error);
+  }
+};
+
+
+// 카카오에서 액세스 토큰으로 사용자 정보 가져오기 
+const getKakaoUserInfo = async (accessToken) => {
+  try {
+    const res = await axios({
+      method: 'GET',
+      headers: {
+        "Authorization": `Bearer ${accessToken}`, 
+        "Content-type": "application/x-www-form-urlencoded;charset=utf-8"
+      },
+      url: "https://kapi.kakao.com/v2/user/me",
+    });
+    // Pass the retrieved data to fnUserInfoCheck
+    fnUserInfoCheck(res.data.id.toString(), res.data.kakao_account.profile.nickname); // Pass kakaoId and nickname
+
+    alert('안녕하세요! ', res.data.kakao_account.profile.nickname, '님');
+  } catch (e) {
+    console.log('Error fetching Kakao user info: ', e);
+  }
+};
+
 export default function Redirection() {
-  console.log('test하고 지우기 | 리다이랙션 들어옴 ')
+  console.log('Test log | Entered Redirection');
   const navigate = useNavigate();
   const location = useLocation();
 
   useEffect(() => {
-    console.log('test하고 지우기 | useEffect !! ')
+    console.log('Test log | useEffect triggered');
     const params = new URLSearchParams(location.search);
     const accessToken = params.get('accessToken');
 
     if (accessToken) {
-      // 액세스 토큰을 로컬 스토리지에 저장
+      // 로컬 스토리지에 액세스 토큰 저장 
       localStorage.setItem('kakaoAccessToken', accessToken);
 
-      alert('로그인 성공했어요!');
-      navigate('/main');
+      // 카카오 유저 정보 
+      getKakaoUserInfo(accessToken);
 
+      alert('Login successful!');
+      navigate('/main');
     } else {
-      // 에러 처리
+      // Access token 에러 
       console.error('Access token not found');
     }
   }, [location, navigate]);
 
-
   return (
-    <div>로그인 중입니다..</div>
-  )
+    <div>로그인 중입니다.. </div>
+  );
 }

src/pages/Mypage.jsx

@@ -1,7 +1,50 @@
+import axios from 'axios';
 import React from 'react'
+import styled from 'styled-components'
+
+
+const Logout = styled.div`
+  padding : 10px;
+  border : 1px solid #000;
+  width : 50%; 
+  border-radius : 10px;
+  justify-contents : center;
+  text-align : center;
+`;
+
+
+const handleLogout = async ()=> {
+  const accessToken = localStorage.getItem('kakaoAccessToken');
+  if (!accessToken) {
+    console.error('Access token not found in local storage');
+    alert('로그아웃 상태입니다.'); 
+    return;
+  }
+
+  try{
+    const res = await axios({
+      method : "POST",
+      url : `http://13.124.42.147/v1/member/${accessToken}/logout`,
+    })
+    console.log('test하고 지우기 | res: ', res); 
+
+    alert('로그아웃 되었습니다.');
+
+  }catch(e){
+    console.log("error in Logout : ", e);
+
+  }
+}
 
 export default function Mypage() {
+
+
   return (
-    <div>Mypage</div>
+    <div>
+      안녕하세요 ! {}님 ,
+      <Logout onClick={handleLogout}>
+        로그아웃 
+      </Logout>
+    </div>
   )
 }