Calendar 계층

"use client";

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

export default function BasicCalendar() {
  const [store] = useState(() => {
    const spec = createEmptyCalendarSpec("Asia/Seoul");
    spec.events.standup = {
      id: "standup",
      title: "팀 스탠드업",
      start: "2026-07-06T09:00:00+09:00",
      end: "2026-07-06T09:15:00+09:00",
      rrule: "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR",
    };
    return createCalendarStore(spec);
  });

  // 모든 편집(드래그/리사이즈/팝오버)이 store.applyPatch 한 경로로 흐릅니다.
  return <Calendar store={store} timeZone="Asia/Seoul" weekStartsOn={1} />;
}

"use client";

import {
  Calendar,
  createCalendarStore,
  createEmptyCalendarSpec,
  defaultCalendarCatalog,
  useCalendarRemoteSource,
  useCalendarSuggestion,
} from "@reopt-ai/opt-calendar";
import "@reopt-ai/opt-calendar/styles.css";
import { useState } from "react";

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

  // 1) 보이는 윈도우만 원격에서 로드하고 편집을 batch save.
  //    Calendar가 뷰/날짜 변경 시 onWindowChanged를 자동 호출한다.
  const remote = useCalendarRemoteSource(store, {
    loadEvents: async ({ window, signal }) => ({
      events: await fetchEvents(window, signal),
    }),
    savePatches: ({ ops, changedEventIds }) => persistOps(ops, changedEventIds),
  });

  // 2) 자연어 지시를 NDJSON 패치 스트림으로 받아 shadow draft로 미리보기
  const ai = useCalendarSuggestion(store);

  return (
    <Calendar
      store={store}
      catalog={defaultCalendarCatalog}
      timeZone="Asia/Seoul"
      remoteSource={remote}
      suggestion={ai.suggestion}
    />
  );
}