o2o-site-AEO/solution/site/src/sections/items/ScheduleSection.tsx

/**
 * 여행 스케줄 — 발행본. 칸 하나가 시간대 하나다.
 * ★ 승차권(course)과 축이 다르다 — 저쪽은 '어디를 도는가'(순번), 여기는 '몇 시에 무엇을'(시각).
 */
import type {ScheduleItem} from '@o2o/shared';
import {useSite} from '@/lib/site-context';
import {sectionItems, sectionName} from '@/lib/derive';
import {ITEM_ACCENT, ITEM_BORDER, ITEM_CARD, ITEM_INK, ITEM_INVERSE, ITEM_INVERSE_INK, ItemSection, Rail, SourceLine} from './common';

/** "09:30" → 9시 30분. 형식이 어긋나면 원문 그대로 — 지어내지 않는다. */
function splitTime(time: string): {head: string; tail?: string} {
  const match = /^(\d{1,2}):(\d{2})$/.exec(time.trim());
  if (!match) return {head: time.trim()};
  return {head: match[1].padStart(2, '0'), tail: match[2]};
}

export function ScheduleSection() {
  const payload = useSite();
  const parsed = sectionItems<ScheduleItem>(payload, 'schedule');
  if (parsed.items.length === 0) return null;

  return (
    <ItemSection
      id="schedule"
      name={parsed.title || sectionName(payload, 'schedule', '여행 스케줄')}
      subtitle={parsed.subtitle}
    >
      <div className="space-y-10">
        {parsed.items.map((schedule, scheduleIndex) => {
          const slots = schedule.slots ?? [];
          const span =
            slots.length > 1 ? `${slots[0]?.time ?? ''}–${slots[slots.length - 1]?.time ?? ''}` : undefined;
          return (
            <div key={`${schedule.name}-${scheduleIndex}`} className="space-y-3">
              <div className="flex flex-wrap items-baseline gap-2.5">
                <h3 className="serif text-lg font-bold">{schedule.name}</h3>
                <span className="text-[11px] opacity-60">
                  {[schedule.audience, schedule.season, span, `${slots.length}칸`].filter(Boolean).join(' · ')}
                </span>
              </div>

              <Rail label={`${schedule.name} 시간표`}>
                {slots.map((slot, index) => {
                  const {head, tail} = splitTime(slot.time ?? '');
                  return (
                    <article
                      key={`${slot.time}-${slot.title}-${index}`}
                      className="w-[228px] shrink-0 snap-center border"
                      style={{backgroundColor: ITEM_CARD, borderColor: ITEM_INK}}
                    >
                      {/* 플립보드 — 가운데 접힘선이 이 판을 시계로 만든다 */}
                      {/* 플립보드는 템플릿의 어두운 면이다. 위의 글자는 밝은 면 색을 그대로 쓴다. */}
                      <div
                        className="relative px-4 py-3 text-center"
                        style={{backgroundColor: ITEM_INVERSE, color: ITEM_INVERSE_INK}}
                      >
                        <span className="serif text-3xl font-bold leading-none">
                          {head}
                          {tail && <span className="opacity-60">:{tail}</span>}
                        </span>
                        <i
                          aria-hidden
                          className="pointer-events-none absolute inset-x-0 top-1/2 border-t"
                          style={{borderColor: 'color-mix(in oklab, currentColor 25%, transparent)'}}
                        />
                      </div>
                      <div className="space-y-2 px-4 pb-3 pt-3.5">
                        <h4 className="serif text-base font-bold">{slot.title}</h4>
                        {slot.place && (
                          <p className="text-[12px] font-semibold" style={{color: ITEM_ACCENT}}>
                            {slot.place}
                          </p>
                        )}
                        {slot.note && <p className="text-[13px] leading-relaxed opacity-80">{slot.note}</p>}
                      </div>
                      <div
                        className="flex justify-between gap-2 border-t border-dashed px-4 py-2 text-[10px] opacity-60"
                        style={{borderColor: ITEM_BORDER}}
                      >
                        <span>{slot.minutes ? `${slot.minutes}분 머묾` : '머무는 시간 미정'}</span>
                        {slot.searchQuery && <span className="truncate">지도 검색 · {slot.searchQuery}</span>}
                      </div>
                    </article>
                  );
                })}
              </Rail>

              <SourceLine source={schedule.source} verified={schedule.verified} />
            </div>
          );
        })}
      </div>
    </ItemSection>
  );
}