Core Solution(MindGarden) 프론트엔드 React/JS/TS 코딩 시 적용할 룰. StandardizedApi 사용, 디자인 토큰, 상수화, 컴포넌트 구조.
React/JavaScript/TypeScript 코드를 작성·수정할 때 이 스킬을 적용하세요.
core-coder 서브에이전트를 호출하여 작업한다. 직접 수정하지 않는다.core-designer로 시안·스펙을 먼저 정의한 뒤, core-coder가 구현한다.core-coder + 해당 스킬 적용.frontend/src/components/common/modals/UnifiedModal.js 사용. size prop으로 small/medium/large/fullscreen 지정./core-solution-unified-modal 스킬, docs/standards/MODAL_STANDARD.mdfrontend/**, , 등 프론트엔드 소스 수정·추가frontend-ops/**frontend-trinity/**StandardizedApi 사용. utils/standardizedApi.js importajax.js의 apiGet/apiPost 등 직접 호출 금지 (표준 위반)/api/v1/로 시작. tenantId 수동 설정 금지 (StandardizedApi가 자동 처리)// ✅
import StandardizedApi from '../../utils/standardizedApi';
const data = await StandardizedApi.get('/api/v1/...');
// ❌
import { apiGet } from '../../utils/ajax';
const data = await apiGet('/api/v1/...');
mg-v2-* 등 디자인 토큰·CSS 클래스 사용constants/css.js 등에서 클래스명 상수화constants/ 등)한 페이지를 수정할 때는 메인 페이지뿐 아니라 연관된 모든 부수 요소를 찾아 함께 수정합니다.
메인 페이지와 모달·버튼·위젯이 동일한 디자인 시스템으로 일관되게 표시되어야 합니다.
버튼·배지·카드 등 공통 UI는 반드시 common/ 모듈을 사용한다. 새로 만들지 않는다.
| 용도 | 사용할 컴포넌트 | import 경로 |
|---|---|---|
| 상태 배지 | StatusBadge | common/StatusBadge 또는 common |
| 회기 배지 | RemainingSessionsBadge | common/RemainingSessionsBadge |
| 버튼 | ActionButton | common/ActionButton |
| 카드 컨테이너 | CardContainer | common/CardContainer |
| 카드 액션 그룹 | CardActionGroup | common/CardActionGroup |
integrated-schedule__card-status, mg-v2-status-badge 등 컴포넌트별로 중복 정의 금지docs/project-management/COMMON_UI_ENCAPSULATION_PLAN.md, docs/design-system/v2/COMMON_UI_IMPLEMENTATION_SPEC.mdheader, main, section, article 등SimpleLayout, DashboardLayout 등 사용check-hardcode에 걸리면 전부 수정한다. 운영(go-live) 직전에는 위반 0건을 목표로 한다.docs/project-management/ADMIN_LNB_LAYOUT_UNIFICATION_MEETING_HANDOFF.md §17, /core-solution-standardization 스킬 동일 절.docs/standards/FRONTEND_DEVELOPMENT_STANDARD.md, docs/standards/API_CALL_STANDARD.md, docs/standards/COMPONENT_STRUCTURE_STANDARD.md/core-solution-common-modules 스킬, docs/standards/COMMON_MODULES_USAGE_GUIDE.md — 새 기능·UI 구현 시 공통 모듈 검토 필수/core-solution-atomic-design 스킬, docs/design-system/ATOMIC_DESIGN_SYSTEM.md/core-solution-standardization, docs/standards/DESIGN_CENTRALIZATION_STANDARD.md