feat: 대기열 등록 버튼 구현

[Klomachenko]

관련 이슈

12

구현한 내용

설명

• 대기열 등록 버튼을 구현하였습니다
• Figma 디자인 가이드에 맞추어 버튼들에 대한 색상 및 폰트를 수정하였습니다
  • 수정한 버튼은 FooterTabButton 입니다.

    사진

    

    리뷰어에게...

    컴포넌트 분리 관련

• 아래의 FooterTabButton, JoinQueueButton은 이제 한 묶음으로 나누어서 분리하는 방법이 나중에 확인하기 더 편하다고 생각됩니다.
• 특히 Layout이라는 컴포넌트를 만들어서, 해당 부분 하단에 button 묶음 컴포넌트를 추가하면 되겠다는 생각입니다.
• 도식화하면 아래와 같습니다

  Layout
  └── Button Components
  ├── FooterTabButton
  └── JoinQueueButton

• 위와 같이 진행하고 Layout 안에 올 것들은 그때그때 아래와 같이 변경해주면 될 것 같다는 생각입니다.
  • MatchingListPage의 경우엔 Button 묶음 컴포넌트
  • ChattingPage의 경우엔 채팅 입력 Input 컴포넌트

    CSS관련

• 모바일 디자인은 항상 쉽지 않군요... 잘 봐주셔서 감사합니다.
• 혹시 모바일 페이지만 구현해 보신 레포가 있으시다면 추천해주시면 열심히 찾아보겠습니다.

  
  const JoinButtonBox = styled.div`
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translate(-50%, 50%);
  z-index: 1;
  `;

- 위와 같이 항상 styled component 비슷한 css 라이브러리를 사용하며 느끼는 점인데 저런 `JoinButtonBox`는 굳이 필요가 없음에도 항상 추가되는 느낌이 있습니다. 혹여 저런 것이 잘못된 부분인지, 아니면 css in js 라이브러리의 한계인지 궁금합니다.