배송 유형에 따라 달라지는
예약 입력 화면
세 가지 배송 유형별로 출발지와 도착지 입력 방식을 구분했습니다. 대중교통 거점은 목록에서 선택하고 숙소는 주소 검색과 상세주소로 입력합니다. 캐리어 크기별 수량, 백팩·골프백 등 짐 정보와 요청사항을 같은 예약 화면에서 작성하도록 구현했습니다.
이든 GOBAG 짐 배송·보관 예약 홈페이지 구축
짐을 맡기는 예약부터 결제·조회, 픽업과 배송 상태 관리까지 연결한 서비스
- 클라이언트명
- 이든 · GOBAG
- 기술
- React · Redux · styled-components · PHP · CodeIgniter · Kakao Maps API · FullCalendar
- 프로젝트 유형
- 짐 배송·보관 서비스 홈페이지 · 온라인 예약 시스템
- 담당 범위
- 프런트엔드·백엔드 개발 · 예약·결제 및 주소 검색 연동 · 운영 관리자 개발
- 주요 기능
-
- 배송 유형별 예약 · 짐 종류·수량 선택 · 날짜·시간 및 출발·도착지 입력
- 주소 검색·지도 표시 · 수량·거리별 요금 계산 · 결제 연동 · 회원·비회원 예약조회
- 관리자 예약 목록·캘린더 · 픽업·배송 상태 변경 · 예약 가능 기간·제외일 설정
- 프로젝트 개요
-
- 이든 GOBAG은 여행객이 짐 배송·보관 서비스를 안내받고 온라인으로 예약할 수 있는 홈페이지입니다.
- 대중교통과 숙소 사이의 이동 유형에 맞춰 맡길 짐과 장소, 일시를 입력하고 요금 확인부터 결제까지 진행하도록 구성했습니다.
- React로 구현한 고객·관리자 화면과 PHP·CodeIgniter 백엔드를 연결해 예약 정보와 결제 내역, 픽업·배송 상태를 관리합니다.
- 개발 목표
-
- 여행객이 자신의 이동 일정에 맞춰 배송 조건을 선택하고 예약·결제를 마치도록 합니다.
- 운영자가 날짜와 진행 상태별로 예약을 확인하고, 접수부터 배송 완료까지 관리하도록 합니다.
WEB DESIGN
여행 일정에 맞춘 짐 배송,
예약부터 간편하게
짐을 어디에서 맡기고 어디에서 받을지에 따라 필요한 정보가 달라집니다. 이동 유형을 먼저 선택하고 짐의 종류와 수량, 날짜와 장소를 차례로 입력하도록 구성해 요금 확인과 결제로 이어지게 했습니다.
-
이동 유형에 맞춘 예약
대중교통에서 숙소로, 숙소에서 숙소로, 숙소에서 대중교통으로 이동하는 유형에 따라 장소 입력 항목을 바꿉니다.
-
선택 조건에 따른 요금 확인
짐 종류와 수량을 선택하면 금액을 갱신하고, 출발·도착지 간 거리에 따른 추가 요금을 반영해 결제 전에 확인하도록 했습니다.
-
예약 이후까지 이어지는 관리
고객은 예약 정보와 결제 내역을 조회하고, 운영자는 예약 목록과 캘린더에서 일정을 확인하며 픽업·배송 상태를 관리합니다.
고객의 예약과
현장의 배송 업무를 연결하다
예약 화면에서 입력한 짐·일정·장소 정보가 결제와 예약조회, 관리자 업무에 이어지도록 개발했습니다. 서비스 이용 조건을 입력하는 고객 화면과 일정을 관리하는 운영 화면을 함께 구성했습니다.
배송 유형에 따라 달라지는
주소 검색·지도와
조건별 요금 계산
우편번호 주소 검색과 Kakao Maps API를 연동해 선택한 주소를 좌표로 변환하고 지도에 출발·도착 지점을 표시했습니다. 짐 종류·수량별 기본요금에 두 지점의 좌표 간 거리로 계산한 추가 요금을 반영해, 예약 조건을 바꿀 때 결제금액도 갱신하도록 했습니다.
예약 가능 일시와
운영 일정 설정
날짜 선택과 시간·분 조절 기능을 제공하고, 예약 가능 기간과 제외일을 달력에 반영했습니다. 운영자는 관리자에서 예약 종료일과 예약을 받지 않는 날짜를 등록·삭제해 고객이 선택할 수 있는 일정을 조정합니다.
온라인 결제와
예약 완료 내역 연결
아임포트 결제 연동으로 카드와 계좌이체를 선택하도록 구성했습니다. 백엔드에서 결제 결과를 조회해 결제 완료 여부와 주문 중복을 확인한 뒤 예약 정보를 저장합니다. 완료 화면에는 예약번호, 짐 정보, 일시와 장소, 결제금액을 함께 표시합니다.
회원·비회원 예약조회와
회원 취소 신청
회원은 마이페이지에서 자신의 예약 목록과 상세 내역을 확인하고, 비회원은 이름·예약번호·연락처를 입력해 예약을 조회하도록 구현했습니다. 회원 예약에는 취소 신청 기능을 연결하고, 접수된 요청은 배송 상태에 반영해 운영자가 확인하도록 했습니다.
예약 목록·캘린더와
픽업·배송 상태 관리
관리자에서 기간과 배송 상태로 예약을 조회하고, 목록 또는 캘린더에서 예약 상세로 이동하도록 구성했습니다. 상세 화면에서 예약자와 짐·장소·결제 정보를 확인하며 예약확정, 픽업대기·완료, 배송중·완료 등의 상태를 변경할 수 있습니다.
온라인 예약 홈페이지,
결제와 운영 관리까지 연결하세요.
서비스별 예약 조건과 요금, 일정 관리가 필요하신가요?
고객의 이용 방식과 운영 업무에 맞는 예약 홈페이지를 제작합니다.
지금 웹셀러에 상담하세요.
카카오 1:1 문의