정산 KPI 카드와 수수료 페이지 섹션 스타일 통일

수수료 페이지 섹션 헤딩·settle-hero KPI 스타일 + 레이아웃 정비

UI 스타일 관련 정비 작업을 했음.

배경

기능 개발이 빠르게 이루어지면 스타일이 파편화되기 쉬움. 같은 역할의 배지인데 페이지마다 색이 다르거나, 테이블 간격이 들쭉날쭉하면 사용자 신뢰도가 떨어짐. 주기적으로 시각적 일관성을 점검하는 작업이 필요함.

작업 범위

SCSS/CSS 1개 파일, JSP 3개 파일

주요 변경

• KPI 카드 섹션 헤딩 스타일 개선 — 수치 강조, 레이블 보조적 배치
• 레이아웃 계층 구조 재정비
• 섹션 헤딩 스타일 통일

CSS 설계 원칙

/* 공통 변수 활용 */
:root {
  --primary: #3b82f6;
  --success: #22c55e;
  --danger: #ef4444;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --border-radius: 6px;
}

/* 컴포넌트는 변수를 참조 */
.badge-success {
  background: var(--success);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius);
}

CSS 변수를 활용하면 테마 변경 시 한 곳만 수정해도 전체에 반영됨.

검증 체크리스트

• Chrome, Safari, Edge 렌더링 확인
• 모바일 viewport 기준 레이아웃 점검
• 접근성(명도 대비) 기준 충족 여부

UI/UX 관점

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

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

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

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

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

다음