Merge branch 'dev/front/finalDemo' into main

tukcom2023CD · Sep 3, 2023 · d85f4f4 · d85f4f4
2 parents ce91281 + f02bf79
commit d85f4f4
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 40 deletions.
diff --git a/front/src/App.tsx b/front/src/App.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
 import axios from "axios";
-import { UserProvider } from "./components/frames/token/UserContext";
+import { UserProvider, useUser } from "./components/frames/token/UserContext";
 import WelcomePage from "./pages/main/WelcomePage";
 import TeamList from "./pages/main/TeamList";
 import DashBoard from "./pages/main/DashBoard";
@@ -18,32 +18,42 @@ import Question2 from "./pages/agora/Question2";
 
 axios.defaults.baseURL = process.env.REACT_APP_BASE_URL;
 axios.defaults.withCredentials = true;
+
+function AppRoutes() {
+  const [user] = useUser();
+
+  if (user) {
+    return (
+      <Routes>
+        <Route path='/' element={<Navigate to='/TeamList' />} />
+        <Route path='/TeamList' element={<TeamList />} />
+        <Route path='/DashBoard' element={<DashBoard />} />
+        <Route path='/Project' element={<Project />} />
+        <Route path='/Sprint' element={<Sprint />} />
+        <Route path='/Task' element={<Task />} />
+        <Route path='/Members' element={<Members />} />
+        <Route path='/Graph' element={<Graph />} />
+        <Route path='/Agora' element={<Agora />} />
+        <Route path='/Question' element={<Question />} />
+        <Route path='/Question1' element={<Question1 />} />
+        <Route path='/Question2' element={<Question2 />} />
+      </Routes>
+    );
+  }
+  return (
+    <Routes>
+      <Route path='/' element={<WelcomePage />} />
+      <Route path='/Login' element={<Login />} />
+      <Route path='*' element={<Navigate to='/' />} />
+    </Routes>
+  );
+}
+
 function App() {
   return (
     <UserProvider>
       <BrowserRouter>
-        <Routes>
-          {/** 메인 페이지 및 로그인 페이지 */}
-          <Route path='/' element={<WelcomePage />} />
-          <Route path='/TeamList' element={<TeamList />} />
-          <Route path='/DashBoard' element={<DashBoard />} />
-          <Route path='/Login' element={<Login />} />
-          {/** 프로젝트 페이지 */}
-          <Route path='/Project' element={<Project />} />
-          {/** 스프린트 페이지 */}
-          <Route path='/Sprint' element={<Sprint />} />
-          {/** 테스크 페이지 */}
-          <Route path='/Task' element={<Task />} />
-          {/** 멤버 페이지 */}
-          <Route path='/Members' element={<Members />} />
-          {/** 성과분석 결과 페이지 */}
-          <Route path='/Graph' element={<Graph />} />
-          {/** 아고라 페이지 */}
-          <Route path='/Agora' element={<Agora />} />
-          <Route path='/Question' element={<Question />} />
-          <Route path='/Question1' element={<Question1 />} />
-          <Route path='/Question2' element={<Question2 />} />
-        </Routes>
+        <AppRoutes />
       </BrowserRouter>
     </UserProvider>
   );

diff --git a/front/src/components/frames/token/UserContext.tsx b/front/src/components/frames/token/UserContext.tsx
@@ -5,6 +5,7 @@ import React, {
   useContext,
   useMemo,
 } from "react";
+import Modal from "react-modal";
 
 type User = {
   token: string;
@@ -31,47 +32,63 @@ export const UserProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const [user, setUser] = useState<User | null>(null);
-  const [showNicknamePopup, setShowNicknamePopup] = useState(false);
+  const [modalIsOpen, setIsOpen] = useState(false);
+  const [isLoginSuccessful, setIsLoginSuccessful] = useState(false);
 
   useEffect(() => {
-    const isLoginSuccessful = true;
-
     if (isLoginSuccessful) {
       const token = "some_token";
       const storedNickname = localStorage.getItem("nickname");
 
       if (storedNickname) {
         setUser({ token, nickname: storedNickname, isNewUser: false });
       } else {
-        setShowNicknamePopup(true);
+        setIsOpen(true);
         setUser({ token, nickname: "Guest", isNewUser: true });
       }
     }
-  }, []);
+  }, [isLoginSuccessful]);
 
   const setNicknameAndHidePopup = (nickname: string) => {
     if (user) {
       setUser({ ...user, nickname });
     }
     localStorage.setItem("nickname", nickname);
-    setShowNicknamePopup(false);
+    setIsOpen(false);
   };
 
   const value = useMemo(() => [user, setUser] as UserContextType, [user]);
 
   return (
     <UserContext.Provider value={value}>
       {children}
-      {showNicknamePopup && (
-        <div>
-          <h2>Please set your nickname</h2>
-          <input
-            type='text'
-            placeholder='Enter your nickname'
-            onBlur={(e) => setNicknameAndHidePopup(e.target.value)}
-          />
-        </div>
-      )}
+      <Modal
+        className='w-[100vw] h-[100vh] flex justify-center items-center fixed bg-[#404040]'
+        isOpen={modalIsOpen}
+        onRequestClose={() => setIsOpen(false)}
+        contentLabel='Nickname Modal'
+      >
+        <form className='border flex flex-col justify-center items-center m-auto bg-white w-[480px] h-[600px] rounded-[30px]'>
+          <label
+            htmlFor='summary'
+            className='mb-4 w-[430px] font-bold text-[20px]'
+          >
+            닉네임 변경
+            <input
+              type='text'
+              placeholder='닉네임을 입력하세요.'
+              className='text-[20px] w-[430px] border-b-2'
+              onBlur={(e) => setNicknameAndHidePopup(e.target.value)}
+            />
+          </label>
+          <button
+            type='submit'
+            className='flex justify-center items-center w-[100px] h-[40px] rounded-[10px] bg-[#4A4A4A] text-white text-[15px]'
+          >
+            변경하기
+          </button>
+        </form>
+      </Modal>
     </UserContext.Provider>
   );
 };