📌 FullCalendar + Google Calendar 연동 따라하기 가이드 (Spring Boot)

1️⃣ 목표

• FullCalendar에서 날짜를 클릭 → 모달창 입력 → 제출 → 📆 Google Calendar에 일정 자동 등록
  

---

2️⃣ GCP 준비: OAuth 2.0 설정

✅ Google Cloud Console에서

1. 프로젝트 생성
2. API 및 서비스 → 라이브러리 → "Google Calendar API" 활성화
3. 사용자 인증 정보 > OAuth 2.0 클라이언트 ID 생성
   • 애플리케이션 유형: 웹 애플리케이션
   • 승인된 리디렉션 URI 추가:

     http://localhost:8888/google/cal/callback
     

4. client_secret.json 다운로드
   • src/main/resources/ 폴더에 저장
   • .gitignore에 등록해야 함

---

3️⃣ HTML 구성 (FullCalendar + Bootstrap 모달)

✅ 캘린더 렌더링 + 클릭 시 모달 띄우기

<script>
document.addEventListener('DOMContentLoaded', function() {
  var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    initialView: 'dayGridMonth',
    googleCalendarApiKey: '발급받은 API 키',
    events: {
      googleCalendarId: '내 구글 캘린더 ID'
    },
    dateClick: function(info) {
      const form = document.dateForm;
      form.date.value = info.dateStr; // 클릭한 날짜 자동 입력
      document.querySelector('.date-event-modal').click();
    }
  });
  calendar.render();
});
</script>

✅ 입력 모달 폼 (name="dateForm" 필수)

<form name="dateForm" action="/google/cal/post">
  <input name="date">
  <input name="title">
  <textarea name="desc"></textarea>
  <button>일정 추가</button>
</form>

---

4️⃣ 백엔드: 일정 등록 컨트롤러

@GetMapping("/google/cal/post")
public RedirectView post(@RequestParam String title, @RequestParam String desc, @RequestParam String date) {
    // 날짜 파싱 및 Google Event 객체 생성
    // 9:00 ~ 10:00 일정 고정 + 알림 추가
    // GoogleCalendar.addEvent() 호출
    return new RedirectView("/google/cal");
}

---

5️⃣ GoogleCalendar 클래스 구현

✅ 일정 등록 + 인증 처리

public static Event addEvent(Event event) {
  Calendar service = new Calendar.Builder(...).build();
  return service.events().insert(CALENDAR_ID, event).execute();
}

private static Credential getCredentials(...) {
  InputStream in = GoogleCalendar.class.getResourceAsStream("/client_secret.json");
  GoogleAuthorizationCodeFlow flow = new GoogleAuthorizationCodeFlow.Builder(...)
      .setAccessType("offline").build();
  return new AuthorizationCodeInstalledApp(flow, receiver).authorize("user");
}

---

6️⃣ 최초 실행 시 인증 필요 (콘솔 안내)

Please open the following address in your browser:
https://accounts.google.com/o/oauth2/auth...

1. URL을 브라우저에 붙여넣고 Google 계정 로그인
2. 인증 후 localhost:8888/google/cal/callback으로 자동 리디렉션
3. credentials/StoredCredential에 인증 정보 저장됨

---

7️⃣ 테스트 흐름

1. 서버 실행
2. 브라우저에서 /google/cal 접속
3. 날짜 클릭 → 모달에서 제목/내용 작성 → 일정 추가
4. Google Calendar에서 일정 등록 확인

---

🔒 보안 주의

• client_secret.json 절대 외부 공개 금지!
• .gitignore에 반드시 추가:

src/main/resources/client_secret.json
credentials/

---

✅ 나중에 다시 할 때도 기억할 것!

해야 할 것	이유
OAuth 클라이언트 ID 등록	인증 URL 리디렉션 경로 필수 (/callback)
client_secret.json 위치	resources/에 두고 .gitignore 등록
최초 인증	콘솔에서 URL 열고 한 번 로그인해야 토큰 저장됨
FullCalendar와 백엔드 캘린더 ID 일치	프론트와 백엔드가 같은 캘린더 조작해야 함

---