🔧 주요 개선사항:
1. Topbar 네비게이션 문제 해결
- 튜토리얼 페이지에서 메뉴 항목 클릭 시 올바른 라우팅 구현
- Tutorial 메뉴 클릭 시 페이지 리로드 기능 추가 (컴포넌트 리마운트)
- 라우팅 우선, 스크롤 폴백 패턴 적용
2. PromptInput 플레이스홀더 개선
- 튜토리얼 실행 후 실제 사용된 프롬프트를 플레이스홀더에 표시
- 명확한 프롬프트 → 실행 → 결과 추적 가능
- 새 튜토리얼 선택 시 이전 프롬프트 초기화
3. 새로운 튜토리얼 시스템 구축
- TutorialSheetViewer: 단계별 튜토리얼 플로우 구현
- TutorialCard: 개별 튜토리얼 카드 컴포넌트
- TutorialExecutor: 튜토리얼 실행 엔진
- TutorialDataGenerator: 10개 Excel 함수 데이터 생성
📁 변경된 파일들:
- src/App.tsx: 네비게이션 핸들러 추가
- src/components/ui/topbar.tsx: 라우팅 기반 네비게이션 구현
- src/components/sheet/PromptInput.tsx: 동적 플레이스홀더 추가
- src/components/TutorialSheetViewer.tsx: 튜토리얼 전용 뷰어 구현
- src/types/tutorial.ts: 튜토리얼 타입 정의
- .cursor/rules/tutorial-navigation-fix.mdc: 구현 패턴 문서화
✅ 검증 완료:
- 모든 topbar 메뉴 정상 네비게이션
- 튜토리얼 페이지 리로드 기능 작동
- 실행된 프롬프트 플레이스홀더 표시
- AI 워크플로우 시뮬레이션 완성
주요 변경사항:
- 🎨 가격 섹션을 CTA 섹션과 동일한 그라디언트 스타일로 변경
- 🗑️ 중복된 CTA 섹션 제거 및 페이지 구성 최적화
- 🏠 에디터 상단 로고 클릭 시 홈 이동 기능 추가 (저장 경고 포함)
- 📱 인증 페이지 컴포넌트 추가 (SignIn/SignUp)
- 💰 가격 정보 섹션 및 FAQ 섹션 추가
- 🔧 TopBar 컴포넌트에 로고 클릭 핸들러 추가
UI/UX 개선:
- 가격 섹션: 파란색-보라색 그라디언트 배경 적용
- 카드 스타일: 반투명 배경 및 backdrop-blur 효과
- 텍스트 색상: 그라디언트 배경에 맞는 흰색/파란색 톤 적용
- 버튼 스타일: 인기 플랜 노란색 강조, 일반 플랜 반투명 스타일
기능 추가:
- 에디터에서 로고 클릭 시 작업 손실 경고 및 홈 이동
- 완전한 인증 플로우 UI 구성
- 반응형 가격 정보 표시
- T-008 태스크 완료: 히스토리 패널 UI 마크업 구현 (슬라이드 인)
- 히스토리, UNDO, 전송하기 버튼을 세로로 균등 간격 배치
- Tailwind CSS v3/v4 버전 충돌 문제 해결
- v4 패키지 완전 제거 (@tailwindcss/postcss 등)
- PostCSS 설정을 v3 방식으로 수정
- CSS 파일에서 수동 클래스 정의 제거
- Vite 캐시 완전 삭제로 설정 변경 반영
- 히스토리 패널 기능 개선
- 우측 슬라이드 인 애니메이션
- 파일 업로드 시에만 표시
- 상태별 아이콘과 시간순 로그 리스트
- 재적용 및 전체 삭제 기능
- 새로운 rule 파일 생성: tailwind-css-management.mdc
