[공통] useMediaQuery 추가 및 공통 페이지 모바일 뷰 추가

[dooohun]

[Copy here issue number] request

• 공통으로 사용하는 sidebar, topbar의 모바일 뷰 css 추가 (글씨 크기 및 버튼 크기, 사이드바 전체 크기를 알맞게 수정)
• useMediaQuery 추가

Please check if the PR fulfills these requirements

• The commit message follows our guidelines
• Did you merge recent main branch?

Screenshot

Topbar에서 가장 긴 타이틀을 예시로 가져왔습니다.

Precautions (main files for this PR ...)

• emotion에서 사용하는 방식이 기존 scss와 달라 사용하는 방법 공유드립니다.
  useMediaQuery에 mobile을 통해 모바일 css를 따로 추가할 수 있습니다.

import { mobile } from 'util/hooks/useMediaQuery';

export const buttonContainer = css`
  display: flex;
  justify-content: flex-end;
  gap: 20px;

  ${mobile} {
    button {
      font-size: 12px;
      width: 65px;
      height: 35px;
      padding: 0;
    }
  }
`;

• Close #ISSUE_NUMBER

[chaeseungyun]

굿~

[MinGu-Jeong]

이제 모바일에서도 사용할 수 있겠네요 수고하셨습니다~