Merge branch 'develop' of https://github.com/pepero-1/liar-game into …

…feature/#3
KDT1-FE · Nov 13, 2023 · adef226 · adef226
2 parents 2dac008 + 7627262
commit adef226
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 50 deletions.
diff --git a/src/components/Game/GameChat/index.tsx b/src/components/Game/GameChat/index.tsx
@@ -95,6 +95,7 @@ const GameChat: React.FC<GameChatProps> = ({ gameId, gameData }) => {
       setMessages([...messages, { id: "system", text: systemMessage }]);
       setUsers(responseData.users);
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // 메시지 값 변화시(소켓 통신 시) 콘솔에 메시지 데이터 출력

diff --git a/src/components/Login/LoginForm/index.tsx b/src/components/Login/LoginForm/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import {
   Alert,
   AlertIcon,
@@ -10,6 +10,9 @@ import {
   Flex,
 } from "@chakra-ui/react";
 import styled from "styled-components";
+import { useAuth } from "../../../hooks/useAuth";
+import { useNavigate } from "react-router-dom";
+import useFetch from "../../../hooks/useFetch";
 
 const SignUpButton = styled.button`
   color: #e2e8f0;
@@ -29,21 +32,43 @@ interface InputProps {
 interface LoginFormProps {
   idInput: InputProps;
   pwInput: InputProps;
-  loginError: string;
-  setLoginError: React.Dispatch<React.SetStateAction<string>>;
-  handleLogin: () => void;
   toggleSignUpModal: () => void;
 }
 
 const LoginForm: React.FC<LoginFormProps> = ({
   idInput,
   pwInput,
-  loginError,
-  handleLogin,
   toggleSignUpModal,
 }) => {
-  // form 태그로 감싸서 제출 핸들러 추가
-  const handleSubmit = (event: React.FormEvent) => {
+  const [loginError, setLoginError] = useState("");
+  const { setToken } = useAuth();
+  const navigate = useNavigate();
+
+  const { result, loading, statusCode, refresh, error } = useFetch({
+    url: "https://fastcampus-chat.net/login",
+    method: "POST",
+    data: { id: idInput.value, password: pwInput.value },
+    start: false,
+  });
+
+  useEffect(() => {
+    //로그인 욫어 결과 처리
+    if (loading || !result) return;
+
+    if (statusCode === 200) {
+      const { accessToken, refreshToken } = result; // 응답에서 토큰 추출
+      setToken(accessToken, refreshToken, idInput.value); // 토큰 설정
+      navigate("/main");
+    } else {
+      setLoginError("로그인에 실패했습니다. 아이디와 비밀번호를 확인해주세요.");
+    }
+  }, [loading, statusCode, result, error, navigate, setToken, idInput.value]);
+
+  const handleLogin = () => {
+    refresh(); //로그인 요청 시작
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     handleLogin();
   };

diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
@@ -1,19 +1,25 @@
 import { useRecoilState } from "recoil";
 import { authState } from "../recoil/atoms/authState";
+import { userState } from "../recoil/atoms/userState";
 
 export const useAuth = () => {
-  const [auth, setAuth] = useRecoilState(authState);
-
-  // accessToken과 refreshToken을 받아 로컬 스토리지에 저장하고 상태 업데이트
-  const setToken = (accessToken: string, refreshToken: string) => {
+  const [auth, setAuth] = useRecoilState(authState); //사용자 인증 상태
+  const [user, setUser] = useRecoilState(userState); //사용자 정보
+  const setToken = (
+    accessToken: string,
+    refreshToken: string,
+    userId: string,
+  ) => {
     return new Promise<void>((resolve) => {
       localStorage.setItem("accessToken", accessToken);
       localStorage.setItem("refreshToken", refreshToken);
+      localStorage.setItem("userId", userId);
       setAuth({
         accessToken,
         refreshToken,
         isAuthenticated: true,
       });
+      setUser({ id: userId, isLoggedIn: true });
       resolve();
     });
   };
@@ -22,6 +28,7 @@ export const useAuth = () => {
   const logout = () => {
     localStorage.removeItem("accessToken");
     localStorage.removeItem("refreshToken");
+    localStorage.removeItem("userId");
     setAuth({
       accessToken: null,
       refreshToken: null,
@@ -47,7 +54,7 @@ export const useAuth = () => {
 
       const data = await response.json();
       if (response.ok && data.accessToken) {
-        setToken(data.accessToken, refreshToken);
+        setToken(data.accessToken, refreshToken, data.userId); // 새로운 토큰으로 상태 업데이트
       } else {
         throw new Error("Failed to refresh token");
       }
@@ -57,5 +64,5 @@ export const useAuth = () => {
     }
   };
 
-  return { auth, setToken, logout, refreshAccessToken };
+  return { auth, user, setToken, logout, refreshAccessToken };
 };
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
@@ -1,7 +1,4 @@
 import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useAuth } from "../../hooks/useAuth";
-import useFetch from "../../hooks/useFetch";
 import useInput from "../../hooks/useInput";
 import SignUpModal from "../../components/Login/SignUpModal/index";
 import LoginForm from "../../components/Login/LoginForm";
@@ -66,39 +63,14 @@ const Login = () => {
   }, []);
   const idInput = useInput("");
   const pwInput = useInput("");
-  const { setToken } = useAuth();
-  const navigate = useNavigate();
-  const login = useFetch({
-    url: "https://fastcampus-chat.net/login",
-    method: "POST",
-    data: { id: idInput.value, password: pwInput.value },
-    start: false,
-  });
-  const [loginError, setLoginError] = useState("");
+  // const [loginError, setLoginError] = useState("");
 
   const [isSignUpModalOpen, setIsSignUpModalOpen] = useState(false);
   // 모달 토글
   const toggleSignUpModal = () => {
     setIsSignUpModalOpen(!isSignUpModalOpen);
   };
 
-  const handleLogin = () => {
-    login.refresh();
-  };
-
-  useEffect(() => {
-    if (login.result && login.statusCode === 200) {
-      const { accessToken, refreshToken } = login.result;
-      if (accessToken && refreshToken) {
-        setToken(accessToken, refreshToken).then(() => {
-          navigate("/main");
-        });
-      }
-    } else if (login.result && login.statusCode !== 200) {
-      setLoginError("로그인에 실패했습니다. 아이디와 비밀번호를 확인해주세요.");
-    }
-  }, [login.result, login.statusCode, setToken, navigate]);
-
   return (
     <Background>
       <Flex
@@ -111,9 +83,9 @@ const Login = () => {
         <LoginForm
           idInput={idInput}
           pwInput={pwInput}
-          loginError={loginError}
-          setLoginError={setLoginError}
-          handleLogin={handleLogin}
+          // loginError={loginError}
+          // setLoginError={setLoginError}
+          // handleLogin={handleLogin}
           toggleSignUpModal={toggleSignUpModal}
         />
         {isSignUpModalOpen && (

diff --git a/src/pages/Main/user/index.tsx b/src/pages/Main/user/index.tsx
@@ -2,23 +2,25 @@ import { Button } from "@chakra-ui/react";
 import { useRecoilValue } from "recoil";
 import { authState } from "../../../recoil/atoms/authState";
 import { useAuth } from "../../../hooks/useAuth";
+import { userState } from "../../../recoil/atoms/userState";
 import { useNavigate } from "react-router-dom";
 
 const AdminMain = () => {
   console.log("AdminMain 렌더링"); // 컴포넌트 렌더링 확인
-  const { isAuthenticated } = useRecoilValue(authState);
+  const { isAuthenticated } = useRecoilValue(authState); // Recoil의 authState를 통해 인증 여부 확인
   console.log("Is Authenticated:", isAuthenticated);
   const { logout } = useAuth();
   const navigate = useNavigate();
-
+  const user = useRecoilValue(userState); // Recoil의 userState를 통해 사용자 정보 확인
   const handleLogout = () => {
     logout();
     navigate("/");
   };
+  console.log("User ID:", user.id);
   if (isAuthenticated) {
     return (
       <div>
-        <div>성공!!!</div>
+        <div>사용자 ID: {user.id}</div>
         <Button onClick={handleLogout}>로그아웃</Button>
       </div>
     );

diff --git a/src/recoil/atoms/userState.ts b/src/recoil/atoms/userState.ts
@@ -8,7 +8,7 @@ export interface UserState {
 export const userState = atom<UserState>({
   key: "userState",
   default: {
-    id: "",
+    id: localStorage.getItem("userId") || "",
     isLoggedIn: false,
   },
 });