Leyve Docs

다크모드

InfoHint — ⓘ 점진적 공개 패턴 (FE 메인테이너) ​

작성: 2026-06-22 · 상태: ✅ 파일럿(도출근거 시트 + 부모 캡션). 전 화면 캡션 전파 대기. 정본 ADR: leysys-design docs/decisions/PATTERN-INFO-HINT-PROGRESSIVE-DISCLOSURE-2026-06-22.md.

왜 ​

화면 제목·섹션 아래 상시 설명문(산문) 을 까는 대신, 제목 옆 ⓘ → 탭 팝오버로 보조 설명. 전문가엔 깨끗·초보엔 온디맨드. (오너 요청 2026-06-22.)

컴포넌트 — src/components/common/InfoHint.vue ​

vue
<InfoHint text="부과액 − 받은금액·감면 = 미수" />
<InfoHint label="연체료 산식"><b>대상원금 × 연이율 × 일수 ÷ 365</b> …</InfoHint>
<!-- 슬롯 -->
  • props: text(설명, 슬롯 대안) · label(트리거 aria, 기본 "설명 보기").
  • DS @/registry/vue/popover(Reka) — Popover > PopoverTrigger > PopoverPortal > PopoverContent.popover-content.
  • PopoverPortal = top-layer 포털 → 시트 본문·가로스크롤 표의 overflow 클리핑 면역(구 hover 툴팁 잘림 버그 해소).
  • 탭 트리거(모바일 대응). 아이콘 material-symbols text-base text-dimmed.
  • SSOT: leysys-design pattern-app/info-hint/MainOrg.vue byte-equivalent 카피(신규 token·class 0).

적용 규칙 (캡션 판별) ​

캡션 유형처리
라벨 재진술·도출 설명·흐름 안내ⓘ로 이동
순수 어포던스 안내("밑줄 누르면…")제거(밑줄·커서가 신호) 또는 ⓘ 흡수
숫자 해석을 바꾸는 경고성(조건부)압축 유지(배지/짧은 주석) — 숨기지 않음

배치: 제목/섹션 라벨과 같은 행에 flex items-center gap-1로 ⓘ를 붙인다. body-xs 섹션 라벨 옆에도 동일.

파일럿 변경 (2026-06-22) ​

  • SheetDerivationArt.vue: subtitle→제목 ⓘ / "세구분 — …"→세구분 라벨+ⓘ / "충당 순서: …"→충당 내역 라벨+ⓘ / 연체 "산식·이월" 2문장→상단 카드 ⓘ. 조건부 baseSplit 주석만 유지(구간분할 = 데이터 해석 경고). 상시 <p> 캡션 0.
  • AllocationStatusOrg.vue: "금액(밑줄)…·이월 누적" 캡션 → 차수별 미수·수납 제목 ⓘ.
  • 검증: scripts/probe-info-hint.mjs — 양 ⓘ 팝오버 VISIBLE(클리핑 아님), 잔존 <p> 캡션 0.

전파 대상 / 한계 ​

  • 전파: 설정 화면(provenance·정책 설명 — 예: surcharge effective-dated "적용일"), 각 시트/리스트 캡션. 캡션 발견 시 본 패턴으로 정리.
  • ✅ TermTip(용어 점선밑줄) 탭 통일 완료(2026-06-22): 구 hover .tooltip → InfoHint와 동일 Popover(탭 + PopoverPortal). 모바일 터치 동작 + 가로스크롤 표 클리핑 면역(IMG_4100 버그 해소). 사용처 2(SheetCollectingDetailArt·AllocationStatusOrg).
  • DS 카탈로그(nav·Pag 데모) 정식 등록은 롤아웃 시 — 현재 컴포넌트 파일 + ADR로 정착.