개발 slecs

정산 모달의 날짜 포맷과 유형 코드 한글화 수정

목차

정산 상세 모달 - 시각 포맷 + 유형 한글화

정산 상세 모달 - 시각 포맷 + 유형 한글화 버그를 수정했음.

원인 분석

날짜/시간 포맷과 유형 표기가 일관되지 않았음. 영문 코드가 그대로 표시되거나 포맷이 달랐음.

재현 조건

정산 상세 모달에서 날짜 형식이 다른 화면과 달랐음. 유형 코드가 한글이 아닌 영문 그대로 표시됨.

수정 내용

// 수정 전
return dateTime.toString(); // "2026-04-15T10:30:00"

// 수정 후
DateTimeFormatter fmt = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm");
return dateTime.format(fmt); // "2026-04-15 10:30"

// 유형 한글화
Map<String, String> typeLabel = Map.of(
    "CHARGE_FEE", "충전수수료",
    "PAY_FEE", "결제수수료",
    "SALES", "판매대금"
);

검증

모달에서 날짜 형식과 유형 한글명이 올바르게 표시되는지 확인했음.

재발 방지

날짜 포맷과 코드 한글화는 공통 유틸로 관리하기로 했음.

UI/UX 관점

화면 변경 시 몇 가지를 체크했음.

로딩 상태: 비동기 요청 중에는 로딩 인디케이터를 표시했음. 버튼을 비활성화해서 중복 클릭을 방지했음.

btn.disabled = true;
try {
    await fetch('/api/...');
    showSuccess();
} catch(e) {
    showError(e.message);
} finally {
    btn.disabled = false;
}

빈 상태 처리: 데이터가 없을 때 빈 화면 대신 "데이터가 없습니다" 메시지를 표시했음.

오류 메시지: 기술적인 에러 코드 대신 사용자가 이해할 수 있는 메시지를 표시했음.

다음

이어보기

댓글 0

첫 댓글 달아줘.