Feat/room info start: 방 시작 로직

[Lukaid-dev]

Checklist

• Code Review: 작성한 코드를 다시 한 번 꼼꼼이 확인했나요?
• Testing: 앱이 잘 구동되는지 개발한 기능이 문제 없이 작동하는지 확인했나요?
• Remove: print나 주석 등 필요없는 코드를 삭제했나요?
• Rebase: (필요시) rebase를 완료했나요?
• Conflict Resolution: 충돌을 해결하는 과정을 거쳤나요?

Description

socket room-info 이벤트 및 room start로직 작업한 내용입니다

일단 시작 잘 되고 time over도 잘 되는데, time over후 제출 되어도 스코어보드에 반영하지 않도록 하는 로직이 추가적으로 필요해 보입니다.

Changes Made

client

client/src/components/Room/ProblemLists.tsx

• 이게 Problems.tsx에서 경우의 수가 상당히 많아져서 이녀석을 따로 뻈습니다.

client/src/components/Room/Problems.tsx

• 호스트인지 여부, 게임이 시작되었는지 여부에 따라 4가지 경우가 생겨서 이를 따로 따로 리턴하게 변경했습니다.

client/src/components/Room/RoomSettingModal/RoomSettingModal.tsx

• 기존에 문제만 세팅하던 것에서, 시간도 세팅하도록 변경하였습니다.

client/src/components/Room/Timer.tsx

• 타이머입니다. 구현이 조금 빡셌는데, 한번 슥 읽어보시면 대충 어떻게 동작하는지 감이 오실 겁니다.

client/src/components/buttons/StartButton.tsx

• 시작버튼도 경우의 수에 따라 렌더를 달리하고, 문제와 시간을 설정하지 않으면 넘어가지 않게 세팅했습니다.

client/src/contexts/RoomProvider.tsx

• 대부분의 로직을 담당하는 RoomProvider입니다. 이녀석 하위에서 쓰는 Props들 다 들고있고, setRoomInfo(newRoomInfo);로 새로 받아온 roomInfo도 적용시켜줍니다.
• 이때 roomInfo안에 problems가 있는데 중복되는 것 아니냐고 생각하실 수 있는데, problems를 따로 관리해서 의도치 않은 렌더가 일어나는 것을 방지하기 위함입니다.

server

server/src/problem/problem.service.ts

• 백준 문제 번호의 리스트가 주어졌을 때 문제들을 모두 가져오는 동적쿼리를 작성했습니다.

server/src/socket/socket.gateway.ts

• 너무 많은 로그와 채팅을 간소화하고 간단하게 리팩토링했습니다.
• RoomInfo를 RoomInfoType으로 프론트와 통일했습니다.
• client.request에서 user를 추출하는 함수 getUser를 만들어 재사용하고 있습니다.
• handleGameStart에서, client.request.user를 그대로 재사용하면 엔티티에 디비 신규 내용이 업데이트되지 않는 문제가 있어, 유저를 디비에서 다시 받아와야합니다.

server/src/socket/socket.service.ts

• notifyJoiningRoom
• notifyExitingRoom
  두 함수를 구현하고 유저가 참가 / 퇴장할 때마다 room-info 이벤트를 emit합니다.

Extra Comments

Demo

2023-12-12.12.54.52.mov

[glowisn]

LGTM!

[sjn0910]

lgtm

[glowisn]

👍

[kiuuon]

LGTM!