joe1220 / gql-server-boilerplate

gql + typescript boilerplate

FUNNY TIMER WEB APP

next기반의 timer(clinet)입니다.

• Server code github 주소

next관련 보일러 플레이트[https://github.com/Joe1220/next-redux-scss-bp]사용

install

yarn

start

yarn start # project start
yarn test  # project test
yarn style # start styleguidist for project

---

** Skill Stack**

- Language

Typescript, Javascript, React Graphql

- State Management

Redux, Redux-Saga

- API Library

Apollo,

- CSS

Sass

- Design System

styleguidist

- Style Guid & Icon

Styleguidistreact-fontawesome

- Testing

react-testing-library

jest, react-testing-library, axios-mock-adapter

---

Icon 사용

react-fontawesome string props를 사용하기 위해 우선 atoms/Icon내에서 import사용 필요. (나머지 Icon md파일 확인)

Structure

참조: atomic design

.
├── src
│   ├── setupTests.ts      # for react-testing-library
│   ├── @types             # d.ts file list
│   ├── components
│   │     ├──  atoms       # atom component list.
│   │     ├──  molecules   # molecule component list.
│   │     ├──  organisms   # organisms component list.
│   │     │       ├──  Timermodal/datas.ts # music list
│   │     ├──  templates   # template component list.
│   │     │       ├──  types.ts
│   │     │       ├──  sagas.ts
│   │     │       ├──  actions.ts
│   │     │       ├──  index.tsx
│   ├── interfaces         # 공유할 수 있는 type(todo move)
│   ├── store              # redux store
│   │     ├──  sagas.ts    # root reducer.
│   │     ├──  reducer.ts  # rootReducer
│   │     ├──  index.tsx   # create store root reducer and root saga
│   ├── apollo             # redux store
│   │     ├──  *API        # root reducer.
│   │     │       ├──  index.ts # queires.ts에 정의된 grapuql query function 사용
│   │     │       ├──  queries.ts # set query functions
├─── pages                 # next의 page 목록
├──  next.config.js        # config next webpack
├──  tsconfig.json         # config typescript compiler
├──  tsconfig.paths.json   # config typescript import paths
├──  jest.config.js        # config jest options
├──  jest.config.js        # typescript compiler for jest.config.js file
├──  enzyme.js             # for enzyme library
├──  styleguide.config.js  # for styleguidist library
├── docs
│   ├── webpack.config.js  # styleguidist설정을 위한 webpack