직원들을 위한 급여 명세 페이지

직원들을 위한 급여 및 업무 관리 플랫폼 로그인 기능을 통해 로그인을 한 뒤 직원 각각의 급여 내역서와 업무관리를 할 수 있습니다.

프로젝트 소개

🗂️ 배포한 사이트

OSTB

🗂️ 프로젝트 기간

24.03.04 ~ 24.03.13

🗂️ 사용 기술

React.js / TypeScript / styled-component / firebase / redux / chakra UI

🗂️ 팀원 소개

전유덕	이은주	심소망
로그인, 인사정보 페이지	급여내역, 업무관리 페이지	정정신청, 정정내역 페이지

기능구현

데이터 정보

• id : [email protected]
• id : [email protected]
• id : [email protected]
• pw : 123456

전유덕

로그인 페이지

• 이메일, 비밀번호를 사용한 로그인 기능
• 로그인 오류발생시 알람모달
• 로그인하지 않은 상태에서 페이지 접근시 로그인 페이지로 이동

인사정보 페이지

• 로그인한 직원 인사정보 노출
• 파이어베이스 스토리지를 이용한 프로필이미지 노출 및 수정기능

이은주

급여내역 페이지

• 로그인한 각 직원의 급여내역 페이지
• 직원 정보 테이블 조회
• 직원 급여 명세 테이블 조회
• 급여 명세에 열람하기 버튼 클릭 시 급여 상세 내역 모달창

업무관리 페이지

• 업무관리 캘린더
• 일정 등록 / 수정 / 삭제
• 등록된 일정 확인 모달창
• 각 일정마다 다른 색상 선택 가능

심소망

정정신청 페이지

• 셀렉트 박스로 날짜 데이터 입력 및 내용 데이터 입력
• 빈값 제출시 반려모달창
• 데이터 성공시 모달창

정정신청내역 페이지

• 정정신청 페이지에서 입력한 데이터들 조회가능
• 삭제 버튼시 데이터 삭제

구현페이지

로그인 페이지

인사정보 페이지

급여내역 페이지

• 직원정보와 간단한 급여 정보를 확인할 수 있습니다.
• 열람하기 버튼 클릭 시 급여 상세내역 모달창이 뜹니다.

급여내역 페이지 - 급여상세내역

정정신청 페이지

• 셀렉션 박스로 날짜를 선택해 데이터를 입력 할 수 있습니다.
• 날짜나 내용이 빈값일때 제출버튼 클릭시 값을 입력해달라는 모달창이 뜹니다.
• 내용을 모두 기입할시엔 입력 성공했다는 모달창이 뜹니다.

정정내역 페이지

• 정정신청 페이지에서 입력한 데이터들이 조회됩니다.
• 날짜는 20xx.xx.xx 식으로 조회됩니다.
• 삭제버튼 클릭시 해당 리스트의 데이터가 삭제됩니다.

업무관리 페이지

• fullcalendar 라이브러리를 사용해 캘린더를 구현했습니다.
• 해당 날짜를 클릭하면 일정을 등록할 수 있는 모달창이 뜹니다.
• 셀렉트 박스를 통해 등록할 일정의 색상을 선택할 수 있습니다.
• 등록된 일정을 클릭하면 등록된 날짜, 일정의 내용을 확인할 수 있습니다.
• 수정 버튼을 클릭하면 수정할 수 있는 텍스트박스가 생기고 수정가능합니다.