ID : dev@email.com
PW : 12345678
개인 운동 정보를 기록하고 관리할 수 있는 플랫폼을 제작했습니다.
캘린더를 통해 PT 수업 받은 내용을 기록할 수 있습니다. 개인 트레이닝 수업을 신청하고, 신청한 내역과 개인 정보 및 신체 정보를 확인할 수 있습니다.
- 개발 기간 : 2024.05.27 ~ 2024.06.08
- GitHub 레포지토리
- 피그마 URL
 |
 |
 |
 |
|---|---|---|---|
| 박민주 | 유현욱 | 이동희 | 정보현 |
| 전체 디자인 PT신청, 신청 내역 페이지 공통 컴포넌트(Button, Input) 반응형 |
초기 개발 세팅 로그인 회원가입 기능구현 마이페이지 프로필 구현 |
캘린더 이벤트 렌더링 이벤트 별로 색상 묶음 구현 이벤트 정량 초과 표현 및 미니 모달창 구현 |
캘린더 페이지 일정 추가,삭제,수정 기능구현 |
| Stack | |
|---|---|
| 개발 환경 |   |
| 유틸리티 |    |
| 디자인 |  |
| 개발 언어 |  |
| 라이브러리 |    |
| 서버 |  |
| 배포 |  |
| 협업툴 |   |
- firebase를 이용해서 로그인, 회원가입 기능 구현
- 유효성 검사 기능 구현
- Firebase의 realtime, storage를 이용하여 이미지 업로드 및 이메일, 닉네임, 생년월일, 전화번호 기능 구현함
- 유저 닉네임 data를 zustand를 활용하여 신청 내역에 보이도록 구현 및 로컬스토리지에 저장함
- Firebase 의 realtime database 를 이용하여 일정 추가, 삭제, 수정 기능 구현함
- Firebase 의 인증 객체를 활용하여 로그인 시 자신의 데이터만 볼 수 있게 구현함
- 일정의 시작 날짜가 종료 날짜보다 늦을 경우, 일정 추가와 수정 불가능하게 구현함
- 운동추가 버튼으로 Firebase에 추가한 데이터를 불러와 시작일부터 종료일까지 해당하는 날짜에 이벤트들을 렌더링
- 이벤트 시작일과 종료일까지 이벤트를 id로 묶어 동일한 이벤트임을 선언하며 색상을 묶음으로 같은 이벤트임을 직관적으로 확인하기 쉽게 가시성을 높임
- 캘린더 날짜에 표시할 수 있는 이벤트 개수를 초과했을 시 +n more 버튼으로 숨겨진 이벤트가 몇 개 더 있는지 표시
- more 버튼을 누르면 미니 모달창으로 해당 날짜에 등록된 이벤트 전체 표시
- 미니 모달창에 렌더링 된 이벤트 클릭 시 수정 가능한 모달창 열림
- Firebase 데이터베이스 및 인증 객체를 활용하여 로그인 시 현재 인증된 사용자 ID로 구분되어 특정 사용자 데이터 관리
- useState 훅 사용하여 신청 내용(날짜, 트레이너, 횟수, 비용) 상태 관리
- 원하는 횟수를 선택 시 해당 비용 자동적으로 업데이트
- 사용자 ID가 변경될 때마다 Firebase 데이터베이스에서 신청 내역 데이터 관리
- 트레이너 이름에 따라 색상을 설정하는 함수를 사용하여 사용자의 직관성 높임
- 해당 내역이 5개 초과 시 페이지네이션 기능 구현
- 급여 내역 확인 및 정정 신청 페이지 구현 ✅
- 로그인을 통한 개인의 급여 내역 확인 구현
- 확인 후, 업무 연장 / 무급 휴가 사용 / 휴일 근무 등 미반영에 대한 정정 신청 창 구현
- 각 카테고리 선택 가능 혹은 입력 하여 진행 가능 구현
- 신청 완료 or 불가 팝업 창 구현
- 신청 내역 확인
- 캘린더를 통한 업무 확인 페이지 구현 ✅
- 일정 추가, 삭제, 수정 가능 구현
- 캘린더 페이지 구현
- 캘린더 안, 저장한 일정 확인
- 일정이 있는 경우, 다른 일정과 구분 표시
- 일정 추가, 삭제, 수정 가능 구현
- netlify 등을 이용한 정적 페이지 배포 ✅
- useState / useReducer 을 활용한 상태관리 구현 ✅
- Sass / styled-component를 활용한 스타일 구현 ✅
- react 상태를 통한 할일 CRUD 구현 ✅
- 파이어베이스를 이용한 로그인 구현 ✅
- custom hook 을 통한 비동기 처리 구현 ✅
- redux를 통한 데이터 관리 구현