404 Architect
완성형 MVP · 케이스 스터디

예약·운영 플랫폼

현장 서비스 팀은 예약을 전화·문자·개인 캘린더·엑셀로 굴립니다. 고객은 빈 시간을 제대로 못 보고, 직원은 배정된 일을 한눈에 못 보고, 오너는 상태 취합에 하루를 씁니다. 이걸 하나의 조직 단위 시스템으로 대체한 완성형 MVP입니다 — 고객은 예약하고, 직원은 배정 업무를 진행하고, 오너는 일정·서비스·직원·리포트·감사 로그를 관리합니다. 한국어·영어 지원.

전체 소스·문서·아키텍처 보기 ↗

네 개의 역할 화면

오너 운영 대시보드
오너 운영 대시보드
오너 예약 캘린더
오너 예약 캘린더
고객 예약 (모바일)
고객 예약 (모바일)
직원 배정 업무 (모바일)
직원 배정 업무 (모바일)

실제로 어려웠던 부분

이걸 보여줄 이유 — CRUD가 아니라 이 엔지니어링입니다.

충돌 없는 예약

빈 시간을 보여주는 것만으로는 부족합니다. 그 사이 다른 요청이 먼저 들어올 수 있으니까요. 직원·서비스 배정, 반복 근무시간, 휴무, 기존 예약에서 슬롯을 계산하고, PostgreSQL GiST 부분 배제 제약이 최종 원자적 방어선입니다. 애플리케이션은 친절한 에러를 주고, DB가 경쟁 상태를 불가능하게 만듭니다 (충돌 시 409, 인접 예약은 유지).

데이터 노출 없는 권한 분리

모든 쿼리는 인증·소속 확인 후 조직 범위로 제한됩니다. 응답 스키마를 분리해 내부 메모가 고객 응답에 절대 들어가지 않고, 오너 전용 대시보드·내보내기·배정 기능은 라우트 숨김이 아니라 API에서 강제합니다.

두 번째 데이터 모델 없는 운영 뷰

대시보드는 지정 기간의 실제 예약 데이터를 집계하고, 캘린더는 같은 필터링된 예약 응답을 월간 그리드나 모바일 아젠다로 재사용합니다. 별도 스케줄링 모델이 없어서 목록·캘린더·리포트가 항상 일관됩니다.

재현 가능한 브라우저 테스트

E2E 플로우가 데이터를 만들고 바꾸기 때문에, 매 실행마다 임시 포트와 일회용 PostgreSQL 볼륨으로 별도 Compose 프로젝트를 띄워 시드하고, 실행하고, 종료 시 제거합니다.

스택
  • Next.js 16 App Router (ko/en 화면)
  • FastAPI — 인증·권한·예약 규칙·트랜잭션
  • PostgreSQL 17 — 무결성 + 원자적 중복 방어
  • Docker Compose 모노레포, 공유 디자인 토큰
품질 게이트
  • 백엔드 통합 테스트 22개 (근접 동시 예약 포함)
  • Playwright 역할별 플로우 12개
  • axe WCAG 2.1 AA, 키보드, 리플로우, 강제 색상, 모션 축소
  • Argon2id, 회전형 HttpOnly 세션, CSRF + 오리진 화이트리스트
  • CSV 수식 인젝션 방어, 추가 전용 감사 로그
이 데모는 이렇게 만들었습니다
Next.js 16FastAPIPostgreSQL 17Docker Compose

팀이 만든 프로젝트, MIT 라이선스. 직접 눌러보는 호스팅 데모는 준비 중이고, 지금은 전체 소스·문서·아키텍처 결정이 GitHub에 있습니다. 메뉴를 보세요 →

예약·운영 시스템이 필요하시면

이 정도 규모의 웹 MVP를 만듭니다. 학원, 미용실, 병원, 스튜디오, 예약이 필요한 모든 업종. 프리랜서로는 신규라 시세보다 낮게 가고, 포트폴리오 사례로 쓸 거라 그만큼 더 공들입니다.

견적 요청하기
← 메뉴로 돌아가기