Styled-components - 버튼 사이즈 조정

이번엔 사이즈를 조절하는 스타일을 추가한다.
props의 size값이 정해지지 않은 경우에는 medium으로 정의한다.

Button.defaultProps = {
  size: "medium",
  color: "blue",
};

전에 styledButton밖으로 색상 관련 스타일을 생성한 것처럼 사이즈 조정도 같은 원리로 진행한다. props의 size값에 따라서 크기가 다른 스타일이 적용되게 한다.

const sizeStyles = css`
  /*크기*/
  ${(props) =>
    props.size === "large" &&
    css`
      height: 3rem;
      font-size: 1.25rem;
    `}
  ${(props) =>
    props.size === "medium" &&
    css`
      height: 2.25rem;
      font-size: 1rem;
    `}
    ${(props) =>
    props.size === "small" &&
    css`
      height: 1.75rem;
      font-size: 0.875rem;
    `}
`;

그리고 styledButton내부에는 ${sizeStyles}만 적어주면 끝

App.js에 렌더링을 해보자.
먼저 보기 쉽게끔 ButtonGroup이라는 div를 생성해서 그안에 버튼들을 삽입한다. 이 div는 서로 붙어있으면 margin-top을 1rem만큼 추가한다.

const ButtonGroup = styled.div`
  & + & {
    margin-top: 1rem;
  }
`;

App.js

function App() {
  return (
    <ThemeProvider
      theme={{
        palette,
      }}
    >
      <AppBlock>
        <ButtonGroup>
          <Button size="large">BUTTON</Button>
          <Button >BUTTON</Button>
          <Button size="small" >
            BUTTON
          </Button>
        </ButtonGroup>
      </AppBlock>
    </ThemeProvider>
  );
}

결과

다른색을 적용시켜서 만들어보자.

function App() {
  return (
    <ThemeProvider
      theme={{
        palette,
      }}
    >
      <AppBlock>
        <ButtonGroup>
          <Button size="large">BUTTON</Button>
          <Button >BUTTON</Button>
          <Button size="small" >
            BUTTON
          </Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button color="pink"size="large">BUTTON</Button>
          <Button color="pink">BUTTON</Button>
          <Button color="pink"size="small" >
            BUTTON
          </Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button color="gray" size="large">BUTTON</Button>
          <Button color="gray">BUTTON</Button>
          <Button color="gray" size="small" >
            BUTTON
          </Button>
        </ButtonGroup>
      </AppBlock>
    </ThemeProvider>
  );
}

props의 size 값마다 스타일을 지정하는 구문을 리팩토링해서 더 간단하게 만들자
먼저 각각의 size 값에 따른 height와 fontSize값을 할당받은 변수를 선언한다.

const sizes = {
    large: {
        height: '3rem',
        fontSize: '1.25rem'
    },
    medium: {
        height: '2.25rem',
        fontSize: '1rem',
    },
    small: {
        height:  '1.75rem',
        fontSize: '0.875rem'
    }
};

전에 작성한 sizeStyle내용을 수정한다. App.js에서 props로 가져온 size값과 일치하는 sizes 항목의 height와 fontSize 스타일을 적용하는 방식이다.

const sizeStyles = css`
  /*크기*/
  ${({size}) => css`
    height: ${sizes[size].height};
    font-size: ${sizes[size].fontSize}
  `}
`;

공부를 하면서 한가지 이상한 현상이 생겼다. 사실 위에서 작성한대로 결과화면을 보면 이렇게 나온다.

그런데 순서를 바꾸면 원래 결과가 나온다.

 & + & {
    margin-left: 1rem;
  } 
${colorStyles}
  ${sizeStyles}
 

원인을 찾으려고 헤메다가 결국 찾아냈는데, 바로 font-size에 세미콜론을 적지 않아서 생긴 것이다.

const sizeStyles = css`
  /*크기*/
  ${({size}) => css`
    height: ${sizes[size].height};
    font-size: ${sizes[size].fontSize}
  `}
`;

사소한것이라도 실수하지말고 꼼꼼히 확인하는 습관을 길러야겠다고 느꼈다.