일요일을 골랐는데 왜 토요일 좌석이 보일까요?

export type ShowDate = "saturday" | "sunday";
export type Strategy = "naive" | "latest" | "cancel";
export type Delays = Record<ShowDate, number>;
export const strategies: Strategy[] = ["naive", "latest", "cancel"];
export const defaultDelays: Delays = { saturday: 1500, sunday: 300 };
export const dateNames: Record<ShowDate, string> = { saturday: "토요일", sunday: "일요일" };
export interface SeatResult { date: ShowDate; seats: number; requestId: number }
export interface RequestEntry { id: number; date: ShowDate; delay: number; status: "pending" | "applied" | "ignored" | "cancelled" }
export interface PanelState { result: SeatResult | null; requests: RequestEntry[] }
export interface RaceState { selected: ShowDate | null; panels: Record<Strategy, PanelState> }
export function initialRaceState(): RaceState {
  return { selected: null, panels: { naive: { result: null, requests: [] }, latest: { result: null, requests: [] }, cancel: { result: null, requests: [] } } };
}

// A deliberately local network model, with fixed data and a controllable timer.
// No fetch, server reservation, performance measurement or real seat inventory.
export function mockSeats(date: ShowDate, requestId: number, delay: number, signal: AbortSignal): Promise<SeatResult> {
  return new Promise((resolve, reject) => {
    if (signal.aborted) { reject(signal.reason); return; }
    const abort = () => { clearTimeout(timer); reject(signal.reason); };
    const timer = setTimeout(() => {
      signal.removeEventListener("abort", abort);
      resolve({ date, requestId, seats: date === "saturday" ? 12 : 34 });
    }, delay);
    signal.addEventListener("abort", abort, { once: true });
  });
}

export class RequestRace {
  private state = initialRaceState();
  private listeners = new Set<(state: RaceState) => void>();
  private pending = new Map<AbortController, Strategy>();
  private requestId = 0;
  private epoch = 0;
  private disposed = false;
  getSnapshot = () => this.state;
  subscribe(listener: (state: RaceState) => void) {
    this.listeners.add(listener);
    return () => { this.listeners.delete(listener); };
  }
  private publish() { for (const listener of this.listeners) listener(this.state); }
  select(date: ShowDate, delays: Delays) {
    if (this.disposed) return;
    const id = ++this.requestId;
    const epoch = this.epoch;
    this.state = { ...this.state, selected: date };
    for (const strategy of strategies) {
      if (strategy === "cancel") for (const [controller, owner] of this.pending) if (owner === "cancel") controller.abort();
      const controller = new AbortController();
      this.pending.set(controller, strategy);
      const panel = this.state.panels[strategy];
      this.state = { ...this.state, panels: { ...this.state.panels, [strategy]: { ...panel, requests: [...panel.requests, { id, date, delay: delays[date], status: "pending" }] } } };
      mockSeats(date, id, delays[date], controller.signal).then((result) => {
        if (this.disposed || epoch !== this.epoch) return;
        // The guard is kept alongside cancellation: abort alone is not a freshness contract.
        const apply = strategy === "naive" || (id === this.requestId && date === this.state.selected);
        this.finish(strategy, id, apply ? "applied" : "ignored", apply ? result : undefined);
      }, () => {
        if (!this.disposed && epoch === this.epoch) this.finish(strategy, id, "cancelled");
      }).finally(() => { this.pending.delete(controller); });
    }
    this.publish();
  }
  private finish(strategy: Strategy, id: number, status: RequestEntry["status"], result?: SeatResult) {
    const panel = this.state.panels[strategy];
    this.state = { ...this.state, panels: { ...this.state.panels, [strategy]: {
      result: result ?? panel.result,
      requests: panel.requests.map((entry) => entry.id === id ? { ...entry, status } : entry),
    } } };
    this.publish();
  }
  reset() {
    this.epoch++;
    for (const controller of this.pending.keys()) controller.abort();
    this.pending.clear();
    this.requestId = 0;
    this.state = initialRaceState();
    this.publish();
  }
  dispose() { this.disposed = true; this.reset(); this.listeners.clear(); }
}