이 컴포넌트에서는 props로 현재 선택된 계정명, 태그, 현재 페이지 숫자, 마지막 페이지 숫자를 가져옵니다. 사용자가 이 컴포넌트에 있는 버튼을 클릭하면, props로 받아 온 값을 사용하여 이동해야 할 다음 경로를 설정해 줍니다. 그리고 첫 번째 페이지일 때는 이전 버튼이 비활성화되고, 마지막 페이지일 때는 다음 버튼이 비활성화됩니다.

컴포넌트를 다 만든 뒤에는 Button 컴포넌트에 비활성화된 스타일을 설정해 주세요. 비활성화 스타일은 :disabled CSS 셀렉터를 사용하여 적용할 수 있습니다.

components/common/Button.js

import React from 'react';
import styled, { css } from 'styled-components';
import { Link } from 'react-router-dom';
import palette from '../../lib/styles/palette';

const buttonStyle = css`
  (...)

  &:disabled {
    background: ${palette.gray[3]};
    color: ${palette.gray[5]};
    cursor: not-allowed;
  }
`;

(...)

---