[React] React-resposive 프로젝트 적용

계기

 

- 팀 프로젝트 했을 때, 반응형 처리를 못한 게 아쉬워서 간단하게 나마 반응형 처리를 해주었다.

 

 

결과

 

적용 전

 

 

 

 

적용 후

 

- 원래 크기가 어떻게 되든 옆에 있는 메뉴바도 뭉개졌었는데,

일정 크기 이하로 작아지면 1. 메뉴바가 사라지고 2. 게시글 창 크기가 줄어들게끔 작업해주었다.

 

 

 

라이브러리 설치

yarn add @types/react-responsive

 

 

 

 

적용 코드

  // Layout.tsx
  
  const isDeskTop = useMediaQuery({ minWidth: 1200 });
  
    isDeskTop && (
                  <>
                    <SideBar />
                  </>
                  
                  
                  
//ContentBox.tsx

  // 화면 크기에 따라 Container의 너비를 설정
  const isDeskTop = useMediaQuery({ minWidth: 915 });
  
  
   PostTitle: styled.div<{ isDeskTop: boolean }>`
      width: ${(props) => (props.isDeskTop ? '790px' : '500px')};
    margin: 36px 0px 0px 0px;

    display: flex;
    align-items: center;

    color: var(--black, #242424);
    ${(props) =>
      props.isDeskTop
        ? css`
            ${styleFont.titleLarge}
          `
        : css`
            ${styleFont.titleSmall}
          `};
  `,