아토믹 디자인 패턴 준수. Atoms → Molecules → Organisms → Templates → Pages 계층으로 컴포넌트 구성
Core Solution(MindGarden)의 프론트엔드 컴포넌트는 아토믹 디자인 패턴을 따릅니다.
Pages (페이지)
↓
Templates (템플릿)
↓
Organisms (유기체)
↓
Molecules (분자)
↓
Atoms (원자)
common/ 모듈 사용 — StatusBadge, RemainingSessionsBadge, ActionButton, CardContainer, CardActionGroup. 새로 만들지 않음.atoms/ 폴더 또는 common/ 내 기본 컴포넌트cs-{component-name} 또는 mg-*molecules/ 폴더organisms/ 폴더frontend/src/components/
├── atoms/ (또는 common/ 내 Button, Input 등)
├── molecules/
├── organisms/
└── templates/
cs-* 또는 mg-* 디자인 토큰 사용. 하드코딩 색상·여백 금지.docs/design-system/ATOMIC_DESIGN_SYSTEM.md — 상세 컴포넌트 스펙 및 CSS 변수core-solution-frontend — API, 스타일, 상수화 규칙/core-solution-common-modules — 버튼·배지·카드 등 공통 UI 목록·사용 가이드