온앤오프 (On&Off)

📋 프로젝트 소개

개발 기간 : 2023. 07. 24 ~ 2023. 08. 10
배포 링크 : 온앤오프
Github : 프론트엔드, 백엔드

👥 개발 팀원 및 역할

주하림	박현준	이은비
팀장 관리자 휴가/당직 관리 페이지 관리자 사원 관리 페이지 Navigation 메뉴바	로그인 페이지 회원가입 페이지 마이 페이지	초기 개발 세팅 일정 페이지 휴가 페이지 당직 페이지 엑셀 다운로드 휴가/당직 처리 알림 기능

⚒️ 기술 스택 및 개발 환경

Development

Config

Deployment

Environment

Cowork Tools

📌 프로젝트 기능 소개

API 설계

• custom hook을 통해 axios interceptor를 활용하여 AccessToken을 자동으로 Headers에 설정하도록 구현
• AccessToken 만료 시 interceptor를 통해 로그아웃 처리 및 로그인 페이지로 이동하도록 예외처리 구현

알림 기능

• firebase firestore 연동을 통해 관리자가 휴가 및 당직의 승인/반려 처리 시 알림 기능 추가
• 알림 읽음(선택) 시 알림 읽음 처리 및 처리 상태를 확인 하기 위한 페이지로 이동 구현

로그인 / 회원가입 Page

로그인 Page

• Email 유효성 검사
• 회원가입 링크
• 로그인 시 유저정보 및 토큰 저장
• 로그인 -> 홈화면 이동

회원가입 Page

• 기본적인 유효성 검사(필드 전체 입력)
• Email,핸드폰,비밀번호 확인 유효성 검사
• 중복값 존재 등 API 다양한 통신 에러 예외처리 기능
• 회원가입 -> 로그인화면 이동

내 정보 Page

• 로그인 시 저장된 유저값을 가져와서 사용
• 정보 수정 시 유효성 검사 기능
• 중복값 존재 등 API 다양한 통신 에러 예외처리 기능
• 전화번호 변경 기능(버튼(수정<->완료) 전환 시 수정가능)
• 비밀번호 변경 기능(모달)

홈 - 일정 Page

• 캘린더를 통한 월별 사원들의 휴가/당직 일정 조회
• 사용자 선택 시 해당 사용자의 일정만 조회 가능
• 엑셀 다운로드 시 현재 캘린더로 조회하고 있는 일정을 엑셀 파일로 다운로드
• 캘린더 헤더와 스타일 커스텀 (주말 색상 구분 등)

휴가/당직 신청 조회

휴가 Page

휴가 조회

• 사용자의 휴가일수 조회 및 사용한 휴가일수 계산을 통한 휴가일수 현황 표시
• 사용자의 휴가 신청 내역을 테이블 형태로 조회
• 사용자의 휴가 사용 내역을 테이블 형태로 조회
• 테이블의 정렬 또는 필터 기능 추가
• 신청한 휴가 취소 기능
• 휴가 조회 실패 및 취소 실패 등 다양한 API 통신 에러 예외처리 추가

휴가 신청

• 연차 / 오전 반차 / 오후 반차 타입 제공
• 휴가 일정 선택 시 주말 제외
• 휴가 타입에 따른 휴가 일정 유효성 검사 추가
• 신청가능한 휴가일수에 따른 유효성 검사 추가
• 휴가 신청 API 통신 에러 예외처리 추가

당직 Page

당직 조회

• 사용자의 당직 신청 내역을 테이블 형태로 조회
• 사용자의 당직 기록 내역을 테이블 형태로 조회
• 테이블의 정렬 또는 필터 기능 추가
• 신청한 당직 취소 기능
• 당직 조회 실패 및 취소 실패 등 다양한 API 통신 에러 예외처리 추가

당직 신청

• 당직 일정 선택 시 주말 제외
• 당직 신청 API 통신 에러 예외처리 추가

관리자

휴가/당직 관리 Page

휴가/당직 신청현황 조회

• 모든 사용자의 휴가/당직 신청현황 테이블 형태로 조회
• '승인/반려'처리를 하지 않은 신청 내역을 가장 상단에 오도록 정렬 기능 추가
• 각 테이블 column별로 필터링 기능 추가
• Pagination기능 추가

휴가/당직 승인/반려

• 모든 신청 내역을 '승인' 또는 '반려' 버튼으로 처리(상태값 변경)
• Popconfirm 메시지 기능을 추가해 실수로 클릭해 처리하는것 방지

사원 관리 Page

사원 조회

• 모든 User정보를 테이블 형태로 조회
• 각 테이블 column별로 필터링 기능 추가
• Pagination기능 추가
• 이름 또는 이메일로 사원 검색 기능 추가

사원 정보 수정

• 테이블에서 특정 사용자의 해당 row 클릭 시 Modal창으로 사용자의 상세 정보 표출
• 특정 정보(직급, 권한, 연락처) 수정 기능 추가
• 연락처 입력 Input 숫자만 입력 가능 및 자릿수 체킹 기능 추가

📂 프로젝트 구조

접기/펼치기

📦src
┣ 📂apis
┃ ┣ 📜axios.ts
┃ ┗ 📜index.ts
┃ ┣ 📂components
┃ ┣ 📂admin
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂calendar
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂common
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂dayoff
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂duty
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂login
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂mypage
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂signup
┃ ┃ ┗ 📜index.ts
┃ ┗ 📜index.ts
┣ 📂constants
┃ ┗ 📜index.ts
┣ 📂hooks
┃ ┗ 📜index.ts
┣ 📂pages
┃ ┣ 📜AdminEmployee.tsx
┃ ┣ 📜AdminSchedule.tsx
┃ ┣ 📜App.tsx
┃ ┣ 📜DayOff.tsx
┃ ┣ 📜Duty.tsx
┃ ┣ 📜HomeCalendar.tsx
┃ ┣ 📜Login.tsx
┃ ┣ 📜MyPage.tsx
┃ ┣ 📜SignUp.tsx
┃ ┗ 📜index.ts
┣ 📂stores
┃ ┗ 📜index.ts
┣ 📂types
┃ ┣ 📂admin
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂calendar
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂common
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂dayoff
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂duty
┃ ┃ ┗ 📜index.ts
┃ ┣ 📜IUser.ts
┃ ┗ 📜index.ts
┣ 📂utils
┃ ┗ 📜index.ts
┣ 📜GlobalStyle.ts
┣ 📜GlobalThemeConfig.ts
┣ 📜firebase.ts
┣ 📜main.tsx
┗ 📜vite-env.d.ts

🖼️ 결과물

로그인 페이지	회원가입 페이지

홈 페이지(일반)	홈 페이지(관리자)

알림 조회	일정 상세 조회

내 정보 페이지	비밀번호 변경 페이지

휴가 페이지	휴가 등록

당직 페이지	당직 등록

|

관리자 휴가/당직 관리	관리자 사원 관리

사원 정보 조회 및 수정	엑셀 다운로드