개발 slecs

월별 정산 P&L 카드 쿼리 구조 개선으로 가독성 향상

목차

월 P&L 카드 6줄 구조로 재작성

리팩토링 작업을 완료했음.

리팩토링 이유

월별 집계 쿼리를 재작성했음. 컬럼 정의를 명확히 하고, 여러 소스를 합산하는 구조로 개선했음.

변경 전/후

-- 수정 후: 명확한 컬럼 구조
SELECT
  DATE_FORMAT(t.created_at, '%Y-%m') as month,
  SUM(CASE WHEN t.type = 'SALES' THEN t.amount ELSE 0 END) as total_sales,
  SUM(CASE WHEN t.type = 'FEE' THEN t.amount ELSE 0 END) as total_fee,
  SUM(CASE WHEN t.type = 'SALES' THEN t.amount ELSE 0 END)
    - SUM(CASE WHEN t.type = 'FEE' THEN t.amount ELSE 0 END) as net_profit
FROM 내부테이블 t
GROUP BY month
ORDER BY month DESC;

변경 범위

내부 클래스 1개, SQL 매퍼 1개, JSP 1개

기대 효과

코드 가독성이 높아지고 수정 비용이 낮아졌음. 동일 기능을 더 적은 코드로 표현하게 됐음.

회귀 검증

리팩토링은 외부 동작을 바꾸지 않아야 함. 입력/출력이 동일한지 주요 케이스를 기준으로 확인했음. 내부 구조만 변경했고, 배포 후 이상 없이 동작했음.

UI/UX 관점

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

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

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

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

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

다음

댓글 0

첫 댓글 달아줘.