Vitrine

React와 Vite를 위한 컴포넌트 갤러리

내 컴포넌트를진열하세요.

export 바로 위에 주석 한 줄을 추가하세요. Vitrine이 내 Vite 개발 서버로 렌더링한 프리뷰를 에디터 옆에서 보여줍니다.

VS Code 확장 받기
Button.tsx
import { Button } from "./Button";
Save
No. 01PrimaryInputs
toneprimarydangerghost
children"Save"
disabled

프리뷰를 선택하면 갤러리가 바뀝니다

사용법

주석 한 줄로 시작합니다.

컴포넌트는 내 Vite 설정 그대로 렌더링됩니다. alias, 플러그인, CSS, HMR도 앱과 같은 방식으로 동작합니다.

  1. No. 01프리뷰 지정/** @preview */

    export한 컴포넌트 바로 위에 주석을 추가합니다. 프리뷰는 컴포넌트 코드와 함께 관리합니다.

  2. No. 02서버 실행vite dev

    플러그인을 추가하고 평소처럼 개발 서버를 실행합니다. Vitrine은 개발 서버에서만 동작합니다.

  3. No. 03갤러리 열기/__vitrine

    브라우저에서 열거나 VS Code 확장으로 에디터 옆에 띄웁니다.

기능

프리뷰를 더 편하게 다루는 기능

  • Props 컨트롤타입에서 자동 생성

    prop 타입으로 컨트롤을 만듭니다. 다른 파일에서 import한 타입도 해석합니다.

    interface ButtonProps {
  tone: "primary" | "danger";
  disabled?: boolean;
}

  • Variantspreview()

    이름 붙인 props 묶음을 만들고 갤러리에서 전환합니다.

    preview(Button, {
  variants: {
    primary: { args: { tone: "primary" } },
    danger: { args: { tone: "danger" } },
  },
});

  • 커서 따라가기VS Code

    @preview export 위로 커서를 옮기면 패널이 그 프리뷰로 바뀝니다.

  • 그룹name="Inputs/Button"

    이름에 슬래시를 넣으면 사이드바 그룹으로 정리됩니다.

    /** @preview name="Inputs/Button" */
export const Primary = () => <Button />;

호환성

지금 쓰는 환경에 그대로 맞습니다.

React 18, 19와 Vite 6.4 이상을 지원합니다. 프리뷰는 내 Vite 설정으로 렌더링되어 alias, CSS, 플러그인이 앱과 같은 방식으로 동작합니다.

FAQ

자주 묻는 질문

production 빌드가 바뀌나요?

아니요. plugin은 vite serve에서만 동작하고 빌드 결과에는 아무것도 추가하지 않습니다.

VS Code 확장이 꼭 필요한가요?

아니요. 갤러리는 어느 브라우저에서나 /__vitrine으로 열립니다. 확장은 커서를 따라가는 옆 패널을 더해줍니다.

프로젝트에 .vitrine 폴더가 생기는 이유는요?

확장이 dev server를 찾을 수 있도록 plugin이 포트를 기록합니다. 이 폴더는 스스로를 git에서 제외해서 커밋에 들어가지 않습니다.

문제가 생기면 어디에 알려야 하나요?

React와 Vite 버전을 적어 GitHub 이슈를 열어주세요