name: create-symbol-state-component description: 인라인 SVG HTML을 상태 기반 동적 컴포넌트로 변환합니다. CSS 변수로 색상을 제어하고 런타임 API를 제공합니다.

심볼 상태 컴포넌트 생성

인라인 SVG HTML을 상태 기반 동적 컴포넌트로 변환합니다. data-status 속성과 CSS 셀렉터로 색상을 제어합니다.

기본 원칙은 create-standard-component 참조

⚠️ 작업 전 필수 확인

코드 작성 전 반드시 다음 파일들을 Read 도구로 읽으세요. 이전에 읽었더라도 매번 다시 읽어야 합니다 - 캐싱하거나 생략하지 마세요.

1. /RNBT_architecture/README.md - 아키텍처 이해
2. /.claude/guides/CODING_STYLE.md - 코딩 스타일

핵심 원리

SVG <defs>에 3세트 gradient 정의 (paint0-green, paint0-yellow, paint0-red)
  ↓
SVG path에 layer 클래스 부여 (layer-grad0, layer-fill-primary)
  ↓
CSS [data-status="xxx"] 셀렉터로 fill URL 제어
  ↓
JS에서 dataset.status만 변경 → CSS가 색상 전환

장점: innerHTML 교체 없이 속성만 변경 (DOM 효율적)

입출력

입력: Figma_Conversion/Static_Components/[프로젝트명]/[컴포넌트명]/

출력:

components/[ComponentName]/
├── views/component.html       # SVG + 3세트 gradient + layer 클래스
├── styles/component.css       # [data-status] 셀렉터
├── scripts/
│   ├── register.js            # setStatus, getStatus API
│   └── beforeDestroy.js
├── preview.html
└── README.md

Layer 클래스 명명 규칙

핵심 API

// 상태 변경 - data-status 속성만 변경
function setStatus(config, status) {
    container.dataset.status = status;  // CSS가 색상 제어
    this._currentStatus = status;
}

// 현재 상태 반환
function getStatus() {
    return this._currentStatus;
}

금지 사항

• ❌ innerHTML 교체로 색상 변경
• ❌ 생성/정리 불일치
• ❌ function(response) 사용 → function({ response }) 필수

관련 자료