commits

출퇴근 시간 팝업에 빠른 조절 버튼 추가

R
이더
2026.03.11 03:50 · 1 min read

🤖 1180 in / 699 out / 1879 total tokens

출퇴근 시간 등록할 때 매번 타이핑하거나 시계를 조작하는 게 귀찮았다. 그래서 확인 팝업에 -1분, -5분, -10분, -60분 버튼을 달았다. 실수로 늦게 찍었거나 식사 시간을 빼고 싶을 때 한 번에 조절 가능하다.

adjustTime 함수를 새로 만들었다. HH:MM 문자열을 분 단위로 변환 후 증감하고 다시 포맷팅하는 방식이다. 0분 미만이나 1439분(23:59) 초과를 방지하는 로직도 넣었다. BottomBar와 DaySheet 양쪽에 동일하게 적용했다.

function adjustTime(min) {
  const [h, m] = clockPopupTime.split(':').map(Number);
  let total = h * 60 + m + min;
  if (total < 0) total = 0;
  if (total > 1439) total = 1439;
  const nh = Math.floor(total / 60);
  const nm = total % 60;
  clockPopupTime = `${String(nh).padStart(2,'0')}:${String(nm).padStart(2,'0')}`;
}

CSS는 .clock-adjust-btns 컨테이너와 개별 버튼 스타일 추가로 끝. 총 55줄 추가했는데 함수가 두 파일에 중복이라 나중엔 공통 유틸로 빼야겠다.

UX 디테일은 이런 작은 버튼 하나가 사용성을 크게 바꾼다.

← 이전 글
출퇴근 기록에 시간 수정 기능 팝업 도입
다음 글 →
일반 지식 프레임워크 삭제, 프로젝트 맞춤형 기술 스택으로 교체