fix: 닉네임 변경 팝업창

tukcom2023CD · Sep 3, 2023 · d2249ee · d2249ee
1 parent fdb9d58
commit d2249ee
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 5 deletions.
diff --git a/front/src/components/frames/token/UserContext.tsx b/front/src/components/frames/token/UserContext.tsx
@@ -9,6 +9,7 @@ import React, {
 type User = {
   token: string;
   nickname: string;
+  isNewUser: boolean;
 };
 
 type UserContextType = [
@@ -30,18 +31,47 @@ export const UserProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const [user, setUser] = useState<User | null>(null);
+  const [showNicknamePopup, setShowNicknamePopup] = useState(false);
 
   useEffect(() => {
     const isLoginSuccessful = true;
 
     if (isLoginSuccessful) {
       const token = "some_token";
-      const nickname = "최정훈";
-      setUser({ token, nickname });
+      const storedNickname = localStorage.getItem("nickname");
+
+      if (storedNickname) {
+        setUser({ token, nickname: storedNickname, isNewUser: false });
+      } else {
+        setShowNicknamePopup(true);
+        setUser({ token, nickname: "Guest", isNewUser: true });
+      }
     }
   }, []);
 
+  const setNicknameAndHidePopup = (nickname: string) => {
+    if (user) {
+      setUser({ ...user, nickname });
+    }
+    localStorage.setItem("nickname", nickname);
+    setShowNicknamePopup(false);
+  };
+
   const value = useMemo(() => [user, setUser] as UserContextType, [user]);
 
-  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
+  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>
+      )}
+    </UserContext.Provider>
+  );
 };
diff --git a/front/src/pages/main/TeamList.tsx b/front/src/pages/main/TeamList.tsx
@@ -7,9 +7,9 @@ function TeamList() {
 
   useEffect(() => {
     if (user) {
-      console.log("Changed nickname: ", user.nickname);
+      console.log("Changed nickname:", user.nickname);
     }
-  }, [user]);
+  }, [user?.nickname]);
 
   return (
     <div className='flex flex-col justify-center items-center m-auto w-[100vw] h-[100vh]'>