시작하기
시작하기
패키지 설치, styles.css import, mock 커넥터로 첫 FileManager 렌더링까지의 빠른 시작 가이드
reopt design업데이트
1. 패키지 설치
bash
npm install @reopt-ai/opt-filemanager
# 또는
bun add @reopt-ai/opt-filemanagerPeer dependencies: react ^19, react-dom ^19. 런타임 의존성은 없습니다.
2. 첫 번째 파일 매니저
구조 CSS는 dist/styles.css에서 배포됩니다. 색상은 var(--opt-*) 토큰을 읽되 폴백이 내장되어 있어 opt-shell 없이도 동작합니다.
tsx
"use client";
import {
FileManager,
createMockFileManagerConnector,
} from "@reopt-ai/opt-filemanager";
import "@reopt-ai/opt-filemanager/styles.css";
const connector = createMockFileManagerConnector({
behavior: { latencyMs: 300 },
});
export function FilesScreen() {
return <FileManager connector={connector} locale="ko" />;
}3. mock 커넥터 시뮬레이션
지연·실패율·업로드 상한을 런타임에 바꿔 가며 로딩, 오류 배너, 업로드 취소·재시도 UX를 백엔드 없이 검증할 수 있습니다.
tsx
const connector = createMockFileManagerConnector({
behavior: { latencyMs: 800, failureRate: 0.2, maxUploadBytes: 5 * 1024 * 1024 },
onOperation: (op) => console.info(op.type, op.detail, op.durationMs),
});
// 런타임에 자유롭게 변경
connector.configure({ failureRate: 0 });
connector.reset(); // 시드 복원4. 헤드리스 재조합
useFileManager가 상태 전부를 소유하므로, 내장 레이아웃 대신 서브컴포넌트를 원하는 구조로 재조합할 수 있습니다.
tsx
import {
useFileManager,
FileManagerContextProvider,
FileManagerBreadcrumb,
FileManagerEntryList,
FileManagerUploadQueue,
resolveMessages,
} from "@reopt-ai/opt-filemanager";
export function CompactFiles({ connector }: { connector: FileManagerConnector }) {
const manager = useFileManager({ connector });
const messages = resolveMessages("ko");
return (
<FileManagerContextProvider value={{ manager, messages, locale: "ko" }}>
<FileManagerBreadcrumb />
<FileManagerEntryList />
<FileManagerUploadQueue />
</FileManagerContextProvider>
);
}