본문으로 건너뛰기

시작하기

NCDS Admin을 프로젝트에 설치하고 사용하는 방법을 설명합니다.

설치​

NCDS Admin은 npm이나 yarn을 통해 제공됩니다. 다음 명령어로 설치할 수 있습니다.

npm install @ncds/ui-admin

사용 방법​

기본 설정​

프로젝트의 진입점(예: App.tsx 또는 main.tsx)에서 NCDS Admin의 스타일 파일을 import합니다.

import '@ncds/ui-admin/dist/ui-admin/assets/styles/style.css';

컴포넌트 사용​

NCDS Admin의 컴포넌트를 사용하려면 다음과 같이 import하여 사용합니다.

import { Button } from '@ncds/ui-admin';

function App() {
  return (
    <Button hierarchy="primary" size="md">
      버튼
    </Button>
  );
}

CDN으로 시작하기​

CSS나 JS 파일만 필요하다면 CDN을 활용해보세요.

<link rel="stylesheet" href="https://fe-sdk.cdn-nhncommerce.com/@ncds/ui-admin/1.1/main.min.css" />
<script src="https://fe-sdk.cdn-nhncommerce.com/@ncds/ui-admin/1.1/main.min.js"></script>

아래는 Button 컴포넌트를 사용하는 예시입니다:

<!-- CSS와 JS 가져오기 -->
<link rel="stylesheet" href="https://fe-sdk.cdn-nhncommerce.com/@ncds/ui-admin/1.1/main.min.css" />
<script src="https://fe-sdk.cdn-nhncommerce.com/@ncds/ui-admin/1.1/main.min.js"></script>

<!-- 기본 버튼 -->
<button class="ncua-btn ncua-btn--primary ncua-btn--md">
  <span class="ncua-btn__label">기본 버튼</span>
</button>

<!-- 계층 구조별 버튼 -->
<button class="ncua-btn ncua-btn--primary ncua-btn--md">
  <span class="ncua-btn__label">Primary</span>
</button>
<button class="ncua-btn ncua-btn--secondary ncua-btn--md">
  <span class="ncua-btn__label">Secondary</span>
</button>
<button class="ncua-btn ncua-btn--tertiary ncua-btn--md">
  <span class="ncua-btn__label">Tertiary</span>
</button>
<button class="ncua-btn ncua-btn--destructive ncua-btn--md">
  <span class="ncua-btn__label">Destructive</span>
</button>

<!-- 크기별 버튼 -->
<button class="ncua-btn ncua-btn--primary ncua-btn--sm">
  <span class="ncua-btn__label">Small</span>
</button>
<button class="ncua-btn ncua-btn--primary ncua-btn--md">
  <span class="ncua-btn__label">Medium</span>
</button>

<!-- 비활성화된 버튼 -->
<button class="ncua-btn ncua-btn--primary ncua-btn--md is-disable" disabled>
  <span class="ncua-btn__label">비활성화</span>
</button>

<!-- 아이콘이 있는 버튼 -->
<button class="ncua-btn ncua-btn--primary ncua-btn--md">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="none">
    <path
      fill="currentColor"
      fill-rule="evenodd"
      d="M9 2a1 1 0 0 1 .949.684L15 17.838l2.051-6.154A1 1 0 0 1 18 11h4a1 1 0 1 1 0 2h-3.28l-2.771 8.316a1 1 0 0 1-1.898 0L9 6.162l-2.051 6.154A1 1 0 0 1 6 13H2a1 1 0 1 1 0-2h3.28L8.05 2.684A1 1 0 0 1 9 2"
      clip-rule="evenodd"
    ></path>
  </svg>
  <span class="ncua-btn__label">아이콘 버튼</span>
</button>
노트

CSS와 JS는 <head>에 추가하는 것을 권장합니다.

문제 해결​

스타일이 적용되지 않는 경우​

  1. 스타일 import가 올바르게 되어 있는지 확인합니다.
  2. CSS 모듈 설정이 올바른지 확인합니다.
  3. 빌드 설정에서 CSS 처리가 올바르게 되어 있는지 확인합니다.

컴포넌트가 렌더링되지 않는 경우​

  1. 컴포넌트 import가 올바른지 확인합니다.
  2. TypeScript 설정이 올바른지 확인합니다.
  3. 필요한 의존성이 모두 설치되어 있는지 확인합니다.