관리 화면 아이콘 깨짐 현상 수정

Iconoir v6→v7 깨진 아이콘 수정 (7개 파일)

Iconoir v6→v7 깨진 아이콘 수정 (7개 파일) 버그를 수정했음.

원인 분석

아이콘 라이브러리(Iconoir) 버전 업그레이드로 클래스명이 변경됐는데, 기존 JSP 파일에 반영하지 않았음.

재현 조건

여러 관리 화면에서 아이콘이 빈 네모로 표시됨.

수정 내용

<!-- 수정 전: v6 클래스명 -->
<i class="iconoir-cancel"></i>
<i class="iconoir-add-user"></i>

<!-- 수정 후: v7 클래스명 -->
<i class="iconoir-xmark"></i>
<i class="iconoir-user-plus"></i>

검증

변경된 아이콘 목록을 전부 화면에서 육안 확인했음.

재발 방지

버전 업그레이드 후 아이콘 변경 목록을 항상 CLAUDE.md에 기록해두기로 했음.

UI/UX 관점

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

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

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

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

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

다음