Components

xApp Shell

화면 전체를 덮는 풀스크린 미니앱 프레임입니다. 예약·결제·인증·서명 같은 완결 작업을 담습니다.

좌석 선택

가능선택불가

코드 보기

<div class="xapp-frame">
  <div class="xapp-top">제목 <button class="x">✕</button></div>
  <div class="xapp-body">… 완결 작업 UI …</div>
  <button class="xapp-cta">완료 CTA (1개)</button>
</div>

Variants

이름	설명	미리보기
헤더	제목 + 닫기 ✕	결제 ✕
CTA	하단 전폭 버튼 1개 — 선택 내용을 레이블에 반영
짝(pair) 패턴	완료 → Adaptive Card로 요약 반환	xApp 완료 → Card 요약

Guidelines

✓ Do

모바일 세로 단일 컬럼
완료하면 반드시 Adaptive Card로 요약을 대화에 반환 (pair 패턴)
CTA 레이블에 선택 결과를 반영 ("14A 선택 완료")

✕ Don't

xApp 안에서 다른 xApp 열지 않는다
닫기(✕) 없는 xApp 금지 — 사용자는 언제든 대화로 복귀

Specification

속성	토큰/값	비고
`프레임`	`모바일 세로 / radius 20px`
`CTA`	`전폭 1개 / --foreground → hover accent`
`포인트`	`--ac-accent 상속 (Card와 동일)`

비교

카탈로그 16종의 SoT = 화면하네스 component_library_v1.html (예약·결제·본인인증·좌석 선택·전자서명·OCR 등). 프리미엄 기능 — SMS 링크 전달이 선결.