RNBT_architecture/Components/[ComponentName]/
├── views/component.html       # HTML 구조
├── styles/component.css       # 스타일
├── scripts/
│   ├── register.js            # 초기화 + 메서드 정의
│   └── beforeDestroy.js       # 정리
├── preview.html               # 독립 테스트 (Mock 데이터 포함)
└── README.md                  # 컴포넌트 문서 (필수)

// 페이지가 구독하여 처리할 이벤트
this.customEvents = {
    click: {
        '.node-content': '@TBD_nodeClicked',  // 페이지에서 상세 패널 열기 등
        '.btn-export': '@TBD_exportClicked'   // 페이지에서 export 로직 처리
    }
};
bindEvents(this, this.customEvents);

// STATE에 핸들러 참조 저장용 객체 추가
this._internalHandlers = {};

// 컴포넌트 자체 UI 동작
function setupInternalHandlers() {
    const root = this.appendElement;

    // 핸들러 참조 저장 (beforeDestroy에서 제거용)
    this._internalHandlers.clearClick = () => this.clearLogs();
    this._internalHandlers.scrollClick = () => this.toggleAutoScroll();

    // 핸들러 바인딩
    root.querySelector('.btn-clear')?.addEventListener('click', this._internalHandlers.clearClick);
    root.querySelector('.btn-scroll')?.addEventListener('click', this._internalHandlers.scrollClick);
}
setupInternalHandlers.call(this);

// customEvents로 페이지에 알림
this.customEvents = {
    click: {
        '.node-toggle': '@TBD_nodeToggled'  // 페이지에 알림 (선택적)
    }
};
bindEvents(this, this.customEvents);

// setupInternalHandlers로 내부 동작 수행
function setupInternalHandlers() {
    const root = this.appendElement;

    // 핸들러 참조 저장
    this._internalHandlers.toggleClick = (e) => {
        const toggle = e.target.closest('.node-toggle');
        if (toggle) {
            this.toggleNode(nodeId);  // 내부 동작 (필수)
        }
    };

    // 핸들러 바인딩
    root.addEventListener('click', this._internalHandlers.toggleClick);
}

1. 요구사항 확인
   └─ 컴포넌트 용도, 데이터 구조, 필요한 이벤트

2. HTML 구조 설계
   └─ views/component.html 작성

3. CSS 스타일 작성
   └─ styles/component.css 작성

4. register.js 작성
   └─ TBD 패턴으로 외부 인터페이스 정의

5. beforeDestroy.js 작성
   └─ 모든 리소스 정리

6. preview.html 작성
   └─ Mock 데이터로 독립 테스트

// API 필드명이 미정일 때
const config = {
    titleKey: 'TBD_title',
    itemsKey: 'TBD_items',
    fields: {
        id: 'TBD_id',
        name: 'TBD_name'
    }
};

this.subscriptions = {
    TBD_topicName: ['renderData']
};

this.customEvents = {
    click: {
        '.btn-action': '@TBD_actionClicked'
    }
};

/*
 * [ComponentName] Component - register
 * [컴포넌트 설명]
 *
 * Subscribes to: TBD_topicName
 * Events: @TBD_eventName
 *
 * Expected Data Structure:
 * {
 *   field1: "value",
 *   items: [{ id: 1, name: "Item" }]
 * }
 */

const { subscribe } = GlobalDataPublisher;
const { bindEvents } = Wkit;

// ======================
// CONFIG (정적 선언)
// ======================

const config = {
    field1Key: 'TBD_field1',
    itemsKey: 'TBD_items'
};

// ======================
// STATE (필요시)
// ======================

// this._internalState = initialValue;
this._internalHandlers = {};

// ======================
// BINDINGS (바인딩)
// ======================

this.renderData = renderData.bind(this, config);

// ======================
// SUBSCRIPTIONS
// ======================

this.subscriptions = {
    TBD_topicName: ['renderData']
};

fx.go(
    Object.entries(this.subscriptions),
    fx.each(([topic, fnList]) =>
        fx.each(fn => this[fn] && subscribe(topic, this, this[fn]), fnList)
    )
);

// ======================
// EVENT BINDING
// ======================

this.customEvents = {
    click: {
        '.btn-action': '@TBD_actionClicked'
    }
};

bindEvents(this, this.customEvents);

// 내부 이벤트 핸들러 (컴포넌트 자체 동작)
setupInternalHandlers.call(this);

// ======================
// RENDER FUNCTIONS (호이스팅)
// ======================

function renderData(config, { response }) {
    const { data } = response;
    if (!data) return;

    // 렌더링 로직
}

// ======================
// INTERNAL HANDLERS (필요시)
// ======================

function setupInternalHandlers() {
    const root = this.appendElement;

    // 핸들러 참조 저장 (beforeDestroy에서 제거용)
    // this._internalHandlers.actionClick = () => this.doAction();

    // 핸들러 바인딩
    // root.querySelector('.btn-action')?.addEventListener('click', this._internalHandlers.actionClick);
}

/*
 * [ComponentName] Component - beforeDestroy
 * [컴포넌트 설명]
 */

const { unsubscribe } = GlobalDataPublisher;
const { removeCustomEvents } = Wkit;
const { each } = fx;

// ======================
// SUBSCRIPTION CLEANUP
// ======================

fx.go(
    Object.entries(this.subscriptions),
    each(([topic, _]) => unsubscribe(topic, this))
);
this.subscriptions = null;

