핵심 개념
Adapters
opt-datagrid와 opt-editor 엔진을 바꾸지 않고 harness chrome만 덧씌우는 연결층을 설명합니다.
reopt design업데이트
1. adapter가 의미하는 것
adapter는 엔진을 재구현하지 않습니다. DataGrid는 여전히 grid engine이고, Editor는 여전히 document engine입니다. harness는 그 바깥에서 title, description, toolbar, status, empty/error fallback, inspector, footer를 공통 규칙으로 감쌉니다.
| 방식 | 누가 무엇을 소유하나 | 결과 |
|---|---|---|
| 직접 사용 | 페이지가 toolbar, status, empty, inspector, footer를 모두 직접 배치 | 화면마다 구조가 흩어지고 engine 주변 chrome이 중복됩니다. |
| adapter 사용 | 엔진은 원래 패키지에 두고, chrome과 fallback UX는 harness가 소유 | 초기 wrapper 설계는 필요하지만 제품 일관성이 훨씬 높아집니다. |
2. ShellDataGridAdapter
`ShellDataGridAdapter`는 `rows`, `columns`, `ref`, callback surface는 그대로 `opt-datagrid`에 전달하고, 그 위에 title / toolbar / status / footer / empty state만 얹습니다.
tsx
import { ShellDataGridAdapter } from "@reopt-ai/opt-shell";
<ShellDataGridAdapter
title="User Directory"
description="opt-datagrid는 엔진을 유지하고, harness가 toolbar/status/footer를 소유합니다."
toolbar={<UserActions />}
status={<GridMetrics />}
footer={<GridFooter />}
rows={rows}
columns={columns}
getRowId={(row) => row.id}
onRowsChange={setRows}
empty={{
title: "사용자가 없습니다",
description: "새 사용자를 추가하거나 필터를 해제해 보세요.",
}}
/>;3. ShellEditorAdapter
`ShellEditorAdapter`는 `store`, `catalog`, `mode` 같은 editor runtime은 그대로 유지하면서 status, inspector, footer, empty fallback을 공통 chrome으로 정리합니다.
tsx
import { ShellEditorAdapter } from "@reopt-ai/opt-shell";
<ShellEditorAdapter
title="Release Draft"
description="opt-editor는 문서 엔진을 유지하고, harness가 status/inspector/footer chrome을 소유합니다."
toolbar={<DraftToolbar />}
status={<DraftStatus />}
inspector={<DraftInspector />}
footer={<PublishChecklist />}
store={store}
catalog={catalog}
mode="edit"
isEmpty={spec.root.length === 0}
empty={{
title: "초안이 비어 있습니다",
description: "AI 생성 또는 블록 추가로 문서를 시작하세요.",
}}
/>;