폴더 구조 세팅

[Hayeong8957]

목적

기깔나는 폴더 구조 세팅을 위함

작업 상세 내용

• [x] type interface 관련 폴더
• [x] 상태관리 라이브러리 선택 후 관련 폴더
• [x] queries 관련 폴더

• [x] 스타일 변수 관리 폴더

참고 사항

[Hayeong8957]

폴더 구조

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

[Hayeong8957]

디자인 시스템

• 버튼 높이별 변수화
• 뱃지(chips)는 padding값까지 합쳐서 small, medium, large, xlarge
• 일반 button은 height값만
• 아이콘은 stroke, width값

[Hayeong8957]

아토믹 디자인을 활용한 디자인 시스템 도입기