colon-grid — 관리자 목록 그리드 키트
화면 JS 0줄로 목록 화면을 만드는 JS/CSS 한 벌입니다.
<table data-grid> 와 th 선언만 쓰면
검색·필터·정렬·서버페이징·합계·엑셀·컬럼 조작·엑셀식 수정모드가 붙습니다.
colon-money 운영 화면 4개에서 쓰고 있고, 그 과정에서 나온 함정까지 같이 정리해 둔 곳입니다.
빠른 시작
- 이 저장소의
src/main/resources/static/js/*와css/admin.css를 복사 - 페이지 끝에서 순서대로 로드 —
combobox → admin-grid → admin-modal → admin-tooltip → admin-toast → admin-form → admin-grid-edit - 표에
data-grid, 각th에 무엇을 할지 선언
지금은 Tailwind 가 필요합니다. 툴바·검색카드를 만들 때 JS 가 Tailwind 유틸 클래스를 씁니다(29곳).
Tailwind 가 없는 프로젝트에 넣으면 레이아웃이 무너집니다 — 떼어내는 건 남은 일에 있습니다.
들어 있는 것
| 파일 | 역할 |
|---|---|
admin-grid.js | 검색카드·정렬·페이징(화면/서버)·합계행·엑셀·컬럼 표시/너비/순서·순번·빈상태 |
admin-grid-edit.js | 수정모드(일괄편집·행삭제)·엑셀식 범위선택/복사/붙여넣기/채우기·키보드 이동 |
combobox.js | 셀렉트 대체 콤보(전체목록 노출·자유입력·셀 편집용 포털) |
admin-modal.js | 상세/등록 모달(3분할 고정) — 목록 리로드 없이 폼만 가져옴 |
admin-form.js | 금액 콤마·자동계산·필수검증·확인/알림 다이얼로그 |
admin-toast.js | 가벼운 결과 알림(복사·붙여넣기 등) — 아무것도 막지 않음 |
admin-tooltip.js | 말줄임 셀 툴팁(네이티브 title 금지) |
GridQuery / GridState | 서버 페이징 계약(Java). 없으면 반쪽짜리라 같이 넣었습니다 |
어디서 왔나
원본은 진담 designer 표준이고, 공통 규칙은 @project/ADMIN_PAGE_RULE.md 에 있습니다.
colon-money(세금계산서·월급지급·원천세·작업 4개 화면)에서 실제로 쓰며 다듬었고,
회귀 테스트 174개(jsdom)가 붙어 있습니다.
⚠️ 지금은 colon-money 와 같은 파일이 양쪽에 복사되어 있습니다. 한쪽만 고치면 갈라집니다 —
scripts/check-kit-sync.sh 로 차이를 확인하세요.