회의실 예약 시스템 (Meeting Room Booking)

주간 캘린더로 일정을 확인하는 회사 내부 회의실 예약 시스템입니다. 계정 가입이 필요 없고, 예약 시 이름만 기재하면 캘린더에 바로 표시됩니다.

주요 기능

• 📅 주간 캘린더 — 요일별 시간표, 오늘 강조, 현재 시각 빨간선. 두 회의실의 겹치는 예약은 좌우로 표시
• 🖱️ 드래그로 시간대 선택 → 예약 생성 — 원하는 범위를 끌어서 지정하면 모달이 열리고, 모달이 떠 있는 동안 선택 영역이 유지 표시
• ✏️ 예약 수정 — 이벤트 클릭 → 팝오버에서 수정/삭제
• 🗂️ 예약 내역 (/history) — 전체/예정/지난 예약/삭제 필터, 제목·예약자·메모 검색, 날짜별 그룹
• 👤 계정 불필요 — 이름을 한 번 기재하면 브라우저에 저장되어 다음 예약 시 자동 입력
• 🎨 예약자별 고정 색상 — 저장소의 이름별 색상 매핑을 재사용하고, 사이드바에 이번 주 예약자 표시
• ⛔ 이중 예약 방지 — 같은 회의실·같은 시간이 겹치면 예약 거부 (서버 검증)
• 📱 모바일 캘린더 — 기본 3일 시간표와 1일 확대 보기, 회의실 필터, 날짜 이동, 날짜별 예약 건수

예약 방법

데스크톱에서는 빈 시간을 클릭하거나 드래그한 뒤 예약자 이름과 시간을 입력합니다. 왼쪽의 예약 만들기로도 시작할 수 있습니다. 미니 달력은 선택한 주를 강조하며, 회의실 이름 옆에 인원수는 표시하지 않습니다.

모바일에서는 빈 시간이나 **＋**를 누르고 회의실과 예약 길이를 선택합니다. 30분·1시간·2시간·3시간 버튼을 사용하거나 시작·종료 시간을 직접 바꿀 수 있습니다. 다음 예약 또는 운영 종료를 넘어가는 길이는 선택할 수 없습니다. 시간을 정한 다음 예약 정보를 입력해 저장합니다.

3일/1일, 전체/대회의실/소회의실로 표시 범위를 바꿉니다. 화살표는 표시 일수만큼 이동하고 날짜 선택기로 원하는 날짜에 바로 이동합니다. 날짜별 건수는 회의실 필터를 적용한 하루 전체의 예약 수입니다.

예약을 누르면 상세 내용을 확인하고 수정하거나 삭제할 수 있습니다. 이름은 예약 창에서 입력하며 같은 브라우저의 다음 예약에 자동 입력됩니다. 로그인이나 예약자별 수정 권한 구분은 없습니다.

기술 스택

• Next.js 16 (App Router) + React 19 + TypeScript
• Tailwind CSS v4
• 저장소: Upstash Redis 또는 로컬 JSON 파일

실행 방법

의존성을 설치한 뒤 개발 서버를 실행합니다. 운영 저장소와 분리해 시험하려면 로컬 QA 실행 방법을 먼저 확인하세요.

npm install
npm run dev       # http://localhost:3000

프로덕션:

npm run build
npm run start

운영 정책 (기본값)

• 예약 가능 시간: 07:00 ~ 22:00, 30분 단위 (lib/validate.ts)
• 회의실 목록: lib/rooms.ts 의 ROOMS 배열 편집 (이름·인원·위치·색상)
• 입력 제한: 제목 100자 · 예약자 30자 · 메모 300자 (서버에서도 검증)

데이터 저장소

lib/store.ts 가 환경에 따라 자동으로 백엔드를 선택합니다:

환경	백엔드	조건
Redis 설정 환경	Upstash Redis	URL: UPSTASH_REDIS_REST_URL 또는 KV_REST_API_URL, 토큰: UPSTASH_REDIS_REST_TOKEN 또는 KV_REST_API_TOKEN이 모두 설정된 경우
Redis 미설정 환경	JSON 파일 (data/)	URL 또는 토큰이 없을 때. 파일 경로는 DATA_DIR로 변경 가능

예약과 이름별 색상은 Redis의 reservations·colors 키 또는 파일의 reservations.json·colors.json에 저장됩니다. DATA_DIR는 Redis가 선택된 환경에서는 저장소를 전환하지 않습니다.

화면 변경은 기존 예약과 색상 저장 형식을 변경하지 않습니다. 지난 예약은 자동으로 삭제하지 않으며, 예약 삭제 시에는 deletedAt을 기록합니다. 삭제된 예약은 캘린더에서 숨기고 시간을 비우지만 예약 내역 → 삭제에서 확인할 수 있습니다. 배포 시 기존 Redis 연결 설정을 유지해야 같은 데이터를 계속 조회할 수 있습니다.

파일 백엔드 안전장치:

• 원자적 쓰기 — 임시 파일에 쓴 뒤 rename하므로 쓰기 도중 중단돼도 원본이 잘리지 않음
• 파손 백업 시도 — JSON 파싱 실패 시 *.corrupt-<timestamp>.json으로 복사 후 빈 상태로 시작. 백업 성공을 보장하지 않으므로 별도 보관본을 유지해야 함
• 쓰기 직렬화 — 프로세스 내 큐로 동시 요청 race 방지

쓰기 직렬화는 프로세스 단위이며 여러 서버 인스턴스 사이의 동시 쓰기를 보장하지 않습니다. 캘린더는 최초 진입과 해당 화면에서 저장·삭제한 뒤 데이터를 다시 조회하며, 다른 사용자의 변경을 실시간으로 자동 동기화하지 않습니다.

API

메서드	경로	설명
GET	/api/reservations	지난 예약·삭제 이력을 포함한 예약과 이름별 색상 조회
POST	/api/reservations	예약 생성 (검증 실패 400, 겹침 409)
PATCH	/api/reservations/:id	예약 수정 (없으면 404, 겹침 409)
DELETE	/api/reservations/:id	예약 삭제 (없으면 404)

개발 문서

• 디자인 기준: 데스크톱·모바일 화면 구성과 표시 규칙
• 검증 안내: 자동 검사, 격리된 로컬 QA, 배포 전 확인 항목