o2o-site-AEO/solution/site/src/layouts/paper/Itinerary.tsx

import {useState} from 'react';
import type {ItineraryItem, PlannerStop} from '@o2o/shared';
import {useSite} from '@site/lib/site-context';
import {sectionItems, sectionName} from '@site/lib/derive';
import {Sheet} from './Sheet';

const FIRST = 4;

function stopsOf(item: ItineraryItem): PlannerStop[] {
  return item.days?.[0]?.stops ?? item.stops ?? [];
}

export function Itinerary() {
  const payload = useSite();
  const parsed = sectionItems<ItineraryItem>(payload, 'itinerary');
  const [tag, setTag] = useState('');
  const [open, setOpen] = useState<ItineraryItem | null>(null);
  const items = parsed.items;
  if (items.length === 0) return null;
  const tags = [...new Set(items.map((item) => item.duration).filter((d): d is string => Boolean(d)))];
  const shown = items.filter((item) => !tag || item.duration === tag);

  const card = (item: ItineraryItem) => (
    <button
      key={item.name}
      type="button"
      className="itemcard"
      onClick={() => setOpen(item)}
      style={{padding: '16px 18px', border: '1px solid var(--line)', marginBottom: 10}}
    >
      <p style={{margin: '0 0 4px', fontSize: '15.5px', fontWeight: 500}}>{item.name}</p>
      <p className="cap dim" style={{margin: '0 0 8px'}}>
        {[item.duration, item.audience].filter(Boolean).join(' · ')}
      </p>
      {item.why && <p style={{margin: '0 0 8px', fontSize: '16.5px', lineHeight: 1.8}}>{item.why}</p>}
      <p className="note" style={{margin: 0}}>
        {stopsOf(item)
          .slice(0, 4)
          .map((stop) => [stop.name.split(' · ').pop(), stop.minutes && `${stop.minutes}분`].filter(Boolean).join(' '))
          .join(' → ')}
      </p>
    </button>
  );

  return (
    <>
      <section className="sec" id="itinerary" aria-labelledby="itinerary-heading">
        <p className="eyebrow">ITINERARY</p>
        <h2 id="itinerary-heading">
          {parsed.title || sectionName(payload, 'itinerary', '추천 일정')} <span>{items.length}</span>
        </h2>
        <p className="note" style={{margin: '-8px 0 14px'}}>
          {parsed.subtitle || '하루를 어떻게 쓸지 미리 짜 두었습니다.'}
        </p>
        {tags.length > 1 && (
          <div className="tabrow" role="tablist">
            {['', ...tags].map((t) => (
              <button key={t || 'all'} type="button" role="tab" aria-current={t === tag} onClick={() => setTag(t)}>
                {t || '전체'} {items.filter((item) => !t || item.duration === t).length}
              </button>
            ))}
          </div>
        )}
        {shown.slice(0, FIRST).map(card)}
        {shown.length > FIRST && (
          <details>
            <summary className="more" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
              {shown.length - FIRST}개 더 보기
            </summary>
            {shown.slice(FIRST).map(card)}
          </details>
        )}
      </section>
      <Sheet open={open != null} onClose={() => setOpen(null)} label={open?.name ?? ''}>
        {open && (
          <>
            <h3>{open.name}</h3>
            <p className="meta">{[open.duration, open.audience].filter(Boolean).join(' · ')}</p>
            {open.why && <p>{open.why}</p>}
            {(open.days?.length ? open.days : [{label: undefined, stops: open.stops}]).map((day, i) => (
              <div key={i}>
                {day.label && <p className="meta">{day.label}</p>}
                <ul className="stops">
                  {(day.stops ?? []).map((stop, j) => (
                    <li key={j}>
                      <b>{stop.name}</b>
                      {(stop.note || stop.minutes) && (
                        <span>
                          {[stop.minutes && `${stop.minutes}분 머뭅니다`, stop.note].filter(Boolean).join(' · ')}
                        </span>
                      )}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </>
        )}
      </Sheet>
      <div className="rule" />
    </>
  );
}