@baneung-pack

Install

바능 디자인 시스템 패키지 설치 가이드. 필요한 패키지만 골라서 설치하세요.

패키지 개요

  • @baneung-pack/tokens — CSS / JSON / TS 디자인 토큰 (SSOT). 모든 패키지의 기반.
  • @baneung-pack/ui — 58개 React 컴포넌트 (Radix 기반).
  • @baneung-pack/grid — 데이터 그리드 (가상화, 정렬·필터, Excel 호환).
  • @baneung-pack/editor — 리치 텍스트 WYSIWYG 에디터 (의존성 0).
  • @baneung-pack/chart — 차트 라이브러리 — Canvas(chart.js) 기반 (Bar / Line / Area / Pie / Doughnut).
  • @baneung-pack/effect — Typewriter · RotatingWords · ScrambleText · SplitTextReveal · CountUp 등 비주얼 이펙트 모음. 의존성 0, Tailwind 비종속.

공통 peer deps: React ^18 || ^19, React DOM ^18 || ^19.

@baneung-pack/tokens

# pnpm
pnpm add @baneung-pack/tokens

# npm
npm install @baneung-pack/tokens

# yarn
yarn add @baneung-pack/tokens

사용

// CSS 변수로 사용
import '@baneung-pack/tokens/tokens.css';

// JS/TS 객체로 사용
import { colors, spacing, typography } from '@baneung-pack/tokens';

// JSON으로 사용 (Style Dictionary, Figma 토큰 등)
import tokens from '@baneung-pack/tokens/tokens.json';

ui / grid / editor 패키지에 이미 포함돼 있어 별도 설치는 필요 없습니다. 토큰만 직접 쓰고 싶을 때만 단독 설치.

@baneung-pack/ui

# pnpm
pnpm add @baneung-pack/ui

# npm
npm install @baneung-pack/ui

# yarn
yarn add @baneung-pack/ui

스타일 임포트

// app/layout.tsx
import '@baneung-pack/ui/styles.css';

ui의 styles는 @layer baneung에 격리됩니다. Grid·Editor를 함께 쓰면 layer가 자동 머지됩니다.

CSS 격리 (소비자 Tailwind 사용 시)

// globals.css — utilities only (skip preflight)
@import 'tailwindcss/theme';
@import 'tailwindcss/utilities';
/* @import 'tailwindcss/preflight'; */

@source "./app/**/*.{ts,tsx}";

소비자가 Tailwind를 자체 임포트할 때 preflight↔라이브러리 utility 충돌을 회피하는 권장 패턴.

@baneung-pack/grid

# pnpm
pnpm add @baneung-pack/grid

# npm
npm install @baneung-pack/grid

# yarn
yarn add @baneung-pack/grid

내부 의존: @tanstack/react-virtual (가상화), class-variance-authority, clsx, tailwind-merge. Excel 내보내기 사용 시 추가로 exceljs (peer-optional) 설치 권장.

스타일 임포트

// app/layout.tsx
import '@baneung-pack/grid/styles.css';

기본 사용

import { Grid, type GridColumn } from '@baneung-pack/grid';

interface Item { id: number; name: string; price: number }

const columns: GridColumn<Item>[] = [
  { id: 'name', header: '이름', accessor: 'name' },
  {
    id: 'price', header: '가격', accessor: 'price', align: 'right',
    renderer: (v) => `${(v as number).toLocaleString()}원`,
  },
];

const data: Item[] = [
  { id: 1, name: '사과', price: 1000 },
  { id: 2, name: '바나나', price: 2000 },
];

export default function MyPage() {
  return <Grid columns={columns} data={data} pageSize={20} />;
}

@baneung-pack/editor

# pnpm
pnpm add @baneung-pack/editor

# npm
npm install @baneung-pack/editor

# yarn
yarn add @baneung-pack/editor

외부 에디터 라이브러리 없이 동작 — 런타임 의존성은 clsx · tailwind-merge 둘뿐.

스타일 임포트

// app/layout.tsx
import '@baneung-pack/editor/styles.css';

기본 사용

'use client';
import { Editor } from '@baneung-pack/editor';
import { useState } from 'react';

export default function MyPage() {
  const [html, setHtml] = useState('<p>안녕하세요 👋</p>');
  return <Editor value={html} onChange={setHtml} />;
}

Next.js App Router에서는 상태를 다루는 페이지/컴포넌트에 'use client'가 필요합니다 (패키지 자체에는 use client가 주입되어 있습니다).

@baneung-pack/chart

# pnpm
pnpm add @baneung-pack/chart chart.js react-chartjs-2

# npm
npm install @baneung-pack/chart chart.js react-chartjs-2

# yarn
yarn add @baneung-pack/chart chart.js react-chartjs-2

chart.js ^4.4.0과 react-chartjs-2 ^5.2.0을 peer dependency로 함께 설치해야 합니다. Canvas 기반이라 대량 데이터 포인트에서 가볍게 동작합니다.

스타일 임포트

// app/layout.tsx
import '@baneung-pack/chart/styles.css';

기본 사용

import { BarChart } from '@baneung-pack/chart';

const data = [
  { month: '1월', revenue: 1200, profit: 300 },
  { month: '2월', revenue: 1500, profit: 400 },
];

export default function MyPage() {
  return (
    <BarChart
      data={data}
      xKey="month"
      yKeys={['revenue', 'profit']}
      labels={{ revenue: '매출', profit: '이익' }}
      height={300}
    />
  );
}

@baneung-pack/effect

# pnpm
pnpm add @baneung-pack/effect

# npm
npm install @baneung-pack/effect

# yarn
yarn add @baneung-pack/effect

사용

// Typewriter / RotatingWords / ScrambleText / SplitTextReveal / CountUp
import { Typewriter, RotatingWords, CountUp } from '@baneung-pack/effect';

export function Hero() {
  return (
    <>
      <Typewriter text="함께 만들 프로젝트가 있으신가요?" loop />
      <span>
        We build{' '}
        <RotatingWords words={['apps', 'agents', 'sites']} color="#3B716C" fontWeight={700} />
      </span>
      <CountUp to={1234567} fontSize={48} fontWeight={800} trigger="inView" />
    </>
  );
}

의존성 React peer만. inline style 기반이라 어떤 React 앱에서도 즉시 사용 가능. prefers-reduced-motion 자동 존중.

다음 단계