앱 조합

"use client";

import {
  createCalendarStore,
  createEmptyCalendarSpec,
} from "@reopt-ai/opt-calendar";
import "@reopt-ai/opt-calendar/styles.css";
import { ShellCalendarAdapter } from "@reopt-ai/opt-shell";
import { useState } from "react";

export function TeamCalendar() {
  const [store] = useState(() =>
    createCalendarStore(createEmptyCalendarSpec("Asia/Seoul")),
  );

  return (
    <ShellCalendarAdapter
      // ── chrome 슬롯 (어댑터가 추가) ──
      title="팀 캘린더"
      description="주간 일정과 예약을 한 화면에서 관리합니다"
      toolbar={<CalendarActions />}
      status={<SyncBadge />}
      sidebar={<MiniMonth />} // 좌측 레일
      inspector={<EventDetails />} // 우측 레일
      footer={<Legend />}
      chrome="card" // 기본값
      // ── Calendar props는 그대로 forward ──
      store={store}
      variant="events"
      timeZone="Asia/Seoul"
      weekStartsOn={1}
      onEventActivate={(eventId) => selectEvent(eventId)}
    />
  );
}

<ShellCalendarAdapter
  store={store}
  remoteSource={remote}
  // 로딩 → chrome이 로딩 상태를 렌더
  loading={remote.isLoading}
  // isEmpty가 true일 때만 empty가 표시됨
  isEmpty={eventCount === 0}
  empty={{
    title: "표시할 일정이 없습니다",
    description: "새 이벤트를 추가하거나 다른 주간으로 이동하세요",
  }}
  // Error | ShellErrorState | string | null 모두 허용
  error={remote.lastError}
/>