디자인 시스템을 위해서 style-system을 이용하는 방법

import React, { useState } from "react";
import { system, border } from "styled-system";
import { ThemeProvider, styled } from "styled-components";

const theme = {
  colors: {
    primary: "#007bff",
    secondary: "#6c757d",
    success: "#28a745",
    error: "#dc3545",
    warning: "#ffc107",
  },
  fontSizes: {
    small: "12px",
    medium: "16px",
    large: "20px",
  },
};

const HomePage = () => {
  const [active, setActive] = useState(false);

  return (
    <ThemeProvider theme={theme}>
      <button onClick={() => setActive((prev) => !prev)}>버튼</button>
      <Div active={active}>
        {["fidsoa", "fdsioajfdsa", "fdsijoafioa"].map((el) => {
          return (
            <Text fontSize="large" key={el}>
              {el}
            </Text>
          );
        })}
      </Div>
    </ThemeProvider>
  );
};

const Text = styled("div")<{ fontSize: number | string }>(
  system({
    fontSize: {
      property: "fontSize",
      scale: "fontSizes",
      defaultScale: [12, 14, 16, 20, 24, 32, 48],
    },
  })
);

const Div = styled("div")<{ active: boolean }>`
  width: 100px;

  visibility: visible;
  border: 1px solid black;
  overflow: hidden;

  ${(props) => {
    if (!props.active) {
      return `
        height: 100px;
        transition: all .5s ease-in-out;
      `;
    }

    return `
        height: 0;
        transition: all .5s ease-in-out;
    `;
  }}
`;

export default HomePage;