탭

한 지면 안에서 서문·본문·미주처럼 나란한 섹션을 잉크빛 밑줄로 전환하는 컨트롤이다. Editorial Web에서는 탭도 목차의 연장이므로 화려한 배경 대신 얇은 밑줄과 세리프 라벨로 읽는 흐름을 끊지 않는다. 선택된 탭만 진한 밑줄로 강조하고 나머지는 조용히 둔다.

상태

선택

비활성 탭

선택된 탭만 진한 밑줄로 남고, 아직 열리지 않은 섹션은 disabled 로 흐리게 둔다.

활용 방법

콘텐츠 전환

각 탭의 content 를 함께 넘기면 선택에 따라 아래 지면이 바뀐다. 기본값은 첫 활성 탭이다.

Preview

편집자의 시선으로 이번 호를 여는 짧은 글이다.

tsx

<Tabs
  tabs={[
    { value: "intro", label: "서문", content: <p>편집자의 시선으로 여는 글이다.</p> },
    { value: "body", label: "본문", content: <p>핵심 에세이를 담는 자리다.</p> },
    { value: "notes", label: "미주", content: <p>인용과 출처를 정리한다.</p> },
  ]}
/>

시작 탭 지정

defaultValue 로 처음 열릴 탭을 고른다. 독자를 본문부터 보여주고 싶을 때 쓴다.

Preview

본문부터 펼쳐진 상태다.

tsx

<Tabs
  defaultValue="body"
  tabs={[
    { value: "intro", label: "서문", content: <p>서문이다.</p> },
    { value: "body", label: "본문", content: <p>본문부터 펼쳐진다.</p> },
  ]}
/>

제어 방식

value 와 onChange 를 주면 선택 상태를 바깥에서 관리한다. URL 쿼리나 상위 상태와 탭을 묶을 때 쓴다. renderContent 를 false 로 두면 탭 바만 그리고 본문은 직접 렌더한다.

Preview

tsx

const [tab, setTab] = useState("list");

<Tabs
  value={tab}
  onChange={setTab}
  renderContent={false}
  tabs={[
    { value: "list", label: "목록" },
    { value: "gallery", label: "갤러리" },
  ]}
/>
{tab === "list" ? <ArticleList /> : <Gallery />}

속성

이름	타입	기본값	설명
tabs	TabItem[]	-	탭 정의 배열 { value, label, content?, disabled? }
defaultValue	string	-	초기 선택 탭 (비제어). 미지정 시 첫 활성 탭
value	string	-	선택 탭 (제어). onChange 와 함께 쓴다
onChange	(value: string) => void	-	탭 전환 시 호출
renderContent	boolean	true	false 면 탭 바만 그리고 content 는 렌더하지 않는다
className	string	-	래퍼 클래스