대대적 근무표 자동화의 긴 여정도 거의 끝나간다.
만들고 나니 몇가지 추가 기능이 필요했다.
- 휴가자 격리자는?? 환자는??
- 근무 수정은??
- 아무나 수정하면 안되는거 아냐?
1번은 내 근무표 개발 이유의 큰 비중을 차지한 문제였다.
휴가가기 직전의 병사와 휴가를 다녀온 병사는 심할 정도로 근무를 많이 넣는다.
해당 중대 중대장님과 대화해봤는데, 이게 잘못됐다는 사실을 본인도 알고 계셨다.
그런데 어쩌겠나, 병사는 점점 줄어드는데 반해 근무는 줄지를 않는데..
휴가 관리
내가 계산한 근무 비율은 이것이었다.
workTime(근무를 선 날) /canTime(근무를 설 수 있는 날)
여기서 설 수 있는 날이라 하면?
휴가를 가거나, 다치거나, 코로나에 걸렸거나, 작전을 나갔거나 등등등,
근무를 설 수 있는데 안 선게 아니다. 근무를 못 선 사람들의 지난날은 canTime으로 카운팅되어선 안된다.
그래서 휴가 관리 기능을 만들었다.
말이 휴가지, 근무 열외를 미리 정해두는 방식이다.
그래서, 유저마다 휴가 정보를 관리할 필요가 생겼다.
userList[i] = {
id: 1;
name: "최원빈";
groupId: 1;
teamId: 1;
holidays: [50, 51, 52, 53, 54, 55, 56] // 1주일간의 휴가
}이 정보는 테이블상에서는 아래처럼 보인다.
휴가를 추가하는 방법은, <input type="date"/> 2개를 통해 시작과 종료일을 받고, 그 사이 날짜들을 배열에 추가하는 방법으로 만들었다.
휴가는 미리미리 정해지기 때문에, 고정된 날짜 이후까지도 추가해도 잘 반영할 수 있었다.
누군가 다쳐서 근무를 못서게 됐다면, 휴가처리를 짧게 해주면 된다.
그러면 해당 근무는 누군가가 대신하게 할 수 있었다.
근무 수정
표 상에서 근무를 수정하는게 엑셀같은 UX를 제공할 수 있었으니 거기에 좀 더 UX를 증진시키는 방향으로 생각했다.
일단은 셀을 더블클릭하면 인원을 검색하게끔 나오는데, 최근 알게 된 <datalist/> 태그를 활용했다.
datalist 태그를 활용하면, 쉽게 사람을 변경할 수 있게끔 만들 수 있었다.
나에겐 모든 유저의 데이터가 있으니, "그 날 근무가 없는 사람들의 리스트를 뽑아주어서" 더 좋은 UX로 이끌 수 있었다.
여기에 근무비율이 낮은 순서대로 보여주면?? 변경은 훨씬 간단해진다.
$cell.addEventListener("dblclick", (e) => {
// data-day로 셀마다 날짜를 등록했다.
openPopup();
const day = e.target.dataset.day;
// 남은 유저들 중에,
let leftUserList = userList.filter(getTodayUser(idx));
// 근무비율이 낮은 순으로!
leftUserList.sort(compareWorkRate);
leftUserList.forEach((user) => {
// ...
// 옵션 생성..
// label 어트리뷰트를 추가하면 어느 중대 소속인지까지 볼 수 있다.
$option.addAttribute('label', teamData[user.teamId].name);
$dataList.appendChild($option);
})
})label 어트리뷰트를 통해 훨씬 좋은 UX를 제공할 수 있었다고 생각한다.
실제 프로그램에선 당연히 휴가자도 제외하게끔 만들었다.
이런 식으로 선택할 수 있게끔.
바꾸면서 당연히 각 병사의 근무 횟수는 교환된다.
아무나 수정하면 안 되니깐...
Permission 기능을 추가했다.
초기값은 false이고, 구석에 숨겨둔(이 최선이었다. 암호화 알고리즘 가져오기보단.. 어차피 분석해볼사람은 부대에 없었으니..) 비밀번호를 맞추면 퍼미션이 추가된다.
let permission = false;
function checkPermission(){
let password = prompt()
if(password == "비밀번호") {
permission = true;
return true;
}
return false;
}전역변수로 관리되고, 가장 핵심 기능인 save() 시에 permission을 확인한다.
function save(){
if(!permission || checkPermission()){
localStorage.setItem('allData', JSON.stringify(allData));
// ...
refresh();
}
}이렇게 프로젝트를 관리하는 데 필요한 모든 기능이 추가되었다.
이미 각 중대장님들과 행보관님들께는 당직서면서 보여드렸고, 다른 분대 분대장들도 프로그램을 다뤄보며 사용성을 검증받았다.
제대로 QA해보고 문제가 없다 싶으면 정식 건의드릴 예정이다.
진짜 긴 여정이 거의 다 끝났다 ㅋㅋㅋㅋㅋ
내 군생활도 거의 다 끝났다 ㅋㅋㅋㅋㅋ 다음달이면 병장2호봉이다 ㅋㅋㅋ
