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

팝업 컴포넌트 생성

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

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

⚠️ 작업 전 필수 확인

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

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

일반 vs 팝업 컴포넌트

핵심 원칙

데이터 흐름

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

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

필수 구성

출력 구조

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

관련 자료

beforeDestroy에서 destroyPopup() 필수