# Get started

## Install

[template-repository](https://github.com/TOKTOKHAN-DEV/next-init-2.0) 에서 "Use this template" 버튼을 클릭하여 새로운 repository 를 추가하거나,

clone 을 통해 보일러 탬플릿을 가져와주세요

```sh
git clone https://github.com/TOKTOKHAN-DEV/next-init-2.0 
```

### Start

yarn 을 통해 패키지를 install 하고 프로젝트를 시작합니다.

```
cd your-package && yarn install && yarn dev
```

### Script

업무를 도와주는 똑똑한 개발자의 script 를 사용해 반복 작업을 줄여보세요

#### Tokript

업무를 도와주는 사내 cli-tool 입니다. 아이콘, 이미지, 폰트, api, page template 등 다양한 작업에 도움을 줍니다.

* [Tokript npm](https://www.npmjs.com/package/tokript)

**Source**

page, dynamic-page, api 에 대한 탬플릿을 생성해 줍니다.

```
yarn run gen:source
```

**Api**

swagger 를 조회하여 api 함수와 schema type, react-query 의 query,mutation 을 생성해 줍니다.

```
yarn run gen:api
```

**Icon**

asset 폴더를 조회하여 svg 파일을 사용가능한 chakra-icon 컴포넌트로 생성해줍니다.

```
yarn run gen:icon
```

> color props 로 제어를 해야한다면, svg 파일의 fill 이나 stroke 의 컬러를 "currentColor" 로 변경후 실행 해주세요

**Image**

asset 폴더를 조회하여 img 파일경로를 담은 Object 를 생성해줍니다.

```
yarn run gen:img
```

**Font**

asset 폴더를 조회하여 font 파일을 next-local 폰트로 생성해줍니다.

```
yarn run gen:font
```

**Icon**

asset 폴더를 조회하여 svg 파일을 사용가능한 chakra-icon 컴포넌트로 생성해줍니다.

```
yarn run gen:icon
```

**Route**

pages 폴더를 조회하여 route 경로를 담은 오프젝트를 생성해줍니다.

```
yarn run gen:route
```

**Webp**

asset 폴더를 조회하여, png, jpg 확장자를 webp 로 변환해 줍니다. 변환하여 사용하기전에, next/image 사용을 고민해주세요. 다른 확장자를 사용하더라도 자동으로 webp 변환 해줍니다.

```
yarn run convert:webp
```

#### Test

src 폴더 안에 있는 모든 {filename}.test.ts 을 테스트 합니다. 와치 모드에 경우 항상 실행되어, 변경사항을 즉시 감지 하고, 변경사항이 있는 테스트만 테스트 합니다.

```
yarn run test
```

```
yarn run test:watch
```

##

\\

## Install

#### Clone

```
git clone https://github.com/TOKTOKHAN-DEV/next-init-2.0.git
```

or

[template-repo](https://github.com/TOKTOKHAN-DEV/next-init-2.0) 에서 Use This template 클릭

#### Package Install

```
cd {package-name} && yarn install
```

## Start

```
yarn run dev
```