feat: localStroage에 있는 auth가 유효하면 재접속할 수 있도록 comfirm 띄우기 (#121)

* feat: localStroage에 있는 auth가 유효하면 재접속할 수 있도록 comfirm 띄우기

* refactor: auth유효검증을 valid로 변경

src/Router.tsx

@@ -7,6 +7,7 @@ import Game from './pages/Game';
 import InputCode from './pages/InputCode';
 import InputName from './pages/InputName';
 import NotFound from './pages/NotFound';
+import CheckAuth from './routers/CheckAuth';
 import CheckInAppBrowser from './routers/CheckInAppBrowser';
 
 interface RouteElement {
@@ -19,27 +20,39 @@ interface RouteElement {
 const routes: RouteElement[] = [
   {
     path: '/',
-    element: <FirstPage />,
+    element: (
+      <CheckAuth>
+        <FirstPage />
+      </CheckAuth>
+    ),
   },
   {
     path: 'create',
     element: (
-      <CheckInAppBrowser>
-        <CreateRoom />
-      </CheckInAppBrowser>
+      <CheckAuth>
+        <CheckInAppBrowser>
+          <CreateRoom />
+        </CheckInAppBrowser>
+      </CheckAuth>
     ),
   },
   {
     path: '/participate',
     element: (
-      <CheckInAppBrowser>
-        <InputCode />
-      </CheckInAppBrowser>
+      <CheckAuth>
+        <CheckInAppBrowser>
+          <InputCode />
+        </CheckInAppBrowser>
+      </CheckAuth>
     ),
   },
   {
     path: '/name',
-    element: <InputName />,
+    element: (
+      <CheckAuth>
+        <InputName />
+      </CheckAuth>
+    ),
   },
   {
     path: '/game',

src/axios/http.ts

@@ -4,6 +4,7 @@ import {
   Chat,
   ChatRequest,
   DeadResult,
+  GameExist,
   GameInfo,
   GamesResults,
   MafiaVoteResult,
@@ -89,6 +90,11 @@ export const startGame = async () => {
 export const getRoomsResults = () => {
   return http.get<GamesResults>('/games/result');
 };
+
+export const existGame = () => {
+  return http.get<GameExist>('/games/valid');
+};
+
 export const getChats = () => {
   return http.get<Chat[]>(`/chat`);
 };

src/pages/InputName.tsx

@@ -12,6 +12,7 @@ import TopEnter from '../components/top/TopEnter';
 import { VariablesCSS } from '../styles/VariablesCSS';
 
 export default function InputName() {
+  const navigate = useNavigate();
   const [name, setName] = useState('');
   const onName = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.value.length <= 10) {
@@ -27,7 +28,6 @@ export default function InputName() {
   const [searchParams] = useSearchParams();
   const code = searchParams.get('code') as string;
 
-  const navigate = useNavigate();
   const goWaitingRoom = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 

src/routers/CheckAuth.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { existGame } from '../axios/http';
+
+interface propsType {
+  children: React.ReactNode;
+}
+
+export default function CheckAuth({ children }: propsType) {
+  const navigate = useNavigate();
+  useEffect(() => {
+    (async () => {
+      const isExist = await existGame();
+      if (isExist) {
+        if (confirm('이미 참가중인 방이 있습니다. 재접속 하시겠습니까?')) {
+          navigate('/game');
+        }
+      }
+    })();
+  }, []);
+
+  return <>{children}</>;
+}

src/type/index.ts

@@ -105,3 +105,7 @@ export interface GamesResults {
   winner: Player[];
   loser: Player[];
 }
+
+export interface GameExist {
+  valid: boolean;
+}