@imwebme/ds-react-components

🚨 tf-o-template-ds 임시라이브러리입니다

🚨 tf-o-template-ds 임시라이브러리입니다 기존 ds-react-components라는 라이브러리로 유지보수 되고있었습니다.

ds-react-components 라이브러리를 공용적으로 사용하기에는 문제가있었습니다.

• emotion
• 번들러 설정 babel
• twin.macro

처음 셋팅할때는 위 설정이 없어도 되도록 라이브러리를 개발했지만 css-in-js의 head에 스타일을 주입하는 로직이 문제가있었습니다.

라이브러리에있는 emotion이 head에 스타일을 주입하는 것과 ds-react-components를 가져와 사용하는 쪽에서 emotion을 사용할때 ds-react-components가 후순위로 렌더링되면서 head에 style 속성의 우선순위가 사용하는 사용자의 마음대로 지정할 수 없는 문제가있었습니다.

일단 애플리케이션을 만드는 쪽에서도 동일한 기술스택을 사용하고있어서 peerDependencies로 설정해서 사용하는쪽에서 emotion으로 렌더링하게끔 사용성을 잡고 프로젝트를 시작하였습니다.

그래서! 아래와 같은 문제?가 있습니다. 사용하는 쪽에서도 emotion babel twin.macro 설정을 해야한다.

다음 피쳐로 위 문제들을 해결하는 방법으로 재설계를 하려하였지만 @minsoo-web 전담하여 개발해주실거라서

ds-react-components는 tf-o-template-ds로 변경합니다.

동일 기능의 디자인시스템 컴포넌트가 생성되면 마이그레이션을 하는 방향으로 가겠습니다.

디자인 시스템을 적용한 리액트 컴포넌트

development

.env 추가하기

npm install
npm rnu dev

spec

• npm 자동배포
  • changeset