스터디 협업 캘린더 (Co-Cal)

학습 기록 공유와 그룹 관리, 시간표 히트맵을 통한 공통 가능 시간 탐색을 하나로 연결한 스터디 일정 관리 웹 서비스

프로젝트 개요

Co-Cal은 스터디에 필요한 개인 학습 기록, 그룹 캘린더 공유, 멤버 관리, 모임 시간 조율을 하나의 화면에 모은 협업 캘린더입니다. 모임을 정할 때마다 메신저에서 가능한 시간을 반복해서 묻고 답하는 불편을 줄이고, 구성원의 학습 과정을 함께 확인하며 동기를 얻을 수 있도록 기획했습니다.

2025년 11월부터 12월까지 3명이 팀으로 개발했습니다. 사용자는 자신의 학습 기록을 직접 관리할 수 있으며, 다른 구성원의 기록은 읽기 전용으로 공유해 개인 기록의 편집 권한과 그룹 내 가시성을 구분했습니다.

스터디 그룹, 가능 시간 조율, 공유 캘린더, 일별 학습 기록을 한 화면에 구성한 대시보드.

주요 기능

  • 캘린더 기반 학습 기록: 선택한 날짜에 여러 학습 기록을 생성·조회·수정·삭제할 수 있습니다. 캘린더의 색상 마커로 내 기록과 다른 그룹원의 기록을 구분합니다.
  • 그룹 캘린더 공유: 내 학습 기록과 선택한 그룹 전체의 기록을 전환해 볼 수 있으며, 다른 구성원의 기록은 읽기 전용으로 제공합니다.
  • 스터디 그룹 운영: 그룹 생성·검색과 가입 신청, 이메일을 통한 기존 사용자 초대를 지원합니다. 방장은 가입 신청을 승인·거절하고 멤버를 관리할 수 있습니다.
  • 가능 시간 히트맵: 각 구성원이 주간 시간표에 한 시간 단위의 가능 시간을 드래그해 표시합니다. 서버가 요일·시간별 선택 인원을 집계하고, 많이 겹칠수록 진한 색으로 표현해 모임 시간을 빠르게 찾을 수 있습니다.
  • 공휴일 연동: Calendarific API에서 대한민국 공휴일을 불러와 이름을 현지화하고 월간 캘린더에 표시합니다.
  • 계정 및 데이터 관리: 회원가입·로그인·비밀번호 변경·계정 삭제뿐 아니라 그룹 탈퇴와 방장 전용 그룹 삭제를 지원하며, 관계형 스키마를 통해 연관 기록을 함께 정리합니다.

시스템 구조

Co-Cal은 Vanilla JavaScript와 Tailwind CSS로 만든 반응형 브라우저 클라이언트, Node.js/Express REST API, Railway에 호스팅한 MySQL 데이터베이스로 구성된 3계층 웹 서비스입니다. 클라이언트는 Fetch API를 이용해 계정, 학습 기록, 그룹, 시간표, 공휴일 기능별 라우터와 통신합니다.

관계형 데이터 모델에서는 사용자와 스터디 그룹의 다대다 관계를 멤버십 테이블로 연결하고, 가입 신청·그룹별 학습 기록·구성원별 가능 시간 블록을 별도 테이블로 관리합니다. CRUD에는 파라미터화된 SQL 쿼리를 사용하며, 외래 키와 연쇄 삭제로 그룹에 종속된 데이터의 일관성을 유지합니다. 시간표 API는 개인의 선택 블록을 조회하거나 그룹 전체 데이터를 COUNT(*)로 집계하고, 클라이언트가 이를 히트맵의 색상 강도로 변환합니다.

담당 역할

프론트엔드와 REST API, 데이터베이스를 연결하는 학습 기록 및 스터디 그룹 협업 흐름을 담당했습니다.

  • 캘린더 기반 학습 기록 CRUD와 그룹원별·그룹 전체 기록 조회를 구현했습니다.
  • 그룹 검색과 가입 신청, 승인·거절 프로세스를 개발했습니다.
  • 멤버 목록·이메일 초대와 방장의 멤버 추방·그룹 삭제 권한을 구현했습니다.
  • 그룹 탈퇴 및 해당 멤버의 학습 기록·시간표 데이터 정리 로직을 추가했습니다.
  • 초기 MySQL 스키마를 설계하고 데이터베이스 테이블 자동 초기화를 구성했습니다.
  • 각 기능을 단일 페이지 UI에 연결하고 안내 메시지와 상태 전환을 개선했습니다.

기술 스택

HTML5 · CSS3 · JavaScript · Tailwind CSS · Node.js · Express · MySQL · Railway · Calendarific API

소스 코드