scheduler-front/src/ui/component/schedule/SchedulePopover.tsx

import { PopoverContent } from '@/components/ui/popover';
import { useEffect, useState } from 'react';
import { ScheduleCreateContent } from './content/ScheduleCreateContent';
import { ScheduleListContent } from './content/ScheduleListContent';
import { ScheduleDetailContent } from './content/ScheduleDetailContent';

interface ScheduleSheetProps {
  date: Date | undefined;
  open: boolean;
  popoverSide: 'left' | 'right';
  popoverAlign: 'start' | 'end';
}

export const SchedulePopover = ({ date, open, popoverSide, popoverAlign }: ScheduleSheetProps) => {
  const [mode, setMode] = useState<'list' | 'create' | 'detail' | 'update'>('list');
  const [detailId, setDetailId] = useState('');

  useEffect(() => {
    if (!open) {
      setTimeout(() => {
        setMode('list');
      }, 150);
    }
  }, [open]);

  const DetailContent = () => {
    return (
      <div>
        Detail
      </div>
    )
  }

  const UpdateContent = () => {
    return (
      <div>
        Update
      </div>
    )
  }

  const SchedulePopoverContent = () => {
    switch(mode) {
      case 'list':
        return <ScheduleListContent 
          setMode={setMode}
          setId={setDetailId}
          date={date}
          popoverAlign={popoverAlign}
          popoverSide={popoverSide}
          open={open}
        />
      case 'create':
        return <ScheduleCreateContent
          setMode={setMode}
          date={date}
          popoverAlign={popoverAlign}
          popoverSide={popoverSide}
          open={open}
        />
      case 'detail':
        return <ScheduleDetailContent 
          setMode={setMode}
          date={date}
          popoverAlign={popoverAlign}
          popoverSide={popoverSide}
          open={open}
          id={detailId}
        />
      case 'update':
        return <UpdateContent />
    }
  }

  return (
    <PopoverContent
      className="rounded-xl xl:w-[calc(100vw/4)] xl:max-w-[480px] min-w-[384px] min-h-[125px] h-[calc(100vh/2.3)]"
      align={popoverAlign} side={popoverSide}
    >
      {<SchedulePopoverContent />}
    </PopoverContent>
  )
}