[Library Project] Responsive Web

Responsive

반응형의 고려 사항은 Desktop Tablet Mobile 를 기준으로 고려한다.

• Desktop: 1024px 이상
• Tablet: 1024px / 768px
• Mobile: 450px / 320px

Media Query 활용 방법

Styled-component의 themeProvider를 활용해서 필요한 반응형의 분기를 정해진 규격에 맞춰서 활용한다.

• Theme

const deviceSizes = {
  mobileS: "320px",
  mobileM: "375px",
  mobileL: "450px",
  tablet: "768px",
  tabletL: "1024px",
};

const device = {
  mobileS: `only screen and (max-width: ${deviceSizes.mobileS})`,
  mobileM: `only screen and (max-width: ${deviceSizes.mobileM})`,
  mobileL: `only screen and (max-width: ${deviceSizes.mobileL})`,
  tablet: `only screen and (max-width: ${deviceSizes.tablet})`,
  tabletL: `only screen and (max-width: ${deviceSizes.tabletL})`,
};

• 컴포넌트 내부에서의 활용

  @media ${({ theme: { device } }) => device.tabletL} {
    .book_item {
      width: 33.3333%;
    }
  }

  @media ${({ theme: { device } }) => device.mobileL} {
    .book_item {
      width: 100%;
    }
  }

Custom hook을 활용한 반응형 활용

• useMediaQuery
  useMediaQuery를 활용해서 현재 Device의 크기에 따라서 Boolean Type 또는 다양한 데이터를 Return할 수 있는 Custom hook

import { useState, useEffect } from "react";
import { useMediaQuery } from "react-responsive";

export const useIsMobile = () => {
  const isMobileQueryResult = useMediaQuery({ maxWidth: "450px" });
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    setIsMobile(isMobileQueryResult);
  }, [isMobileQueryResult]);

  return isMobile;
};

프로젝트 내부에서 반응형 고려사항

• Carousel View
• Grid Style Book List
• Navbar / Search Input
• 전체적인 width의 범위