요구사항정의서.md

요구사항 정의서

1. 프로젝트 개요

• 🧑🏻‍💻 프로젝트 명
  • 인트라넷 서비스 개발
• 프로젝트 설명
  • 팀별로 인트라넷 서비스를 설계하고 개발해 보세요.
  • 인트라넷 서비스는 관리자용과 사용자용으로 구분하여 개발이 필요합니다.
• 프로젝트 기간
  • 6월 10일(월) ~ 7월 12일(금) (약 5주)
    • 프로젝트 발표회 : 7/15 (월) 17:00 ~ 20:00
• 🚀사용 툴
  • HTML
  • CSS
  • JavaScript
  • Node.js
• 기한 : 2024-7-14 23시 59분까지
• 자료 : 팀 별 발표자료
• 링크 : 자세한 제출 안내는 추후 재공지 예정입니다.

2. 기능적 요구사항

• 사용자 정보 및 근무상태 등 변경되는 내역 : 옵션1, 옵션2, 옵션3 형식으로 표기됨

관리자용 페이지

1) 관리자 로그인

• 관리자는 자신의 아이디와 비밀번호를 입력하여 로그인 할 수 있어야 합니다.

2) 관리자의 사용자 정보 관리

• 사용자 등록
  • 관리자는 사용자의 새로운 정보를 등록할 수 있습니다.
  • 관리자는 사용자의 새로운 비밀번호를 초기화하여 등록할 수 있습니다.
• 사용자 수정
  • 관리자는 사용자의 기본 정보를 수정할 수 있습니다.
• 사용자 삭제
  • 관리자는 삭제할 사용자를 선택하여 삭제할 수 있습니다.
  • 사용자 삭제 시 모달 창을 통해 취소 또는 삭제할 수 있습니다.

3) 사용자 리스트 페이지 기능

• 사용자 목록 조회
  • 관리자는 사용자의 기본 정보를 포함한 목록을 조회할 수 있습니다.
  • 관리자는 페이지네이션을 통해 사용자 목록을 이전 또는 다음 페이지로 넘기면서 조회할 수 있습니다.
• 사용자 검색
  • 관리자는 이름 또는 이메일로 사용자를 검색할 수 있습니다.

4) 기업공지 관리

• 공지사항 글 조회
  • 관리자는 공지사항 글을 조회할 수 있습니다.

사용자용 페이지

1) 사용자 로그인

• 사용자는 자신의 아이디와 비밀번호를 입력하여 로그인 할 수 있어야 합니다.

2) 사용자 메인 Home

• 모달을 활용한 근무 시작 / 종료 확인 창 구현
• 토글 형태의 근무 시작 / 종료 스위치 구현
• 사용자 프로필 조회
  • 사용자는 자신의 프로필 사진, 이름, 연락처, 부서, 직급, 이메일 주소와 같은 정보를 조회할 수 있습니다.
• 현재 시간 확인
  • 사용자는 현재 시간을 시계로 확인 할 수 있습니다.
• 근무 상태 확인
  • 사용자는 현재 근무 상태를 확인 할 수 있습니다.
  • 사용자의 근무 상태는 근무 전, 근무 중, 근무 종료와 같은 텍스트 형태로 표시 됩니다.

3) 사용자 시간 근무 관리

• 근무 시작
  • 사용자는 근무 시작 버튼을 눌러 근무를 시작 할 수 있습니다.
  • 사용자는 근무 시작을 버튼을 눌르면, 모달창을 통해 취소하거나 근무를 시작 할 수 있습니다.
  • 사용자는 근무 시작 버튼이 근무 종료 버튼으로 토글이 됩니다.
  • 사용자는 하루에 한 번만 근무 시작 버튼을 누를 수 있습니다.
  • 사용자는 근무 상태는 근무 중 으로 바뀝니다.
• 근무 종료
  • 사용자는 근무 종료 버튼을 눌러서 근무를 종료 할 수 있습니다.
  • 사용자는 근무 종료 버튼을 누르면 모달창을 통해 취소하거나 근무를 종료 할 수 있습니다.
  • 사용자는 근무 종료 버튼이 근무 시작 버튼으로 토글이 됩니다.
  • 사용자는 하루에 한 번만 근무 종료 버튼을 누를 수 있습니다.
  • 사용자는 근무 상태는 근무 종료로 바뀝니다.
• 근무 시간 초기화 기능
  • 지정된 시간(자정)이 되면, 자동으로 사용자의 근무 시간은 초기화가 됩니다.
  • 지정된 시간(자정)이 되면, 자동으로 사용자의 근무 시작/근무 종료 버튼 상태에 상관없이 근무 시작 버튼으로 초기화됩니다.
  • 사용자의 근무 상태는 현재 근무 상태와 상관없이 근무 전 으로 초기화가 됩니다.
• 근태 현황 조회 기능
  • 사용자는 근태현황 바로가기 버튼을 누르면 근태신청 페이지로 이동할 수 있습니다.
  • 사용자는 메인 홈페이지에 보이는 근태 신청 리스트를 스크롤을 사용하여 확인 할 수 있습니다.

4) 근태 신청 목록 프리뷰

• 사용자는 근태 신청 목록을 리스트 형태로 확인할 수 있습니다.

5) 기업 갤러리

• 사용자는 그리드 형태의 갤러리로 갤러리 사진들을 조회할 수 있습니다.
• 갤러리 화면은 무한 스크롤로 구성이되며, 화면상에 보이지 않는 사진들의 스크롤을 내릴시 업로드 되는 지연 로딩 방식을 사용합니다.

6) 근태 신청 기능

• 근태 신청(연차/반차/조퇴/기타 등)
  • 사용자는 토글을 통해 근태 항목을 선택할 수 있습니다.
  • 근태 신청 시 신청 제목과 신청 사유를 작성하여 신청할 수 있습니다.
