react paginate - styled 컴포넌트 적용

react paginate는 기본 css로 스타일링이 가능한데 팀원들과 사용하는 스타일링은 styled컴포넌트로 하기로 약속 되었기 때문에 react paginate를 styled컴포넌트로 스타일링하는 변환 작업을 진행 했다.

Home.tsx

react paginate에서 styled컴포넌트 적용을 할 때 가장 중요한 부분은 컴포넌트를 하나의 styled컴포넌트로 묶어줘야 한다.

<S.PaganationWrap>
  <ReactPaginate
	breakLabel={'...'}
	nextLabel={'next >'}
	onPageChange={handlePageClick}
	pageRangeDisplayed={5}
	pageCount={pageCount}
	previousLabel={'< previous'}
	renderOnZeroPageCount={renderZeroPage}
	previousClassName="page-item"
	nextClassName="page-item"
	breakClassName="break"
	containerClassName="pagination"
	pageClassName="page-item"
	activeClassName="active"
	disabledClassName="disabled"
/>
</S.PaganationWrap>

homeStyled.tsx

Home.tsx에 사용된 styled만 모아놓은 homeStyled.tsx파일에 감싸주었던 PaganationWrap컴포넌트를 만들어준다. 그 뒤 각 프로퍼티로 전달할 스타일 값을 넣어준다.

export const PaganationWrap = styled.div`
  .pagination {
    /* 페이지네이션 컴포넌트의 스타일 */
    display: flex;
    width: 50vw;
    min-width: 555px;
    padding: 70px 16px 16px 16px;
  }

  .page-item {
    /* 페이지 항목의 스타일 */
    cursor: pointer;
    height: 27px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: ${props => props.theme.font.medium};
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    margin-right: 4px;
    padding: 0px 8px 0px 8px;

    &:hover {
      background-color: #e3e6e8;
    }
  }

  .active {
    /* 활성 상태의 스타일 */
    background-color: ${props => props.theme.colors.yellow};
    color: white;

    &:hover {
      background-color: ${props => props.theme.colors.yellow};
    }
  }

  .break {
    /* '...' 이후의 컴포넌트 스타일 */
    height: 27px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: ${props => props.theme.font.medium};

    border-radius: 3px;
    margin-right: 4px;
    padding: 0px 8px 0px 8px;
  }

  .previous {
    height: 27px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: ${props => props.theme.font.medium};

    border-radius: 3px;
    margin-right: 4px;
    padding: 0px 8px 0px 8px;
  }
`;