#27 emotion 사용한 기본 컴포넌트 생성

[jun2077681]

Summary

• emotion의 추가에 따른 기본 컴포넌트 세팅

Describe your changes

• 기본 div로 사용할 Box Component 작성 및 custom style 적용
• styled-system을 사용하여 일부 테마 등 적용
  • 기존 import를 통해 사용한 color 등을 이제 string으로 바로 작성가능 (Header.tsx, Footer.tsx color 사용 부분 등)
• header, footer 일부 에러나는 부분 emotion으로 재작성
• 기타 코드 정리

Issue ID and link

• 27

[nix6839]

styled-system이 2년 넘게 유지관리가 되고 있지 않은 것 같은데 사용해도 괜찮을까요? 회의록을 보니 stitches도 같은 이유로 반려됐던 것 같습니다.

styled-system의 공식문서 사이트도 현재 접속시 그냥 GitHub 프로젝트 링크로 리다이렉트 시켜서 처음 사용하는 입장에선 GitHub의 쌩 마크다운을 찾아가면서 문서를 읽어야 되니 불편하네요. https://styled-system.com/

이 이슈에 제안된 다른 라이브러리를 사용하는 게 좋은 선택 같아 보여요.

• xstyled
• Chakra UI의 <Box /> 컴포넌트를 이용해 확장
• Theme UI - 이슈에서는 styled-components를 지원하지 않는다는 이유로 반대를 받았지만 저희들은 emotion을 사용하니 괜찮을 것 같아요.
• Kuma UI

[jun2077681]

styled-system이 2년 넘게 유지관리가 되고 있지 않은 것 같은데 사용해도 괜찮을까요? 회의록을 보니 stitches도 같은 이유로 반려됐던 것 같습니다.

styled-system의 공식문서 사이트도 현재 접속시 그냥 GitHub 프로젝트 링크로 리다이렉트 시켜서 처음 사용하는 입장에선 GitHub의 쌩 마크다운을 찾아가면서 문서를 읽어야 되니 불편하네요. https://styled-system.com/

이 이슈에 제안된 것 다른 라이브러리를 사용하는 게 좋은 선택 같아 보여요.

• xstyled
• Chakra UI의 <Box /> 컴포넌트를 이용해 확장
• Theme UI - 이슈에서는 styled-components를 지원하지 않는다는 이유로 반대를 받았지만 저희들은 emotion을 사용하니 괜찮을 것 같아요.
• Kuma UI

styled system을 이 작업 이후로 건드릴 예정이 없었어서 이런 이슈를 몰랐네요... 링크 보내주신거 검토해볼게요 감사합니다 :)