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

/**
 * 시간의 골목 — 발행본. 연도가 큰 활자로 서고 사건이 붙는다.
 * ★ 붉은 점은 도시의 성격이 바뀐 해다. 점의 색이 장식이 아니라 정보라 범례를 함께 낸다.
 */
import type {ChronicleItem} from '@o2o/shared';
import {useSite} from '@/lib/site-context';
import {sectionItems, sectionName} from '@/lib/derive';
import {ITEM_ACCENT, ITEM_BORDER, ITEM_CARD, ItemSection, Rail, SourceLine} from './common';

export function ChronicleSection() {
  const payload = useSite();
  const parsed = sectionItems<ChronicleItem>(payload, 'chronicle');
  if (parsed.items.length === 0) return null;

  // 연도가 있는 것부터 오름차순, 없는 것은 뒤로. 붙여넣은 순서를 믿지 않는다.
  const items = [...parsed.items].sort((a, b) => {
    if (a.year == null) return b.year == null ? 0 : 1;
    if (b.year == null) return -1;
    return a.year - b.year;
  });
  const turning = items.filter((item) => item.turning === true).length;

  return (
    <ItemSection
      id="chronicle"
      name={parsed.title || sectionName(payload, 'chronicle', '시간의 골목')}
      subtitle={parsed.subtitle}
      count={`붉은 점은 도시의 성격이 바뀐 해입니다 · ${turning}개 / 전체 ${items.length}개`}
    >
      <Rail label="연표">
        {items.map((item, index) => {
          const isTurning = item.turning === true;
          return (
            <article key={`${item.year ?? 'x'}-${item.title}-${index}`} className="w-[228px] shrink-0 snap-center">
              <p className="serif text-3xl font-bold leading-none" style={{color: isTurning ? ITEM_ACCENT : undefined}}>
                {item.year ?? '연도 미상'}
              </p>
              <div className="relative my-3 h-3">
                <i
                  aria-hidden
                  className="absolute top-1/2 left-0 border-t"
                  // 마지막 해에서 선이 끊긴다 — 이어 두면 뒤가 더 있는 줄 안다.
                  style={{borderColor: ITEM_BORDER, right: index === items.length - 1 ? 'calc(100% - 12px)' : 0}}
                />
                <i
                  aria-hidden
                  className="absolute top-1/2 left-0 size-3 -translate-y-1/2 rounded-full border-2"
                  style={{
                    backgroundColor: isTurning ? ITEM_ACCENT : ITEM_CARD,
                    borderColor: isTurning ? ITEM_ACCENT : ITEM_BORDER,
                  }}
                />
              </div>
              <div className="space-y-1.5 pr-5">
                <h3 className="serif text-base font-bold">{item.title}</h3>
                {item.summary && <p className="text-[13px] leading-relaxed opacity-80">{item.summary}</p>}
                {item.place && <p className="text-[11px] opacity-60">지금 이 자리 · {item.place}</p>}
                <SourceLine source={item.source} verified={item.verified} />
              </div>
            </article>
          );
        })}
      </Rail>
    </ItemSection>
  );
}