reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

© 2026 reopt-ai. All rights reserved.

Explore/opt-datagrid/Campaign Base App
Appopt-datagrid 예제

Campaign Base App

opt-datagrid로 view sidebar, saved views, record activity, owner automation, computed formula field, spreadsheet 편집, field editor, row append, visible-record approval, BrandApp EAV 저장 boundary를 갖춘 캠페인 운영 base 앱입니다.

Editable campaign base with grouped columns, saved field layouts, selected-record activity, owner automation rules, formula recompute, visible approval sweeps, and BrandApp EAV sync.

appbaseactivityautomationformulaeavbrandapp-sdk
bun add @reopt-ai/opt-datagrid @reopt-ai/brandapp-sdk
DataGridDataGridColumnDataGridCommitContextcreateReoptEavClient
1024px

Growth OS

BrandApp EAV base

Saved views

0

Save a filtered layout for repeat sync work.

Approved records50%
syncedentity: campaigns · 2 min ago

Campaign base workspace

Ready for spreadsheet-style editing.6 visible · 6 total
Brief
Team
#
1
Spring collection launch
Ready
Mina Park
Email
2
Referral reminder
Draft
Eric Han
Push
3
VIP early access
Blocked
Jisoo Kim
Sales
4
Trial nurture sequence
Live
Hana Lee
Email
5
Homepage promo panel
Idea
Mina Park
Web
6
Winback offer
Ready
Noah Choi
Email
+
Add campaign record

Selected record

Spring collection launch

Ready

Owner

MPMina Park

Channel

Email

Launch date

2026-04-02

Budget

$12,800

ROI

2.8x

Priority

93

Record activity

1 notes

BrandApp AI

5 min ago

Audience query, owner, and approval flag are ready for EAV sync.

Automations

ready
Write 3 visible approved rows to EAV
Assign owner on status change
Recompute priority formula

Field schema

9/9 shown

BrandApp sync

2 min ago

Approved campaign rows

3 records wrote to BrandApp EAV 2 min ago

Schema check

campaigns entity matched local field map

// app/api/campaign-base/route.ts
import { createReoptEavClient } from "@reopt-ai/brandapp-sdk/eav";

let eav: ReturnType<typeof createReoptEavClient> | undefined;

function getEav() {
  eav ??= createReoptEavClient({
    clientId: process.env.BRANDAPP_CLIENT_ID!,
    clientSecret: process.env.BRANDAPP_CLIENT_SECRET!,
    brandappId: process.env.BRANDAPP_ID!,
  });
  return eav;
}

export async function PATCH(req: Request) {
  const { entityId, edits } = await req.json();
  const eav = getEav();
  const results = await Promise.all(
    edits.map((edit) =>
      eav.records(entityId).update(edit.recordId, { values: edit.values }),
    ),
  );
  return Response.json({ rows: results });
}

관련 예제

Starter Grid
Editable cells with direct commit feedback

Edit any cell to commit.

Launch metrics
Growth
Active
15
Billing events
Finance
Review
30
Support backlog
Ops
Blocked
60
Product usage
Analytics
Active
10
Starteropt-datagrid

Editable Grid

가장 짧은 시작점입니다. DataGrid와 column definition만으로 셀 편집과 commit 흐름을 붙입니다.

editgridcommit
DataGridDataGridColumnDataGridCommitContext
열기
Read-only Monitor
Status badges and metric columns for operations dashboards
Search indexer
Seoul
Healthy
42
Billing sync
Tokyo
Degraded
188
Notification fanout
Singapore
Healthy
53
Warehouse loader
Frankfurt
Alert
410
Session cache
Virginia
Healthy
34
Webhook relay
Oregon
Degraded
244
Monitoropt-datagrid

Ops Monitor

상태 배지, 읽기 전용 메트릭 컬럼, 빠른 스캔 UX를 운영 대시보드 문맥으로 정리한 예제입니다.

monitoringstatusmetrics
DataGridDataGridColumn
열기
Remote Source
View-open, window fetch, batched save on top of a headless hook
loads 0saves 0pending 0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Remoteopt-datagrid

Remote Window

useDataGridRemoteDataSource로 openView, window fetch, batched save를 메모리 기반 mock으로 연결합니다.

remotedatasourcewindow-fetch
DataGriduseDataGridRemoteDataSourceDataGridColumn
열기
다음Editable Grid