정산 상세 모달 가로 스크롤 버그 수정

정산 상세 모달 가로 스크롤 제거

정산 상세 모달 가로 스크롤 제거 버그를 수정했음.

원인 분석

모달 내부 테이블이 컨테이너 너비를 초과할 때 모달 자체에 overflow 설정이 없었음.

재현 조건

정산 상세 모달에서 가로 스크롤이 발생해서 레이아웃이 밀림.

수정 내용

/* 수정 전 */
.modal-body { /* overflow 미설정 */ }

/* 수정 후 */
.modal-body {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 80vh;
}
.modal-body table {
  width: 100%;
  table-layout: fixed;
  word-break: break-all;
}

검증

다양한 컬럼 수의 테이블에서 가로 스크롤이 발생하지 않는지 확인했음.

재발 방지

모달 내부에 테이블을 넣을 때는 overflow 설정을 체크리스트에 추가했음.

UI/UX 관점

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

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

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

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

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

다음