feat: 멤버 상태 변경 기능

[surinkwon]

🎟️ 태스크

자리비움 상태 변경 로직 작성
클라이언트에서 프로젝트에 새로 추가된 멤버 표시 로직 작성
클라이언트 접속 상태 변경 로직 작성

✅ 작업 내용

• 추가된 멤버 표시
• 접속 상태 변경
• 자리 비움 상태 자동 변경

🖊️ 구체적인 작업

접속 상태 변경, 추가된 멤버 표시

• API 스펙에 맞춰 event를 emit하고, 감지해 변경하도록 했습니다. 멤버 상태는 LandingMember 한 곳이 아니라 다른 곳에서도 접근이 필요해 zustand를 통한 전역 상태로 관리하도록 했습니다.
• useLandingSocket에 정의되어 있던 myInfo, memberList 업데이트를 LandingMember 내의 useUpdateUserStatus로 옮겨 LandingMember 내에서 다룰 수 있게 수정했습니다.

자리 비움 상태 자동 변경

• 사용자의 상태는 LandingPage에서 만이 아니라 다른 페이지에서도 확인할 수 있어야 하므로 MainPage에서 자동 상태 변경 로직을 처리하도록 했습니다.
• throttle을 이용해서 이벤트 감지 횟수를 줄였습니다. 많은 이벤트가 짧은 시간에 발생하기 때문에 debounce를 써도 여전히 timeout 관련 동작이 많이 발생할 것이라 생각해 정해진 시간 동안 한 번만 감지하도록 throttle을 사용했습니다.
• 사용자가 직접 자리 비움 상태로 변경한 경우 이벤트 리스너를 제거해 움직임을 감지하지 않도록 했습니다.(다시 자동으로 접속 중으로 변경되는 것 방지)

🤔 고민 및 의논할 거리

• 여러 로직이 얽혀있다보니 코드가 복잡하고 이해하기 어려워 진 것 같습니다. 자동으로 상태가 변경될 시 이것이 유저 상태 dropdown에도 반영되어야 하기 때문에 useDropdown에서 handleChangeSelectedOption을 반환해 외부에서도 selectedOption 값을 바꿀 수 있도록 했습니다. 이처럼 원래 있던 코드에 동작을 위한 코드를 추가할 때 어떤 방법으로 추가할지 고민이 됩니다. 재설계가 필요할 것 같기도 합니다.

📸 결과 화면

• 자동 상태 변경 => 테스트를 위해 상태가 변경되는 시간을 줄인 후 테스트한 결과입니다.