♻️[Refactor] 토큰 만료 시간 추가, 헤더 바 새로고침 시 isLoggedIn 상태 확인 #137

src/components/header/HeaderBar.test.tsx

@@ -61,14 +61,18 @@ describe('HeaderBar 컴포넌트 테스트', () => {
 describe('로그인 상태에 따른 버튼 렌더링', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    useAuthStore.setState({ isLoggedIn: false, user: null });
+    useAuthStore.setState({
+      isLoggedIn: false,
+      user: null,
+      checkLoginStatus: jest.fn(),
+    });
   });
 
   it('로그인 상태일 때 드롭다운 버튼이 렌더링되어야 한다', () => {
     useAuthStore.setState({
       isLoggedIn: true,
       user: {
-        image: '/images/default-profile.png',
+        image: '/images/profile.png',
         teamId: 'team-id',
         id: 1,
         email: 'user@example.com',
@@ -77,6 +81,7 @@ describe('로그인 상태에 따른 버튼 렌더링', () => {
         createdAt: new Date(),
         updatedAt: new Date(),
       },
+      checkLoginStatus: jest.fn(),
     });
 
     render(<HeaderBar />);

src/components/header/HeaderBar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import NavButton from './NavButton';
 import { NAV_ITEMS } from '@/constants/navigation';
 import { usePathname, useRouter } from 'next/navigation';
@@ -10,9 +10,13 @@ import { logout } from '@/features/auth/api/auth';
 
 function HeaderBar() {
   const pathname = usePathname();
-  const { isLoggedIn, user } = useAuthStore();
+  const { isLoggedIn, user, checkLoginStatus } = useAuthStore();
   const router = useRouter();
 
+  useEffect(() => {
+    checkLoginStatus();
+  }, [checkLoginStatus]);
+
   const handleDropDownChange = async (value: string | undefined) => {
     if (value === 'LOGOUT') {
       try {

src/features/auth/utils/cookies.ts

@@ -1,5 +1,7 @@
 export const setCookie = (name: string, value: string) => {
-  document.cookie = `${name}=${value};path=/`;
+  const expirationDate = new Date();
+  expirationDate.setTime(expirationDate.getTime() + 60 * 60 * 1000);
+  document.cookie = `${name}=${value};path=/;expires=${expirationDate.toUTCString()}`;
 };
 
 export const getCookie = (name: string): string | null => {