PreviewCard
연결된 콘텐츠를 hover 또는 focus했을 때 표시하는 비모달 미리보기예요.
핵심 속성
이 Tinyrack wrapper는 Base UI 동작, React 19 ref, native props, event, render contract를 그대로 유지해요. Playground control은 align, 화면에 표시되는 description, label, side, title을 다뤄요. open 상태는 내부에서 관리하므로 hover와 focus가 일반 component 동작을 사용해요. Reset은 preview를 닫힌 상태로 다시 mount하고 content와 positioning 기본값을 복원해요.
Trigger는 기본적으로 열기 전에 600ms, 닫기 전에 300ms를 기다려요.
trigger에서 card로 이동하는 pointer path가 충분히 여유로울 때만 delay와 closeDelay로 해당 값을 override하세요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/preview-card.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRPreviewCard } from '@tinyrack/ui/components/preview-card';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
분리된 trigger handle 고유 링크
TRPreviewCard.createHandle은 함께 배치할 수 없는 trigger와 root를 연결해요. preview는 non-interactive 상태로 link destination을 반영해요.
timing과 collision-safe 배치 고유 링크
card가 side 배치와 viewport-aware containment를 보여 줘요.
API
모든 compound part와 prop/state type은 @tinyrack/ui/components/preview-card에서 export돼요. style은 대응 CSS subpath를 통한 opt-in으로 유지돼요. Root는 제어형·비제어형 open 상태를 담당해요. Trigger는 destination link이며 delay, closeDelay, handle, optional payload를 담당해요. Portal은 DOM container를 선택하고 Backdrop은 선택 사항이며 Positioner는 collision-aware 배치, Popup은 preview, Arrow는 active trigger 방향을 나타내요. 여러 trigger 사이의 animated content change에만 Viewport를 사용하세요. TRPreviewCard.createHandle<Payload>()은 분리된 trigger와 root를 연결해요.
Popup content는 non-interactive 상태로 유지하세요. preview content는 touch 및 screen-reader 사용자에게 제공되지 않으므로 trigger destination에도 있는 정보만 요약해야 해요. Escape는 현재 focus context를 옮기지 않고 열린 preview를 닫아요.
TRPreviewCard는 마우스 hover와 키보드 focus를 위한 점진적 향상 기능이지, 터치 전용 공개 패턴이 아니에요. trigger는 여전히 실제 링크라서 탭하면 href로 이동해요. 그러니 꼭 필요한 정보나 어떤 동작에 이르는 유일한 경로를 preview 안에 두지 마세요. 터치 사용자가 이동하지 않고 보조 표면을 열어야 한다면 별도의 button이나 dialog 패턴을 제공하세요.