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

/**
 * 지역 이야기 — 레트로 아이템 다섯을 한 섹션에 묶고 탭으로 가른다.
 *
 * ★ 왜 묶나 (2026-09-04, 사장님 요청)
 *   가요 다방·인물 열전·시간의 골목·지역 읽기·오늘의 엽서가 각각 섹션으로 서 있었다.
 *   실측 390px 에서 다섯이 합쳐 3,470px — 전체의 17% 이고, 예약하러 온 손님은 이 구간을
 *   다섯 화면 넘게 밀어야 아래(주변·FAQ)에 닿았다. 성격이 같은 것들이니 한 자리에 묶고
 *   **한 번에 하나만** 편다.
 * ★ 다섯 다 늘 그린다 — 안 고른 것은 `hidden` 이다. 잘라내면 검색·AI 가 나머지 넷을 못 읽는다.
 *   이 사이트의 존재 이유가 인용이라, 화면에서 접는 것과 문서에서 지우는 것은 다른 일이다.
 * ★ 각자의 <h2> 는 그대로 둔다. 탭 이름과 겹쳐 보이지만, 펼쳐 놓고 읽는 기계에게는
 *   그 제목이 다섯 덩이를 가르는 유일한 표지다.
 */
import {useState} from 'react';
import {useSite} from '@site/lib/site-context';
import {sectionItems, sectionName} from '@site/lib/derive';
import {SongsSection} from './SongsSection';
import {PeopleSection} from './PeopleSection';
import {ChronicleSection} from './ChronicleSection';
import {ReadingSection} from './ReadingSection';
import {PostcardSection} from './PostcardSection';
import {ITEM_BORDER, ITEM_INK, ITEM_INVERSE_INK} from './common';

/*
 * ★ 숫자를 문장에 박지 않는다 (2026-09-04, 사장님 지적: "다섯 갈래인데 4개잖아")
 *   탭은 데이터가 있는 것만 선다 — 사장님이 아이템 하나를 끄면 문장이 곧바로 거짓말이 된다.
 *   실제로 '가요 다방'과 '오늘의 한 장'을 뺐더니 셋인데 "다섯 갈래"라고 적혀 있었다.
 */
const COUNT_WORD: Record<number, string> = {
  1: '한', 2: '두', 3: '세', 4: '네', 5: '다섯', 6: '여섯', 7: '일곱',
};

/* ★ '읽기' 만 라벨에 지명이 든다 — 나머지 넷은 어느 도시에서도 같은 이름이지만
     이건 "그 도시를 읽는다" 가 이름의 뜻이라 지명을 빼면 무엇을 읽는지가 사라진다.
     지명을 코드에 박지 않는다(`군산 읽기` 는 시연본 한 곳의 값이다). */
const tabsOf = (readingLabel: string) =>
  [
    {id: 'songs', label: '가요 다방', Component: SongsSection},
    {id: 'people', label: '인물 열전', Component: PeopleSection},
    {id: 'chronicle', label: '시간의 골목', Component: ChronicleSection},
    {id: 'reading', label: readingLabel, Component: ReadingSection},
    {id: 'postcard', label: '오늘의 엽서', Component: PostcardSection},
  ] as const;

export function StorySection() {
  const payload = useSite();
  const region = payload.place.addressLocality ?? '지역';
  const title = sectionName(payload, 'story', `${region} 이야기`);
  // 탭 라벨은 안의 제목과 같은 값을 쓴다 — 각자 계산하면 "군산시 읽기" 탭에
  // "군산 읽기" 본문처럼 갈릴 수 있다(ReadingSection.tsx 의 parsed.title 우선 규칙과 같다).
  const readingLabel = sectionItems(payload, 'reading').title || `${region} 읽기`;
  // 데이터가 있는 것만 탭이 된다 — 눌러서 빈 화면을 보게 하지 않는다.
  const tabs = tabsOf(readingLabel).filter((tab) => sectionItems(payload, tab.id).items.length > 0);
  const [active, setActive] = useState(0);

  if (tabs.length === 0) return null;

  return (
    <>
      <section
        id="story"
        aria-labelledby="story-heading"
        className="paper w-full"
        style={{
          backgroundColor: 'var(--tpl-surface, #fafafa)',
          color: ITEM_INK,
          paddingTop: 'var(--section-space)',
          /*
           * ★ 아래 여백을 준다 (2026-09-04, 사장님: "탭이랑 밑의 섹션 간격")
           *   처음엔 0 으로 두고 "다음 덩이가 제 여백을 들고 온다"고 봤다. 그런데 고른 덩이가
           *   어두운 면(인물 열전)이면 그 여백도 검은색이라, 탭 바 바로 밑에서 검은 띠가
           *   칼로 자른 듯 시작한다. 탭과 내용은 한 벌이니 붙되, 붙어 있지는 않아야 한다.
           */
          paddingBottom: 'calc(var(--section-space) * 0.55)',
        }}
      >
        <div className="shell">
          <h2 id="story-heading" className="h2">
            {title}
          </h2>
          <p className="measure mt-3 text-[length:var(--fs-sm)] opacity-100">
            이 도시를 {COUNT_WORD[tabs.length] ?? `${tabs.length}`} 갈래로 봅니다. 하나씩 골라 보세요.
          </p>

          <div className="mt-6 flex flex-wrap gap-1.5" role="tablist" aria-label={title}>
            {tabs.map((tab, index) => {
              const on = index === active;
              return (
                <button
                  key={tab.id}
                  type="button"
                  role="tab"
                  aria-selected={on}
                  aria-controls={tab.id}
                  onClick={() => setActive(index)}
                  className="rounded-full border px-4 py-1.5 text-[length:var(--fs-sm)] font-bold transition-opacity hover:opacity-100"
                  style={
                    on
                      ? {backgroundColor: ITEM_INK, color: ITEM_INVERSE_INK, borderColor: ITEM_INK}
                      : {borderColor: ITEM_BORDER}
                  }
                >
                  {tab.label}
                </button>
              );
            })}
          </div>
        </div>
      </section>

      {tabs.map((tab, index) => (
        <div key={tab.id} hidden={index !== active}>
          <tab.Component />
        </div>
      ))}
    </>
  );
}