Tabs

같은 맥락 안의 동등한 콘텐츠 보기를 전환합니다.

목적

Tabs는 같은 수준의 관련 view를 한 자리에서 전환한다. 공통 맥락은 유지하고 선택한 관점의 콘텐츠만 바꿔 사용자가 이전·다음 view의 관계를 잃지 않게 한다.

선택 기준

전체, 운영 중, 초안처럼 같은 데이터의 동등한 view를 전환할 때 사용한다.
순서가 있는 단계, 완료해야 하는 workflow에는 사용하지 않는다.
독립 URL과 browser history가 중요한 상위 navigation은 router Link 기반 navigation을 우선한다.
값 하나를 form에 저장하는 선택에는 Select나 별도의 선택 control을 사용한다.

실제 패키지 렌더링

기본 사용 예시

예시 데이터

핵심 구조와 현재 상태를 확인해요.

구조

Tabs 아래에 TabsList를 두고 각 선택은 TabsTrigger로 만든다. 각 Trigger의 value와 대응하는 TabsContent의 value를 동일하게 연결한다. List 다음에 Content들을 DOM 순서대로 둔다.

변형과 크기

별도 Dot variant나 size prop은 없다. TabsList 기본 높이는 40px이고 muted 배경과 4px padding을 사용한다. Trigger는 선택됐을 때 background, text, shadow가 바뀐다. 부모 너비에 맞춰 늘리려면 List와 Trigger의 className을 함께 조정한다.

상태와 동작

Tabs는 value, defaultValue, onValueChange로 제어·비제어 상태를 지원한다. Trigger는 active, focus-visible, disabled 상태를 가진다. 기반 root의 orientation과 activation mode props도 전달할 수 있다.

Tab을 바꿀 때 현재 filter나 scroll을 유지할지 제품 목적에 따라 결정한다. 비동기 Content는 해당 panel 안에서 loading, empty, error를 표현한다.

콘텐츠

Trigger는 짧고 서로 같은 문법의 명사를 사용한다. 수량이 판단에 필요하면 text와 함께 표시하되 label의 의미를 압도하지 않는다. 같은 화면의 주 행동은 tab마다 위치가 뛰지 않도록 PageHeader나 안정된 영역에 둔다.

접근성

Trigger와 Content의 value 관계를 정확히 맞춘다. keyboard 방향 이동과 focus ring을 유지한다. active 상태를 색만으로 구분하지 않고 선택된 표면과 semantics를 함께 제공한다. Tab label을 아이콘만으로 만들지 않는다.

좁은 화면과 긴 콘텐츠

Tab 수를 화면 폭에 맞춰 계속 줄이지 않는다. label이 길거나 항목이 많으면 정보 구조를 재분류하거나 다른 navigation을 선택한다. 좁은 화면에서 가로 scroll tabs를 도입하려면 현재 tab과 양쪽 이동 가능성을 명확히 보여줘야 한다.

공개 API

Tabs: root
TabsList: trigger group
TabsTrigger: value로 panel과 연결되는 선택 control
TabsContent: value로 trigger와 연결되는 panel

별도 Dot variant, size, router 연동 prop은 없다.

예제

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@classum/dot-design-system/ui';

export function CurriculumViews() {
  return (
    <Tabs defaultValue="active">
      <TabsList aria-label="커리큘럼 상태">
        <TabsTrigger value="active">운영 중</TabsTrigger>
        <TabsTrigger value="draft">초안</TabsTrigger>
        <TabsTrigger value="archived">보관됨</TabsTrigger>
      </TabsList>
      <TabsContent value="active">운영 중인 커리큘럼 목록</TabsContent>
      <TabsContent value="draft">작성 중인 커리큘럼 목록</TabsContent>
      <TabsContent value="archived">보관된 커리큘럼 목록</TabsContent>
    </Tabs>
  );
}

피해야 할 사용

순서가 있는 작성 단계를 Tabs로 표현하지 않는다.
Tab 전환마다 공통 page title과 주 행동의 위치를 바꾸지 않는다.
너무 많은 Tab을 작은 화면에 축소해서 넣지 않는다.
Trigger와 Content의 value를 다르게 연결하지 않는다.
active 상태를 text나 semantics 없이 색만으로 전달하지 않는다.

목적