From 7acf26f43fca97a015285c9fb40f54dd4d0cb60c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B2=9C=EC=A7=80=EC=9C=A4?=
 <70828192+cheonjiyun@users.noreply.github.com>
Date: Sun, 8 Sep 2024 21:26:32 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20localStroage=EC=97=90=20=EC=9E=88?=
 =?UTF-8?q?=EB=8A=94=20auth=EA=B0=80=20=EC=9C=A0=ED=9A=A8=ED=95=98?=
 =?UTF-8?q?=EB=A9=B4=20=EC=9E=AC=EC=A0=91=EC=86=8D=ED=95=A0=20=EC=88=98=20?=
 =?UTF-8?q?=EC=9E=88=EB=8F=84=EB=A1=9D=20comfirm=20=EB=9D=84=EC=9A=B0?=
 =?UTF-8?q?=EA=B8=B0=20(#121)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* refactor: auth유효검증을 valid로 변경
---
 src/Router.tsx            | 29 +++++++++++++++++++++--------
 src/axios/http.ts         |  6 ++++++
 src/hooks/useInAppBrowser |  0
 src/pages/InputName.tsx   |  2 +-
 src/routers/CheckAuth.tsx | 24 ++++++++++++++++++++++++
 src/type/index.ts         |  4 ++++
 6 files changed, 56 insertions(+), 9 deletions(-)
 delete mode 100644 src/hooks/useInAppBrowser
 create mode 100644 src/routers/CheckAuth.tsx

diff --git a/src/Router.tsx b/src/Router.tsx
index 8ad6606..0a8b5d1 100644
--- a/src/Router.tsx
+++ b/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',
diff --git a/src/axios/http.ts b/src/axios/http.ts
index 8a60846..c616463 100644
--- a/src/axios/http.ts
+++ b/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`);
 };
diff --git a/src/hooks/useInAppBrowser b/src/hooks/useInAppBrowser
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/InputName.tsx b/src/pages/InputName.tsx
index c2c8600..a54097f 100644
--- a/src/pages/InputName.tsx
+++ b/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();
 
diff --git a/src/routers/CheckAuth.tsx b/src/routers/CheckAuth.tsx
new file mode 100644
index 0000000..dea91e8
--- /dev/null
+++ b/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}</>;
+}
diff --git a/src/type/index.ts b/src/type/index.ts
index 8780315..184a267 100644
--- a/src/type/index.ts
+++ b/src/type/index.ts
@@ -105,3 +105,7 @@ export interface GamesResults {
   winner: Player[];
   loser: Player[];
 }
+
+export interface GameExist {
+  valid: boolean;
+}