Hook 레퍼런스

interface CalendarRender {
  /** 렌더할 spec — 초안이 활성일 땐 draft, 아니면 라이브 spec. */
  spec: CalendarSpec;
  /** 활성 초안이 바꾼 "container/id" 키 집합 (없으면 빈 Set). */
  changedIds: ReadonlySet<string>;
  /** AI 초안 오버레이가 렌더되는 중인지. */
  isDraft: boolean;
}

"use client";

import {
  CalendarProvider,
  MonthView,
  useCalendarRender,
  useCalendarStore,
} from "@reopt-ai/opt-calendar";
import type { CalendarStore } from "@reopt-ai/opt-calendar";

// CalendarProvider 아래에서는 컨텍스트 훅을 바로 읽을 수 있습니다.
function DraftBadge() {
  const { spec, changedIds, isDraft } = useCalendarRender();
  const store = useCalendarStore();
  const eventCount = Object.keys(spec.events).length;

  return (
    <div className="flex items-center gap-2">
      <span>이벤트 {eventCount}개</span>
      {isDraft && <span>AI 초안 {changedIds.size}건 대기</span>}
      <button onClick={() => store.undo()} disabled={!store.canUndo()}>
        되돌리기
      </button>
    </div>
  );
}

export function CustomCalendar({ store }: { store: CalendarStore }) {
  return (
    <CalendarProvider store={store} timeZone="Asia/Seoul">
      <DraftBadge />
      <MonthView date={new Date()} />
    </CalendarProvider>
  );
}

function useCalendarNavigation(
  options: UseCalendarNavigationOptions,
): UseCalendarNavigationResult;

"use client";

import { useCalendarNavigation } from "@reopt-ai/opt-calendar";
import { useState } from "react";

function CustomToolbar() {
  const [date, setDate] = useState(() => new Date());
  const { label, goToday, goPrev, goNext } = useCalendarNavigation({
    date,
    view: "month",
    onDateChange: setDate,
    timeZone: "Asia/Seoul",
    weekStartsOn: 1,
    locale: "ko",
  });

  return (
    <div className="flex items-center gap-2">
      <button onClick={goPrev} aria-label="이전">‹</button>
      <strong>{label}</strong>
      <button onClick={goNext} aria-label="다음">›</button>
      <button onClick={goToday}>오늘</button>
    </div>
  );
}

function useCalendarRemoteSource(
  store: CalendarStore,
  options: CalendarRemoteSourceOptions,
): CalendarRemoteSourceResult;

"use client";

import {
  Calendar,
  useCalendarRemoteSource,
} from "@reopt-ai/opt-calendar";
import type { CalendarStore } from "@reopt-ai/opt-calendar";

function RemoteCalendar({ store }: { store: CalendarStore }) {
  const remote = useCalendarRemoteSource(store, {
    loadEvents: async ({ window, signal }) => {
      const res = await fetch(
        `/api/events?from=${window.start}&to=${window.end}`,
        { signal },
      );
      return { events: await res.json() };
    },
    savePatches: async ({ ops, snapshotVersion }) => {
      const res = await fetch("/api/events/patch", {
        method: "POST",
        body: JSON.stringify({ ops, snapshotVersion }),
      });
      return res.json(); // { events?, snapshotVersion?, rejected? }
    },
    subscribeToInvalidations: (handler) => {
      const ws = new WebSocket("wss://api/events/live");
      ws.onmessage = () => handler();
      return () => ws.close();
    },
  });

  // <Calendar>가 뷰/날짜 변경 시 remote.onWindowChanged를 자동 호출합니다.
  return (
    <Calendar store={store} timeZone="Asia/Seoul" remoteSource={remote} />
  );
}

function useCalendarSuggestion(
  store: CalendarStore,
): UseCalendarSuggestionResult;

interface CalendarSuggestion {
  /** 스트리밍 상태. */
  status: "streaming" | "ready" | "error";
  /** AI 변경이 적용된 초안 spec. */
  draftSpec: CalendarSpec;
  /** base와 다른 "container/id" 키 집합. */
  changedIds: ReadonlySet<string>;
  /** AI가 누적한 패치. */
  patches: JsonPatchOp[];
  /** 스트리밍 실패 시 오류. */
  error: Error | null;
  /** 지금까지 적용된 op 수. */
  appliedCount: number;
}

"use client";

import {
  Calendar,
  useCalendarSuggestion,
} from "@reopt-ai/opt-calendar";
import type { CalendarStore } from "@reopt-ai/opt-calendar";

function AiCalendar({ store }: { store: CalendarStore }) {
  const ai = useCalendarSuggestion(store);

  async function ask(prompt: string) {
    const res = await fetch("/api/calendar/ai", {
      method: "POST",
      body: JSON.stringify({ prompt }),
    });
    // NDJSON 패치 스트림을 shadow draft로 흘려보냄
    await ai.start(res.body!);
  }

  return (
    <>
      {ai.suggestion && (
        <div className="flex gap-2">
          <span>{ai.suggestion.changedIds.size}건 제안</span>
          <button onClick={ai.approve}>승인</button>
          <button onClick={ai.reject}>폐기</button>
        </div>
      )}
      <Calendar
        store={store}
        timeZone="Asia/Seoul"
        suggestion={ai.suggestion}
      />
    </>
  );
}

function useEventDrag(options: UseEventDragOptions): UseEventDragResult;

function useEventResize(
  options: UseEventResizeOptions,
): UseEventResizeResult;

function useSlotDragCreate(
  options: UseSlotDragCreateOptions,
): UseSlotDragCreateResult;
// options: { dayKey, geometry, timeZone?, onCommit, title,
//            disabled?, minDurationMinutes?, onCreated? }
// result:  { onPointerDown, selection }

"use client";

import {
  createTimeGridGeometry,
  useEventDrag,
} from "@reopt-ai/opt-calendar";
import type { CalendarEvent, CalendarStore } from "@reopt-ai/opt-calendar";

function DraggableChip({
  event,
  store,
}: {
  event: CalendarEvent;
  store: CalendarStore;
}) {
  // pxPerMinute=0.8 ⇒ 48px/시간, 15분 스냅 (모두 기본값)
  const geometry = createTimeGridGeometry({
    pxPerMinute: 0.8,
    snapMinutes: 15,
  });

  const { onPointerDown, isDragging, deltaMinutes } = useEventDrag({
    event,
    geometry,
    timeZone: "Asia/Seoul",
    // 드래그·리사이즈·AI가 공유하는 단일 커밋 경로
    onCommit: (ops) => store.applyPatch(ops, { source: "drag" }),
  });

  return (
    <div
      onPointerDown={onPointerDown}
      data-dragging={isDragging}
      style={{ transform: `translateY(${geometry.minuteToY(deltaMinutes)}px)` }}
    >
      {event.title}
    </div>
  );
}