Core Solution Atomic Design

3. Organisms (유기체)

• Molecules + Atoms 조합. 화면 내 독립 섹션
• 예: Header, Sidebar, Table, DashboardGrid, ManualMatchingQueue
• organisms/ 폴더

4. Templates & Pages

• Templates: Organisms 배치 레이아웃
• Pages: 실제 데이터·라우트와 연결된 화면

디렉터리 구조 (권장)

frontend/src/components/
├── atoms/          (또는 common/ 내 Button, Input 등)
├── molecules/
├── organisms/
└── templates/

규칙

• 하향 조합만 허용: Organism은 Molecule/Atom만 import. Atom은 다른 Atom/Molecule import 금지.
• 단일 책임: 각 컴포넌트는 하나의 역할만 수행.
• 재사용: 공통 UI는 atoms → molecules 순으로 추출 후 organisms에서 조합.
• 네이밍: cs-* 또는 mg-* 디자인 토큰 사용. 하드코딩 색상·여백 금지.
• CSS: 아토믹 계층별 스타일만 사용. 레거시·불필요 CSS 사용 금지. 전체 디자인 정리·재구축 시 core-solution-design-system-css 스킬 + 서브에이전트(core-coder)로 진행.

참조 문서

• docs/design-system/ATOMIC_DESIGN_SYSTEM.md — 상세 컴포넌트 스펙 및 CSS 변수
• core-solution-frontend — API, 스타일, 상수화 규칙
• 공통 모듈: /core-solution-common-modules — 버튼·배지·카드 등 공통 UI 목록·사용 가이드