fix: modal routing 충돌 수정

tukcom2023CD · Sep 5, 2023 · 63f45f2 · 63f45f2
1 parent 416aa44
commit 63f45f2
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 60 deletions.
diff --git a/front/src/App.tsx b/front/src/App.tsx
@@ -15,28 +15,32 @@ import Agora from "./pages/agora/Agora";
 import Question from "./pages/agora/Question";
 import Question1 from "./pages/agora/Question1";
 import Question2 from "./pages/agora/Question2";
+import ChangeNickname from "./pages/main/ChangeNickname";
 
 axios.defaults.baseURL = process.env.REACT_APP_BASE_URL;
 axios.defaults.withCredentials = true;
 
 function App() {
   return (
     <BrowserRouter>
-      <Routes>
-        <Route path='/Login' element={<Login />} />
-        <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 />} />
-        <Route path='/' element={<WelcomePage />} />
-      </Routes>
+      <UserProvider>
+        <Routes>
+          <Route path='/Login' element={<Login />} />
+          <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 />} />
+          <Route path='/ChangeNickname' element={<ChangeNickname />} />
+          <Route path='/' element={<WelcomePage />} />
+        </Routes>
+      </UserProvider>
     </BrowserRouter>
   );
 }

diff --git a/front/src/components/frames/token/UserContext.tsx b/front/src/components/frames/token/UserContext.tsx
@@ -5,7 +5,7 @@ import React, {
   useContext,
   useMemo,
 } from "react";
-import Modal from "react-modal";
+import { useNavigate } from "react-router-dom";
 
 type User = {
   token: string;
@@ -32,7 +32,7 @@ export const UserProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const [user, setUser] = useState<User | null>(null);
-  const [modalIsOpen, setIsOpen] = useState(false);
+  const navigate = useNavigate();
 
   useEffect(() => {
     const fetchTokenFromCookie = () => {
@@ -50,54 +50,14 @@ export const UserProvider: React.FC<{ children: React.ReactNode }> = ({
       if (storedNickname) {
         setUser({ token, nickname: storedNickname, isNewUser });
       } else {
-        setIsOpen(true);
         setUser({ token, nickname: "Guest", isNewUser: true });
         localStorage.setItem("isNewUser", "true");
+        navigate("/ChangeNickname");
       }
     }
-  }, []);
-
-  const setNicknameAndHidePopup = (nickname: string) => {
-    if (user) {
-      setUser({ ...user, nickname, isNewUser: false });
-    }
-    localStorage.setItem("nickname", nickname);
-    localStorage.setItem("isNewUser", "false");
-    setIsOpen(false);
-  };
+  }, [navigate]);
 
   const value = useMemo(() => [user, setUser] as UserContextType, [user]);
 
-  return (
-    <UserContext.Provider value={value}>
-      {children}
-      <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>
-  );
+  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
 };
diff --git a/front/src/pages/main/ChangeNickname.tsx b/front/src/pages/main/ChangeNickname.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useUser } from "../../components/frames/token/UserContext";
+
+function ChangeNickname() {
+  const [user, setUser] = useUser();
+  const [nickname, setNickname] = useState("");
+  const navigate = useNavigate();
+
+  const handleNicknameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNickname(e.target.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (user) {
+      setUser({ ...user, nickname, isNewUser: false });
+    }
+    localStorage.setItem("nickname", nickname);
+    localStorage.setItem("isNewUser", "false");
+
+    // '/TeamList' 로 리다이렉션
+    navigate("/TeamList");
+  };
+
+  return (
+    <div className='w-[100vw] h-[100vh] flex justify-center items-center fixed bg-[#404040]'>
+      <form
+        className='border flex flex-col justify-center items-center m-auto bg-white w-[480px] h-[600px] rounded-[30px]'
+        onSubmit={handleSubmit}
+      >
+        <label
+          htmlFor='summary'
+          className='mb-4 w-[430px] font-bold text-[20px]'
+        >
+          닉네임 변경
+          <input
+            type='text'
+            placeholder='닉네임을 입력하세요.'
+            className='text-[20px] w-[430px] border-b-2'
+            onChange={handleNicknameChange}
+            value={nickname}
+          />
+        </label>
+        <button
+          type='submit'
+          className='flex justify-center items-center w-[100px] h-[40px] rounded-[10px] bg-[#4A4A4A] text-white text-[15px]'
+        >
+          변경하기
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default ChangeNickname;