설치
프로젝트에 Podo UI를 설치하세요
NPM 설치
npm, yarn, 또는 pnpm을 사용하여 Podo UI를 설치할 수 있습니다:
npm install podo-uiyarn add podo-uipnpm add podo-ui기본 설정
1. Global SCSS 적용
애플리케이션의 진입점에서 전역 스타일을 import합니다:
main.tsx 또는 App.tsx
import 'podo-ui/global.scss';참고: global.scss는 리셋, 컬러, 레이아웃, 타이포그래피, 아이콘, 버튼, 폼 등 모든 기본 스타일을 포함합니다.
2. Vite 프로젝트 추가 설정
중요: Vite를 사용하는 경우 폰트 경로 재정의가 필요합니다!
Vite에서는 node_modules 내의 상대 경로를 올바르게 처리하지 못할 수 있습니다. vite-fonts.scss를 추가로 import하세요:
main.tsx (Vite)
import 'podo-ui/global.scss';
import 'podo-ui/vite-fonts.scss'; // Vite용 폰트 경로 재정의참고: Next.js나 Create React App 등 다른 번들러는 vite-fonts.scss 없이 사용 가능합니다.
3. SCSS Module에서 변수/함수/믹스인 사용
컴포넌트의 SCSS 모듈에서 Podo UI의 함수와 믹스인을 사용하려면 다음과 같이 import합니다:
component.module.scss
@use 'podo-ui/mixin' as *;
.myComponent {
color: color(primary); // 컬러 함수
margin: s(4); // 간격 함수 (12px)
border-radius: r(2); // 반경 함수
@include p2; // 타이포그래피 믹스인
}React 컴포넌트 사용
Podo UI는 일부 React 컴포넌트를 제공합니다. 다음과 같이 import하여 사용할 수 있습니다:
일반 React 프로젝트
import { Input, Textarea, Editor, Field, Toast, Chip } from 'podo-ui';다음 단계
설치가 완료되었습니다! 이제 다음 문서를 참고하여 Podo UI를 사용해보세요: