[Feat] Google Calendar API 연동 - Todo List에 일정 통합 #49
Description
📋 기능 개요
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 APIsrc/utils/googleCalendar/sync.ts- 새 파일: 동기화src/utils/googleCalendar/converter.ts- 새 파일: Event → Todo 변환src/components/SettingsDialog.tsx- Google 로그인 UIsrc/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 제거 필수
📚 참고 문서
⏱️ 예상 개발 시간
총 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분마다)
- 오류 처리 완료 (네트워크, 인증 등)
- 테스트 완료 (수동 테스트)