반응형 처리하기

일반적인 media query를 사용해도 되지만 조금 더 쉽게 할 수 있는 라이브러리를 사용하기로 했다.

https://www.npmjs.com/package/react-responsive

 npm install react-responsive --save
 npm install @types/react-responsive --save

useMediaQuery

media query 조건에 따라 true, false를 반환하는 hook

조건부로 렌더링하고 싶다면 다음과 같이 사용하면 된다.

import { useMediaQuery } from "react-responsive";
function SidebarPage(props: pageProps) {
  const isLess1200 = useMediaQuery({ maxWidth: 1200 });

  return (
	{isLess1200 && ....}
  );
  
}

전체 코드는 다음과 같다. 크게 어렵지 않게 사용할 수 있다!

import { styled } from "styled-components";
import { useMediaQuery } from "react-responsive";

import GroupPage from "./GroupPage";
import ProfilePage from "./ProfilePage";
import MemoBtn from "./MemoBtn";
import CalenderBtn from "./CalenderBtn";

type pageProps = { className: string };

function SidebarPage(props: pageProps) {
  const isLess1200 = useMediaQuery({ maxWidth: 1200 });

  return (
    <div className={props.className}>
      <ProfilePage />
      <GroupPage />
      {isLess1200 && (
        <BtnWrapper>
          <MemoBtn />
          <CalenderBtn />
        </BtnWrapper>
      )}
    </div>
  );
}

export default SidebarPage;

const BtnWrapper = styled.div`
  position: absolute;
  top: 89%;
  left: 20px;
  display: flex;
  gap: 10%;
  z-index: 999;
  @media (max-width: 1200px) {
    left: 30px;
  }
`;