fix: Multiple nicknames error fixed.

gurubu-client/src/app/components/room/grooming-board-profile.tsx

@@ -3,6 +3,13 @@ import { IconUserCircle } from "@tabler/icons-react";
 import { useGroomingRoom } from "../../contexts/GroomingRoomContext";
 import { useSocket } from "../../contexts/SocketContext";
 
+type NicknameData = [
+  {
+    roomId: string;
+    nickname: string;
+  }
+];
+
 const GroomingBoardProfile = () => {
   const socket = useSocket();
   const { userInfo, setUserinfo } = useGroomingRoom();
@@ -23,9 +30,20 @@ const GroomingBoardProfile = () => {
 
   const handleUpdateNicknameButtonClick = () => {
     if (newNickname.trim()) {
-      socket.emit("updateNickName", userInfo.lobby.roomID, newNickname, userInfo.lobby.credentials);
+      socket.emit(
+        "updateNickName",
+        userInfo.lobby.roomID,
+        newNickname.trim(),
+        userInfo.lobby.credentials
+      );
       setUserinfo({ ...userInfo, nickname: newNickname.trim() });
-      localStorage.setItem("nickname", newNickname.trim());
+      const nicknameData = JSON.parse(
+        localStorage.getItem("nickname") || "[]"
+      ) as NicknameData;
+      nicknameData.find(
+        (item) => item.roomId === userInfo.lobby.roomID
+      )!.nickname = newNickname.trim();
+      localStorage.setItem("nickname", JSON.stringify(nicknameData));
     }
   };
 

gurubu-client/src/app/components/room/nickname-form.tsx

@@ -10,16 +10,8 @@ interface IProps {
   roomId?: string;
 }
 
-const defaultNickname = () => {
-  return (
-    (typeof window !== "undefined" &&
-      window.localStorage.getItem("nickname")) ||
-    ""
-  );
-};
-
 const NicknameForm = ({ joinMode, roomId }: IProps) => {
-  const [nickname, setNickname] = useState(defaultNickname);
+  const [nickname, setNickname] = useState("");
   const [groomingType, setGroomingType] = useState<null | string>(null);
   const [errorMessage, setErrorMessage] = useState("");
   const [showInfoMessage, setShowInfoMessage] = useState(false);
@@ -46,9 +38,15 @@ const NicknameForm = ({ joinMode, roomId }: IProps) => {
     if (trimmedNickName === "") {
       return;
     }
-    localStorage.setItem("nickname", trimmedNickName);
+
     const payload = { nickName: trimmedNickName, groomingType };
     const response = await roomService.createRoom(payload);
+    const nicknameData = JSON.parse(localStorage.getItem("nickname") || "[]");
+    nicknameData.push({
+      roomId: response.roomID,
+      nickname: trimmedNickName,
+    });
+    localStorage.setItem("nickname", JSON.stringify(nicknameData));
 
     if (!response) {
       return;
@@ -80,7 +78,12 @@ const NicknameForm = ({ joinMode, roomId }: IProps) => {
     if (trimmedNickName === "" || !roomId) {
       return;
     }
-    localStorage.setItem("nickname", trimmedNickName);
+    const nicknameData = JSON.parse(localStorage.getItem("nickname") || "[]");
+    nicknameData.push({
+      roomId,
+      nickname: trimmedNickName,
+    });
+    localStorage.setItem("nickname", JSON.stringify(nicknameData));
     const payload = { nickName: trimmedNickName };
     const response = await roomService.join(roomId, payload);
 
@@ -194,7 +197,9 @@ const NicknameForm = ({ joinMode, roomId }: IProps) => {
           {joinMode ? "Join Room" : "Create Room"}
         </button>
         {showInfoMessage && (
-          <p className="nickname-form__info-message">{joinMode ? "Joining Room..." : "Creating Room..."}</p>
+          <p className="nickname-form__info-message">
+            {joinMode ? "Joining Room..." : "Creating Room..."}
+          </p>
         )}
       </div>
     </div>

gurubu-client/src/app/contexts/GroomingRoomContext.tsx

@@ -8,7 +8,12 @@ import React, {
 } from "react";
 import { ROOM_STATUS } from "../room/[id]/enums";
 import { getCurrentLobby } from "../shared/helpers/lobbyStorage";
-import { EncounteredError, GroomingInfo, UserInfo, UserVote } from "../shared/interfaces";
+import {
+  EncounteredError,
+  GroomingInfo,
+  UserInfo,
+  UserVote,
+} from "../shared/interfaces";
 
 interface GroomingContextValues {
   roomStatus: keyof typeof ROOM_STATUS;
@@ -25,6 +30,13 @@ interface GroomingContextValues {
   setShowErrorPopup: Function;
 }
 
+type NicknameData = [
+  {
+    roomId: string;
+    nickname: string;
+  }
+];
+
 const GroomingRoomContext = createContext({} as GroomingContextValues);
 
 export function useGroomingRoom() {
@@ -39,19 +51,24 @@ export function GroomingRoomProvider({
   const [userInfo, setUserinfo] = useState({} as UserInfo);
   const [groomingInfo, setGroomingInfo] = useState({} as GroomingInfo);
   const [userVote, setUserVote] = useState({} as UserVote);
-  const [encounteredError, setEncounteredError] = useState({} as EncounteredError);
+  const [encounteredError, setEncounteredError] = useState(
+    {} as EncounteredError
+  );
   const [showErrorPopup, setShowErrorPopup] = useState(false);
 
   useEffect(() => {
-    const nickname = localStorage.getItem("nickname");
+    const nickname = JSON.parse(
+      localStorage.getItem("nickname") || "[]"
+    ) as NicknameData;
     const lobby = getCurrentLobby(roomId);
 
     if (!nickname || !lobby) {
       return;
     }
 
     setUserinfo({
-      nickname,
+      nickname:
+        nickname.find((item) => item.roomId === roomId)?.nickname || "user",
       lobby,
     });
   }, [roomId]);
@@ -69,7 +86,7 @@ export function GroomingRoomProvider({
       encounteredError,
       setEncounteredError,
       showErrorPopup,
-      setShowErrorPopup
+      setShowErrorPopup,
     }),
     [
       roomStatus,
@@ -83,7 +100,7 @@ export function GroomingRoomProvider({
       encounteredError,
       setEncounteredError,
       showErrorPopup,
-      setShowErrorPopup
+      setShowErrorPopup,
     ]
   );
   return (