• 근태 신청 내역 확인 창
  • 사용자는 자신이 작성한 신청 내역의 등록, 수정, 삭제 여부를 신청 목록에서 확인할 수 있습니다.
  • 목록에는 기본적으로 근태 항목, 제목, 신청자명이 표기되며 내역 클릭 시 상세 내용을 확인할 수 있습니다.
  • 작성된 신청 내역은 버튼을 통해 수정 및 삭제할 수 있습니다.
• 근태 신척 내역 필터링 기능
  • 사용자는 자신이 조회하고자 하는 근태 항목에 따라 토글 형식으로 선택하여 신청 내역을 선택적으로 조회할 수 있습니다.

7) 프로필 관리

• 사용자 기본 프로필
  • 이름, 아이디, 비밀번호, 권한 등급, 기본 프로필 사진은 관리자가 사용자의 기본 프로필을 등록할수 있습니다. 사용자는 설정된 기본 프로필을 확인 할 수 있습니다.
• 프로필 사진 수정
  • 사용자는 기본 프로필 사진 으로 등록된 사진을 수정할 수 있습니다.
  • 프로필 사진 옆에 버튼을 눌러서 프로필 사진을 등록을 할 수 있습니다.
• 사용자 프로필 추가 정보 등록
  • 사용자는 자신의 프로필에 휴대폰 번호, 이메일 을 추가하여 등록 할 수 있습니다.

3. 비기능적 요구사항

1) 성능 요구사항

시스템은 1,000명 이상의 직원 데이터를 실시간으로 처리할 수 있어야 합니다. 급여 계산 및 지급 프로세스는 60분 이내에 완료되어야 합니다.

2) 보안 요구사항

데이터는 암호화되어 저장되어야 하며, 암호화 대상 데이터를 선택할 수 있어야 합니다. 사용자 인증은 2단계 인증을 통해 이루어져야 합니다.

3) 사용성 요구사항

사용자 인터페이스는 직관적이고 사용하기 쉬워야 합니다. 다양한 기기(데스크탑, 모바일)의 모던 브라우저에서 모든 기능 사용이 가능해야 합니다. 시스템을 사용하는데 브라우저 이외의 추가적인 소프트웨어 설치되지 않아야 합니다.

4) 유지보수성 요구사항

시스템은 쉽게 업데이트 및 확장될 수 있어야 합니다. 기술 지원을 위한 충분한 문서화가 필요합니다.

5) 기타 요구사항

시스템은 최소 년 99.9%의 가용성을 유지해야 합니다. 모든 데이터는 최소 5년간 보관되어야 합니다.

4. 프로젝트 추가 선택 요구사항

필수 요구사항을 모두 완료했을 경우 아래의 선택 요구 사항을 추가할 수 있습니다.

1. 관리자용 페이지
   1. 기업 공지 모음 갤러리 사진 업로드 기능 관리자는 기업 공지 모음 갤러리에서 사진을 업로드 할 수 있습니다.
2. 사용자용 페이지
   1. 마이페이지의 프로필 이미지 업로드 기능 사용자는 자신의 프로필 이미지를 등록, 수정, 삭제할 수 있습니다.
   2. 회원 시스템 기능(회원 가입, 로그인, 로그아웃) 사용자는 부여받은 아이디와 비밀번호로 로그인 및 비밀번호 변경과 로그아웃 등의 작업을 할 수 있습니다.
   3. 근태 신청 시 사유 기재 기능 사용자는 근태 신청 시 작성란에 제목과 함께 신청 사유를 입력할 수 있습니다.
   4. 기타 동작이 완료되기 전에 로딩 애니메이션 구현 사용자가 동작을 완료하기 전에 대기하는 동안 로딩 애니메이션이 나타납니다.
   5. 관련된 기타 기능 추가
      • 책갈피 기능(공지 북마크 기능) 사용자는 자신이 기억해두고 싶은 공지사항을 선택해 북마크 리스트에 추가할 수 있습니다.
      • 사용 근무 시간 확인 기능 사용자가 근무 시작 버튼을 누르면 근무 시간이 증가하며, 얼마나 근무를 진행했는지 확인을 할 수 있습니다.
      • 다크모드, 사용자 페이지들을 어두운 배경 색상으로 전환하는 기능
      • 달력 형태의 메시지창을 통해서 근태 신청을 하는 기능
3. 기술 요구 사항 추가
   1. 백엔드-데이터베이스 인터페이스: Prisma를 사용한 SQLite연동

5. 프로젝트 제약 사항

• Github Branch와 Issue 사용하여 협업을 진행합니다.
• ESLint 설정, Commit Convention, 문서화 등 팀 프로젝트 시 필요한 추가 작업을 진행합니다.
• 모든 산출물은 Readme.md 파일 내, 프로젝트와 관련된 상세한 설명이 담긴 문서를 작성합니다.
• HTML, CSS, Javascript 만을 사용하고 UI 프레임웍 또는 CSS 전처리기 사용은 금지합니다.
• JavaScript DOM event를 조작하여 페이지를 구현합니다.
  • querySelector, getElementsByClassName, createElement, appendChild, removeChild 등 사용
• CSS 의 상대 수치를 활용하여 자연스러운 화면과 반응형 레이아웃을 구현해야 합니다.
  • PC 전용 페이지와 모바일 전용 페이지 두가지 구현
• SPA(single-page application)을 통한 웹 페이지를 구현해야 합니다.

참고

• 토이 프로젝트 2조 notion 페이지
• 김민태 개발자님께서 올려주신 이 프로젝트 I 예시 이미지
• 김민태 개발자님께서 올려주신 토이프로젝트1 안내 페이지
• GitHub - ibare/devcamp-onboarding-template