o2o-site-AEO/solution/frontend/src/features/builder/canvas/variants/course/CourseTickets.tsx

/**
 * 반나절 산책 — 승차권 캐러셀.
 *
 * 표 한 장이 정거장 하나다. 절취선·펀치 구멍·완주 도장은 스탬프투어라는 실제 형식을 그대로 옮긴 것.
 * ★ 링크는 만들지 않는다. searchQuery 만 보여준다 — 지어낸 주소를 링크하지 않는 이 레포의 규약.
 */
import {SectionBody, SectionFrame} from '../../primitives';
import type {SectionRenderProps} from '../../types';
import {parseSectionData, type CourseItem, type CourseStop} from '@o2o/shared';
import {
  CarouselNav,
  ITEM_ACCENT,
  ITEM_BODY,
  ITEM_BORDER,
  ITEM_CARD,
  ITEM_HEADING,
  ITEM_INK,
  ITEM_SURFACE,
  ParseError,
  PasteHint,
  SourceLine,
  useCarousel,
} from '../items/common';
import '../items/items.css';

function Ticket({
  stop,
  courseName,
  index,
  isLast,
}: {
  stop: CourseStop;
  courseName: string;
  index: number;
  isLast: boolean;
}) {
  const no = String(stop.order ?? index + 1).padStart(2, '0');

  return (
    <div
      className="relative w-[236px] shrink-0 snap-center border shadow-[4px_4px_0_rgba(27,26,21,.13)]"
      style={{backgroundColor: ITEM_CARD, borderColor: ITEM_INK}}
    >
      <div
        className="flex justify-between border-b border-dashed px-4 py-2.5 text-[10px] tracking-[0.12em] opacity-75"
        style={{borderColor: ITEM_INK}}
      >
        <span className="truncate">{courseName}</span>
        <span className="shrink-0">NO.{no}</span>
      </div>

      <p className="px-4 pt-4 leading-none" style={{fontFamily: ITEM_HEADING, fontSize: 32, color: ITEM_ACCENT}}>
        {no}
      </p>
      <h4 className="px-4 pt-1.5 text-base font-bold" style={{fontFamily: ITEM_BODY}}>
        {stop.name}
      </h4>
      {stop.note && (
        <p className="px-4 pt-2 text-[13px] leading-relaxed opacity-75" style={{fontFamily: ITEM_BODY}}>
          {stop.note}
        </p>
      )}

      <div
        className="mt-3 flex justify-between gap-2 border-t border-dashed px-4 py-2.5 text-[10px] opacity-60"
        style={{borderColor: ITEM_BORDER}}
      >
        <span>{stop.minutes ? `도보 ${stop.minutes}분` : '이동 시간 미정'}</span>
        {stop.searchQuery && <span className="truncate">지도 검색 · {stop.searchQuery}</span>}
      </div>

      {/* 펀치 구멍 — 표를 표로 만드는 자리 */}
      <i
        className="absolute -left-[7px] top-1/2 size-3 rounded-full border"
        style={{backgroundColor: ITEM_SURFACE, borderColor: ITEM_INK}}
      />
      <i
        className="absolute -right-[7px] top-1/2 size-3 rounded-full border"
        style={{backgroundColor: ITEM_SURFACE, borderColor: ITEM_INK}}
      />

      {isLast && (
        <span
          className="absolute bottom-3 right-3 grid size-14 -rotate-12 place-items-center rounded-full border-2 text-center text-[11px] leading-tight opacity-75"
          style={{fontFamily: ITEM_HEADING, borderColor: ITEM_ACCENT, color: ITEM_ACCENT}}
        >
          완주
          <br />
          도장
        </span>
      )}
    </div>
  );
}

function CourseRow({course}: {course: CourseItem}) {
  const {ref, scrollBy} = useCarousel<HTMLDivElement>();
  const stops = course.stops ?? [];

  return (
    <div className="space-y-2.5">
      <div className="flex flex-wrap items-baseline justify-between gap-2">
        <div className="flex flex-wrap items-baseline gap-2.5">
          <h3 className="text-lg" style={{fontFamily: ITEM_HEADING}}>
            {course.name}
          </h3>
          <span className="text-[11px] opacity-60">
            {[course.duration, course.startsFrom ? `${course.startsFrom} 출발` : undefined, `${stops.length}곳`]
              .filter(Boolean)
              .join(' · ')}
          </span>
        </div>
        {stops.length > 2 && (
          <CarouselNav onPrev={() => scrollBy(-1)} onNext={() => scrollBy(1)} label={course.name} />
        )}
      </div>

      {stops.length === 0 ? (
        <p className="border border-dashed px-4 py-5 text-center text-[11px] opacity-60" style={{borderColor: ITEM_BORDER}}>
          정거장이 아직 없습니다. JSON 의 stops 배열을 채워 주세요.
        </p>
      ) : (
        <div ref={ref} className="w4-scroll flex snap-x snap-mandatory gap-4 overflow-x-auto pb-3">
          {stops.map((stop, index) => (
            <Ticket
              key={`${stop.name}-${index}`}
              stop={stop}
              courseName={course.name}
              index={index}
              isLast={index === stops.length - 1}
            />
          ))}
        </div>
      )}

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

export function CourseTickets(props: SectionRenderProps) {
  const {section, isSelected, onSelect} = props;
  const parsed = parseSectionData<CourseItem>(section.type, section.data);

  return (
    <SectionFrame section={section} isSelected={isSelected} onSelect={onSelect} tone="tint">
      <SectionBody width="wide">
        <div className="space-y-1.5">
          <h2 className="text-2xl sm:text-3xl" style={{fontFamily: ITEM_HEADING}}>
            {parsed.title || section.name}
          </h2>
          {(parsed.subtitle || section.description) && (
            <p className="text-sm opacity-75" style={{fontFamily: ITEM_BODY}}>
              {parsed.subtitle || section.description}
            </p>
          )}
        </div>

        {parsed.error ? (
          <ParseError message={parsed.error} />
        ) : parsed.items.length === 0 ? (
          <PasteHint label="반나절 산책" />
        ) : (
          <div className="space-y-8">
            {parsed.items.map((course, index) => (
              <CourseRow key={`${course.name}-${index}`} course={course} />
            ))}
          </div>
        )}
      </SectionBody>
    </SectionFrame>
  );
}