React + TypeScript + Vite로 '포트폴리오 대시보드' 프로젝트를 생성해주세요.

요구사항:
1. Vite + React + TypeScript 프로젝트 초기화
2. Tailwind CSS 4.x 설치 및 설정
3. React Router v7 설치 및 기본 라우트 구성:
   - / : 대시보드 (프로젝트 목록)
   - /projects/new : 프로젝트 추가
   - /projects/:id : 프로젝트 상세
   - /projects/:id/edit : 프로젝트 수정
   - /stats : 통계 페이지
4. 기본 레이아웃 컴포넌트 생성:
   - Header: 로고, 네비게이션 링크, 다크모드 토글 버튼
   - Sidebar: 기술 스택 필터 목록
   - Footer: 간단한 저작권 표시
5. 다크모드 구현: localStorage + system preference 감지
6. ESLint + Prettier 설정
7. 프로젝트 타입 정의 (types/index.ts):
   - Project: id, title, description, techStack(string[]), githubUrl, demoUrl, imageUrl, stars, forks, languages, createdAt, updatedAt
   - GitHubRepo: name, description, stargazers_count, forks_count, language, html_url

모든 파일을 생성하고 초기 설정을 완료해주세요.

프로젝트 CRUD 기능과 LocalStorage 기반 데이터 영속화를 구현해주세요.

요구사항:
1. Zustand 스토어 생성 (stores/projectStore.ts):
   - projects 배열 상태 관리
   - addProject, updateProject, deleteProject 액션
   - localStorage에 자동 저장/불러오기 (zustand/middleware persist)
2. 프로젝트 목록 페이지 (pages/Dashboard.tsx):
   - 카드 그리드 레이아웃 (반응형: 모바일 1열, 태블릿 2열, 데스크톱 3열)
   - 각 카드: 프로젝트 이미지, 제목, 설명(2줄 말줄임), 기술 스택 태그(뱃지), GitHub 스타/포크 수
   - 그리드/리스트 뷰 전환 버튼
   - 빈 상태 메시지 ('아직 등록된 프로젝트가 없습니다. 첫 프로젝트를 추가해보세요!')
3. 프로젝트 추가/수정 폼 (pages/ProjectForm.tsx):
   - 프로젝트 이름 (required, maxLength: 100)
   - 설명 (textarea, optional)
   - GitHub 리포지토리 URL (URL 유효성 검사)
   - 라이브 데모 URL (optional)
   - 이미지 URL (optional)
   - 기술 스택 태그 입력: 콤마로 구분, 엔터 키로 추가, 태그 클릭 시 삭제
   - 폼 유효성 검사 에러 메시지 표시
4. 프로젝트 상세 페이지 (pages/ProjectDetail.tsx):
   - 프로젝트 전체 정보 표시
   - 수정/삭제 버튼
   - 삭제 시 확인 모달
5. 공통 컴포넌트:
   - TagInput: 태그 입력 컴포넌트 (자동완성 포함)
   - ConfirmModal: 삭제 확인 모달
   - Toast: 성공/에러 알림

CRUD가 완벽하게 작동하고 localStorage에 데이터가 영속되도록 구현해주세요.

GitHub API 연동 기능을 구현해주세요.

요구사항:
1. GitHub API 서비스 (services/githubApi.ts):
   - fetchRepoInfo(owner, repo): 리포지토리 기본 정보 가져오기
   - fetchRepoLanguages(owner, repo): 언어 비율 가져오기
   - GitHub URL에서 owner/repo 파싱 함수
   - API 에러 핸들링 (404, rate limit 등)
   - fetch API 사용 (axios 사용 금지)
2. 프로젝트 추가/수정 폼에 GitHub 연동:
   - GitHub URL 입력 후 '정보 가져오기' 버튼 클릭
   - 로딩 스피너 표시 (Tailwind animate-spin 사용)
   - 성공 시: 스타 수, 포크 수, 언어 정보 자동 채우기
   - 실패 시: 에러 메시지 표시 (리포지토리를 찾을 수 없습니다 등)
