서비스 예약 관리

서비스 선택부터 날짜·시간 지정, 예약 정보 입력과 확인, 예약 내역 조회까지 구성한 웹 예약 제품입니다. React 화면과 Express API, JSON 파일 저장을 함께 다뤘습니다.

사례: 서비스 및 시간대 선택형 웹 예약 시스템
수행 유형: 제품·시연 사례
작업 범위: 서비스 선택 · 달력·시간대 · 예약 정보 · 확인·내역 · API·저장
자료: 제공된 제품 화면 · 예시 데이터

서비스 예약 관리 사례 자료 1. 제공된 제품 화면 · 예시 데이터 — 01 / 03

서비스 예약 관리 사례 자료 2. 제공된 제품 화면 · 예시 데이터 — 02 / 03

서비스 예약 관리 사례 자료 3. 제공된 제품 화면 · 예시 데이터 — 03 / 03

서비스 선택부터 일정 지정까지

서비스의 종류·소요 시간·가격을 카드에 정리하고, 달력과 시간 슬롯으로 예약 일정을 선택하도록 구성했습니다. 선택한 서비스와 일정은 요약 영역에서 확인할 수 있어 다음 단계로 넘어가기 전에 내용을 살펴볼 수 있습니다.

입력과 확인, 예약 이후의 조회

예약자 정보와 메모를 입력한 뒤 서비스·날짜·시간을 검토하는 확인 단계를 구성했습니다. 예약 내역에서는 각 예약의 일정과 확정·취소 상태를 구분해 보여줍니다. 선택 화면뿐 아니라 예약을 마친 뒤 다시 찾아보는 흐름까지 함께 다뤘습니다.

예약 화면과 서버를 함께 구성

React와 TypeScript로 단계별 선택 상태를 구성하고, Express API에서 서비스 조회·시간대 조회·예약 생성과 내역 조회를 다루도록 만들었습니다. 예약 데이터는 UUID로 식별하고 JSON 파일에 저장하는 구조입니다. 반응형 화면, 알림과 전환 애니메이션도 제품 범위에 포함합니다.

PROJECT INFO