📅 직원들을 위한 인트라넷 페이지

배포사이트

INTRANET FIVE

처음 방문하시는 모든 분들은 직원등록(회원가입)을 통해 아래 나열된 기능을 체험해보세요 !

(모바일도 가능합니다.)

프로젝트 제목

프로젝트 기간

1/26 ~ 2/8

Languages and Tools:

소개

직원을 위한 인트라넷 웹사이트를 제작했습니다.
기업의 공지와 근무중인 직원, 부재중인 직원을 확인하고 또, 관리할 수 있습니다.

기능

1. 직원등록

처음 방문한 사용자는 직원등록 창에서 직원을 추가하여 서비스를 사용할 수 있습니다.
회원가입 시 작성한 정보를 토대로 바로 자동 로그인됩니다.
로그인 페이지에서 회원가입 페이지로 이동할 수 있습니다.

2. 로그인

3. 시간관리 모달

헤더에 있는 시계 아이콘 혹은 현재 시간을 클릭하여 아래와 같은 시간관리 모달을 띄울 수 있습니다.

모달에는 로그인한 직원의 직군, 프로필 이미지, 현재 시간, 근무 시간, 근무중인지 부재중인지를 확인할 수 있습니다.
또한, 아래 스위치버튼으로 근무/부재중을 변경할 수 있습니다.

4. 마이페이지

로그인한 사용자의 상세 정보를 확인할 수 있습니다.
부재중인 직원의 경우 부재사유를 변경할 수 있고, 직원 탈퇴가 가능합니다.

5. 홈페이지의 기능들

• 기업 공지 갤러리

슬라이더를 사용하여 여러 공지들을 넘겨가며 확인할 수 있습니다.
공지를 클릭하면 해당 공지의 상세페이지로 이동합니다.

• 근무중인 직원 목록

페이지네이션을 구현하여 페이지별로 근무중인 직원을 확인할 수 있습니다.
클릭 시 해당 직원의 상세페이지로 이동합니다.

• 부재중인 직원 목록

페이지네이션을 구현하여 페이지별로 부재중인 직원을 확인할 수 있습니다.
우측 상단의 select를 클릭하여 부재사유별로 직원을 조회할 수 있습니다.
직원 카드의 우측 상단 빨간 알림표시는 부재중이지만 부재사유를 적지 않은 직원을 나타냅니다.
클릭 시 해당 직원의 상세페이지로 이동합니다.

6. 공지 상세페이지

홈페이지에서 클릭한 공지의 상세정보를 보여줍니다.
우측하단에 작성일과 수정일을 볼 수 있습니다.

7. 직원 상세페이지

마이페이지와 마찬가지로 해당 직원의 상세 정보와 부재중이라면 부재사유 등을 확인할 수 있습니다.
상세페이지의 직원과 로그인한 사용자가 다르다면 상세페이지에서 부재사유를 수정하거나 직원 탈퇴는 할 수 없습니다.
상세페이지의 직원과 로그인한 사용자가 같다면 직원탈퇴 버튼을 볼 수 있습니다.

8. 직원 탈퇴

직원탈퇴 버튼 클릭 시 보이는 모달입니다.
YES를 눌러 직원탈퇴를 하게 되면 로그인한 사용자의 정보가 사라집니다.

9. 로그아웃

헤더에 로그인된 사용자의 이름이나 이미지를 클릭하면 드롭다운 박스를 볼 수 있습니다.
로그아웃을 눌러 로그아웃합니다.

10. 이미지 업로드

직원 상세페이지에서 이미지 업로드가 가능합니다.
변경한 사진으로 데이터가 변경됩니다.

팀원 및 역할

• 김민재
  • EmployeePage.jsx
    • 사진, 직무, 이름 표기된 상세 프로필 페이지 구현
      • 스타일링 더 세련되게
      • 토글 컴포넌트 만들기 (토글 스위치 버튼 스타일링)
      • 직원 탈퇴 버튼 만들기
      • 직원 삭제는 로그인한 사용자와 상세페이지 url의 id가 일치할 때만 작동하도록 구현
      • 직원 탈퇴 컨펌 모달 띄우기
      • 직무 별로 소개글 나오게 구현
    • 부재 신청 내역 확인 구현
      • 부재중인 직원들의 상세페이지에서만 보이도록 구현
    • 스켈레톤UI 스타일링
      • 직원 상세페이지 스켈레톤 UI
      • 공지 상세페이지 스켈레톤 UI