3. 프로젝트 카드에 GitHub 정보 표시:
   - 스타 아이콘 + 숫자
   - 포크 아이콘 + 숫자
   - 주요 언어 뱃지
4. 프로젝트 상세 페이지에 언어 비율 바:
   - GitHub 스타일 가로 막대 (각 언어별 색상)
   - 각 언어의 퍼센트 표시
5. API Rate Limit 대응:
   - 인증 없이 시간당 60회 제한 안내
   - 선택적으로 Personal Access Token 입력 기능 (설정 페이지)

GitHub API와 자연스럽게 연동되도록 구현해주세요.

필터링, 정렬, 검색 기능과 통계 대시보드를 구현해주세요.

요구사항:
1. 사이드바 필터 (components/Sidebar.tsx):
   - 모든 프로젝트에서 사용된 기술 스택 태그 자동 수집
   - 태그 클릭 시 해당 기술 스택이 포함된 프로젝트만 필터링
   - 다중 필터 지원 (AND 조건)
   - 활성 필터 뱃지 표시 및 전체 해제 버튼
2. 정렬 기능 (Dashboard 상단):
   - 최신순, 이름순(가나다), GitHub 스타순
   - 오름차순/내림차순 토글
3. 검색 기능:
   - 프로젝트 이름, 설명, 기술 스택에서 키워드 검색
   - 디바운스 적용 (300ms)
   - 검색 결과 하이라이트
4. 통계 페이지 (pages/Stats.tsx):
   - 총 프로젝트 수 카드
   - GitHub 스타 합계 카드
   - 가장 많이 사용한 기술 스택 Top 5 (가로 막대 차트, CSS로 구현)
   - 기술 스택별 프로젝트 수 도넛 차트 (Chart.js 또는 Recharts 사용)
   - 월별 프로젝트 등록 추이 라인 차트
5. URL 쿼리 파라미터 연동:
   - 필터, 정렬, 검색어를 URL에 반영
   - 뒤로가기/앞으로가기 시 상태 유지
   - 링크 공유 시 동일한 필터 상태 재현

사용자가 프로젝트를 효율적으로 탐색할 수 있도록 구현해주세요.

반응형 디자인 완성, 애니메이션, 접근성 개선 및 최종 마무리를 해주세요.

요구사항:
1. 반응형 디자인 최적화:
   - 모바일: 사이드바를 하단 시트 또는 드로어로 변환
   - 태블릿: 접이식 사이드바
   - 데스크톱: 고정 사이드바
   - 카드 그리드 반응형 조정
2. 애니메이션 추가:
   - 카드 등장 시 fade-in + slide-up 애니메이션
   - 카드 hover 시 그림자 확대 효과
   - 페이지 전환 시 부드러운 전환 효과
   - 태그 추가/삭제 시 애니메이션
   - 뷰 전환(그리드/리스트) 시 부드러운 전환
3. 접근성 (a11y):
   - 키보드 네비게이션 지원
   - aria-label 추가
   - 포커스 스타일링
   - 스크린 리더 지원
4. 데이터 시딩:
   - 샘플 프로젝트 5개 생성하는 시드 데이터 파일 (utils/seedData.ts)
   - 앱 최초 실행 시 자동 시딩 (localStorage 비어있을 때)
5. README.md 작성:
   - 프로젝트 설명 및 스크린샷 안내
   - 설치 방법 (npm install, npm run dev)
   - 주요 기능 목록
   - 기술 스택
   - 프로젝트 구조 트리
6. 성능 최적화:
   - React.memo, useMemo, useCallback 적절히 사용
   - 이미지 lazy loading
   - 코드 스플리팅 (React.lazy + Suspense)

프로덕션 배포 가능한 수준으로 완성해주세요.