From ecc5321485d82fe34ea81eb938febd2ce1090f15 Mon Sep 17 00:00:00 2001
From: novice1993 <novice1993@gmail.com>
Date: Thu, 21 Sep 2023 16:12:39 +0900
Subject: [PATCH] =?UTF-8?q?[Fix]=20=EC=9E=90=EB=8F=99=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B4=80=EB=A0=A8=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Oauth 로그인 관련 자동 로그아웃 기능이 실행되지 않던 문제 해결

Issues #122
---
 client/src/components/Headers/LoginHeader.tsx |  2 +
 client/src/page/MainPage.tsx                  | 47 ++++++++++---------
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/client/src/components/Headers/LoginHeader.tsx b/client/src/components/Headers/LoginHeader.tsx
index 0b6b644..3ea87d3 100644
--- a/client/src/components/Headers/LoginHeader.tsx
+++ b/client/src/components/Headers/LoginHeader.tsx
@@ -49,6 +49,8 @@ const LoginHeader: React.FC<LoginHeaderProps> = () => {
     dispatch(setLogoutState()); // 전역변수에서 로그아웃 상태로 설정
     sessionStorage.removeItem("accessToken"); // 엑세스 토큰 제거
     sessionStorage.removeItem("refreshToken"); // 리프레시 토큰 제거
+    sessionStorage.removeItem("logoutAlarmTime01");
+    sessionStorage.removeItem("logoutAlarmTime02");
 
     // 페이지를 새로고침합니다.
     window.location.reload();
diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx
index 536c9cc..08c1589 100644
--- a/client/src/page/MainPage.tsx
+++ b/client/src/page/MainPage.tsx
@@ -223,35 +223,35 @@ const MainPage = () => {
     const accessToken = urlParams.get("access_token");
     const refreshToken = urlParams.get("refresh_token");
 
+    // 🔴 자동 로그아웃 테스트
+    // 현재 시간, 알림 세팅 타임, 세션 스토리지에 저장된 타이머 시간
+    const currentTime = Date.now();
+    const settingTime01 = 1000 * 60 * 29; // 29분
+    const settingTime02 = 1000 * 60; // 1분
+    const logoutAlarmTime01 = sessionStorage.getItem("logoutAlarmTime01");
+    const logoutAlarmTime02 = sessionStorage.getItem("logoutAlarmTime02");
+
+    const toastStyle = {
+      fontSize: "15px",
+      fontWeight: 350,
+      color: "black",
+    };
+
     // 세션 스토리지에 저장 + 로그인 처리를 한다
     if (accessToken && refreshToken) {
       sessionStorage.setItem("accessToken", `Bearer ${accessToken}`);
       sessionStorage.setItem("refreshToken", refreshToken);
       dispatch(setLoginState());
 
-      // url에 있는 파라미터를 지운다
-      urlParams.delete("access_token");
-      urlParams.delete("refresh_token");
-      window.history.replaceState({}, "", "?" + urlParams.toString());
-
-      window.location.reload();
+      // // ✅ 1차 타이머도 설정되지 않았다면 -> 최초 설정 시
+      if (accessToken && refreshToken && logoutAlarmTime01 === null) {
+        // url에 있는 파라미터를 지운다
+        urlParams.delete("access_token");
+        urlParams.delete("refresh_token");
+        window.history.replaceState({}, "", "?" + urlParams.toString());
 
-      // 🔴 자동 로그아웃 테스트
-      // 현재 시간, 알림 세팅 타임, 세션 스토리지에 저장된 타이머 시간
-      const currentTime = Date.now();
-      const settingTime01 = 1000 * 60 * 29; // 29분
-      const settingTime02 = 1000 * 60; // 1분
-      const logoutAlarmTime01 = sessionStorage.getItem("logoutAlarmTime01");
-      const logoutAlarmTime02 = sessionStorage.getItem("logoutAlarmTime02");
+        console.log("Oauth 테스트");
 
-      const toastStyle = {
-        fontSize: "15px",
-        fontWeight: 350,
-        color: "black",
-      };
-
-      // ✅ 1차 타이머도 설정되지 않았다면 -> 최초 설정 시
-      if (logoutAlarmTime01 === null) {
         toast.warning("로그인 상태는 30분 동안 유지됩니다", {
           style: toastStyle,
           position: "top-center",
@@ -260,6 +260,7 @@ const MainPage = () => {
         // 1차 타이머 저장
         const logoutAlarmTime01 = Date.now(); // 1차 알람 호출한 시간
         sessionStorage.setItem("logoutAlarmTime01", `${logoutAlarmTime01}`); // 세션 스토리지에 저장
+        console.log("Oauth 테스트1");
 
         setTimeout(() => {
           // 첫번째 알람 실행되었으므로 -> 첫번째 시간기록 삭제
@@ -291,7 +292,7 @@ const MainPage = () => {
       }
 
       // ✅ 1차 타이머는 설정 됐는데 -> 새로고침 시
-      if (logoutAlarmTime01 !== null) {
+      if (accessToken && refreshToken && logoutAlarmTime01 !== null) {
         // 3) 비동기 설정 시간 - 새로고침 전까지 지나간 시간
         const timeGone = currentTime - parseInt(logoutAlarmTime01);
         const remainTime = settingTime01 - timeGone;
@@ -326,7 +327,7 @@ const MainPage = () => {
       }
 
       // ✅ 두번째 타이머 설정 됐는데 -> 새로고침 시
-      if (logoutAlarmTime02 !== null) {
+      if (accessToken && refreshToken && logoutAlarmTime02 !== null) {
         const timeGone = currentTime - parseInt(logoutAlarmTime02);
         const remainTime = settingTime02 - timeGone;