크라우니 메신저 외부 서비스 플로팅 위젯

날짜: 2026-05-27

개요

crowny.org와 tiomta.com 두 사이트에 크라우니 메신저(localhost:9752) 진입 플로팅 위젯을 추가했다. iframe + postMessage 방식, origin 검증 포함, 모바일 풀스크린 대응.

무엇을 했는가

A. crowny.org 플로팅 위젯

• 파일: /Users/ef/crowny-org/index.html (2469 → 2619줄)
• </body> 직전에 위젯 블록 추가
• 플로팅 버튼: #talk-widget-btn — 크라우니 골드(#8B6914), 오른쪽 하단 fixed
• 슬라이드 패널: #talk-widget-panel — 420px 오른쪽 슬라이드인
• iframe src: http://localhost:9752/?embed=crowny (첫 클릭 시 lazy load)
• postMessage 수신: ready → 토큰 전송, unread → 배지 표시, close → 닫기
• 토큰 출처: localStorage.getItem('crowny_token') → firebase.auth().currentUser.getIdToken()
• 외부 클릭, ESC 키 닫기 구현

B. tiomta.com 플로팅 위젯

• 파일: /Users/ef/crowny-tiomta/public/index.html (671 → 830줄)
• 동일 패턴, 색상은 tiomta 토큰(--accent: #C9A961) 사용
• iframe src: http://localhost:9752/?embed=tiomta
• 토큰 출처: localStorage.getItem('tiomta_session') → /api/me fallback

C. 한선씨 정본

• 파일: /Users/ef/CrownyOS/apps/메신저/v3/외부위젯.한선
• 함수 4개: 위젯CSS생성(), 위젯HTML생성(부모도메인), 위젯JS생성(부모도메인), _자가검증()
• _자가검증() 5건: z-index/모바일미디어쿼리/iframe sandbox/origin검증/tiomta파라미터

관련 파일 경로

• /Users/ef/crowny-org/index.html — crowny.org 메인 SPA (위젯 추가됨)
• /Users/ef/crowny-tiomta/public/index.html — tiomta 메인 (위젯 추가됨)
• /Users/ef/CrownyOS/apps/메신저/v3/외부위젯.한선 — 한선씨 정본

잔여 이슈

1. Firebase Auth ↔ CrownyAuth 토큰 매핑 — 별도 에이전트 담당. 메신저 서버(:9752)가 Firebase ID 토큰을 어떻게 검증할지 미정.
2. 컴파일 검증 — Bash 권한 차단으로 hanseonc_high 컴파일 및 JS 문법 검사 실행 불가. 수동 실행 필요:

bash   /Users/ef/CrownyOS/crownyc/hanseonc_high /Users/ef/CrownyOS/apps/메신저/v3/외부위젯.한선 > /dev/null && echo OK
   node -e "const fs=require('fs');const h=fs.readFileSync('/Users/ef/crowny-org/index.html','utf8');const s=[...h.matchAll(/<script[^>]*>([\s\S]*?)<\/script>/g)].filter(m=>m[1].length>50);s.forEach((m,i)=>{try{new Function(m[1]);}catch(e){console.log('ERR '+i+':'+e.message.substring(0,100))}});console.log('총 '+s.length+'개 스크립트 OK')"
   

1. 메신저 서버(:9752) — ?embed=crowny|tiomta 파라미터 처리 로직은 다른 에이전트가 준비 중
2. learn.sh 학습 — Bash 권한 차단으로 자동 학습 불가. 수동 등록 필요:

bash   ~/.claude/scripts/crownycode-learn.sh add "외부서비스위젯iframe" "플로팅위젯 lazy iframe + postMessage origin 검증"