Feat/UI room setting

[Lukaid-dev]

Checklist

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

Description

Room쪽 ui및 로직 다수 수정했습니다. 추가적으로 방 안에서 문제들 가져오는 로직은 웹소켓에 조금 더 적응 되고 다시 보겠습니다. 내일 같이 얘기해보면서 소켓 붙여봐야 알거같아요

Changes Made

• client/src/components/Problems.tsx
  • 방에 입장하는 유저가 host권한을 들고있는지에 따라 다른 ui를 보여줌
• client/src/components/RoomAccessPanel.tsx
  • 각 버튼별 로직에 맞게 수정
• client/src/components/RoomCode.tsx
  • room code 보여주는 컴포넌트
• client/src/components/RoomSettingModal/RoomSettingModal.tsx
  • 모달의 헤더부분 수정
• client/src/components/buttons/RoomCreateButton.tsx
  • navigate 함수를 이용해서 라우팅 및 state전달, 추후에 서버 로직에 맞게 변경 예정
• client/src/components/buttons/RoomJoinButton.tsx
  • 상동
• client/src/pages/Room.tsx
  • UI변경 및 host를 prop으로 넘겨주게 변경

Extra Comments

UI를 좀 많이 손댔습니다. 제 생각에 편할 것 같은 방향으로 수정했는데 피드백 환영입니다.

추가적으로 룸 안에서 문제추가 로직과 해당 문제로 라우트해주는 기능이 혼재되어있는데 이것도 내일 이후에 수정, 추가 하겠습니다.

Demo

2023-11-27.11.26.13.mov

[glowisn]

LGTM! 컨플릭트만 잡았는데 기원님 리뷰 받으시고 머지하시면 될 거 같습니다

[kiuuon]

LGTM!

[crongro]

수고가 많으셔요~ 화이팅~

[kiuuon]

LGTM!