fix: 로그아웃 타이머 및 로그아웃 관련 버그 수정

src/app/components/Gnb/TokenExpirationTimerLayout.test.tsx

@@ -22,7 +22,7 @@ describe('TokenExpirationTimerLayout 컴포넌트', () => {
       timeLeft: 300,
     });
 
-    render(<TokenExpirationTimerLayout token={mockToken} variant='gnb' />);
+    render(<TokenExpirationTimerLayout token='' variant='gnb' />);
 
     expect(screen.queryByText(/남은 시간:/)).not.toBeInTheDocument();
   });
@@ -40,14 +40,9 @@ describe('TokenExpirationTimerLayout 컴포넌트', () => {
     expect(screen.getByText('남은 시간: 2분 0초')).toBeInTheDocument();
   });
 
-  // 남은 시간이 0일 경우 아무것도 렌더링하지 않아야 함
-  it('should render nothing when time left is 0', () => {
-    (TokenExpirationTimer as jest.Mock).mockReturnValue({
-      isLoggedIn: true,
-      timeLeft: 0,
-    });
-
-    render(<TokenExpirationTimerLayout token={mockToken} variant='gnb' />);
+  // 토큰이 없을 경우 아무것도 렌더링하지 않아야 함
+  it('should not render anything when there is no token', () => {
+    render(<TokenExpirationTimerLayout token='' variant='gnb' />);
 
     expect(screen.queryByText(/남은 시간:/)).not.toBeInTheDocument();
   });

src/app/components/Gnb/TokenExpirationTimerLayout.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { TokenExpirationTimer } from '@/utils/TokenExpirationTimer';
+import { useEffect, useState } from 'react';
 
 const TimerStyle = {
   gnb: 'hidden text-14 font-semibold text-var-orange-50 md:block md:text-16 w-140',
@@ -17,13 +18,9 @@ const TokenExpirationTimerLayout = ({
   token,
   variant,
 }: TokenExpirationTimerLayoutProps) => {
-  const { timeLeft, isLoggedIn } = TokenExpirationTimer(token);
+  const { timeLeft } = TokenExpirationTimer(token);
 
-  if (!isLoggedIn) {
-    return null;
-  }
-
-  return timeLeft > 0 ? (
+  return token ? (
     <p className={TimerStyle[variant]}>
       {variant === 'gnb' ? (
         <>

src/app/components/Gnb/UserStatus.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import UserStatus from './UserStatus';
 import { useRouter } from 'next/navigation';
 import { deleteCookie } from '@/app/api/actions/cookie/cookie';
@@ -35,6 +35,7 @@ jest.mock('@/app/api/actions/mypage/postUserLogoutData', () => ({
 
 jest.mock('react-hot-toast', () => ({
   success: jest.fn(),
+  error: jest.fn(),
 }));
 
 describe('UserStatus 컴포넌트', () => {
@@ -94,6 +95,5 @@ describe('UserStatus 컴포넌트', () => {
     expect(mockPostUserLogoutData).toHaveBeenCalled();
     expect(mockToastSuccess).toHaveBeenCalledWith('로그아웃이 완료되었습니다.');
     expect(mockDeleteCookie).toHaveBeenCalledWith('token');
-    expect(mockPush).toHaveBeenCalledWith('/gatherings');
   });
 });

src/app/components/Gnb/UserStatus.tsx

@@ -5,7 +5,6 @@ import { Profile } from '@/public/images';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useState, useRef, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
 import { UserData } from '@/types/client.type';
 import { postUserLogoutData } from '@/app/api/actions/mypage/postUserLogoutData';
 import toast from 'react-hot-toast';
@@ -19,7 +18,6 @@ interface UserStatusProps {
 const UserStatus = ({ user, token }: UserStatusProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const dropDownRef = useRef<HTMLDivElement>(null);
-  const router = useRouter();
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -43,7 +41,7 @@ const UserStatus = ({ user, token }: UserStatusProps) => {
     if (result) {
       toast.success('로그아웃이 완료되었습니다.');
       deleteCookie('token');
-      router.push('/gatherings');
+      // router.push('/gatherings');
     } else {
       toast.error('로그아웃에 실패했습니다. 다시 시도해 주세요.');
     }

src/utils/TokenExpirationTimer.ts

@@ -1,13 +1,12 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { postUserLogoutData } from '@/app/api/actions/mypage/postUserLogoutData';
 import toast from 'react-hot-toast';
 import { deleteCookie } from '@/app/api/actions/cookie/cookie';
 
 export const TokenExpirationTimer = (token: string | undefined) => {
   const router = useRouter();
-  const [timeLeft, setTimeLeft] = useState<number>(0);
-  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
+  const [timeLeft, setTimeLeft] = useState<number>(0); // 재렌더링을 위한 스테이트 저장
 
   // JWT 디코드하여 만료 시간을 가져오는 함수
   const getTokenExpirationTime = (token: string) => {
@@ -17,29 +16,21 @@ export const TokenExpirationTimer = (token: string | undefined) => {
 
   useEffect(() => {
     if (token) {
-      setIsLoggedIn(true);
-      const expirationTime = getTokenExpirationTime(token); // 만료시간
-      const currentTime = Date.now(); // 현재시간
-      const remainingTime = Math.max(0, expirationTime - currentTime); // 남은 시간 계산
-      setTimeLeft(Math.floor(remainingTime / 1000)); // 초 단위로 변환
-
-      // 타이머 설정
-      const interval = setInterval(() => {
-        setTimeLeft((prev) => {
-          if (prev <= 1) {
-            clearInterval(interval);
-            logout();
-            return 0;
-          }
-          return prev - 1;
-        });
-      }, 1000);
-
-      return () => {
-        clearInterval(interval);
+      const expirationTime = getTokenExpirationTime(token); // 만료 시간
+      const updateRemainingTime = () => {
+        const currentTime = Date.now(); // 현재 시간
+        const remainingTime = Math.max(0, expirationTime - currentTime); // 남은 시간 계산
+        setTimeLeft(Math.floor(remainingTime / 1000)); // 초 단위로 상태 업데이트
+
+        if (remainingTime <= 0) {
+          logout(); // 시간이 다되면 로그아웃
+        }
       };
-    } else {
-      setIsLoggedIn(false);
+
+      updateRemainingTime(); // 초기 업데이트
+      const interval = setInterval(updateRemainingTime, 1000); // 1초마다 업데이트
+
+      return () => clearInterval(interval);
     }
   }, [token]);
 
@@ -55,5 +46,5 @@ export const TokenExpirationTimer = (token: string | undefined) => {
     }
   };
 
-  return { timeLeft, isLoggedIn };
+  return { timeLeft };
 };