이용수수료 모달 검증·중복 저장·날짜 포맷 정비

모달 품질부터 손봄

이용수수료 관리 모달을 열면 입력 필드가 좁고 검증 메시지가 잘 안 보이는 문제가 있었음. 사용자가 잘못 입력해도 어디가 틀렸는지 모르니 콜센터 문의가 늘어남.

• 입력란 폭 통일, label-input 정렬 맞춤
• 인라인 에러 메시지를 입력 바로 아래로 이동
• 저장 버튼 더블 클릭 방지 (loading 상태로 disable)
• 닫기 시 dirty check 추가해서 변경 있으면 한 번 더 묻게 함

특히 더블 클릭 방지가 핵심이었는데, 빠르게 두 번 누르면 같은 수수료가 두 번 등록되는 사례가 있었음. 파트너 정산 데이터에 영향 가는 부분이라 우선순위가 제일 높았음.

CSRF 토큰 누락

모달 form이 동적으로 렌더링되다 보니 토큰을 같이 끼워 넣지 못해서 일부 환경에서 403이 떨어짐.

const token = document.querySelector('meta[name="_csrf"]').content;
fetch(url, {
  method: 'POST',
  headers: { 'X-CSRF-TOKEN': token, 'Content-Type': 'application/json' },
  body: JSON.stringify(payload)
});

폼 제출 방식을 fetch + JSON 으로 통일하면서 헤더에 일괄 주입하도록 바꿈. 서버 필터가 헤더/파라미터 둘 다 받도록 되어 있었는데, 클라이언트만 헤더로 정리하니 코드가 한결 깔끔해짐.

날짜 포맷 통일

가장 골치 아팠던 부분. 같은 적용일을 화면마다 다르게 그리고 있었음.

서버 응답을 ISO 로 통일하고, 화면 출력은 유틸 함수 하나로 모음. 엑셀이 골 때렸는데, 셀 서식이 텍스트로 박혀있으면 정렬이 사전순이 되어버려서 결국 서식까지 같이 손봐야 했음.

회고

모달 한 번 손대면서 곁다리로 CSRF 랑 날짜 포맷까지 같이 쳐낸 게 신의 한 수였음. 따로 PR 로 나눴으면 같은 파일을 세 번 열어서 세 번 검증해야 했음. 다만 한 PR 에 세 가지 의도가 섞이니 리뷰어가 "이거 왜 같이 들어옴?" 묻는 건 감수해야 했고, 커밋 메시지에 세 항목 다 명시해서 추적 가능하게 정리함.

다음엔 모달 컴포넌트를 공통화해서 같은 작업을 반복하지 않도록 묶을 예정.

끝