팀 캘린더 배송 Route 최적화
| 항목 | 내용 |
|---|---|
| 만든 사람 | june3350 |
| 사용 도구 | Claude Code + Next.js + Supabase |
| GitHub | june3350-netizen/4.1-calendar |
| Live Demo | 4-1-calendar.vercel.app/calendar |
프로젝트 소개
소규모 제조업 회사의 팀원 일정을 한눈에 관리하는 팀 캘린더입니다. 배송, 회의, 연차, 외출, 조기퇴근까지 5가지 일정 유형을 색상으로 구분하고, 이번 주 현황과 주간 날씨까지 한 화면에서 확인할 수 있습니다. 주요 기능은 배송 계획 수립, 네비게이션 자동연동으로 배송 Route 최적화
주요 기능
- 월간 캘린더 — 팀원별 필터링, 일정 추가/수정/삭제
- Google Sheets 연동 — 배송 일정을 시트에서 자동으로 가져와 캘린더에 반영
- 이번 주 현황 — 주간 일정 요약 + 배송·회의·연차 건수 한눈에 확인
- Team Board — 팀 공지사항과 알림을 실시간으로 표시
- 주간 날씨 — Open-Meteo API로 이번 주 날씨 자동 표시
- 팀 출근 상태 — 팀원별 현재 상태(사무실/외근/연차 등) 관리
어떻게 만들었나요?
코딩 경험 없이 Claude Code와 대화하면서 처음부터 끝까지 만든 과정입니다.
- PRD 작성 — "우리 회사에 맞는 팀 캘린더가 필요해"라는 문제에서 출발. 필요한 기능을 문서로 정리
- 캘린더 뼈대 만들기 — 월간 그리드 레이아웃과 날짜 이동 기능을 먼저 구현
- 일정 CRUD 붙이기 — Supabase 데이터베이스를 연결해서 일정 추가/수정/삭제 기능 완성
- Google Sheets 연동 — 기존에 시트로 관리하던 배송 일정을 자동으로 캘린더에 가져오는 기능 추가
- 부가 기능 확장 — 날씨 API, 팀 상태 관리, Team Board 등을 하나씩 추가
- 배포 — Vercel에 올려서 팀원 누구나 접속할 수 있게 공개
기술 스택
| 영역 | 기 술 |
|---|---|
| 프레임워크 | Next.js (App Router) |
| UI | React + Tailwind CSS |
| 데이터베이스 | Supabase (PostgreSQL) |
| 외부 연동 | Google Sheets, Open-Meteo 날씨 API, 카카오 지도 API |
| 배포 | Vercel |
배운 점
- 실제 회사에서 쓰는 도구를 직접 만들 수 있다는 걸 체감했다
- 처음부터 완벽하게 만들려 하지 않고, 캘린더 → 일정 → 배송 연동 순서로 하나씩 붙여나가는 게 핵심이었다
- Google Sheets 같은 기존 도구와 연동하면 팀원들이 거부감 없이 바로 쓸 수 있다
이 글이 도움이 되었나요?