테이블

기본 구조

<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>
  • 계정 목록 예시

    계정 목록
    순번 아이디 이름 담당업무 직급 휴대폰 사용여부 관리