계약서 재제출 후 세션 불일치로 잘못된 UI 노출 수정

재제출 요청 후 세션 불일치로 잘못된 UI 노출 수정

재제출 요청 후 세션 불일치로 잘못된 UI 노출 수정 버그를 수정했음.

원인 분석

세션 상태와 DB 상태가 맞지 않는 케이스가 있었음. 특정 작업 흐름에서 세션 갱신이 DB 업데이트 이전에 이루어지고 있었음. 세션 기반 UI 제어는 이런 타이밍 문제에 취약함.

재현 조건

계약서 재제출 요청 후 세션이 갱신되기 전 페이지를 새로고침하면 이전 상태의 UI가 표시됐음.

수정 내용

// 수정 전: 세션 갱신 누락
service.updateStatus(id, newStatus);
// 세션은 여전히 이전 상태

// 수정 후: DB 업데이트 후 세션 명시적 갱신
service.updateStatus(id, newStatus);
session.setAttribute("contractStatus", newStatus);

검증

수정 후 재제출 → 세션 갱신 → 페이지 이동 흐름에서 올바른 UI가 표시되는지 확인했음.

재발 방지

세션 의존 UI는 변경 후 반드시 세션도 함께 갱신해야 함. 리뷰 시 세션 갱신 누락 여부를 체크 포인트로 추가했음.

UI/UX 관점

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

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

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

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

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

다음