목차
1. 프로젝트 개요
| 항목 |
내용 |
| 프로젝트명 |
한국가이던스 15분 심리검사 분석서비스 |
| 유형 |
B2C 예약 관리 시스템 |
| 역할 |
프론트엔드 개발 |
| 기간 |
2022.01 ~ 2023.03 |
| 팀 구성 |
백엔드 2명, 프론트 1명 |
| 클라이언트 |
(주) 디에이치와이드 |
프로젝트 소개
학교표준화검사를 실시한 자녀의 결과를 바탕으로 학부모님께 15분 심리검사 분석서비스(무료)를 제공하는 예약 관리 시스템입니다. 학부모가 날짜/시간을 선택하여 예약하고, 관리자가 예약 현황을 관리하며 상담 완료 여부를 추적할 수 있습니다.
2. 기술 스택
Frontend Core
| 기술 |
버전 |
선택 이유 |
| Next.js |
12.0.7 |
파일 기반 라우팅, SEO 최적화 |
| React |
17.0.2 |
컴포넌트 기반 UI 개발 |
| JavaScript (ES6+) |
- |
빠른 개발 속도 |
상태 관리
| 기술 |
용도 |
| Redux |
전역 상태 관리 (예약 정보, 관리자 데이터) |
| Redux-Saga |
비동기 API 호출 및 사이드 이펙트 관리 |
| next-redux-wrapper |
Next.js와 Redux 통합 |
| Immer |
불변성 유지하며 상태 업데이트 |
UI/스타일링
| 기술 |
용도 |
| MUI (Material-UI) 5 |
UI 컴포넌트 라이브러리 |
| MUI Lab |
DatePicker, TimePicker 등 실험적 컴포넌트 |
| CSS Modules |
컴포넌트별 스타일 격리 |
| classnames |
조건부 클래스 적용 |
기타 주요 라이브러리
| 기술 |
용도 |
| Axios |
HTTP 클라이언트 |
| react-datepicker |
날짜 선택 컴포넌트 |
| env-cmd |
환경별 환경변수 관리 |
| prop-types |
컴포넌트 Props 타입 검증 |
3. 폴더 구조
fifteen-front/
├── pages/ # Next.js 페이지 (파일 기반 라우팅)
│ ├── _app.js # 앱 진입점 (Redux Provider)
│ ├── _document.js # HTML 문서 커스터마이징
│ ├── _error.js # 에러 페이지
│ ├── 404.js # 404 페이지
│ ├── index.js # 메인 페이지
│ ├── reserve/ # 예약 관련 페이지
│ │ ├── start.js # 예약 시작 (접속번호 입력)
│ │ └── date.js # 날짜/시간 선택
│ ├── reserveInfo/ # 예약 조회
│ │ └── index.js # 내 예약 확인/취소
│ ├── findCode/ # 접속번호 조회
│ │ └── index.js
│ └── admin/ # 관리자 페이지
│ ├── login.js # 관리자 로그인
│ └── index.js # 예약 관리 대시보드
│
├── components/ # 재사용 컴포넌트 (12개)
│ ├── AppLayout.js # 공통 레이아웃 (네비게이션)
│ ├── DatePickerCustom.js # 날짜 선택 (데스크톱/모바일 반응형)
│ ├── TimePickerCustom.js # 시간 선택 (예약 가능 시간 표시)
│ ├── PaginationCustom.js # 커스텀 페이지네이션
│ ├── ReserveInfoList.js # 예약 목록 (삭제 기능)
│ ├── ReserveInfoCheck.js # 예약 정보 확인
│ ├── TestNameModal.js # 검사명 선택 모달
│ ├── DialogAlert.js # 알림 다이얼로그
│ ├── ModalAlert.js # 모달 알림
│ ├── Loading.js # 로딩 스피너
│ ├── EnhancedTableHead.js # 테이블 헤더 (정렬 기능)
│ └── EnhancedTableToolbar.js # 테이블 툴바 (일괄 작업)
│
├── reducers/ # Redux 리듀서 (7개)
│ ├── index.js # rootReducer (combineReducers)
│ ├── reserve.js # 예약 정보 상태
│ ├── dateTime.js # 날짜/시간 선택 상태
│ ├── findCode.js # 접속번호 조회 상태
│ ├── findReserve.js # 예약 조회/삭제 상태
│ ├── admin.js # 관리자 상태
│ ├── modalAlert.js # 모달 알림 상태
│ └── menu.js # 메뉴 선택 상태
│
├── sagas/ # Redux-Saga (7개)
│ ├── index.js # rootSaga (all, fork)
│ ├── reserve.js # 예약 관련 사가
│ ├── dateTime.js # 날짜/시간 사가
│ ├── findCode.js # 접속번호 조회 사가
│ ├── findReserve.js # 예약 조회/삭제 사가
│ ├── admin.js # 관리자 사가
│ └── menu.js # 메뉴 사가
│
├── constants/ # 액션 타입 상수
│ └── reserve.js # 예약 관련 상수
│
├── store/ # Redux 스토어 설정
│ └── configureStore.js # 스토어 + 미들웨어 + 사가 설정
│
├── module/ # 유틸리티 모듈
│ └── admin.js # 관리자 페이지 유틸 (정렬, 셀 정의)
│
└── style/ # CSS Modules
├── Home.module.css
├── AppLayout.module.css
├── Date.module.css
├── Admin.module.css
├── Pagination.module.css
└── ReserveInfo.module.css