# 🚨 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`로 변경합니다.

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

---

<div align="center">
  <h3>디자인 시스템을 적용한 리액트 컴포넌트</h3>

![](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=black)
![](https://img.shields.io/badge/Typescript-3178C6?logo=typescript&logoColor=white)
  
[![](https://img.shields.io/npm/v/@imwebme/tf-o-template-ds/latest)](https://www.npmjs.com/package/@imwebme/tf-o-template-ds/v/latest)
[![](https://img.shields.io/npm/v/@imwebme/tf-o-template-ds/dev)](https://www.npmjs.com/package/@imwebme/tf-o-template-ds/v/dev)

</div>

## development

`.env` 추가하기

```shell
npm install
npm rnu dev
```

## spec

- npm 자동배포
  - changeset