# 인터랙티브 탐색 개선 · 2026-11-06
기존 Pure HTML/JavaScript 보고서에 React 19.3.1 / React Flow 12.12.1 탐색 컴포넌트를 결합했다. 기존 전역 CSS와 종이 바탕을 유지하고, 새 관계망의 테마 토큰과 스타일은 `.rf-explorer` 범위에 한정했다.
## 수정
- 검색 이벤트마다 `main.innerHTML`을 교체하던 구현을 제거했다. 재화·성장·BM·UI 검색은 안정된 React 입력 컴포넌트가 처리한다. 나머지 기존 페이지는 DOM 차이만 반영하며 한글 조합 중 DOM을 교체하지 않는다.
- 검색·항목 선택과 React Flow/Rive 인스턴스의 수명을 분리했다. 검색한다고 캔버스나 입력 포커스를 다시 만들지 않는다.
- 재화 캔버스는 획득 콘텐츠 → 재화 아이콘 → 성장·소모 콘텐츠로 연결한다. 공유 획득처의 이웃 재화를 추가로 표시하고, 노드 선택 시 직접 관계를 강조한다. 끌기·놓기에는 첨부 Lucian #206의 spring/damping 구조를 반영했다.
- 성장 32계열을 React Flow 단계 노드로 변경했다. 가로·세로 배치, 단계 선택, 전후 단계, 확대·축소·전체 보기·큰 캔버스를 지원한다.
- 실제 Rive 자산의 `selected`·`dragging`·`active` Boolean 입력을 그래프 상태에 연결했다. CLI 1.7.0 로컬 export와 Canvas 2.49.4 재생 검증을 재사용한다. 1.9.1/1.8.0 시작 충돌 자체는 미해결이다.
- LDPlayer에서 직접 확보한 15개 화면을 좌우 버튼·방향키로 탐색한다. 확인된 15개 메뉴 이동은 핫스팟과 연결 지도로 표시한다. 캡처 순서와 게임의 직접 이동은 구분한다.
- 타임딜 후보 54개와 기간 필드만 확인된 493개를 별도 필터로 분리했다. 독립 안내문·이름·조건 패턴을 대조했다. 현재 계정의 실제 활성 타임딜은 확정하지 않았다.
- Goods 이름 키 196개를 전수 조사했다. 리소스 키와 Sprite PPtr로 정확히 매칭한 98개를 표시하며, 추론 15개와 미확인 83개에는 다른 아이콘을 대신 붙이지 않았다. 3,540개 Sprite·4개 Atlas·3,650개 ResourceManager 항목과 실제 화면의 주요 15종을 대조했다.
## 변경 파일
- `src/legacy.js`: 기존 보고서 연결·안정된 DOM 업데이트
- `src/interactive.jsx`, `src/interactive.css`: React Flow 탐색·입력·UI 뷰어·로컬 테마·Rive 피드백
- `package.json`, `package-lock.json`, `build.mjs`: 재현 가능한 로컬 번들
- `integrate_followup.py`: 관찰 증거와 공개용 데이터·이미지 통합
- `public/app.js`, `public/app.css`, `public/index.html`: 배포 파일
- `public/data/interactive.json`, `time-deals.json`, `ui-runtime.json`: 후속 결과
- `public/assets/goods`, `runtime-ui`, `rive`: 검증된 리소스
## 출처와 라이선스
Lucian UX/UI Prompt #206 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#206
첨부 코드의 용수철 상수 6, 감쇠 `exp(-3.2*dt)`, 반발 계수 2600, 중앙 복귀 구조를 카드 크기와 React Flow 좌표에 맞춰 적용했다. 새 컴포넌트의 소스 상단에 라이선스 문구를 남겼다. 예시 사람·회사·대학 관계는 포함하지 않았다.
React Flow: https://reactflow.dev/learn/advanced-use/performance
Rive 자산·검증: `rive-lab/README.md`, `analysis/gameplay/rive-followup-20261106/findings.json`.
## 확인 범위와 남은 한계
최종 브라우저 검증은 `qa/independent/checks.json` 및 개별 증거 파일에 기록한다. 한글 CompositionEvent 회귀 검사와 운영체제의 실제 IME 키 입력은 구분한다. 실제 게임의 설치 버전과 원본 XAPK 동일성, 모든 하위 화면, 미확인 아이콘·타임딜 실행 조건은 범위 한계로 남긴다. 게임 구매·소환·강화·재화 소모·보상 수령은 검사하지 않았다.
최종 검증: 독립 브라우저 검사 34/34 통과. 입력/캔버스/Rive identity 유지, 실제 pointer drag·spring·zoom·pan, 좌우 키·핫스팟, 54/493 필터, 밝음/어두움, 390px 및 reduced-motion을 확인했습니다. 실제 OS IME와 실기기 터치는 미검증입니다. 데이터·자산·HTTP 검증 42개도 통과했습니다.