💰 직원들을 위한 급여 및 업무 관리 플랫폼

배포사이트

TOYFIVE

테스트용 ID/PW : james@gmail.com / 123123

프로젝트 기간

3/4 ~ 3/14

사용 기술

React, Redux-toolkit, tailwind css, firebase, typescript

기능

1. 로그인

• 라우트 보호
  

• 로그인 기능
  

• localStorage에 토큰 저장
  

• 유효성 검증
  

2. 로그아웃

• 로그아웃
  

• localStorage에 토큰 삭제
  

3. HomePage

• 날짜별 전체 직원 일정 조회
  

4. MyPage

• 로그인한 직원의 이번 달의 총 근무 시간 조회
• 로그인한 직원의 이번 달의 총 급여 조회
• 로그인한 직원의 금일 일정 조회
  

5. CalendarPage

• 로그인한 직원의 월별 일정 조회
  

• 로그인한 직원의 주차별 일정 조회
  

• 일정 추가 기능
  

• 일정 수정 기능
  

• 일정 삭제 기능
  

• 유효성 검증
  

6. 비동기 에러핸들링

• 데이터 불러오기 실패
  

• 데이터 보내기 실패
  

7. NotFoundPage

• 잘못된 경로로 접근 시 404 Not Found 페이지 출력
  

---

팀원 및 역할

• 김민재

  • LoginPage
    • firebase를 통한 로그인, 로그아웃 기능 구현
      • 이메일, 비밀번호
      • 유효성 검사 적용
  • firebase 세팅
    • firebase를 사용한 데이터베이스 구축
  • vercel 이용한 배포
    • env 환경변수 설정
  • github repository 관리

• 임현성

  • 개발환경 세팅
    • 라우트 세팅
      • 미로그인시 라우트 보호
      • 로그인시 LoginPage 접근 제한
    • 리덕스 세팅
      • 로그인한 유저, 전체 유저 데이터 전역 관리
      • thunk를 사용한 비동기 로직 작성
    • 전체적인 레이아웃 구성
    • 스키마 구성
    • tailwind css 세팅
  • HomePage
    • 날짜별 전체 사용자 일정 조회
  • CalendarPage
    • 데이터 추가, 수정, 삭제 기능
    • 데이터 추가, 수정 시 유효성 검증
  • Header
    • 로그인 토큰정보를 localStorage에 담아 네비게이션 동적 렌더링 구현
  • 비동기로직 에러핸들링

• 이재혁

  • MyPage
    • 근무 시간 데이터를 한달 단위로 필터링해서 표시
      • 필터링된 데이터를 기반으로 급여 계산 및 표시
      • 급여 부분 카운트업 라이브러리 사용 (애니메이션)
    • 현재 날짜의 스케줄 데이터를 표시
      • 스케줄의 내용을 토글로 표시
    • 디자인 스타일링
  • Footer
    • 디자인 스타일링

• 이동근

  • CalendarPage
    • react-big-calendar 라이브러리 사용
      • 해당 달의 스케줄 조회 구현
      • 해당 주의 스케줄 조회 구현
      • 이벤트의 고유한 id별로 색상 지정 구현
      • 디자인 스타일링