🏗 Atomic Design

Atomic Design

Atomic Design Pattern 을 참고하여 Atoms / Molecules / Organisms / Templates / Pages 단으로 나누어 컴포넌트를 생성하였으며, Atomic Design 구조는 아래와 같이 구성하였다.

1. Atoms

• P: <p>
• H3: <h3>
• Div: <div>
• Img: <img>
• Icon: <img>
• Span: <span>
• Video: (<video> > <source>)
• Button: <button>
• Section: <section>
• TextField: <input>
• TextArea: <textarea>

2. Molecules

• Title: H3 + H3
• ItemCreate: Button
• Paragraph: P + P
• FullTextField: TextField
• SelectionBox: [Button × n]
• Selfi: Img + Img + Img
• DetailedButton: (Button > [Icon]) + Span
• SingleTextField: Span + TextField + Span
• Item: (Div > [TextField, Span , Icon]) + TextArea
• Info: (Div > [TextField]) + (Div > [TextField × 3])
• GraveStone: (Section > [TextField + Span]) + Span + TextArea
• MultiTextFieldSentence: Span + TextField + Span + TextField + Span

3. Organisms

• Dquestion: H3 + P
• ItemBox: [Item × n] + Button
• SelectionResponse: SelectionBox
• Paragraphs: Img + (Section > [Paragraph × 3])
• DetailedButtons: DetailedButton + DetailedButton
• InfoResponse: (Div > [Info]) + (Link > [Button])
• Decorations: Selfie + Img + Img + Img + Img
• GraveStoneResponse: (Div > [GraveStone]) + (Link > [Button])
• FullTextFieldResponse: (Div > [FullTextField]) + (Link > [Button])
• MultiTextFieldResponse: (Div > [MultiTextFieldSentence]) + (Link > [Button])
• SingleTextFieldResponse: (Div > [SingleTextFieldSentence]) + (Link > [Button])

4. Templates

• VideoTemplate: Video
• LoadingTemplate: Video
• InsertyPaperTemplate: Dquestion + Span
• MultipleChoiceTemplate: Dquestion + SelectionResponse
• FullTextFieldTemplate: Dquestion + FullTextFieldResponse
• MultiTextFieldTemplate: Dquestion + MultiTextFieldResponse
• SingleTextFieldTemplate: Dquestion + SingleTextFieldResponse
• SeperatedTemplate[#num]: have unique elements each template

5. Pages

• P0
• ...
• P29
• P404