Closed Hayeong8957 closed 5 months ago
Atomic Design 방식으로 컴포넌트를 구성하고, 기능적인 측면에서는 utils 폴더로 분리, 모듈화하여 Custom Hooks 패턴, 더 나아가 Props Getters Pattern으로 폴더 구조를 짜 보일러 플레이트로 사용, 최상위 atoms는 jotai의 atom을 관심사 분리한 것. 필요하면 여기서 구조적으로 추가될 수 있음!
my-project
|-- app (-> app routing)
| |-- page.tsx
| |-- layout.tsx
| |-- login
| | `-- page.tsx
| `-- register
| `-- page.tsx
|-- components
| |-- atoms
| | |-- button.tsx
| | |-- input.tsx
| | `-- title.tsx
| |-- mocules
| | `-- block.tsx
| |-- organism
| | `-- form.tsx
| `-- template
| `-- authForm.tsx
|-- atoms
| |-- index.tsx
| `-- modules
| `-- auth.tsx
| `-- field.tsx
|-- utils (-> 로직에 필요한 utils, ..날짜 계산이라든지ㅣ..)
| |-- index.tsx
|-- types
| |-- index.tsx
|-- queries
| |-- index.tsx
| |-- form.tsx (-> useFormSubmit, ... 함수 한꺼번에 관심사 분리로 보아 한 파일에 작성)
|-- hooks
| |-- propGetters
| `-- index.tsx
| |-- customHooks
| | |-- index.tsx
| | |-- useDebounce.tsx
| | |-- useOnChange.tsx
| | `-- useOnSubmit.tsx
| `-- customApi
|-- styles
| |-- atoms
| | |-- colors.css, ... 전역적으로 변수 처리할 것들 관심사 분리
| |-- global.css
|-- tsconfig.json
|-- jsconfig.json
|-- package.json
`-- yarn.lock
목적
기깔나는 폴더 구조 세팅을 위함
작업 상세 내용
[x] 스타일 변수 관리 폴더
참고 사항