[Feat] Google Calendar API 연동 - Todo List에 일정 통합

[Turtle-Hwan]

📋 기능 개요

Google Calendar API를 연동하여 LinKU의 Todo List에 Google Calendar 일정을 통합 표시하는 기능입니다.

🎯 목표

• 이캠퍼스 과제 + 개인 할일 + Google Calendar 이벤트를 한 곳에서 관리
• D-Day 기준으로 모든 일정을 통합 정렬
• 학생들이 학교 과제와 개인 일정을 함께 확인 가능

---

🚀 구현 단계

Phase 1: Google OAuth2 설정 (2-3시간)

• Google Cloud Console 설정
  • 프로젝트 생성
  • Google Calendar API 활성화
  • OAuth 2.0 Client ID 생성 (Chrome Extension 타입)
  • OAuth 동의 화면 구성
• manifest.json 수정
  • identity 권한 추가
  • oauth2 섹션 추가
  • Calendar 스코프: https://www.googleapis.com/auth/calendar.readonly
• 인증 유틸리티 작성
  • src/utils/googleAuth.ts 생성
  • loginWithGoogle() 함수
  • logoutGoogle() 함수
  • 토큰 갱신 로직

Phase 2: Google Calendar API 연동 (2-3시간)

• Calendar API 클라이언트
  • src/apis/googleCalendarAPI.ts 생성
  • getCalendarEvents() 함수 구현
  • Date range 필터링 (앞으로 30일)
  • 에러 핸들링
• 타입 정의
  • GoogleCalendarTodoItem 타입 추가
  • Calendar Event → Todo 변환 유틸
  • src/utils/googleCalendar/converter.ts 생성

Phase 3: UI 통합 (2-3시간)

• Settings Dialog 수정
  • Google 로그인/로그아웃 버튼 추가
  • 로그인 상태 표시 (사용자 이메일)
  • Google Calendar on/off 토글
• Todo List 통합
  • 세 가지 Todo 통합 정렬 (eCampus + Custom + GCal)
  • 필터링 옵션 추가
• Todo Item 렌더링
  • Google Calendar Todo 전용 스타일 (파란색 테두리)
  • Google Calendar 아이콘 표시
  • 위치 정보 표시
  • 클릭 시 Google Calendar 웹으로 이동

Phase 4: 동기화 로직 (1-2시간)

• 동기화 함수 구현
  • syncGoogleCalendar() 함수
  • 5분마다 자동 동기화
  • 캐싱 전략 (네트워크 요청 최소화)
• 저장소 관리
  • chrome.storage.local에 Calendar Todo 저장
  • 마지막 동기화 시간 저장
• 오류 처리
  • 네트워크 오류 처리
  • 오프라인 시 캐시 사용
  • Toast 알림

Phase 5: 고급 기능 (선택, 2-3시간)

• 다중 캘린더 지원
• 일정 상세보기 Modal
• 양방향 동기화 (Custom Todo → Google Calendar)
• 알림 기능 (일정 15분 전)

---

🎨 UI 디자인 예시

┌─────────────────────────────────────┐
│  LinKU Todo List                    │
├─────────────────────────────────────┤
│  ┌───────────────────────────────┐  │
│  │ 📘 웹프로그래밍 기말과제       │  │ ← eCampus (검정 테두리)
│  │ 2025.10.20 23:59   [D-3]      │  │
│  └───────────────────────────────┘  │
├─────────────────────────────────────┤
│  ┌───────────────────────────────┐  │
│  │ 📅 건국대 MT                  │  │ ← Google Calendar (파란 테두리)
│  │ 📍 강원도 홍천                 │  │
│  │ 2025.10.22 10:00   [D-5]      │  │
│  └───────────────────────────────┘  │
├─────────────────────────────────────┤
│  ┌───────────────────────────────┐  │
│  │ ✏️ 알고리즘 스터디 준비        │  │ ← Custom (검정 테두리)
│  │ 2025.10.18 20:00   [D-1]  [✓]│  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

---

🛠️ 기술 스택

• Chrome Identity API (chrome.identity)
• Google Calendar API v3
• TypeScript
• React Hooks
• Chrome Storage

---

📁 주요 파일 변경

• public/manifest.json - oauth2, identity 권한 추가
• src/types/todo.ts - GoogleCalendarTodoItem 타입 추가
• src/utils/googleAuth.ts - 새 파일: OAuth 인증
• src/apis/googleCalendarAPI.ts - 새 파일: Calendar API
• src/utils/googleCalendar/sync.ts - 새 파일: 동기화
• src/utils/googleCalendar/converter.ts - 새 파일: Event → Todo 변환
• src/components/SettingsDialog.tsx - Google 로그인 UI
• src/components/Tabs/TodoList/TodoList.tsx - Calendar Todo 통합
• src/components/Tabs/TodoList/TodoItem.tsx - Calendar Todo 렌더링

---

⚠️ 주의사항 및 제약

1. OAuth 인증 검증

• 비공개 Extension: 최대 100명 테스트 가능
• 공개 배포 시: Google OAuth 앱 검증 필요
  • 홈페이지 URL 필요
  • 개인정보 보호정책 필요
  • 도메인 인증 필요

2. API 할당량

• Google Calendar API: 일일 1,000,000 요청
• 사용자당 충분한 할당량
• 캐싱 전략으로 요청 최소화 필요

3. 네트워크 의존성

• 오프라인에서는 캐시된 데이터만 표시
• 동기화 실패 시 Toast 알림

4. 보안

• Access Token은 chrome.storage.local에 저장
• chrome.identity.getAuthToken() 사용 시 Chrome이 자동 관리
• 로그아웃 시 Token 제거 필수

---

📚 참고 문서

• Chrome Identity API
• Google Calendar API
• OAuth 2.0 for Chrome Extensions
• Calendar API Events: list

---

⏱️ 예상 개발 시간

총 9-14시간 (테스트 포함)

• Phase 1: 2-3시간
• Phase 2: 2-3시간
• Phase 3: 2-3시간
• Phase 4: 1-2시간
• Phase 5: 2-3시간 (선택)

---

💡 추가 아이디어

• 양방향 동기화: LinKU Custom Todo → Google Calendar 자동 생성
• 알림 기능: 일정 15분 전 Chrome 알림
• 통계 대시보드: 이번 주 일정 개수, 완료율 등
• 다중 캘린더 지원: 업무/개인 캘린더 분리

---

✅ 완료 조건

• Google 로그인 성공
• Google Calendar 일정 가져오기 성공
• Todo List에 Calendar 이벤트 표시
• D-Day 기준 통합 정렬 작동
• 동기화 기능 작동 (5분마다)
• 오류 처리 완료 (네트워크, 인증 등)
• 테스트 완료 (수동 테스트)