Atomic Design 설계

📌 Atomic Design 기준

Atom

• html태그 하나와 최소한의 style을 가진 element(범용적)

Molecules

• 2개 이상의 Atom or Atom하나에 특정한 기능을 가진 컴포넌트 단위

Organisms

• Molecules, Atom 의 집단
• 특정 기능을 수행하고 Organisms 내에서 필요한 데이터, 로직을 가지고 있음.
• user정보와 같은 전체 정보는 page에서 내려받음

Template

• page의 레이아웃
• component는 주입
• 스타일에 집중

Page

• 템플릿에 컴포넌트를 주입한 화면
• 전체적인 로직과 상태를 관리

📌 Design

atom

• input
• button
• label
• 로고 이미지
• list item container ( icon + children)
• priceTag
• CheckBox

Molecules

• label+Input (PlainInput.ts)
• logo+button (LogoButton.ts)
• Transaction Item (IconBtn+ 제목, 분류, 통장 + PriceTag)
• DropDownList
• DropDownContaine

Organisms

• LocalLogin
• OAuthLogin (GitHub + Naver)
• DateTransactionList
• Nav
• MonthInfoHeader
• AccountBookList - dropdown
• MonthList - dropdown
• Filter - dropdown