출석 체크 페이지 제작 1- 설계
서론
Keeper라는 부산대학교 보안동아리에서 난데없이 개발을 하고 있는 나는 이번 홈페이지 리뉴얼 작업에서 출석체크 페이지 개발을 맡았다.
사실 버전 1에서도 동일한 기능을 개발했던 터라 개발이 쉬울 줄 알았는데… 여러가지 바뀐 점 + TypeScript와 eslint 사용으로 꽤 많은 부분을 수정해야 했다. (버전 1 코드가 개발새발이어서 그런 것도 있다.)
앞으로 해당 기능을 어떻게 개발했는지, 어떤 오류가 있었는지, 어떤 부분이 수정되었는지는 실시간으로 게시글로 작성할 생각이다.
이 게시글을 포함 앞으로 올라올 출석페이지 관련 게시물은 앞으로 해당 기능을 유지, 보수 할 회원의 편의를 목적으로 한다.
FlowChart
Permission
| 대구분 | 중구분 | 사용자 | 보기 | 수정 | 삭제 | 쓰기 | 비고 |
|---|---|---|---|---|---|---|---|
| 출석체크 페이지 | 출석 시간 설정 | 회장 | O | O | |||
| 부회장 | O | O | |||||
| 서기 | O | O | |||||
| 회원 | X | X | |||||
| 출석 시작 | 회장 | O | O | ||||
| 부회장 | O | O | |||||
| 서기 | O | O | |||||
| 회원 | X | X | |||||
| 출석 | 회장 | O | O | 회원은 출석 기능만 접근 가능 |
|||
| 부회장 | O | O | |||||
| 서기 | O | O | |||||
| 회원 | O | O | |||||
| 관리 페이지 이동 | 회장 | O | O | ||||
| 부회장 | O | O | |||||
| 서기 | O | O | |||||
| 회원 | X | X |
UI
UI 부분은 개발을 진행하며 추가할 사항이 존재하며, 실시간으로 업데이트 될 예정이다.
Page Title: 세미나 출석
Author: 파녀미
Screen Path: HOME> 참여 마당> 세미나 출석
권한: 회장, 부회장, 서기
| Description | Check Point | |
|---|---|---|
| 1 | 세미나 관리 페이지로 이동 | 좌측에 예정된 세미나 카드가, 우측에 종료된 세미나 카드가 배치된다. 새로고침/로그아웃 시에도 타이머가 리셋되지 않도록 한다. 출석을 시작한 회원은 자동으로 출석처리하도록 한다. 출석 시간 옵션은 5분, 10분, 15분, 20분이 있다 |
| 2 | 출석 마감 시간 설정 | |
| 3 | 지각 마감 시간 설정 | |
| 4 | 출석 시작 |
Page Title: 세미나 출석
Author: 파녀미
Screen Path: HOME> 참여 마당> 세미나 출석
권한: 회장, 부회장, 서기, 회원
| Description | Check Point | |
|---|---|---|
| 1 | 세미나 관리 페이지로 이동 | 지각시간 마감 전까지 출석하지 않을 경우 결석처리 한다. 출석코드 제출 횟수는 5회로 제한한다. 출석코드 제출 횟수가 5화를 초과하면 모달을 띄우고 결석 처리한다.생성되었으나 시작되지 않은 세미나의 시간은 --:--으로 보인다. 회장,부회장 혹은 서기 권한을 가지지 않은 회원은 세미나 관리 버튼을 볼 수 없다. |
| 2 | 출석코드 입력 | |
| 3 | 출석 버튼 | |
| 4 | 모달 확인 버튼 |