(WEB_PORTAL) 통합 캘린더 구축과 외부 메신저 캘린더 연동

개요

공지, 개인 일정, 승인된 휴가를 한 화면에서 볼 수 있는 통합 캘린더를 만들고, 직원들이 이미 개인적으로 쓰고 있는 국내 메신저 서비스의 캘린더 기능과 연동해서 따로 일정을 두 번 등록하지 않아도 되도록 구성했습니다.

핵심 구현 포인트

1. 통합 캘린더 화면

일정 데이터를 담는 테이블을 새로 만들고, 월 단위로 이동할 수 있는 캘린더 화면을 구현했습니다. 날짜를 클릭하면 해당 일의 상세 일정과 등록 모달이 뜨고, 일정 타입에 따라 색상 배지를 다르게 표시해서(휴가/공지/개인 일정) 한눈에 구분할 수 있도록 했습니다. 관리자는 전사 공지성 일정을 등록할 수 있게 했습니다.

2. 외부 캘린더 연동

OAuth2 인가 코드 방식으로 외부 메신저 서비스 계정과 연동하는 흐름을 구현했습니다. 발급받은 토큰은 서버 DB에 저장해두고, 토큰이 만료되면 자동으로 갱신하도록 처리했습니다.

사용자 인가 완료 → 토큰 발급 → DB 저장
이후 API 호출 시:
    저장된 토큰으로 요청
    401(만료) 응답이면 refresh_token으로 자동 재발급 → 재요청

휴가 신청이 승인되면 해당 직원의 외부 캘린더에도 자동으로 일정이 생성되도록 연결해서, 별도로 개인 일정에 옮겨 적을 필요가 없게 만들었습니다. 종일 일정 처리 시 외부 API가 요구하는 날짜 형식(종료일을 다음 날 자정으로 표기하는 방식)에 맞추는 부분에서 약간의 변환 로직이 필요했습니다.

3. 모바일 반응형

일반 직원 화면은 햄버거 메뉴 + 슬라이드 드로어로, 관리자 화면은 오버레이 방식의 드로어로 각각 다르게 구성해서, 화면 성격에 맞는 모바일 내비게이션을 제공했습니다.

회고

• 외부 서비스와 연동할 때는 API의 날짜/시간 표기 규칙이 우리 쪽 규칙과 미묘하게 다를 수 있다는 걸 다시 확인했습니다 (예: 종료 시점을 "포함"으로 볼지 "배타"로 볼지). 이런 부분은 문서를 꼼꼼히 읽는 것보다 실제로 테스트 호출을 몇 번 해보고 나서야 정확히 이해가 됐습니다.
• 이미 사용자들이 익숙하게 쓰고 있는 외부 서비스와 연동하면, 새로운 도구를 배우게 하는 대신 기존 습관 위에 기능을 얹을 수 있어서 도입 저항이 낮다는 장점을 체감했습니다.