Study Management Platform — Vue 3 마이그레이션

원본 React + TypeScript 프로젝트(../src)를 동일한 기능/디자인 그대로 Vue 3 (<script setup> + TypeScript) 로 마이그레이션한 버전입니다.

실행

npm install
npm run dev      # 개발 서버
npm run build    # 타입 체크(vue-tsc) + 프로덕션 빌드
npm run preview  # 빌드 결과 미리보기

기술 스택

항목	원본 (React)	마이그레이션 (Vue)
프레임워크	React 18	Vue 3.5 (<script setup>)
아이콘	lucide-react	lucide-vue-next
스타일	Tailwind CSS v4	Tailwind CSS v4 (동일 설정/테마 그대로)
빌드	Vite + @vitejs/plugin-react	Vite + @vitejs/plugin-vue
상태	useState 리프팅 + props/callbacks	ref/computed + props/emits

구조 매핑

원본 src/app/                       →  vue-migration/src/
  App.tsx                          →    App.vue
  components/Sidebar.tsx           →    components/Sidebar.vue
  components/Dashboard.tsx         →    components/Dashboard.vue
  components/CalendarView.tsx      →    components/CalendarView.vue
  components/StudyGroups.tsx       →    components/StudyGroups.vue
  components/GroupDetail.tsx       →    components/GroupDetail.vue
    └ (내부 GroupDashboardTab)     →      components/GroupDashboardTab.vue
    └ (내부 TasksTab)              →      components/TasksTab.vue
  components/StudyTimer.tsx        →    components/StudyTimer.vue
  components/CreateGroupModal.tsx  →    components/CreateGroupModal.vue
  components/InviteModal.tsx       →    components/InviteModal.vue
  components/TaskSubmitModal.tsx   →    components/TaskSubmitModal.vue
  data/mockData.ts                 →    data/mockData.ts  (그대로 복사)
  (CalendarEvent / Page / Tab 타입) →    types.ts
styles/*.css                       →    styles/*.css      (그대로 복사)

변환 메모

• 원본의 기능 컴포넌트들은 shadcn ui/ 컴포넌트를 사용하지 않고 lucide 아이콘 + 로컬 상태만 사용하므로, ui/ 폴더는 마이그레이션 대상에서 제외했습니다.
• React에서 컴포넌트 파일 내부에 정의되던 보조 컴포넌트(GroupDashboardTab, TasksTab)는 별도 .vue 파일로 분리했습니다.
• useState → ref, 파생 값 → computed, 콜백 prop → emits 로 변환했습니다.
• StudyTimer 의 useEffect 기반 인터벌은 watch([running, mode]) + onUnmounted 정리로 대체했습니다.
• 클래스/인라인 스타일/마크업은 시각적 동일성을 위해 원본을 그대로 옮겼습니다.
• lucide-vue-next 는 설치 시 deprecation 경고가 뜨지만 정상 동작합니다(원본 lucide-react 0.487 버전대와 맞춤).