diff --git a/gurubu-client/src/app/components/room/grooming-board-profile.tsx b/gurubu-client/src/app/components/room/grooming-board-profile.tsx index a17cfba..d5e14e4 100644 --- a/gurubu-client/src/app/components/room/grooming-board-profile.tsx +++ b/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)); } }; diff --git a/gurubu-client/src/app/components/room/nickname-form.tsx b/gurubu-client/src/app/components/room/nickname-form.tsx index 8bdff7d..7853ebb 100644 --- a/gurubu-client/src/app/components/room/nickname-form.tsx +++ b/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); 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"} {showInfoMessage && ( -

{joinMode ? "Joining Room..." : "Creating Room..."}

+

+ {joinMode ? "Joining Room..." : "Creating Room..."} +

)} diff --git a/gurubu-client/src/app/contexts/GroomingRoomContext.tsx b/gurubu-client/src/app/contexts/GroomingRoomContext.tsx index b56f287..b1f3da1 100644 --- a/gurubu-client/src/app/contexts/GroomingRoomContext.tsx +++ b/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,11 +51,15 @@ 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) { @@ -51,7 +67,8 @@ export function GroomingRoomProvider({ } 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 (