opt-charts - 시작하기 | reopt design docs

시작하기

설치부터 첫 차트, App Router client boundary, opt-ui compatibility 경로 정리까지 실제 프로젝트 도입 순서로 정리합니다.

reopt design업데이트 2026년 6월 26일

1. 설치

@reopt-ai/opt-charts는 GitHub Packages로 배포됩니다. 패키지는 Recharts 기반 visuals, SVG 기반 분석 시각화, chart-specific shells를 함께 제공합니다.

bash

# .npmrc
@reopt-ai:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

# install
bun add @reopt-ai/opt-charts
# or
npm install @reopt-ai/opt-charts

패키지	GitHub Packages에서 설치합니다. peerDependencies는 react와 react-dom ^19입니다.
스타일	별도 CSS import는 없습니다. opt-ui token 이름을 쓰므로 소비자 앱의 theme 변수와 함께 렌더링합니다.
Next.js 경계	차트 leaf wrapper를 client component로 두면 Recharts 측정, tooltip, legend 상호작용이 안정적입니다.
접근성	차트마다 aria-label을 넣고, 복잡한 대시보드는 aria-describedby로 텍스트 요약을 연결합니다.

2. 첫 번째 차트

LineChart, BarChart, AreaChart, ComparisonChart는 공통 모델을 사용합니다. 행 데이터는 ChartDataPoint[], 시리즈 정의는 ChartSeriesDef[]로 둡니다. 기본 x축 키는 name입니다.

tsx

"use client";

import {
  LineChart,
  type ChartDataPoint,
  type ChartSeriesDef,
} from "@reopt-ai/opt-charts";

const data: ChartDataPoint[] = [
  { name: "1월", revenue: 124, cost: 72 },
  { name: "2월", revenue: 156, cost: 81 },
  { name: "3월", revenue: 188, cost: 94 },
  { name: "4월", revenue: 214, cost: 108 },
];

const series: ChartSeriesDef[] = [
  { dataKey: "revenue", name: "매출", color: "hsl(221, 83%, 53%)" },
  { dataKey: "cost", name: "비용", color: "hsl(349, 89%, 60%)" },
];

export function RevenueTrend() {
  return (
    <LineChart
      data={data}
      series={series}
      height={280}
      showLegend
      aria-label="월별 매출과 비용 추세"
      tooltipOptions={{
        valueFormatter: (value) =>
          Number(value).toLocaleString("ko-KR", {
            maximumFractionDigits: 0,
          }),
      }}
    />
  );
}

3. Import boundary

신규 코드는 opt-charts에서 직접 import합니다. opt-ui visuals chart export는 기존 소비자를 깨지 않기 위한 compatibility 경로이며, 신규 문서와 예제의 source of truth는 opt-charts입니다.

tsx

// 신규 코드의 기본 경로
import { BarChart, PieChart, TrendChart } from "@reopt-ai/opt-charts";

// 번들 경계를 명확히 나누고 싶을 때
import { LineChart } from "@reopt-ai/opt-charts/visuals";
import { ReportWidget } from "@reopt-ai/opt-charts/shells";

// 기존 opt-ui chart re-export는 compatibility 경로로만 유지
// import { LineChart } from "@reopt-ai/opt-ui/visuals";

4. Next.js App Router

서버 페이지에서 데이터를 가져오고, 차트만 leaf client component로 분리합니다. Recharts tooltip, legend, ResponsiveContainer 측정이 브라우저 동작에 의존하기 때문입니다.

tsx

// app/dashboard/revenue-chart.tsx
"use client";

import { AreaChart } from "@reopt-ai/opt-charts";

export function RevenueChart({ data, series }: RevenueChartProps) {
  return (
    <AreaChart
      data={data}
      series={series}
      height={320}
      gradient
      showLegend={series.length > 1}
      aria-label="매출 추세"
    />
  );
}

@reopt-ai/opt-charts는 GitHub Packages로 배포됩니다. 패키지는 Recharts 기반 visuals, SVG 기반 분석 시각화, chart-specific shells를 함께 제공합니다.

bash

# .npmrc
@reopt-ai:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

# install
bun add @reopt-ai/opt-charts
# or
npm install @reopt-ai/opt-charts

패키지	GitHub Packages에서 설치합니다. peerDependencies는 react와 react-dom ^19입니다.
스타일	별도 CSS import는 없습니다. opt-ui token 이름을 쓰므로 소비자 앱의 theme 변수와 함께 렌더링합니다.
Next.js 경계	차트 leaf wrapper를 client component로 두면 Recharts 측정, tooltip, legend 상호작용이 안정적입니다.
접근성	차트마다 aria-label을 넣고, 복잡한 대시보드는 aria-describedby로 텍스트 요약을 연결합니다.

2. 첫 번째 차트

tsx

"use client";

import {
  LineChart,
  type ChartDataPoint,
  type ChartSeriesDef,
} from "@reopt-ai/opt-charts";

const data: ChartDataPoint[] = [
  { name: "1월", revenue: 124, cost: 72 },
  { name: "2월", revenue: 156, cost: 81 },
  { name: "3월", revenue: 188, cost: 94 },
  { name: "4월", revenue: 214, cost: 108 },
];

const series: ChartSeriesDef[] = [
  { dataKey: "revenue", name: "매출", color: "hsl(221, 83%, 53%)" },
  { dataKey: "cost", name: "비용", color: "hsl(349, 89%, 60%)" },
];

export function RevenueTrend() {
  return (
    <LineChart
      data={data}
      series={series}
      height={280}
      showLegend
      aria-label="월별 매출과 비용 추세"
      tooltipOptions={{
        valueFormatter: (value) =>
          Number(value).toLocaleString("ko-KR", {
            maximumFractionDigits: 0,
          }),
      }}
    />
  );
}

3. Import boundary

tsx

// 신규 코드의 기본 경로
import { BarChart, PieChart, TrendChart } from "@reopt-ai/opt-charts";

// 번들 경계를 명확히 나누고 싶을 때
import { LineChart } from "@reopt-ai/opt-charts/visuals";
import { ReportWidget } from "@reopt-ai/opt-charts/shells";

// 기존 opt-ui chart re-export는 compatibility 경로로만 유지
// import { LineChart } from "@reopt-ai/opt-ui/visuals";

4. Next.js App Router

tsx

// app/dashboard/revenue-chart.tsx
"use client";

import { AreaChart } from "@reopt-ai/opt-charts";

export function RevenueChart({ data, series }: RevenueChartProps) {
  return (
    <AreaChart
      data={data}
      series={series}
      height={320}
      gradient
      showLegend={series.length > 1}
      aria-label="매출 추세"
    />
  );
}

시작하기

1. 설치

2. 첫 번째 차트

3. Import boundary

4. Next.js App Router

5. 다음 문서

핵심 개념

데이터 모델

Production readiness

시작하기

1. 설치

2. 첫 번째 차트

3. Import boundary

4. Next.js App Router

5. 다음 문서

핵심 개념

데이터 모델

Production readiness