[Grid Html Viewer] DataGrid를 이용하여 HMLT,CSS 템플릿으로 자유롭게 렌더링할 수 있는 컴포넌트

page no.  131112334

1. 기능 설명
   1. DataGrid에 바인딩된 데이터를 HTML/CSS 템플릿 기반으로 자유롭게 렌더링하는 시각화 컴포넌트입니다.
      

   2. DataGrid와의 기능 비교

      DataGrid	표(테이블) 형태에 최적화
      Grid Html Viewer	동일한 데이터를 카드, 폼, 리스트, 대시보드 등 원하는 레이아웃으로 표현하기 위한 용도

   3. DataGrid와의 관계

      1. Grid Html Viewer는 DataGrid를 대체하지 않고 보완합니다.
      2. 데이터 조회·편집·집계는 DataGrid가 담당하고, GridHtmlView는 그 DataGrid를 데이터 소스로 연결하여 별도의 뷰 레이어 역할을 합니다.
      3. 하나의 DataGrid에 Grid Html Viewer를 여러 개 연결하거나, 탭 전환으로 표 형태와 카드 형태를 동시에 제공하는 구성도 가능합니다.
2. 사용 방법
   1. i-AUD Designer > DataGrid > 우클릭 → "Html Viewer 추가" 메뉴를 선택합니다.
      

   2. 화면 영역별 설명

      영역	영역 명	영역 설명
      좌측	템플릿 목록	서버에서 제공하는 기본 템플릿 목록을 표시합니다. 항목을 클릭하면 우측 미리보기와 에디터에 즉시 반영됩니다. 기본 제공 템플릿 유형: 카드형 / 테이블형 / 상세보기(단일행 폼) 등
      우측 상단	탭 (Preview / HTML / CSS)	Preview	원본 데이터와 선택된 템플릿의 렌더링 결과를 실시간으로 확인
      		HTML	템플릿 HTML 코드를 직접 편집
      		CSS	템플릿 CSS 스타일을 직접 편집
      	컬럼 개별 설정	카드형 / 테이블형 템플릿 선택 시 "컬럼 개별 설정" 체크박스가 나타납니다. 체크 시 원본 DataGrid의 필드를 기준으로 HTML의 AUD-FOR="COLUMNS" 구간이 필드별 개별 요소로 자동 확장됩니다.
      우측	원본 데이터 영역	디자인 팝업을 호출한 DataGrid의 실제 데이터를 최대 50건 표시합니다. 데이터가 없는 경우 필드 정보를 기반으로 샘플 데이터를 자동 생성하여 표시합니다.
      	미리보기	선택한 템플릿이 실제 데이터에 어떻게 렌더링되는지 확인합니다.

   3. 템플릿 선택 및 편집
      

      1. 좌측 목록에서 원하는 템플릿을 클릭합니다.

      2. Preview 탭에서 렌더링 결과를 확인합니다.

      3. HTML / CSS 탭에서 코드를 직접 수정합니다.

      4. Preview 탭으로 돌아오면 변경사항이 즉시 반영됩니다.

   4. HTML 템플릿 디렉티브 요약

      

      디렉티브	사용 예	설명
      aud-for="ROWS"	<div aud-for="ROWS">	DataGrid의 모든 행을 반복 렌더링
      aud-for="CURRENT_ROW"	<div aud-for="CURRENT_ROW">	현재 선택된 행만 렌더링
      aud-for="COLUMNS"	<th aud-for="COLUMNS">	컬럼 개별 확장 대상 마킹
      aud-bind="필드명"	<span aud-bind="NAME">	해당 필드의 값을 텍스트로 출력
      aud-bind="@ROWNUM"	<span aud-bind="@ROWNUM">	행 번호(1부터) 출력
      aud-model="필드명"	<input aud-model="VALUE">	입력 요소와 필드 값 양방향 바인딩
      aud-class="필드:클래스명"	aud-class="ACTIVE:active"	필드 값이 truthy일 때 CSS 클래스 추가
      aud-on-click="함수명"	aud-on-click="onRowClick"	addFunction()으로 등록한 함수 호출
      aud-if="필드명"	aud-if="VISIBLE"	필드 값이 truthy일 때만 표시