UX 다듬기: 커스텀 다이얼로그, 스플래시, 시간 한글화

🤖 3668 in / 918 out / 4586 total tokens

이번 커밋은 사용자 경험을 다듬는 데 집중했다. 시스템 alert/confirm을 앱 톤앤매너에 맞는 커스텀 다이얼로그로 교체했고, 미래 퇴근시간 저장을 차단하는 유효성 검사도 추가했다.

스플래시 화면을 새로 만들었다. 앱 진입과 로그인 성공 시 로고가 표시되는 로딩 화면이 나타나 자연스러운 전환을 유도한다. 헤더는 정리했다. 오늘 날짜를 월 오른쪽으로 이동시키고, 로그아웃은 아이콘 대신 텍스트 버튼으로 변경했다. 닉네임도 우상단에 배치했다.

시간 표시를 완전히 한글화했다. "8시 00분", "3시간 30분" 같은 형식으로 통일했다. 마지막으로 테마 FOUC(Flash of Unstyled Content) 문제를 해결했다. 서버 사이드에서 사용자 테마를 미리 로드해 깜빡임 없이 바로 적용된다.

export function fmtMin(m) {
  if (!m || m <= 0) return '0분';
  const h = Math.floor(m / 60), n = m % 60;
  return h > 0 ? `${h}시간${n > 0 ? ' ' + n + '분' : ''}` : n + '분';
}
 
export function fmtTime(t) {
  if (!t) return '--시 --분';
  const [h, m] = t.split(':').map(Number);
  return `${h}시 ${String(m).padStart(2,'0')}분`;
}

캘린더 상세 영역 공간 부족 문제로 A/B/C안 목업도 함께 작성했다. 모바일에서 캘린더 그리드가 뷰포트의 80%를 차지하는 게 원인이다.