create-component-with-popup

Shadow DOM 팝업을 가진 컴포넌트를 생성합니다. 컴포넌트가 직접 데이터를 fetch하고 팝업으로 표시합니다. 3D 씬, 독립 위젯 등에 사용합니다.

Stars 163

Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/create-component-with-popup

SKILL.md

팝업 컴포넌트 생성

컴포넌트가 직접 데이터를 fetch하고 Shadow DOM 팝업으로 표시합니다.

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

⚠️ 작업 전 필수 확인

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

/RNBT_architecture/README.md - 아키텍처 이해
/.claude/guides/CODING_STYLE.md - 코딩 스타일
/RNBT_architecture/Utils/PopupMixin.js - PopupMixin API

일반 vs 팝업 컴포넌트

구분	일반 컴포넌트	팝업 컴포넌트
데이터	GlobalDataPublisher	Wkit.fetchData
구독	`subscriptions`	`datasetInfo`
팝업	선택적	필수

핵심 원칙

데이터 흐름

페이지 → @assetClicked 이벤트 수신 → source.showDetail() 호출
컴포넌트 → showPopup() → fetchData() → render functions

팝업이 있을 때만 컴포넌트의 직접 fetch 허용

필수 구성

구성	설명
`applyShadowPopupMixin`	Shadow DOM 팝업
`datasetInfo`	fetch할 데이터 정의
`applyEChartsMixin`	차트 시 (옵션)
`applyTabulatorMixin`	테이블 시 (옵션)

출력 구조

components/[ComponentName]/
├── views/component.html       # 팝업 템플릿 (<template id="popup-xxx">)
├── styles/component.css
├── scripts/
│   ├── register.js
│   └── beforeDestroy.js       # destroyPopup() 호출
├── preview.html
└── README.md

참조	위치
UPS (기본)	/RNBT_architecture/Projects/ECO/page/components/UPS/
PDU (탭 UI + 테이블)	/RNBT_architecture/Projects/ECO/page/components/PDU/
CRAC (듀얼 Y축 차트)	/RNBT_architecture/Projects/ECO/page/components/CRAC/

Search AI Tools