// ======================
// EVENT CLEANUP
// ======================

removeCustomEvents(this, this.customEvents);
this.customEvents = null;

// ======================
// INTERNAL HANDLER CLEANUP
// ======================

const root = this.appendElement;
if (this._internalHandlers) {
    // root.querySelector('.btn-action')?.removeEventListener('click', this._internalHandlers.actionClick);
}
this._internalHandlers = null;

// ======================
// STATE CLEANUP (필요시)
// ======================

// this._internalState = null;

// ======================
// HANDLER CLEANUP
// ======================

this.renderData = null;

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[ComponentName] Preview</title>
    <link rel="stylesheet" href="styles/component.css">
    <style>
        body {
            margin: 0;
            padding: 40px;
            background: #0d1117;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        h1 { color: #e0e6ed; margin-bottom: 24px; }
        .preview-container { width: 400px; height: 300px; }
        .controls { margin-top: 24px; }
        .controls button {
            padding: 8px 16px;
            margin-right: 8px;
            background: #4ade80;
            color: #1a1f2e;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .controls button.destroy { background: #f87171; }
    </style>
</head>
<body>
    <h1>[ComponentName] Component Preview</h1>
    <div id="component-root" class="preview-container"></div>
    <div class="controls">
        <button onclick="sendMockData()">Send Data</button>
        <button onclick="destroy()" class="destroy">Destroy</button>
    </div>

    <script>
        // ======================
        // MOCK CONTEXT
        // ======================

        const mockThis = {
            appendElement: document.getElementById('component-root')
        };

        // HTML 삽입 (views/component.html 내용)
        mockThis.appendElement.innerHTML = `
            <!-- component.html 내용 복사 -->
        `;

        // ======================
        // MOCK DEPENDENCIES
        // ======================

        const GlobalDataPublisher = {
            subscribe: (topic, context, fn) => {
                console.log(`[Mock] subscribe: ${topic}`);
            },
            unsubscribe: (topic, context) => {
                console.log(`[Mock] unsubscribe: ${topic}`);
            }
        };

        const Wkit = {
            bindEvents: (context, events) => {
                console.log('[Mock] bindEvents:', events);
            },
            removeCustomEvents: (context, events) => {
                console.log('[Mock] removeCustomEvents:', events);
            }
        };

        const fx = {
            go: (arr, ...fns) => fns.reduce((acc, fn) => fn(acc), arr),
            each: fn => arr => { arr.forEach(fn); return arr; }
        };

        // ======================
        // REGISTER (scripts/register.js 내용)
        // ======================

        (function register() {
            // register.js 내용 복사 (TBD를 실제 값으로 변경)
        }).call(mockThis);

        // ======================
        // BEFORE DESTROY
        // ======================

        function destroy() {
            (function beforeDestroy() {
                // beforeDestroy.js 내용 복사
            }).call(mockThis);
        }

        // ======================
        // TEST HELPERS
        // ======================

        function sendMockData() {
            mockThis.renderData({
                response: {
                    data: {
                        // Mock 데이터
                    }
                }
            });
        }

        // 초기 렌더링
        sendMockData();
    </script>
</body>
</html>

/* 최상위 컨테이너 클래스로 스코프 */
.component-name {
    display: flex;
    flex-direction: column;
    background: #1a1f2e;
    border-radius: 8px;
    overflow: hidden;
}

/* 모든 하위 셀렉터는 부모 포함 */
.component-name .header { ... }
.component-name .content { ... }

- [ ] 요구사항 확인 (용도, 데이터 구조, 이벤트)
- [ ] views/component.html 생성
- [ ] styles/component.css 생성
- [ ] register.js 작성
    - [ ] TBD 패턴으로 외부 인터페이스 정의
    - [ ] subscriptions, customEvents, config 정의
    - [ ] 렌더 함수 구현
- [ ] beforeDestroy.js 작성
    - [ ] 모든 리소스 정리
- [ ] preview.html 작성
    - [ ] Mock 데이터 정의
    - [ ] TBD를 실제 값으로 변경
- [ ] README.md 작성 (필수)
- [ ] 브라우저에서 preview.html 테스트
- [ ] Components/README.md 목록 업데이트

# [ComponentName]

[컴포넌트 한 줄 설명]

## 데이터 구조

\`\`\`javascript
{
    field1: "value",        // 필드 설명
    items: [                // 배열 필드 설명
        { id: 1, name: "Item" }
    ]
}
\`\`\`

## 구독 (Subscriptions)

| Topic | 함수 | 설명 |
|-------|------|------|
| `TBD_topicName` | `renderData` | 데이터 수신 시 렌더링 |

## 발행 이벤트 (Events)

| 이벤트 | 발생 시점 | payload |
|--------|----------|---------|
| `@TBD_eventName` | 버튼 클릭 시 | `{ event, targetInstance }` |

## 내부 동작

### [기능 1]
- 동작 설명

### [기능 2]
- 동작 설명

## TBD 항목

실제 사용 시 변경 필요:

\`\`\`javascript
// config
field1Key: 'TBD_field1' → 'actualFieldName'

// subscriptions
TBD_topicName → 'actualTopic'

// events
@TBD_eventName → '@actualEventName'
\`\`\`

## 파일 구조

\`\`\`
[ComponentName]/
├── views/component.html
├── styles/component.css
├── scripts/
│   ├── register.js
│   └── beforeDestroy.js
├── preview.html
└── README.md
\`\`\`