업무 · 리만코리아 · 엔더스
비즈니스 센터 예약 관리 시스템
고객·관리자용 프론트엔드의 개발 환경과 공통 API 통신을 구성하고, 운영 조건을 반영한 예약 캘린더를 개발했습니다.
- 해결하고자 한 과제
- 운영 일정에 맞춰 고객이 예약 가능한 날짜와 시간을 확인할 수 있는 화면을 만드는 과제였습니다. 예약 가능 시점과 지난 날짜, 공휴일·회사 지정 휴일을 함께 반영해야 했고, 요구에 맞는 캘린더 라이브러리를 찾기 어려웠습니다. 저는 고객·관리자용 프론트엔드 기반을 구성하고, 이 조건을 직접 제어하는 예약 캘린더를 개발했습니다.
- 해결 방식
- Vite 기반의 고객·관리자용 프로젝트와 Axios 공통 통신 유틸리티를 구성했습니다. 캘린더는 날짜 활성화와 예약 시간 목록, 휴일 처리를 고객사 조건에 맞게 직접 구현했습니다.
주요 기여
운영 조건을 반영한 커스텀 예약 캘린더
설정된 시점의 날짜 활성화, 지난 날짜 비활성화, 예약 시간 목록과 공휴일·회사 지정 휴일 처리를 구현했습니다.
고객·관리자용 개발 환경과 공통 API 통신 구성
Vite로 프로젝트 기반을 구성하고, Axios 요청·응답 인터셉터로 오류 처리와 토큰 유효성 체크를 수행했습니다.
핵심 기여
- 달력보다 운영 규칙을 먼저 고려: 고객사의 조건에 맞는 라이브러리를 찾기 어려워 캘린더 동작을 직접 구현했습니다. 설정된 시점과 휴일 규칙에 따라 선택 가능한 날짜를 제어하고, 날짜를 선택하면 설정된 예약 시간 목록이 활성화되도록 연결했습니다.
- 화면별 API 호출의 공통 처리: 각 화면에서 손쉽게 API를 호출할 수 있도록 Axios 공통 통신 유틸리티를 정의했습니다. 요청·응답 인터셉터에 오류 처리와 토큰 유효성 체크를 두어 통신 과정에서 필요한 처리를 함께 관리했습니다.
- 개발 환경의 초기 구성: 개발 서버를 빠르게 띄우고 변경을 확인할 수 있도록 Vite로 고객·관리자용 프로젝트를 구성했습니다. Vue 3·TypeScript·Pinia 기반에서 화면 구현을 시작할 수 있도록 개발 환경을 세팅했습니다.