Directory

✔️ 디렉토리 구조

src/
  apis (fetch)
  commons (전역 스타일, 테마, 상수 등)
  assets (이미지, 아이콘 등 정적 자원)
  components (모든 컴포넌트)
  pages (템플릿 가져와 최종적으로 뷰로 보여지는 곳)
  utils (문자열 유팅, 배열 유틸 등)
  hooks (비즈니스 로직을 위한 커스텀 훅들(get data))
  types (타입스크립트 인터페이스)
  stores (context api)

✔️ 아토믹 디자인 시스템

src/
  components/
        atoms/
        molecules/
        organisms/
        templates/
  pages/

atoms

• 가장 작은 단위의 컴포넌트
• Label, Input, Button, Select, CheckBox와 같이 기능적, 의미론적으로 가장 작은 단위의 컴포넌트
• 계속 재사용해야 하기 때문에 특정 기능을 수행하는 것이 아닌, 일반적으로 사용할 수 있게 함

molecules

• atom을 여러개 조합한 컴포넌트
• 예를 들어, Label + (Input | CheckBox | Select)를 조합하여 FormItem이라는 컴포넌트를 만들어 atom 컴포넌트를 재사용

organisms

• atom과 molecule을 조합하여 컴포넌트 생성
• 예를 들어, FormItem을 여러개 조합하여 SignUpForm을 만들 수 있음
• 특정 기능을 직접 수행하진 않음

templates

• 비즈니스 로직이 배제된 완전히 스타일링에 집중한 단위
• 컴포넌트를 주입만 하면 바로 사용할 수 있도록 한다

pages

• 해당 template에 알맞은 컴포넌트를 주입하여 사용
• 전체적인 로직이나 상태를 이 단계에서 제어한다.

✔️ 상태관리

• 각 컴포넌트에서 일반적인 상태 (disabled, focused 등)를 관리
• 각 page별로 state관리, 해당 상태를 page -> organism -> molecule -> atom으로 내려주는 방식
• 전역 상태관리는 Context API로 관리

참고