[FIX] userState에서 데이터를 가져오기로 변경

Author: AndroidNetrunner

src/app/Game/QuestionPhase/VoteForAccuse.tsx

@@ -4,9 +4,9 @@ import { Alert, AlertTitle, Box } from '@mui/material';
 
 import useHandler from '@/app/hooks/useHandler';
 
-import { selectInvitationCode, selectPlayers, selectSpy } from '@/redux/slices/gameSlice';
+import { selectPlayers, selectSpy } from '@/redux/slices/gameSlice';
 import { selectNominator, selectNominee, selectVotes } from '@/redux/slices/questionPhaseSlice';
-import { UserState, selectId } from '@/redux/slices/userSlice';
+import { UserState, selectId, selectUser } from '@/redux/slices/userSlice';
 
 import { UserId } from '@/types/UserId';
 import PlayersWhoDidNotVote from '@/app/components/PlayersWhoDidNotVote';
@@ -18,7 +18,7 @@ import { LOCAL_STORAGE_END_TIME, LOCAL_STORAGE_PAUSE_START_TIME } from '@/consta
 export default function VoteForAccuse() {
   const nomineeId = useSelector(selectNominee);
   const nominatorId = useSelector(selectNominator);
-  const invitationCode = useSelector(selectInvitationCode);
+  const { invitationCode } = useSelector(selectUser);
   const players = useSelector(selectPlayers);
   const votes = useSelector(selectVotes);
   const spy = useSelector(selectSpy);

src/app/Game/VotePhase/VoteForm.tsx

@@ -1,7 +1,7 @@
 import React, { Dispatch, SetStateAction } from 'react';
 import { useSelector } from 'react-redux';
-import { selectInvitationCode, selectPlayers } from '@/redux/slices/gameSlice';
-import { UserState, selectId } from '@/redux/slices/userSlice';
+import { selectPlayers } from '@/redux/slices/gameSlice';
+import { UserState, selectId, selectUser } from '@/redux/slices/userSlice';
 import useHandler from '@/app/hooks/useHandler';
 
 import VoteButton from './VoteButton';
@@ -16,7 +16,7 @@ interface Props {
 
 const VoteForm = ({ votedTo, setVotedTo, setHasVote }: Props) => {
   const myUserId = useSelector(selectId);
-  const invitationCode = useSelector(selectInvitationCode);
+  const { invitationCode } = useSelector(selectUser);
   const opponents = Object.values(useSelector(selectPlayers)).filter((player: UserState) => player.id !== myUserId);
   if (!myUserId) throw new Error('UserID가 존재하지 않음');
   if (!invitationCode) throw new Error('초대 코드가 존재하지 않음');

src/app/hooks/useGameStartSync.ts

@@ -9,7 +9,6 @@ import { setFinalVotes } from '@/redux/slices/votePhaseSlice';
 import { resetQuestionPhase, setNominator, setNominee, setVotes } from '@/redux/slices/questionPhaseSlice';
 import isGameData from '@/validators/isGameData';
 import GameData from '@/types/GameData';
-import { LOCAL_STORAGE_ID, LOCAL_STORAGE_INVITATION_CODE } from '@/constants/localStorage';
 
 export default function useGameStartSync() {
   const { invitationCode, id } = useSelector(selectUser);
@@ -21,10 +20,6 @@ export default function useGameStartSync() {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (typeof window !== undefined) {
-      localStorage.setItem(LOCAL_STORAGE_ID, id);
-      localStorage.setItem(LOCAL_STORAGE_INVITATION_CODE, invitationCode);
-    }
     const unsubscribe = onValue(gameRef, snapshot => {
       const currentData = snapshot.val() as GameData;
       if (isGameData(currentData)) {

src/app/hooks/useHandler.ts

@@ -16,6 +16,7 @@ import GameData from '@/types/GameData';
 import Players from '@/types/Players';
 import createNewGame from '../../utils/createNewGame';
 import { cleanupGame } from '@/utils/cleanupGame';
+import { LOCAL_STORAGE_ID, LOCAL_STORAGE_INVITATION_CODE } from '@/constants/localStorage';
 
 const useHandler = () => {
   if (!db) throw new Error();
@@ -47,6 +48,8 @@ const useHandler = () => {
       }),
     );
     dispatch(setIsGameMaster(true));
+    localStorage.setItem(LOCAL_STORAGE_ID, id);
+    localStorage.setItem(LOCAL_STORAGE_INVITATION_CODE, invitationCode);
   };
 
   const dispatchUserDetails = (myUser: UserState) => {
@@ -70,6 +73,8 @@ const useHandler = () => {
       return;
     }
     dispatchUserDetails(myUser);
+    localStorage.setItem(LOCAL_STORAGE_ID, myUser.id);
+    localStorage.setItem(LOCAL_STORAGE_INVITATION_CODE, invitationCode);
     await update(userRef, myUser);
   };
 

src/app/page.tsx

@@ -9,7 +9,7 @@ import Lobby from './Lobby/Lobby';
 import Game from './Game/Game';
 
 import { enterRoomByInvitationCode, selectUser, setUserId } from '../redux/slices/userSlice';
-import { selectInvitationCode } from '@/redux/slices/roomSlice';
+import { selectInvitationCode, setInvitationCode } from '@/redux/slices/roomSlice';
 
 import db from '../../firebase/firebase.config';
 import { LOCAL_STORAGE_ID, LOCAL_STORAGE_INVITATION_CODE } from '@/constants/localStorage';
@@ -35,26 +35,44 @@ export default function Home() {
   const fetchGameFromFirebase = async (invitationCode: InvitationCode) => {
     const gameRef = ref(db, 'games/' + invitationCode);
     const snapshot = await get(gameRef);
+    return snapshot.exists();
+  };
 
+  const fetchRoomFromFirebase = async (invitationCode: InvitationCode) => {
+    const roomRef = ref(db, 'rooms/' + invitationCode);
+    const snapshot = await get(roomRef);
     return snapshot.exists();
   };
 
-  const handleGameData = (exists: boolean, storagedId: UserId, storagedInvitationCode: InvitationCode) => {
-    if (exists) {
-      dispatch(setUserId(storagedId));
+  const handleStateRestoration = (
+    gameExists: boolean,
+    roomExists: boolean,
+    storagedId: UserId,
+    storagedInvitationCode: InvitationCode,
+  ) => {
+    dispatch(setUserId(storagedId));
+    if (gameExists) {
+      // 게임 진행 중 상태 복원
       dispatch(enterRoomByInvitationCode(storagedInvitationCode));
+      dispatch(setInvitationCode(null)); // 게임 상태에서는 room 코드를 null로 설정
+    } else if (roomExists) {
+      // 로비 상태 복원
+      dispatch(setInvitationCode(storagedInvitationCode));
     } else {
+      // 유효하지 않은 상태 (게임도 방도 없음)
       localStorage.removeItem(LOCAL_STORAGE_ID);
       localStorage.removeItem(LOCAL_STORAGE_INVITATION_CODE);
+      dispatch(setUserId(null)); // 유저 상태도 초기화
     }
   };
 
   const fetchData = async () => {
     const { storagedId, storagedInvitationCode } = getLocalStorageData();
 
     if (storagedId && storagedInvitationCode) {
-      const exists = await fetchGameFromFirebase(storagedInvitationCode);
-      handleGameData(exists, storagedId, storagedInvitationCode);
+      const gameExists = await fetchGameFromFirebase(storagedInvitationCode);
+      const roomExists = await fetchRoomFromFirebase(storagedInvitationCode);
+      handleStateRestoration(gameExists, roomExists, storagedId, storagedInvitationCode);
     }
   };