Preview Card

설치

pnpm dlx ply-ui add preview-card

공통 설치 설정을 먼저 적용합니다.

사용법

Trigger의 href는 실제 이동 주소입니다. Popup은 보조 정보입니다.

마우스 없이도 링크 자체만으로 목적을 알 수 있도록 작성합니다.

구성

구성 요소	역할
`Root`	미리보기의 열림 상태를 관리합니다.
`Trigger`	마우스 또는 포커스의 대상이 되는 링크입니다.
`Portal / Positioner / Popup`	미리보기 내용의 위치와 표면을 구성합니다.
`Arrow`	대상 링크 방향을 가리키는 표시입니다.

구현 코드

components/ui/preview-card.tsx

preview-card.tsx

"use client";

import type { ComponentProps } from "react";
import { PreviewCard as Primitive } from "@base-ui/react/preview-card";
import { withClassName } from "../../lib/cx";
import "./preview-card.css";

// 동작과 접근성은 Base UI가 담당합니다. 이 파일은 스타일 연결만 담당합니다.
function PreviewCardTrigger({
  className,
  ...props
}: ComponentProps<typeof Primitive.Trigger>) {
  return (
    <Primitive.Trigger
      {...props}
      className={withClassName("rbx-nav-link", className)}
    />
  );
}

function PreviewCardPopup({
  className,
  ...props
}: ComponentProps<typeof Primitive.Popup>) {
  return (
    <Primitive.Popup
      {...props}
      className={withClassName("rbx-popup rbx-padded", className)}
    />
  );
}

function PreviewCardPositioner({
  className,
  ...props
}: ComponentProps<typeof Primitive.Positioner>) {
  return (
    <Primitive.Positioner
      {...props}
      className={withClassName("rbx-positioner", className)}
    />
  );
}

function PreviewCardArrow({
  className,
  ...props
}: ComponentProps<typeof Primitive.Arrow>) {
  return (
    <Primitive.Arrow
      {...props}
      className={withClassName("rbx-popup-arrow", className)}
    />
  );
}

// Root/Portal 등 스타일 없는 파트와 제네릭 API는 원본을 그대로 보존합니다.
export const PreviewCard = {
  ...Primitive,
  Trigger: PreviewCardTrigger,
  Popup: PreviewCardPopup,
  Positioner: PreviewCardPositioner,
  Arrow: PreviewCardArrow,
};

components/ui/preview-card.css

preview-card.css

/* PreviewCard: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */

설치

사용법

구성

구현 코드

목차