'use client'; import { useState } from 'react'; export default function TabsVerticalDemo() { const [activeTab, setActiveTab] = useState('general'); const tabs = [ { id: 'general', label: '일반 설정', icon: '⚙️', badge: null }, { id: 'profile', label: '프로필', icon: '👤', badge: null }, { id: 'notifications', label: '알림', icon: '🔔', badge: 3 }, { id: 'security', label: '보안', icon: '🔒', badge: null }, { id: 'billing', label: '결제', icon: '💳', badge: null }, { id: 'integrations', label: '연동', icon: '🔗', badge: 'New' }, ]; const tabContents: Record = { general: (

일반 설정

언어

시간대

다크 모드

), profile: (

프로필

👤

이름

이메일

), notifications: (

알림 설정

{['이메일 알림', '푸시 알림', '마케팅 알림'].map((item, i) => (

{item}

))}

), security: (

보안

), billing:

결제 정보

결제 관련 설정을 관리합니다.

, integrations:

연동 서비스

외부 서비스 연동을 관리합니다.

, }; return (

설정

{/* Vertical Tabs */}

{tabs.map((tab) => ( ))}

{/* Content */}

{tabContents[activeTab]}

); }

Pill Tabs

Pill-Style Tabs