Installation - Vapor UI

이 문서를 완료하면 Vapor UI 패키지를 설치하고, 첫 번째 컴포넌트를 화면에 렌더링할 수 있습니다.

사전 준비

다음 환경이 필요합니다.

요구사항	버전
React	17 이상
Node.js	16 이상

패키지 매니저를 사용하여 Vapor UI를 설치합니다.

npm install @vapor-ui/core @vapor-ui/icons

Vapor UI는 Dialog, Popover 같은 팝업 컴포넌트에 Portal을 사용합니다. Portal 컴포넌트가 항상 페이지 최상단에 표시되도록 애플리케이션 레이아웃 루트에 다음 스타일을 추가합니다.

layout.tsx

<body>
  <div className="root">
    {children}
  </div>
</body>

styles.css

.root {
  isolation: isolate;
}

이 스타일은 .root 요소에 별도의 stacking context를 생성합니다. 이를 통해 팝업이 항상 페이지 콘텐츠 위에 표시되며, 다른 스타일의 z-index 속성과 충돌하지 않습니다.

컴포넌트를 import하여 사용합니다.

이것은 Vapor UI를 사용하여 컴포넌트를 구성하는 예시입니다.