컴포넌트

Atoms

Atom은 더 이상 쪼갤 수 없는 단위에 해당하는 요소에 해당한다. 혹은 애니메이션, 폰트, 색상 등과 같이 요소가 아닌 속성도 Atom에 해당된다. 가장 작은 단위인 만큼 가장 많이 재사용된다고 볼 수 있다.

• 폰트 크기, 색상, 미디어 쿼리

• Text

• SliderBar

• Icon
• Prev
• Next
• Like
• Close
• Back
• home
• Coumunity
• Anaysis
• Edit
• Remove
• Add
• List

• Image

• NavButton

• IconButton
• PlayButton
• RoutineUpdateButton
• AddButton
• CloseButton
• UserButton

• TextButton

• CategoryButton

• TextInput

• Spacer

• Grid

• Spinner

Molecules

Molecule은 여러 개의 Atom이 모여 목적성이 있는 하나의 컴포넌트가 된다. 가급적 많은 곳에서 재사용되도록 컴포넌트를 구성하되 "한 가지 일을 한다"라는 원칙을 지키며 만드는 것이 좋다.

• NavBar

• TabBar

• Routine

• Mission

• RoutineAddComboButton

• ColorPalette

• DaySelector

• CategorySelector

• RoutineInfo

Organisms

Organism은 사용자에게 의미 있는 정보를 제공하거나 인터렉션 할 수 있는 UI를 제공하는 등 서비스로서 의미를 가지는 인터페이스라고 볼 수 있다. 이 단계부터 재사용성이 크게 줄어든다.

• RoutineProgressModal

• TimePicker

• EmojiPicker

• MissionCounter

• UserImageUploader

• Comment

Molecule와 Organism의 구분 Molecule은 데이터를 표시하고 이벤트를 받을 수 있지만 "하나의 역할"만을 가진다. Organism은 사용자에게 의미를 가지는 기능적 요구사항에 포함되는 경우에 해당되는 컴포넌트다.

Templates

실제 콘텐츠가 입혀지기 전 UI 요소, 레이아웃, 기능이 어떻게 배치될지 정하는 와이어 프레임이라고 볼 수 있다. 따라서 자주 재사용되는 컴포넌트가 된다.

Pages

Page는 사용자가 볼 수 있는 최종 콘텐츠가 보이는 화면이다. 사용자와 인터렉션이 발생하거나 API 호출 등을 통해 사이드 이펙트가 발생 할 수 밖에 없는 컴포넌트기도 하다. 일반적으론 하나의 URI 당 하나의 Page 컴포넌트만 존재한다.

• MyRoutinePage
• RoutimeCreatePage : 루틴 생성 및 수정 페이지

• RoutineDetailPage
• MissionCreatePage

• RoutineProgressPage

• RoutineFinishPage

• RoutineCommunityPage

• RoutinePostPage : 루틴을 포스트 하는 페이지ㅑㅜ

• RoutinePostDetailPage

• AnalysisPage

• SignInPage

• SignUpPage

• UserPage

• UserEditPage

• NotFoundPage