다음은 서핑에 참여 할 수 있는 방리스트가 있는 Board 페이지(서핑참여하기)와 나의 방 목록이다.
- "서핑 참여하기" 버튼을 누르면 나오는 Board화면이다.
화면렌더 후 ComponentDidMount로 모든방에 대한 정보를 server에 요청, 응답받은 방의 정보를 렌더한다.
- "모든지역" 버튼의 드롭다운메뉴에서 서핑지역에 맞게 필터링 후 state를 변경하고 필터링 된 것들을 렌더해 준다.
이 것은 Room을 선택해 방을 만든 사람이 해당 Room에 들어가 삭제하고 다시 Board화면으로 오면 즉시 삭제한 내용을 반영한다.
- 리스트의 방을 누르면 해당 Room으로 넘어간다.
- Main화면에서 "나의 방 목록"을 선택하면 아래 그림과 같이 componentDidMount에서 유저토큰을 사용하여 database의 해당 유저가 만들었거나 참여한 방 목록을 불러와 렌더한다.