feat : user login 처리

frontend/app/GlobalContext.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { createContext, PropsWithChildren, useMemo } from 'react';
+import { createContext, PropsWithChildren, useMemo, useState } from 'react';
 
 type ContextType = {
   userId?: string;
@@ -14,25 +14,28 @@ export const GlobalContext = createContext<ContextType>({
 export const GlobalContextProvider = ({ children }: PropsWithChildren) => {
   // localStorage에서 초기값 가져오기
   const getUserFromLocalStorage = (): ContextType['userId'] | undefined => {
-    if (typeof window === 'undefined') return undefined; // 서버 렌더링 방지
+    if (typeof window === 'undefined') return ''; // 서버 렌더링 방지
     try {
       const savedUser = localStorage.getItem(window.location.hostname + 'user');
-      return savedUser ? savedUser : undefined;
+      return savedUser ? savedUser : '';
     } catch (error) {
       console.error('Failed to parse user from localStorage:', error);
       return undefined;
     }
   };
 
-  const userId = getUserFromLocalStorage();
+  const [userId, setUserId] = useState<ContextType['userId']>(() => {
+    return getUserFromLocalStorage();
+  });
 
-  // 사용자가 변경될 때 localStorage에 저장
   const handleChangeUser = (newUser: ContextType['userId']) => {
     localStorage.setItem(window.location.hostname + 'user', newUser!);
+    setUserId(newUser);
   };
 
   const handleLogout = () => {
     localStorage.removeItem(window.location.hostname + 'user');
+    setUserId(undefined);
   };
 
   const contextValue = useMemo(

frontend/app/_components/Header.tsx

@@ -18,7 +18,6 @@ const PigHeader = ({ onClick }: Props) => {
   const [timer, setTimer] = useState(0);
 
   useEffect(() => {
-    console.log('background.time', background?.time, gameInfo?.current_player);
     if (background?.time) {
       setTimer(background.time); // Set initial time from background
       const interval = setInterval(() => {

frontend/app/api/room/hooks/useQueryRoom.ts

@@ -20,5 +20,6 @@ export function useGetRoomStatusFirebaseRoomRoomIdGet({
   return useQuery({
     queryKey: [QUERY_KEY.GET_ROOM_STATUS, roomId, isConnecting],
     queryFn: () => getRoomStatusFirebaseRoomRoomIdGet({ roomId }),
+    enabled: !!roomId,
   });
 }

frontend/app/home/page.tsx

@@ -1,10 +1,24 @@
 'use client';
+import { useRouter } from 'next/navigation';
+import { useContext, useEffect } from 'react';
 import { Layout } from '../(root)/_related/root.styled';
 import PigHeader from '../_components/Header';
+import { GlobalContext } from '../GlobalContext';
 import { Carousel, HomeContentContainer } from './_related/home.styled';
 import NameInput from './_sections/NameInput';
 
 const page = () => {
+  const { userId } = useContext(GlobalContext);
+
+  const router = useRouter();
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (userId) {
+      router.push('/room');
+    }
+  }, [userId]);
+
   return (
     <Layout>
       <PigHeader />

frontend/app/room/[roomId]/page.tsx

@@ -21,11 +21,12 @@ const Page = () => {
   const { mutateAsync: startGame } = useStartGameFirebaseRoomRoomIdStartPut();
 
   useEffect(() => {
+    if (typeof window === 'undefined') return;
     if (!userId) {
       enqueueSnackbar({ variant: 'error', message: '유저 정보가 없습니다.' });
       return router.push('/home');
     }
-  }, []);
+  }, [userId]);
 
   if (!roomId) return;
 

frontend/app/room/page.tsx

@@ -1,7 +1,10 @@
 'use client';
+import { useRouter } from 'next/navigation';
+import { useContext } from 'react';
 import { Layout } from '../(root)/_related/root.styled';
 import PigHeader from '../_components/Header';
 import { useGetAllRoomsFirebaseRoomGet } from '../api/room/hooks/useQueryRoom';
+import { GlobalContext } from '../GlobalContext';
 import {
   RoomContentContainer,
   RoomListContainer,
@@ -12,11 +15,19 @@ import CreateRoomButton from './_sections/CreateRoomButton';
 import RoomList from './_sections/RoomList';
 
 const page = () => {
+  const router = useRouter();
+  const { handleLogout } = useContext(GlobalContext);
+  const handleGotoBack = () => {
+    handleLogout();
+    setTimeout(() => {
+      router.push('/home');
+    }, 300);
+  };
   const { data: rooms } = useGetAllRoomsFirebaseRoomGet();
 
   return (
     <Layout>
-      <PigHeader />
+      <PigHeader onClick={handleGotoBack} />
       <RoomContentContainer>
         <RoomTitleContainer>
           <RoomListTitle>방 리스트</RoomListTitle>