테이블
기본 구조
<div class="general-table-wrap">
<table class="general-table" summary="...">
<!-- thead-row.ejs: caption + colgroup + thead 한 줄 -->
<%- include('.../table/thead-row.ejs', { caption, columns }) %>
<tbody>
<!-- tbody-row.ejs: type별 한 줄씩 반복 -->
<%- include('.../table/tbody-row.ejs', { srcPath, publicPath, type, ... }) %>
</tbody>
</table>
</div>
thead-row.ejs 사용법
@param {string} caption - 테이블 캡션(sr-only)
@param {Array} columns - [{ width, label, thClass?, spanClass?, spans? }]
- width: col 너비(숫자 또는 문자열)
- label: th 텍스트(spans 없을 때)
- thClass, spanClass: 선택
- spans: [{ text, className }] 있으면 label 대신 사용
<%- include(`${_src}/views/components/table/thead-row.ejs`, {
caption: '계정 목록',
columns: [
{ width: 50, label: '' },
{ width: 80, label: '순번' },
{ width: 110, label: '아이디' },
{ width: 110, label: '이름' },
{ width: 100, label: '사용여부' },
{ width: 100, label: '관리' }
]
}) %>
tbody-row.ejs 사용법
@param {string} type - 'account'|'shipping'|'survey'|'survey-ing'|'bulk'|'single'|'quality'|'docs'|'noticeFixed'|'consent'
@param {string} [srcPath] - include 경로용(하위 컴포넌트 참조 시 필요)
@param {string} [publicPath]
type별 필드: tbody-row.ejs 상단 JSDoc 참고
- account: rowIndex, userId, name, department, position, phone, status
- shipping: isDefault, addrName, recipient, contact, address, cargo, office
- single: rowIndex, inquiryType, detailTypeValue, title, status, date
- docs: cells[], rowClass
- 기타 type은 tbody-row.ejs 주석 참고
<%- include(`${_src}/views/components/table/tbody-row.ejs`, {
srcPath: _src,
publicPath: _public,
type: 'account',
rowIndex: 1,
userId: 'test123',
name: '홍길동',
department: '총무팀',
position: '사원',
phone: '010-1234-5678',
status: '사용'
}) %>
전체 사용 예시
<div class="general-table-wrap">
<table class="general-table" summary="계정 목록">
<%- include(`${_src}/views/components/table/thead-row.ejs`, {
caption: '계정 목록',
columns: [
{ width: 50, label: '' },
{ width: 80, label: '순번' },
{ width: 110, label: '아이디' },
{ width: 110, label: '이름' },
{ width: 80, label: '담당업무' },
{ width: 80, label: '직급' },
{ width: 140, label: '휴대폰' },
{ width: 100, label: '사용여부' },
{ width: 100, label: '관리' }
]
}) %>
<tbody>
<%- include(`${_src}/views/components/table/tbody-row.ejs`, { srcPath: _src, publicPath: _public, type: 'account', rowIndex: 1, userId: 'test123', name: '홍길동', ... }) %>
<!-- 행 추가 시 tbody-row.ejs 반복 -->
</tbody>
</table>
</div>
-
계정 목록 예시
계정 목록 순번 아이디 이름 담당업무 직급 휴대폰 사용여부 관리 1 test123 홍길동 총무팀 사원 010-1234-5678 사용 2 user02 김철수 영업팀 대리 010-9876-5432 미사용