질문 리스트

1. 시맨틱하게 제목 태그를 쓰고 싶어서 props으로 헤딩태그의 이름을 받아 돔객체를 생성하도록했습니다! 헤딩태그는 오로지 의미뿐이고, 헤딩태그의 숫자에 따라 폰트사이즈가 정해지는 건 적합하지않다고 알고 있습니다. 그래서 resetCss를 적용했을 때도 모든 헤딩태그의 사이즈가 해제되는 걸 확인했습니다! 현재 작성해놓은 코드는 헤딩태그의 종류와 size를 각각 받도록 해놨는데, 팀원들과 상의했을 때 헤딩태그의 종류에 따라 size가 정해지지 않는다면 굳이 Title컴포넌트를 쓸 이유가 있을까? 라는 의문점이 생겼습니다. 저희 팀(프로젝트)의 제목 사이즈에 대한 디자인 시스템을 정해서 헤딩태그의 종류에 따라 사이즈를 고정해놓는게 좋을까요?? (ex. h1- 2rem, h2-1.5rem 등등..)

const Title = ({
  children,
  h2,
  h3,
  h4,
  h5,
  h6,
  size,
  color,
  weight,
  marginBottom,
  extraItem,
  ...props
}) => {
  const Tag = h2 ? 'h2' : h3 ? 'h3' : h4 ? 'h4' : h5 ? 'h5' : h6 ? 'h6' : 'h1';
  const StyledTag = styled(Tag)`
    font-size: ${({ size }) =>
      size === 'small'
        ? theme.font.small
        : size === 'base'
        ? theme.font.base
        : size === 'medium'
        ? theme.font.medium
        : size === 'large'
        ? theme.font.large
        : size === 'xLarge'
        ? theme.font.xLarge
        : typeof size === 'number'
        ? `${size}rem`
        : size};
    font-weight: ${({ weight }) => weight};
    color: ${({ color }) => color};
    margin-bottom: ${({ marginBottom }) =>
      typeof marginBottom === 'number' ? `${marginBottom}rem` : marginBottom};
    display: flex;
    justify-content: space-between;
  `;
 
...