회사DH Wide
15분 전화상담 예약 프로그램
심리검사 일련번호를 기반으로 고객이 쉽게 전화 상담을 예약하고, 예약한 정보를 직접 웹을 통해 확인할 수 있도록 도와주는 웹 애플리케이션입니다.
기간
2022.01 ~ 2023.03
역할
프론트엔드 개발
팀 규모
3
기술 스택
Next.jsReduxRedux-Saganext-redux-wrapperMUIImmer
프로젝트 상세 소개
학교표준화검사를 실시한 자녀의 결과를 바탕으로 학부모님께 15분 심리검사 분석서비스(무료)를 제공하는 예약 관리 시스템입니다. Next.js + Redux-Saga 기반으로 구현되었습니다.
주요 기능
- 반응형 FE 구현
- 예약 로직 FE 구현
- 예약 관리(예약 확인/삭제/수정) 로직 FE 구현
- 관리자 대시보드 (다중 필터, 페이지네이션)
- 반응형 DatePicker (데스크톱/모바일)
담당 업무
전체
- •전체 프론트엔드 설계 및 구현 (100%)
- •서비스 기획 및 사용자 플로우 설계 (100%)
- •UI/UX 디자인 (100%)
- •Next.js + Redux-Saga 아키텍처 설계
예약 시스템
- •접속번호 입력 및 검증 플로우 구현
- •반응형 DatePicker (데스크톱: 달력 전체 / 모바일: 팝업)
- •시간대 선택 UI (오전/오후 구분, 20분 단위)
- •예약 불가 시간 실시간 비활성화 처리
- •주말/공휴일/30일 이후 날짜 비활성화 로직
- •검사명 선택 모달 컴포넌트
- •예약 완료 확인 페이지
예약 조회/관리
- •휴대폰 번호 기반 내 예약 조회
- •비밀번호 확인 후 예약 취소 기능
- •Dialog 기반 삭제 확인 UI
관리자 대시보드
- •MUI Table 기반 전체 예약 목록 테이블
- •컬럼별 정렬 기능 (stableSort, getComparator)
- •다중 필터 조합 (상태 + 예약자명/피검자명/검사명/날짜)
- •상담 완료/미완료 상태 토글 버튼
- •Collapse 기반 상세 정보 펼치기
- •상담 기록 작성/수정 TextField
- •커스텀 페이지네이션 (pageSize 선택, 이전/다음)
- •PDF 파일 체크박스 선택 및 다운로드
- •localStorage 기반 관리자 세션 관리
상태 관리 아키텍처
- •7개 Redux-Saga 모듈 설계 (예약, 날짜, 조회, 삭제, 관리자 등)
- •Immer 기반 불변성 관리
- •환경별 빌드 설정 (env-cmd로 dev/prod 분리)
- •커스텀 로거 미들웨어 (개발 환경 전용)
재사용 컴포넌트 설계
- •12개 공용 컴포넌트 개발
- •DatePickerCustom, TimePickerCustom
- •PaginationCustom, EnhancedTableHead
- •DialogAlert, ModalAlert, Loading 등
- •classnames 라이브러리로 조건부 스타일링
프로젝트 구조
src/