React를 위한 Vite plugin

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

컴포넌트 위에 /** @preview */를 붙이면, 이미 실행 중인 Vite dev server가 렌더링하는 실시간 갤러리에 나타납니다. 배포 build는 그대로입니다.

Button.tsx

import { Button } from "./Button";

Save

No. 01PrimaryInputs

toneprimarydangerghost

children"Save"

disabled

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

왜 Vitrine인가

토스트 하나 보려고 앱을 헤매지 마세요.

localhost:5173/loginlocalhost:5173/productslocalhost:5173/cartlocalhost:5173/checkoutlocalhost:5173/checkout/payment

결제가 거절됐어요. 다른 카드를 사용해 주세요.

5번 클릭해야 보이는 토스트 하나

그리고 3초 뒤에 사라집니다.

로그인하고, 장바구니를 채우고, 카드를 입력하고, 일부러 결제를 실패시킵니다. 경고와 긴 문구도 보려면 처음부터 다시 합니다.

preview(Toast, {
  variants: {
    success: { args: { tone: "success" } },
    error: { args: { tone: "error" } },
    warning: { args: { tone: "warning" } },
    long: { args: { message: "We couldn't…" } },
  },
});

결제가 완료됐어요

결제가 거절됐어요. 다른 카드를 사용해 주세요.

카드가 다음 달에 만료돼요

카드사가 거래를 거절해서 결제를 처리하지 못했어요. 다른 결제 수단을 사용해 주세요.

0번 클릭. 적어 둔 경우가 모두 이미 화면에 있습니다.

preview()로 필요한 경우를 컴포넌트 옆에 적어 두세요. 화면에서 사라지지 않고, 저장할 때마다 바로 반영됩니다.

달라지는 것

나를 위해 넣었는데,
팀도 편해집니다.

스크린샷도, 화면 공유도, “네 PC에서 돌려 봐 줄래?”도 줄어듭니다.

나에게

```
plugins: [
  react(),
  vitrine(),
]
```
설정은 한 줄vite.config.ts
지금 쓰는 Vite 설정에 추가하면 끝입니다. alias와 CSS가 그대로 동작하고 배포 build는 바뀌지 않습니다.
페이지보다 컴포넌트 먼저args
페이지나 API가 준비되기 전에 예시 props로 컴포넌트를 만들고 확인하세요.
타입에서 만드는 PropsTypeScript
컴포넌트의 props로 컨트롤이 만들어져 손으로 맞춰 둘 것이 없습니다.
```
/** @preview */
export const Danger = …
```
커서를 따라가는 패널VS Code, 선택
VS Code에서는 편집 중인 프리뷰로 패널이 바뀝니다. 브라우저 갤러리만으로도 충분히 쓸 수 있습니다.

그리고 팀이 덜 묻습니다

# design

Mina 디자이너발행 버튼이 비활성일 때 어떻게 보여요?

나딱 그 상태예요:localhost:5173/__vitrine#preview=Button&args={"disabled":true}

localhost:5173/__vitrine

Publishdisabled: true

기능

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

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

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

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

toneprimary

childrenSave

disabled

PrimaryDanger

Delete

Theme lightdarkLocale ko

Ada Park팔로우

InputsButtonCheckboxFeedbackAlert

Viewport Mobile

375pxSave

primary, smSaveprimary, mdSaveprimary, lgSavedanger, smSavedanger, mdSavedanger, lgSave

Post published Undo

12:04:31 onUndo [event click]12:04:33 onDismiss [event click]

CompareSnapshot 1

Snapshot 1SaveCurrentSave changes

/** @preview */export const Primary = Button;/** @preview */export const Danger = Button;

/__vitrine#preview=src%2FButton.tsx%23Button&variant=danger

Delete

Link copied

$ npx vitrine-static buildvitrine-static/index.htmlvitrine-static/frame.htmlvitrine-static/assets/Gallery written to vitrine-static

사용법

주석 한 줄로 시작합니다.

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

Components.tsx

/** @preview */
export const Button = () => <button>Publish</button>;
 
/** @preview */
export const Badge = () => <span>New</span>;

/__vitrine실시간

No. 01
프리뷰 지정/** @preview */
export한 컴포넌트 바로 위에 주석을 추가합니다. 프리뷰는 컴포넌트 코드와 함께 관리합니다.
No. 02
서버 실행vite dev
플러그인을 추가하고 평소처럼 개발 서버를 실행합니다. Vitrine은 개발 서버에서만 동작합니다.
No. 03
갤러리 열기/__vitrine
브라우저에서 열거나 VS Code 확장으로 에디터 옆에 띄웁니다.

호환성

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

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

FAQ

자주 묻는 질문

production 빌드가 바뀌나요?

아니요. plugin은 vite serve에서만 동작하고 빌드 결과에는 아무것도 추가하지 않습니다. 정적 갤러리는 별도 명령으로 만듭니다.

갤러리를 배포할 수 있나요?

네. vitrine-plugin-static을 추가하고 vitrine-static build를 실행하면 어느 정적 호스팅에나 올릴 수 있는 폴더가 생깁니다.

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

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

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

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

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

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

첫 컴포넌트를 진열해 보세요.

설치 한 번, vite.config 한 줄, 주석 한 줄이면 됩니다.

시작하기 라이브 데모 열기