자동 진행 탭으로 기능을 소개하는 섹션

제작 과정

한 줄 요약

좌측 탭 + 우측 패널 구조의 SaaS형 기능 소개 섹션. 일정 시간마다 다음 탭으로 자동 진행하며 활성 탭에 진행 바가 차고, hover하면 멈춥니다.

이럴 때 필요해요

제품의 핵심 기능 3~5개를 한 영역에서 번갈아 보여주고 싶을 때. 길게 나열하는 대신 탭으로 압축합니다.

어떻게 동작하나

active 인덱스를 state로 두고, setTimeout으로 일정 시간 뒤 다음 탭으로 순환.
진행 바는 CSS 애니메이션을 active로 remount해 매 전환마다 0%부터 다시 채웁니다.
섹션 hover 시 paused=true 타이머와 진행 바(animationPlayState)를 동시에 멈춤.

놓치기 쉬운 것

자동 진행은 사용자가 읽는 중이면 방해 hover/포커스 시 반드시 일시정지.
진행 바 재시작은 key로 remount하는 게 가장 간단하고 확실.
모바일은 세로 탭이 좁으니 가로 스크롤 칩으로 전환.

이런 곳에 써요

제품 홈의 기능 소개 섹션
온보딩/투어 하이라이트

import type { Metadata } from "next"; import { FeatureTabsSection } from "./-components/FeatureTabsSection"; export const metadata: Metadata = { title: "기능 소개 탭 섹션 (데모)", description: "탭을 누르면 해당 기능 패널로 전환되는 SaaS형 기능 소개 섹션. 일정 시간마다 자동으로 다음 탭으로 진행(진행 바)하고 hover 시 일시정지, 모바일은 가로 칩, role=tablist·aria-selected.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-violet-50/40 px-4 py-12"> <FeatureTabsSection /> </main> ); }