퍼블리셔(core-publisher) HTML 마크업 표준. 아토믹 디자인·BEM·시맨틱 HTML 기반 일관된 마크업 규칙. core-designer 스펙을 HTML로 변환할 때 적용.
core-publisher가 core-designer 스펙을 바탕으로 일관된 HTML을 작성할 때 적용하는 규칙입니다.
core-coder는 이 HTML을 기반으로 JSX·React·스타일을 연결합니다.
core-planner (기획)
↓
core-designer (디자인 스펙·토큰·클래스명)
↓
core-publisher (HTML 마크업) ← 이 스킬 적용
↓
core-coder (JSX·컴포넌트화·로직·CSS)
퍼블리셔는 다음을 입력으로 받습니다.
docs/design-system/v2/*.md, docs/project-management/*_PLAN.md 등mg-v2-* 등), 토큰(var(--mg-*))PENCIL_DESIGN_GUIDE.md, unified-design-tokens.css, AdminDashboardB0KlA.css버튼·배지·카드 등 공통 UI는 반드시 common/ 모듈 클래스를 사용한다. 새로 만들지 않는다.
| 용도 | 사용 클래스 |
|---|---|
| 상태 배지 | mg-v2-status-badge + mg-v2-badge--success | --warning | --neutral | --danger | --info |
| 회기 배지 | mg-v2-count-badge |
| 버튼 | mg-v2-button + mg-v2-button--primary | --success | --outline | --secondary | --danger |
| 카드 컨테이너 | mg-v2-card-container |
| 카드 액션 그룹 | mg-v2-card-actions |
docs/design-system/v2/COMMON_UI_IMPLEMENTATION_SPEC.md, docs/design-system/v2/COMMON_UI_MARKUP_TEMPLATES.md| 용도 | 사용 태그 | 비고 |
|---|---|---|
| 페이지 헤더 | <header> | 제목·브레드크럼·액션 |
| 메인 콘텐츠 | <main> | 본문 영역 |
| 독립 섹션 | <section>, <article> | 레이블 가능 시 aria-labelledby |
| 사이드바 | <aside> | 보조 콘텐츠 |
| 내비게이션 | <nav> | 메뉴·탭 |
| 리스트 | <ul>, <ol>, <li> | 정렬·카드 목록 |
| 폼 | <form>, <fieldset>, <legend>, <label> | 라벨은 for 연결 |
| 테이블 | <table>, <thead>, <tbody>, <tr>, <th>, <td> | 데이터 표 |
mg-v2-* (프로젝트 공통), mg-v2-ad-b0kla__* (B0KlA 어드민)integrated-schedule__card, mg-v2-mapping-cardintegrated-schedule__card-body, mg-v2-mapping-card__titleintegrated-schedule__card--selected, mg-v2-button-primary디자인 스펙에 명시된 클래스명을 그대로 사용합니다. 임의로 새 클래스를 만들지 않습니다.
| 계층 | 마크업 예 |
|---|---|
| Atoms | <button class="mg-v2-button mg-v2-button-primary">, <span class="mg-v2-badge"> |
| Molecules | <div class="mg-v2-form-group"> + label + input |
| Organisms | <section class="integrated-schedule__sidebar"> + filter + list |
| Template | <header> + <main> + <aside> 구조 |
aria-label(아이콘만 있을 때)legend 숨김 시 class="sr-only" 또는 aria-labelrole, aria-* 디자인 스펙에 있으면 그대로 반영<html>, <head>, <body> 불필요 시 해당 영역 HTML 조각만 출력<!-- 섹션: 매칭 목록 카드 -->React 프로젝트이므로, 필요 시 JSX 형식으로 마크업을 작성할 수 있음.
class → className, for → htmlFor 등 JSX 규칙 적용.
로직·이벤트·상태는 작성하지 않음.
<!-- Organism: 통합 스케줄 카드 -->
<li class="integrated-schedule__card" data-mapping-id="">
<div class="integrated-schedule__card-body">
<div class="integrated-schedule__card-parties">
<span class="integrated-schedule__card-consultant">상담사명</span>
<span class="integrated-schedule__card-arrow">→</span>
<span class="integrated-schedule__card-client">내담자명</span>
</div>
<div class="integrated-schedule__card-meta">
<span class="integrated-schedule__card-status">활성</span>
<span class="integrated-schedule__card-remaining">1회 남음</span>
</div>
</div>
<div class="integrated-schedule__card-actions">
<button type="button" class="mg-v2-button mg-v2-button-primary">스케줄 등록</button>
</div>
</li>
style="..." 사용 금지. 클래스만 사용onclick, onChange 등 작성 금지aria-label, label for 등 접근성을 반영했는가?/core-solution-common-modules, docs/standards/COMMON_MODULES_USAGE_GUIDE.md — 마크업 시 사용할 공통 클래스·구조 우선 검토. 새 클래스·구조 만들지 않음.docs/standards/COMPONENT_STRUCTURE_STANDARD.md — div 중첩·시맨틱.cursor/skills/core-solution-atomic-design/SKILL.md — Atoms → Pagesdocs/design-system/PENCIL_DESIGN_GUIDE.md — B0KlA·토큰frontend/src/styles/unified-design-tokens.css — 클래스명 참고