사용법

Podo UI 사용 방법을 알아보세요

CSS 클래스 사용하기

Podo UI는 CSS 우선 접근 방식을 사용합니다. 대부분의 스타일은 HTML 클래스를 통해 적용됩니다.

버튼 예제

<button class="primary">Primary Button</button>
<button class="info">Info Button</button>
<button class="danger">Danger Button</button>

버튼 변형

<button class="primary-fill">Primary Fill</button>
<button class="primary-border">Primary Border</button>
<button class="primary-text">Primary Text</button>

Input 예제

<input type="text" placeholder="기본 Input" />
<input type="text" class="success" placeholder="Success Input" />
<input type="text" class="danger" placeholder="Danger Input" />

SCSS 함수와 믹스인

SCSS 모듈에서 Podo UI의 디자인 토큰을 사용하여 커스텀 스타일을 작성할 수 있습니다.

컬러 함수

@use 'podo-ui/mixin' as *;

.myComponent {
  background: color(primary-base);      // Primary 색상
  color: color(primary-reverse);        // Primary 반전 색상
  border: 1px solid color(primary-outline);

  &:hover {
    background: color(primary-hover);   // Primary hover 색상
  }
}

간격 함수 (Spacing)

@use 'podo-ui/mixin' as *;

.myComponent {
  margin: s(4);          // 12px
  padding: s(6);         // 20px
  gap: s(3);            // 8px

  // 0-13까지 사용 가능
  margin-top: s(8);     // 28px
}

Border Radius 함수

@use 'podo-ui/mixin' as *;

.myComponent {
  border-radius: r(2);   // 4px
  border-radius: r(3);   // 8px
  border-radius: r(4);   // 12px
}

타이포그래피 믹스인

@use 'podo-ui/mixin' as *;

.title {
  @include display1;     // 가장 큰 제목
}

.heading {
  @include display4;     // 중간 크기 제목
}

.body {
  @include p2;          // 본문 텍스트
}

.caption {
  @include p5;          // 작은 텍스트
}

React 컴포넌트

일부 복잡한 컴포넌트는 React 컴포넌트로 제공됩니다.

일반 React

import { Input, Textarea, Editor, Field } from 'podo-ui';

function MyForm() {
  return (
    <Field label="이름" required>
      <Input placeholder="이름을 입력하세요" />
    </Field>
  );
}

테마 (Light/Dark Mode)

Podo UI는 라이트 모드와 다크 모드를 자동으로 지원합니다.

테마 설정

// 라이트 모드로 설정
document.documentElement.setAttribute('data-color-mode', 'light');

// 다크 모드로 설정
document.documentElement.setAttribute('data-color-mode', 'dark');

// 시스템 설정 따르기
document.documentElement.setAttribute('data-color-mode', '');

참고: 모든 색상은 color() 함수를 사용하면 자동으로 테마에 대응됩니다.

다음 단계

더 자세한 내용은 각 섹션의 문서를 참고하세요:

컬러 시스템

8가지 시맨틱 컬러와 변형

타이포그래피

폰트 스타일과 믹스인

아이콘

119개 아이콘 폰트

컴포넌트

UI 컴포넌트 둘러보기