socketRef.current.on('refresh friend list', (nickname: string) => {
        console.log(profile.nickname, '댄싱댄싱');
        console.log(nickname, '댄싱댄싱2');

        dispatch(getFriendList({ nickname: profile.nickname as string }));
      });

닉네임 변경 시, profilePage에서 socket 이벤트 중 setNickname을 emit하면서 socket에 있는 userName을 바꿔준다.

이를 통해, 현재 접속자를 출력하는 부분에 닉네임 변경 시, 반영되는 것을 해결했는데 게임 방에 들어가면 변경 전 이름이 뜨는 버그가 발생했다.

SocketContext.tsx

const { profile, auth } = useAuth();

socketRef.current.on(
        'join room:success',
        (roomID: string, isStartedGame: boolean, **nickname: string**) => {
          socketRef.current.emit('send message', {
            roomID,
            from: 'socket-server',
						~~message: `${profile.nickname}님이 입장하셨습니다.`,~~
            **message: `${nickname}님이 입장하셨습니다.`,**
            id: nanoid(),
          });
          setIsStartedGame(isStartedGame);
          setIsValidRoom(true);
          dispatch(updateRoomID(roomID));
          navigate(`/game/${roomID}`);
        }
      );

보니까 SocketContext에서 {profile} = useAuth() 부분이 한 번만 초기화가 되어서 닉네임을 변경했음에도 불구하고, profile.nickname은 계속해서 옛날 닉네임을 가리키고 있어서 일어난 문제였다.

이 뿐만 아니라, 닉네임 변경 시에 정말 많은 곳에서 버그가 발생했다^^

예로 12라는 유저가 굿굿 이라는 유저한테 친구 신청을 걸고, 닉네임을 친구건애 로 바꿔버리면..

굿굿 유저의 친구신청 목록에는 12 유저가 친구신청을 걸었다고 뜨고 이를 수락하면 오류가 난다!

그렇다.. friend_request DB에는 분명 oauth_id가 들어가있지만, 우리가 쿼리를 날릴 때는 서브쿼리 방식으로 nickname을 기준으로 oauth_id를 받아오고, 그걸로 friend_request를 select하는 방식으로 코드를 짰기 때문에.....

12라는 닉네임이 이미 DB에서 사라지고 난 뒤라서, 찾을 수가 없는 것이다...

그래서 이 부분도 직접 인자 값으로 nickname을 넘겨주도록 수정했다.