설치
프로젝트에 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';CDN 사용
빌드 도구 없이 HTML에서 직접 Podo UI를 사용할 수 있습니다. jsDelivr CDN을 통해 스타일시트를 로드하세요:
CSS 스타일시트
전역 CSS 스타일을 포함합니다 (리셋, 컬러, 레이아웃, 타이포그래피, 버튼, 폼 등):
HTML
<!-- Podo UI Global CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/podo-ui@latest/cdn/podo-ui.min.css">DatePicker (Vanilla JS)
React 없이 순수 JavaScript로 DatePicker 컴포넌트를 사용할 수 있습니다:
HTML
<!-- DatePicker CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/podo-ui@latest/cdn/podo-datepicker.min.css">
<!-- DatePicker JS -->
<script src="https://cdn.jsdelivr.net/npm/podo-ui@latest/cdn/podo-datepicker.min.js"></script>
<div id="my-datepicker"></div>
<script>
const picker = new PodoDatePicker('#my-datepicker', {
type: 'date',
onChange: function(value) {
console.log(value);
}
});
</script>참고: @latest 대신 특정 버전을 지정할 수 있습니다 (예: @0.8.0)
다음 단계
설치가 완료되었습니다! 이제 다음 문서를 참고하여 Podo UI를 사용해보세요: