들어가기전에..

• 프리프로젝트때 너무 정신이 없어서 블로그 정리를 못해서 메인프로젝트 기간에 틈틈히 블로깅하고자 한다.
• 사실 그리드를 잘못해서 구글링을 엄청했다..
• 반응형은 1345px 이상에서는 4개씩 1028px이상에서는 3개씩 711px이상에서는 2개 그이하에서는 1개의 Tags가 보이게 구현했다.
• minmax(0, 1fr)
  • 트랙이 그리드 컨테이너에서 갭을 뺀 공간을 동일하게 공유하도록 하려면 minmax를 사용
  • 트랙 크기로 1fr을 minmax(0, 1fr)로 대체하면, 트랙의 최소 크기가 최소 콘텐츠 크기가 아니라 0이 된다. 그런 다음 그리드는 컨테이너에서 사용 가능한 모든 크기를 가져오고 갭에 필요한 크기를 뺀 다음 fr 단위에 따라 나머지를 분배한다.

화면 구현

작성한 코드

• Tags.js

//import 생략

//위에 코드 생략

const TagGridContainer = styled.ul`
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 20px;
  width: 100%;
  @media screen and (max-width: 1345px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  @media screen and (max-width: 1028px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media screen and (max-width: 711px) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
`;

function Tags() {
  const dispatch = useDispatch();
  const data = useSelector((state) => {
    return state.getTags.tags;
  });
  useEffect(() => {
    const getTagsData = async () => {
      try {
        const response = await axios.get('https://siglee.site/tags');
        console.log(response.data);
        dispatch(getTagsSLice.actions.get(response.data.response.content));
      } catch (error) {
        console.log(error);
      }
    };
    getTagsData();
  }, []);

  return (
    <>
      <Wrapper>
        <Header />
        <Container>
          <NavBar />
          <div className="main-wrap">
            <TagContainer>
              <TagHeader />
              <TagGridContainer>
                {data?.map((el) => {
                  return <TagCard key={el.id} data={el} />;
                })}
              </TagGridContainer>
            </TagContainer>
          </div>
        </Container>
        <Footer />
      </Wrapper>
    </>
  );
}

export default Tags;