<div align="center">
  <img width="350" src="https://github.com/imwebme/tf-o-template/assets/42893446/e39670e9-d325-43cf-95d5-307f6d85e145" alt="template" />
  <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/badge/rollup-EC4A3F?logo=rollup.js&logoColor=white)
  
[![](https://img.shields.io/npm/v/@imwebme/template/latest)](https://www.npmjs.com/package/@imwebme/template/v/latest)
[![](https://img.shields.io/npm/v/@imwebme/template/dev)](https://www.npmjs.com/package/@imwebme/template/v/dev)

</div>

## development

`.env` 추가하기

```shell
bun install
bun run dev
```

개발환경과 ci/cd에서 bun을 사용합니다.
chromatic만 오직 yarn 을 사용합니다. ci/cd에서만 작동하기 때문에 개발할때 고려하지 않아도됩니다.
문제가 생긴다면 바로 롤백하겠습니다.
감사합니다.

## spec

- npm 자동배포
  - changeset
  
```mermaid
sequenceDiagram
    participant main
    participant dev
    participant feature
    dev-->>main: 메이저버전 업데이트
    feature-->>dev: 마이너버전 업데이트
    loop
        feature->>feature: 패치버전 업데이트
    end
    Note right of feature: 개발할때 패키지 배포<br/>패치버전업데이트
```

## i18n

```
dist/ 
locales/{{namespace}}/{{lng}}.json
```

i18next (v3) 파일을 json을 가져다가 사용할 수있도록 처리

## context wrapper사용시 주의사항
admin에서 context wrapper를 사용할 경우는, 내보내는 컴포넌트에 wrapper를 적용해서는 안된다. 다른 context로 인식하기 때문에 상태관리가 제대로 되지 않을것이다.