TeamPu

팀프로젝트실 예약 관리 서비스

2024년 11월부터 약 한 달 간 진행된 예약 관리 웹 서비스는 팀 단위 예약 현황을 관리하고 날짜별 예약 정보를 시각적으로 확인할 수 있도록 구성된 프로젝트였다. React Calendar를 직접 커스터마이징하여 날짜 클릭 시 해당 날짜의 예약 팀 목록을 표시하도록 구현했으며, 프론트엔드 전반의 개발과 기본적인 디자인 작업까지 담당했다. React와 Tailwind CSS를 처음으로 실무에 적용하며 프레임워크 구조를 익히고, UI 구성과 로직 설계 전반을 경험한 첫 프로젝트였다.

개발 과정

React와 JavaScript를 중심으로 예약 신청 폼과 달력 UI를 직접 구성했고, 입력 데이터 관리에는 useReducer를 활용했다. 폼의 상태 관리 로직을 컴포넌트 내부에만 두지 않고 커스텀 훅 형태로 분리하여 재사용성과 유지보수 편의성을 고려한 구조적 접근을 시도했다. Tailwind CSS를 도입하면서 빠르게 시각적인 형태를 구현할 수 있었고, 클래스 관리보다는 빠른 프로토타이핑과 반응형 레이아웃 구성에 집중했다. 짧은 개발 기간에도 실제 동작 가능한 예약 관리 기능을 완성해 나갔다.

기술적 접근과 구현 포인트

가장 중점적으로 다룬 부분은 React Calendar의 커스터마이징이었다. 기본 캘린더 컴포넌트를 단순히 날짜 표시에 그치지 않고, 각 날짜에 예약 정보를 시각적으로 연결하여 팀별 예약 현황을 한눈에 확인할 수 있도록 구성했다. 또한 날짜 클릭 시 해당 날짜에 예약된 팀 목록이 상세히 표시되며, 이를 통해 단일 컴포넌트 구조 내에서 정보의 흐름을 명확히 제어하는 방식을 학습할 수 있었다.

예약 신청 로직은 useReducer를 이용한 상태 관리와 Axios 기반 API 통신으로 구성했다. 요청과 응답을 분리하고 주요 로직을 커스텀 훅으로 분리해 재사용이 가능한 형태로 정리했다. 이 과정에서 비즈니스 로직과 UI 로직 간의 경계를 명확히 나누는 것이 유지보수성 향상에 중요하다는 점을 체감했다.

스타일링은 Tailwind CSS를 중심으로 진행했다. 빠른 시각적 구현이 가능했으며, Grid와 Flex를 활용해 반응형 디자인을 구현했다. CSS 네이밍 규칙보다 기능 실현에 집중하면서 프로토타입 완성 속도를 대폭 향상시켰다.

문제 인식과 개선 방향

당시 구현 방식에는 몇 가지 한계가 드러났다. Axios 요청을 then-catch-finally 체인으로만 처리한 결과, 오류 처리 구조가 복잡해졌고, 로딩 상태 관리가 누락되어 일관성이 낮았다. 토큰 삽입과 인증 로직이 개별 요청 내부에 포함되어 유지보수가 어렵고, 커스텀 훅 분리 시 함수 네이밍과 역할 정의가 명확하지 않아 가독성 역시 저하되었다.

이후 개선 아이디어로 Axios Wrapper 패턴과 통합 에러 핸들링 구조를 설계하는 방향을 구상했다. 또한 react-query를 통한 데이터 캐싱 및 상태 기반 요청 관리 도입을 고려하며, 명확한 훅 네이밍 규칙과 역할 구분을 통해 코드 구조를 개선할 필요성을 인식했다.

회고

이 프로젝트는 React를 활용한 첫 실무형 개발 경험이었다. 직접적인 개발 참여를 통해 단순히 작동하는 기능을 만드는 것에서 벗어나, 유지보수성과 구조적인 안정성을 고려한 코드 설계의 중요성을 깨닫게 되었다. 이후 진행된 프로젝트에서 Axios Wrapper, 로딩 처리, 상태 관리 구조 등에 대해 본격적으로 연구하고 개선하게 된 계기가 되었다.