쇼핑몰 JSP 서브페이지 모바일 테이블을 카드형으로 개선

feat: 쇼핑몰 플랫폼 서브페이지 JSP 추가 및 초기 데이터 구성

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);
});