styled-component props관리

보통 styled-component에서 재사용이 가능할 경우 swicth 문으로 작성을 했었다.

${({ variant }) => {
		switch (variant) {
			case "board":
				return css`
					display: grid;
					grid-template-columns: 0fr repeat(6, minmax(auto, 20px)) 12fr;
					justify-items: center;
					margin: 30px 0px 0px 65px;
				`;

하지만 case가 늘어나면 수정하기가 어려웠고 코드가 길어지는 현상도 발생이되서

styled.div(
  {
    position: "absolute",
    right: "10%",
    color: "#888888",
    fontSize: "1.3rem",
  },
  (props) => ({
    bottom: props.bottom ? props.bottom : "210px",
  })
);

수정할 것이 별로 없다면 props로 상태를 관리하는 방법이 좀더 코드양이 줄고 수정하기도 편하였다.

<SubTitle>
        Lorem Ipsum is simply dumvmy text of the printing and typesetting
        industry.
      </SubTitle>
      <SubTitle bottom={"180px"}>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </SubTitle>
      <SubTitle bottom={"150px"}>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </SubTitle>