fix: Update navigation logic and fix URL handling (#161)

* fix: update redirect logic to use sessionStorage

- Changed the redirect mechanism to utilize sessionStorage instead of localStorage for better session management.
- This adjustment addresses an issue where the shouldRedirect flag remained in localStorage, causing unintended navigation to the main page when entering an invite URL.
- The use of sessionStorage ensures that the flag is cleared upon page refresh, preventing unwanted redirects and enhancing user experience.

* chore: Fix URL handling after navigation to main page

- Added a useEffect hook to change the current URL to the root ("/") when navigating to the main page.
- This modification ensures that after the handleBeforeUnload event triggers and redirects the user, the URL reflects the main page correctly instead of retaining the previous URL.
- Enhances user experience by providing a consistent and expected URL state upon navigation.

client/src/layouts/BrowserNavigationGuard.tsx

@@ -14,8 +14,8 @@ const BrowserNavigationGuard = () => {
       e.preventDefault();
       e.returnValue = ''; // 레거시 브라우저 지원
 
-      // 새로고침 시 메인으로 이동하도록 로컬스토리지에 플래그 저장
-      localStorage.setItem('shouldRedirect', 'true');
+      // 새로고침 시 메인으로 이동하도록 세션스토리지에 플래그 저장
+      sessionStorage.setItem('shouldRedirect', 'true');
 
       // 사용자 정의 메시지 반환 (일부 브라우저에서는 무시될 수 있음)
       return '게임을 종료하시겠습니까? 현재 진행 상태가 저장되지 않을 수 있습니다.';
@@ -38,10 +38,10 @@ const BrowserNavigationGuard = () => {
     window.addEventListener('popstate', handlePopState);
 
     // 새로고침 후 리다이렉트 체크
-    const shouldRedirect = localStorage.getItem('shouldRedirect');
+    const shouldRedirect = sessionStorage.getItem('shouldRedirect');
     if (shouldRedirect === 'true' && location.pathname !== '/') {
       navigate('/', { replace: true });
-      localStorage.removeItem('shouldRedirect');
+      sessionStorage.removeItem('shouldRedirect');
     }
 
     return () => {

client/src/layouts/RootLayout.tsx

@@ -9,7 +9,6 @@ const RootLayout = () => {
   // 레이아웃 마운트 시 localStorage 초기화
   useEffect(() => {
     playerIdStorageUtils.removeAllPlayerIds();
-    localStorage.removeItem('shouldRedirect');
   }, []);
 
   return (

client/src/pages/MainPage.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { Button } from '@/components/ui/Button';
 import { Logo } from '@/components/ui/Logo';
 import { PixelTransitionContainer } from '@/components/ui/PixelTransitionContainer';
@@ -9,6 +10,11 @@ const MainPage = () => {
   const { createRoom, isLoading } = useCreateRoom();
   const { isExiting, transitionTo } = usePageTransition();
 
+  useEffect(() => {
+    // 현재 URL을 루트로 변경
+    window.history.replaceState(null, '', '/');
+  }, []);
+
   const handleCreateRoom = async () => {
     // transitionTo(`/lobby/${roomId}`);
     const response = await createRoom();