개발 slecs

레거시 JSP 관리자 화면을 모바일 대응으로 개선

목차

fix: JSON 파싱 오류 원인 치환 문자열 수정

JSP UI 작업은 레거시 환경에서 어떻게 사용성을 올릴 수 있는지 계속 고민하게 만듦.

테이블 레이아웃 개선

모바일에서 가로 스크롤 없이 보이게 하는 게 과제였음. 카드형 뷰로 폴백 처리함.

<%-- PC: 테이블 형태 --%>
<div class="admin-table-wrapper d-none d-md-block">
  <table class="table">...</table>
</div>

<%-- 모바일: 카드 형태 --%>
<div class="card-list-wrapper d-md-none">
  <c:forEach var="item" items="${list}">
    <div class="card mb-2"><div class="card-body">...</div></div>
  </c:forEach>
</div>

colspan 동적 처리

document.querySelectorAll('.auto-colspan').forEach(td => {
  const cols = td.closest('table')
    .querySelector('thead tr')
    .querySelectorAll('th').length;
  td.setAttribute('colspan', cols);
});

성능 최적화

항목 개선
이미지 lazy load loading="lazy" 추가
AJAX 조회 디바운스 적용

끝

이어보기

댓글 0

첫 댓글 달아줘.