• 임현성

  • 직원 데이터 관리
    • firebase 로그인 기능 구현
    • firebase 회원가입 기능 구현
      • 회원가입 시 작성한 데이터 sanity에도 저장
    • Sanity를 사용하여 직원 데이터 만들기
    • Sanity를 사용하여 기업 공지 데이터 만들기
    • Context API를 사용하여 전역으로 데이터에 접근 가능하게 만들기
    • HomePage
      • 직원 카드 스타일링
      • 공지 카드 스타일링
        • 공지 상세페이지 구현
    • 직원 데이터 변경 시 변경 감지하여 다시 sanity 데이터 받아오도록 구현
    • 직원 상세페이지에서 이미지 업로드 (데이터 수정)
    • 로딩 애니메이션 or 스켈레톤 UI
      • 메인페이지
      • 마이페이지 이미지 수정 로딩 애니메이션
    • 전체적인 스타일링
    • 반응형 레이아웃
    • 토글스위치로 직원 근무 / 부재중 변경 구현
    • 직원탈퇴버튼에 직원삭제기능 구현
    • 로그인 유무 확인하여 로그인 페이지로 리다이렉트
    • 잘못된 url로 접근 시 404 Not Found 페이지 보여주기
      

• 이재혁

  • WorkingEmployees.jsx / AbsenceEmployees.jsx

    • 페이지네이션
      • HomePage의 근무/부재 직원 페이지당 8명씩 보이도록 페이지네이션

  • NoticeGallery.jsx

    • 슬라이더

      • HomePage의 기업 공지 갤러리 4개씩 보이도록 슬라이더 만들기

    • Footer.jsx

      • 인트라넷 소개

      • 기능소개

      • 팀원소개

      • 로고

        
        

• 이동근

  • Header.jsx
    • 현재 시간 보여주기
      • 초단위로 새로 보여주기
      • 컴포넌트로 만들기
      • 클릭 시 시간관리 모달띄우기
        • 로그인 데이터를 가져와서 로그인한 직원 정보 보여주기
        • 토글 스위치 버튼으로 근무 시작 / 종료 구현 (데이터 수정 기능)
    • 헤더에 타이머 문제 ( ex. 19:9 ⇒ 19:09로 출력될 수 있게 수정 )
    • 타이머옆에 시계 아이콘 추가
    • 타이머 요일 영어로 괄호 없이 ( 19:40 (화) ⇒ 19:40 TUE )

[필수 구현사항]

• ✅ 마이페이지 구현
  • ✅ 사진, 직무, 이름이 표기된 프로필 구현
    • ✅ 시간 관리 페이지 개발
      • ✅ 현 시각을 표시하는 시계 (타이머) 구현
      • ✅ 토글 형태의 근무 시작 / 종료 스위치 구현
      • ✅ 모달을 활용한 근무 시작 / 종료 확인 창 구현
  • ✅ 연차/ 반차/시간 조정 등 부재 신청 창 구현
  • ✅ 부재 신청 내역 확인 창 구현
  • ✅ 부재 항목에 따른 카테고리 메뉴로 데이터 필터링 가능 구현
• ✅ 기업 공지 모음 갤러리 구현
• ✅ netlify 등을 이용한 정적 페이지 배포
• ✅ 과제에 대한 설명을 포함한 README.md 파일 작성
  • ✅ 팀원별로 구현한 부분 소개

[선택 구현사항]

• ✅ React / TypeScript 사용은 선택
• ✅ 마이페이지의 사진 업로드 기능
• ✅ 로그인 기능
• ✅ 부재 신청시, 사유 기재 기능
• ✅ 기타 동작이 완료되기 전에 로딩 애니메이션 구현
• ✅ 페이지네이션
• ✅ 관련된 기타 기능도 고려
• ✅ eslint 설정, 커밋컨벤션, 문서화 등 팀프로젝트시 필요한 추가 작업들