2f3515985d
🔧 주요 개선사항: 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 워크플로우 시뮬레이션 완성
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default tseslint.config({
extends: [
// Remove ...tseslint.configs.recommended and replace with this
...tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
...tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
...tseslint.configs.stylisticTypeChecked,
],
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default tseslint.config({
plugins: {
// Add the react-x and react-dom plugins
'react-x': reactX,
'react-dom': reactDom,
},
rules: {
// other rules...
// Enable its recommended typescript rules
...reactX.configs['recommended-typescript'].rules,
...reactDom.configs.recommended.rules,
},
})