Feature/#91: 대기방 리스트 화면 UI 구현

[minjeongss]

#️⃣ 연관된 이슈

#91

📝 작업 내용

대기방 리스트 화면 UI를 구현했습니다. 구체적인 구현은 다음과 같습니다.

• 대기방 리스트 화면 전용 commonPage의 pageWrapper 생성
• 호스트의 캐릭터를 반영하여 배경 설정
• 기존에 문제가 되었던 grid 레이아웃 재설정
  • 피그마에 존재하는 카드 컴포넌트의 width 무시
  • 피그마에 존재하는 화면의 좌우 padding 값, 카드 컴포넌트 사이 간격 반

📸 스크린샷

화면	레이아웃

💬 리뷰 요구사항

• 디자이너님께 배경화면을 받은 후, 변경된 배경화면 적용은 API 연결 파트에서 진행할 예정입니다.
• 캐릭터의 타입이 5가지라고 알고 있는데, 더 존재한다면 알려주세요!
  • 현재 대기방 리스트에서 반영할 수 있는 호스트 캐릭터 정보

  import BasicIcon from '@styles/Icon/waitingRoomList/basic.png';
  import AngularIcon from '@styles/Icon/waitingRoomList/angular.png';
  import BumpyIcon from '@styles/Icon/waitingRoomList/bumpy.png';
  import DotIcon from '@styles/Icon/waitingRoomList/dot.png';
  import WoolIcon from '@styles/Icon/waitingRoomList/wool.png';
  

[minjeongss]

Next의 Image는 onClick 이벤트가 직접적으로 등록이 되지 않아서, 상위 컴포넌트로부터 props을 onClick을 받아 div에서 처리하도록 설정했습니다.
Image의 Icon을 활용하시는 분들에게 도움이 되지 않을까 싶어 comment 추가적으로 남깁니다. 😁

[aaahyesu]

기존 피그마 디자인과 비교했을때, 캐릭터 위치는 반영이 안된 것 같아요 🥹

화면	시안

[minjeongss]

호스트 캐릭터 위치를 우측으로 변경했어요!
피그마에서 ref가 아닌 frame desing 2.0엔 3R가 blue가 아닌 brown이어서, 이 친구도 추가했습니다! 😆

@aaahyesu