컴포넌트 스타일 일관성 리팩토링

[vi-wolhwa]

⚡️ 관련 이슈

close #92

📍주요 변경 사항

1. 변경 컴포넌트

• Button
• Flex
• Header
• Input
• Layout
• SelectList
• SnippetEditor
• TemplateItem
• TemplateTitleInput
• Text

2. 리팩토링 기준 (컨벤션)

• Emotion CSS
  • css 객체 스타일링 제거
  • Styled-component 사용
    • Input, Flex, Button 컴포넌트 우선 사용
• Props 인터페이스
  • 네이밍
    • 컴포넌트 : Props로 네이밍한다.
    • 스타일 : StyleProps로 네이밍 한다.
  • 선언/정의
    • 컴포넌트 : children prop 대신 PropsWithChildren을 사용한다.
    • 스타일 : 컴포넌트의 Props를 import하여 사용한다.
    • 스타일 : default가 명확하지 않은 prop를 optional로 정의하지 않는다.
• Props 기본값
  • 컴포넌트
    • 기본값은 컴포넌트의 매개변수에 정의한다.
    • Styled-component에서 스타일 기본값을 사용하는 속성은 기본값을 정의하지 않는다.

    const Button = ({ children, onClick, type, variant, size, width, disabled }: Props) => (
    <S.Button type={type || 'button'} variant={variant} size={size} width={width} disabled={disabled} onClick={onClick}>
      {children}
    </S.Button>
    );

• Etc
  • 반드시 필요하지 않은 import React 생략
  • 스타일
    • CSS 기본값과 동일할 경우, 기본값을 입력하지 않는다.
    • 기본값 입력이 필요할 경우, props에 입력한다.

    export const TextWrapper = styled.span<StyleProps>`
      font-size: ${({ size }) => `${size}rem`};
      font-weight: ${({ weight = 'regular' }) => weights[weight]};
      color: ${({ color = 'white' }) => color};
    `;

🎸기타

Stylelint 적용 관련 트러블슈팅 (바로가기)

[Jaymyong66]

기본값 관련 이야기를 해봐야할 것 같아요~!
undefined로 둘지에 대해서도요!

[Hain-tain]

고생하셨습니다 👍👍

(+) 우리 해커톤 끝났으니까 이제 슬슬 색상과 font-size 등에 대한 토큰을 상수로 빼서 사용하는 작업을 시작해야 할 것 같아요!!