Preview Card

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

호버나 키보드 포커스 시 링크 대상의 요약을 미리 봅니다. 사용자에게 필요한 정보는 본문 텍스트와 대상 페이지에 유지하세요. 링크는 여전히 원래 href로 이동합니다.

Popup에 버튼, 폼, 독점 정보를 넣지 마세요. 터치, 키보드, 스크린 리더 사용자를 위한 별도 내비게이션 경로가 아니므로 Dialog나 Tooltip 역할을 부여하지 마세요. 콘텐츠에 인터랙션이 필요하면 Popover를 사용하세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Root<Payload> → Trigger(anchor) + Portal → Content(Positioner + Popup); optional Viewport / Arrow

키보드와 접근성

링크는 Tab과 Enter 내비게이션을 유지합니다. Popup이 지연 후 열려도 포커스가 안으로 이동하거나 갇히지 않습니다. Escape, 포커스 이동, 포인터 이동이 닫습니다. 미리 보기 정보는 대상 페이지에서도 모두 제공하세요.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { PreviewCard } from '@surflane/ui'

<PreviewCard.Root>
  <PreviewCard.Trigger href='/guides/deployment-policy'>
    Deployment policy guide
  </PreviewCard.Trigger>
  <PreviewCard.Portal>
    <PreviewCard.Content sideOffset={8}>
      <strong>Deployment policy guide</strong>
      <p>Check allowed and blocked environments with temporary tokens.</p>
    </PreviewCard.Content>
  </PreviewCard.Portal>
</PreviewCard.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