'use client'; import { useState } from 'react'; export default function TimelineHorizontalDemo() { const [activeStep, setActiveStep] = useState(2); const roadmap = [ { quarter: 'Q1 2024', title: '기획 단계', status: 'completed', items: ['요구사항 분석', '시장 조사', '기획서 작성'] }, { quarter: 'Q2 2024', title: '개발 단계', status: 'completed', items: ['UI/UX 디자인', '프론트엔드 개발', 'API 개발'] }, { quarter: 'Q3 2024', title: '테스트', status: 'in-progress', items: ['QA 테스트', '베타 테스트', '버그 수정'] }, { quarter: 'Q4 2024', title: '출시', status: 'upcoming', items: ['마케팅 준비', '정식 출시', '고객 지원'] }, { quarter: 'Q1 2025', title: '확장', status: 'upcoming', items: ['기능 추가', '해외 진출', '파트너십'] }, ]; const statusStyles = { completed: 'bg-green-500 border-green-500', 'in-progress': 'bg-blue-500 border-blue-500', upcoming: 'bg-gray-300 border-gray-300', }; return (

제품 로드맵

우리의 여정과 앞으로의 계획

{/* Timeline */}

{/* Progress Line */}

{/* Steps */}

{roadmap.map((step, i) => (

setActiveStep(i)} > {/* Node */}

{step.status === 'completed' && ( ✓ )}

{/* Content */}

{step.quarter}

{step.title}

{/* Details (shown for active) */} {i === activeStep && (

{step.status === 'completed' ? '✓' : '○'} {item}

)}

))}

{/* Legend */}

완료

진행 중

예정

); }

Vertical Timeline

Our Journey

글로벌 확장

시리즈 B 펀딩

제품 출시

회사 설립