# GeeGrid Offline AI Context

언어 선택: [한국어](/ai-ko.txt) | [English](/ai-en.txt)

문서 버전: 1.2  
대상: 네트워크가 차단된 생성형 AI  
목적: GeeGrid v3 화면을 실제 사용 규칙과 동일한 구조로 생성·수정
Runtime 기준 원본: `/home/ks2.cho/geegrid/html/js/geegrid_v3`

이 파일은 독립 실행형 AI 작업 문서다. AI는 외부 웹사이트나 다른 문서를 조회할 수 없다고 가정한다. 이 파일에 없는 API, 태그, 속성, 인증 방식, Runtime 동작을 추측해서 만들지 않는다.

# 0. COMPLETE_HTML 필수 계약

사용자가 화면, 페이지, 전체 예제 또는 완성 HTML을 요청하면 기본 출력 모드는 `COMPLETE_HTML`이다. 다음 조건 중 하나라도 빠지면 결과물을 출력하지 말고 실패 항목을 보고한다.

## 필수 CSS

~~~html
<link rel="stylesheet" href="/js/geegrid_v3/geegrid.css">
<link rel="stylesheet" href="/js/geegrid_v3/geegrid-template.css">
~~~

## 필수 JavaScript

다음 순서를 유지하고 `</body>` 직전에 둔다.

~~~html
<script src="/js/geegrid_v3/gee.common.js"></script>
<script src="/js/geegrid_v3/gee.util.js"></script>
<script src="/js/geegrid_v3/gee.grid.js"></script>
<script src="/js/geegrid_v3/gee.object.js"></script>
<script src="/js/geegrid_v3/gee.search.js"></script>
~~~

## 필수 화면 구조

- 결과 표는 `div` 또는 일반 `table`이 아니라 `geegrid`와 하나 이상의 `column`으로 선언한다.
- `new GeeGrid(id)`의 id는 실제 `geegrid` id와 일치해야 한다.
- `handler`와 `sort_handler`는 `GeeGrid.on`에 같은 이름으로 등록한다.
- 결과는 `setTotalCount` → `setCurrentPage` → `setViewLength` → `setObjectData` 또는 `setArrayData` → `makePaging` 순서로 반영한다.
- 별도 이전·다음 버튼으로 페이징을 다시 만들지 않고 GeeGrid 페이징을 사용한다.
- 사용자가 별도 스타일을 요구하지 않으면 인라인 `<style>`을 만들지 않고 프로젝트 공통 CSS를 유지한다.

## 출력 모드

- `COMPLETE_HTML`: 전체 페이지. 필수 CSS·JavaScript·Grid 선언·초기화·Mock을 모두 포함한다.
- `FRAGMENT`: 사용자가 조각만 명시적으로 요청한 경우에만 사용한다. 기존 페이지가 제공되지 않으면 누락된 필수 include를 함께 알린다.
- `PATCH`: 기존 파일 수정 요청에만 사용한다. 기존 include와 컴포넌트 구조를 유지한다.

## API 정보가 없을 때

- API URL, 요청 필드, 응답 필드를 만들지 않는다.
- `fetch`를 작성하지 않는다.
- Mock 데이터로 즉시 실행되는 화면을 작성한다.
- 실제 API 연결에 필요한 정보를 미확인 항목으로 보고한다.

---

# 1. AI 실행 명령

다음 규칙은 설명이 아니라 반드시 지켜야 하는 작업 계약이다.

## MUST

1. 기존 화면이 제공되면 먼저 id, gg-frame, gg-layout, geegrid, column과 데이터 모양을 읽는다.
2. 검색 입력은 기본적으로 네이티브 textarea, input, button과 addEventListener로 작성한다.
3. 객체 행과 JSON에서 파싱된 객체 레코드는 setObjectData, 배열 행은 setArrayData를 사용한다.
4. handler, sort_handler, renderer, onclick, ondblclick, onchange, click에는 콜백 이름만 작성한다.
5. 콜백은 GeeGrid.on(name, handler)에 등록한다.
6. 조회 결과는 setTotalCount → setCurrentPage → setViewLength → 데이터 설정 → makePaging 순서로 반영한다.
7. 실제 API를 연결하기 전에 mock 또는 고정 배열로 화면 흐름을 확인한다.
8. 서버 정렬값은 허용 목록으로 검증해야 하며 SQL에 직접 연결하지 않는다.
9. 수정 요청에서는 요구된 범위만 바꾸고 기존 id와 동작을 유지한다.
10. 결과물은 아래 출력 계약과 자체 검증 기준을 만족해야 한다.

## NEVER

1. 확인되지 않은 cond 태그를 만들지 않는다.
2. 임의의 data-* 계약을 만들지 않는다.
3. HTML 콜백 속성에 load_users() 같은 실행식을 작성하지 않는다.
4. 확인되지 않은 인증 헤더를 추가하지 않는다.
5. Runtime, Builder, 배포, 복구, 라이선스, 보안 내부 구현을 추측하지 않는다.
6. 데이터 형태를 확인하지 않고 바인딩 API를 선택하지 않는다.
7. dynamic_scroll과 dynamic_load를 함께 사용하지 않는다.
8. 기존 프로젝트의 라이브러리 경로와 API 래퍼를 임의로 변경하지 않는다.

---

# 2. 결과를 일정하게 만드는 방식

AI는 화면 전체를 자유롭게 재설계하지 않는다. 다음 순서를 사용한다.

~~~text
검증된 Golden Example
        ↓
사용자 요구사항 분석
        ↓
변경 허용 영역 식별
        ↓
필요 범위만 수정
        ↓
고정 검증 규칙 수행
        ↓
완성된 결과물 출력
~~~

## 변경하지 않는 영역

- GeeGrid 라이브러리 로딩 순서
- 기존 컴포넌트 id
- handler와 sort_handler의 이름 연결 방식
- GeeGrid.on 등록 방식
- 데이터 반영 순서
- 확인된 데이터 API의 시그니처
- 사용자가 변경을 요청하지 않은 기존 기능

## 변경할 수 있는 영역

- 화면 제목과 안내 문구
- 검색 입력 항목
- column의 업무 필드와 표시 제목
- mock 데이터의 업무 내용
- 실제 API URL과 확인된 요청 필드
- 사용자 요구에 필요한 이벤트 처리
- 프로젝트에서 이미 사용하는 레이아웃과 스타일 클래스

바이트 단위로 같은 결과가 필요하면 AI가 새 HTML을 설계하게 하지 말고 Golden Example의 지정 영역만 치환한다.

---

# 3. 필수 라이브러리

다음 순서를 유지한다.

~~~html
<link rel="stylesheet" href="/js/geegrid_v3/geegrid.css">
<link rel="stylesheet" href="/js/geegrid_v3/geegrid-template.css">

<script src="/js/geegrid_v3/gee.common.js"></script>
<script src="/js/geegrid_v3/gee.util.js"></script>
<script src="/js/geegrid_v3/gee.grid.js"></script>
<script src="/js/geegrid_v3/gee.object.js"></script>
<script src="/js/geegrid_v3/gee.search.js"></script>
~~~

DOM 요소가 생성된 뒤 생성자를 호출한다.

~~~js
var grid = new GeeGrid('userGrid');
var search = new GeeSearch('searchTool');
var form = new GeeObject('settingsForm');
~~~

GeeSearch와 item은 기존 화면에서 실제 사용이 확인된 경우에만 사용한다. 일반 검색 화면은 네이티브 입력 요소를 우선한다.

---

# 4. 확인된 구성요소

| 요소 | 역할 | 연결 API |
| --- | --- | --- |
| geegrid + column | 표, 컬럼, 정렬, 페이징 | new GeeGrid(id) |
| item | 검색·입력 항목 | new GeeSearch(id), new GeeObject(id) |
| gg-layout | 선언형 화면 배치 | GeeObject.loadLayouts() |
| gg-frame | 도킹·분할 영역 | GeeObject.layout |
| gg-layer | 팝업·독립 창 | GeeGrid.layer, GeeObject.layout |
| gg-tabs + gg-tab | 탭 | GeeObject.tabs(id) |
| gg-tree | 트리 | GeeObject.tree(id, data) |
| gg-progress | 진행률 | start, setValue, end, error |

cond 태그는 현재 기준 소스에서 확인되지 않았다. 조건 표시는 JavaScript에서 데이터를 가공하여 처리한다.

## GeeGrid 태그와 표준 HTML 선택 기준

목표는 표준 HTML 태그를 무조건 줄이는 것이 아니라, GeeGrid가 제공하는 기능을 일반 HTML로 중복 구현하지 않는 것이다.

### MUST

1. 업무 데이터 표·컬럼·정렬·페이징은 table 또는 div로 직접 만들지 않고 geegrid와 column을 사용한다.
2. 팝업·오버레이·독립 업무 창은 임의 modal div가 아니라 gg-layer를 사용한다.
3. 도킹·분할 영역은 실제로 해당 기능이 필요할 때 gg-frame을 사용한다.
4. 화면의 행·열·간격·정렬은 확인된 gg-layout 속성으로 처리한다.
5. 탭·트리·진행률처럼 GeeGrid가 제공하는 기능은 확인된 gg-tabs, gg-tree, gg-progress를 사용한다.
6. 제목·문단·설명·레이블·접근성 구조는 h1-h6, p, section, main, header, footer, label 같은 표준 HTML을 사용한다.
7. 기본 검색 입력은 textarea, input, select, button 같은 네이티브 입력 요소를 우선한다.
8. 기존 화면의 GeeGrid 태그 구조는 사용자가 명시적으로 변경을 요청하지 않으면 유지한다.

### NEVER

1. geegrid 기능을 일반 table 또는 div 목록으로 다시 구현하지 않는다.
2. gg-layer 기능을 일반 div 팝업이나 임의 modal 구조로 다시 구현하지 않는다.
3. 기존 gg-frame 또는 gg-layout 구조를 일반 div 구조로 임의 변경하지 않는다.
4. 단순 제목·문장·레이블을 불필요한 gg-* 태그로 감싸지 않는다.
5. 기능·의미·배치 책임이 없는 gg-frame, gg-layout, div 래퍼를 추가하지 않는다.
6. 현재 문서와 실제 소스에서 확인되지 않은 GeeGrid 태그나 속성을 만들지 않는다.

### HARD GATE

다음 중 하나라도 해당하면 결과물을 완료로 출력하지 않는다.

- GeeGrid가 담당하는 표·레이어·탭·트리·진행률 기능을 일반 HTML로 재구현했다.
- 기존 GeeGrid 태그 구조를 요청 없이 제거하거나 다른 구조로 교체했다.
- 확인되지 않은 GeeGrid 태그 또는 속성을 사용했다.
- 기능 선택 근거를 실제 소스나 이 문서에서 확인할 수 없다.

Hard Gate 실패 시 생성을 중단하고 실패 항목, 확인된 근거, 필요한 추가 입력을 보고한다.

---

# 5. Grid 선언 규칙

## 기본 선언

~~~html
<geegrid id="userGrid"
         width="100%"
         height="420px"
         numbering="true"
         pageable="true"
         rows="20"
         handler="load_users"
         sort_handler="sort_users">
  <column id="id" type="number" width="80px" align="right">ID</column>
  <column id="name"
          type="html"
          width="180px"
          sortable="true"
          orderBy="name">이름</column>
</geegrid>
~~~

## 확인된 geegrid 속성

id, width, height, pageable, rows, page, numbering, number_width, check_column, handler, sort_handler, fixCol, leftWidth, rightWidth, rowHeight, show_totalcount, dynamic_scroll, dynamic_load, dynamicthreshold, dynamichandler, status, debug, formName, key, value.

## 확인된 column 속성

id, dataid, type, title, width, align, class, style, resize, sortable, orderBy, orderby, merge, mergekey, renderer, onclick, ondblclick, onchange, data, jsondata, keytext, keyvalue, textEvent, textHandler, editMask, textColor, textCursor, readonly, disabled, cols, rows, flow, drag, text, value.

## 확인된 column 타입

html, input, textarea, select, selectbox, dropdown, radio, checkbox, calendar, number, range, button, code, key, numberformat, hidden, numbering, check_column, define.

dataid는 column id와 행 객체의 키가 다를 때 사용한다.

---

# 6. 데이터 형태와 API

## 객체 행

~~~js
grid.setObjectData([
  { id: 1, name: '홍길동' },
  { id: 2, name: '김철수' }
]);
~~~

## 배열 행

setArrayData에는 필드 이름 배열과 행 배열을 함께 전달한다.

~~~js
grid.setArrayData(
  ['id', 'name'],
  [
    [1, '홍길동'],
    [2, '김철수']
  ]
);
~~~

## JSON 레코드

~~~js
grid.setObjectData([
  { id: 1, name: '홍길동', status: 'READY' }
]);
~~~

## 확인된 Grid API

~~~js
var rows = grid.getData();
var value = grid.getValue(0, 'name');
grid.setValue(0, 'name', '김철수');

var params = grid.makePageParams();
grid.setTotalCount(120);
grid.setCurrentPage(1);
grid.setViewLength(20);
grid.makePaging();
~~~

makePageParams에서 확인된 요청 항목은 page, pageSize, startIDX, endIDX, orderColumn, orderMethod다.

---

# 7. 이벤트와 콜백

속성에는 함수 실행식이 아니라 등록 이름만 둔다.

## 올바른 선언

~~~html
<geegrid id="userGrid" handler="load_users" sort_handler="sort_users">
  <column id="name"
          renderer="render_name"
          onclick="open_user"
          onchange="name_changed">이름</column>
</geegrid>
~~~

~~~js
GeeGrid.on('load_users', function () {
  // 조회 처리
});

GeeGrid.on('sort_users', function () {
  GeeGrid.invoke('load_users', {});
});

GeeGrid.on('render_name', function (payload) {
  payload.cell.textContent = String(payload.value || '');
});

GeeGrid.on('open_user', function (payload) {
  console.log(payload.gridId, payload.rowIndex, payload.row);
});

GeeGrid.on('name_changed', function (payload) {
  console.log(payload.columnId, payload.value, payload.element);
});
~~~

## 잘못된 선언

~~~html
<geegrid handler="load_users()">
<column onclick="open_user(event)">
~~~

콜백 payload에서 확인된 필드는 gridId, rowIndex, columnIndex, columnId, value, options, dataType, row, data, cell, element, event다.

---

# 8. 검색 결과 반영 표준

반드시 다음 순서를 사용한다.

~~~js
grid.setTotalCount(Number(ret.count || 0));
grid.setCurrentPage(Number(ret.page || 1));
grid.setViewLength(Number(ret.rows || 20));
grid.setObjectData(Array.isArray(ret.records) ? ret.records : []);
grid.makePaging();
~~~

JSON에서 파싱된 객체 레코드는 객체 행이므로 setObjectData를 사용한다. 인덱스 기반 배열 행만 fieldNames와 함께 setArrayData를 사용한다.

권장 응답 형태:

~~~json
{
  "result": "success",
  "count": 120,
  "page": 1,
  "rows": 20,
  "records": [
    {
      "id": 1,
      "name": "홍길동",
      "status": "READY"
    }
  ]
}
~~~

실제 프로젝트 API의 응답 필드가 다르면 실제 응답을 기준으로 명시적으로 매핑한다. 확인되지 않은 응답 필드를 추측하지 않는다.

---

# 9. Golden Example

다음 예제는 AI가 새 검색 화면을 만들 때 사용하는 기준 구조다. 요구사항이 달라도 이벤트 등록, 데이터 반영 순서, mock 우선 실행 구조는 유지한다.

~~~html
<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>사용자 검색</title>

  <link rel="stylesheet" href="/js/geegrid_v3/geegrid.css">
  <link rel="stylesheet" href="/js/geegrid_v3/geegrid-template.css">
</head>
<body>
  <gg-frame id="userSearchFrame" stretch>
    <gg-layout id="userSearchLayout" direction="column" gap="12px" stretch>
      <section aria-labelledby="userSearchTitle">
        <h1 id="userSearchTitle">사용자 검색</h1>

        <textarea id="keywordsText"
                  rows="4"
                  placeholder="한 줄에 하나씩 입력..."></textarea>

        <label>
          <input id="caseSensitiveChk" type="checkbox">
          대소문자 구분
        </label>

        <button type="button" id="searchBtn">검색</button>
      </section>

      <geegrid id="userGrid"
               width="100%"
               height="420px"
               numbering="true"
               pageable="true"
               rows="20"
               handler="load_users"
               sort_handler="sort_users">
        <column id="id"
                type="number"
                width="80px"
                align="right">ID</column>
        <column id="name"
                type="html"
                width="180px"
                sortable="true"
                orderBy="name">이름</column>
        <column id="department"
                type="html"
                width="180px"
                sortable="true"
                orderBy="department">부서</column>
      </geegrid>
    </gg-layout>
  </gg-frame>

  <script src="/js/geegrid_v3/gee.common.js"></script>
  <script src="/js/geegrid_v3/gee.util.js"></script>
  <script src="/js/geegrid_v3/gee.grid.js"></script>
  <script src="/js/geegrid_v3/gee.object.js"></script>
  <script src="/js/geegrid_v3/gee.search.js"></script>

  <script>
    var grid = new GeeGrid('userGrid');

    var mockRows = [
      { id: 1, name: '홍길동', department: '개발팀' },
      { id: 2, name: '김철수', department: '품질팀' }
    ];

    function applyResult(ret) {
      var records = Array.isArray(ret.records) ? ret.records : [];

      grid.setTotalCount(Number(ret.count || records.length));
      grid.setCurrentPage(Number(ret.page || 1));
      grid.setViewLength(Number(ret.rows || 20));
      grid.setObjectData(records);
      grid.makePaging();
    }

    function loadMock() {
      applyResult({
        result: 'success',
        count: mockRows.length,
        page: 1,
        rows: 20,
        records: mockRows
      });
    }

    GeeGrid.on('load_users', function () {
      loadMock();
    });

    GeeGrid.on('sort_users', function () {
      GeeGrid.invoke('load_users', {});
    });

    document.getElementById('searchBtn')
      .addEventListener('click', function () {
        GeeGrid.invoke('load_users', {});
      });

    GeeGrid.invoke('load_users', {});
  </script>
</body>
</html>
~~~

## Golden Example에서 유지할 항목

- userGrid id와 new GeeGrid('userGrid')의 일치
- handler="load_users"와 GeeGrid.on('load_users', ...)의 일치
- sort_handler="sort_users"와 GeeGrid.on('sort_users', ...)의 일치
- 네이티브 검색 입력과 addEventListener 사용
- applyResult 내부의 데이터 반영 순서
- API 계약이 없을 때 fetch 없이 mock만 실행
- 필수 CSS 2개와 JavaScript 5개의 경로 및 순서

---

# 10. GeeSearch 사용 예제

GeeSearch는 기존 화면에서 사용이 확인되었거나 사용자가 명시적으로 요구한 경우에만 선택한다.

~~~html
<div id="searchTool" width="100%" titleWidth="100px" itemWidth="240px">
  <item id="keyword"
        type="text"
        title="검색어"
        placeholder="이름"
        maxlength="50"></item>
  <item id="status"
        type="select"
        title="상태"
        data="statusCodes"></item>
</div>
~~~

~~~js
var statusCodes = [
  ['READY', '준비'],
  ['DONE', '완료']
];

var search = new GeeSearch('searchTool');
var encoded = search.getFormData();
var keyword = search.getValue('keyword');

search.setValue('keyword', '홍');
search.reset();
~~~

확인된 item 타입은 hidden, number, blank, text, input, select, combo, checkbox, check, radio, dropdown, period, calendar, popup, button, html, loop다.

---

# 11. 레이아웃과 레이어 예제

~~~html
<gg-layout type="page"
           direction="column"
           rows="auto 1fr auto"
           gap="12px">
  <gg-layout type="header"
             direction="row"
             justify="end"
             gap="8px">
    <h1>사용자</h1>
  </gg-layout>

  <gg-layout type="body"
             direction="row"
             columns="1fr 280px"
             gap="12px">
    <main>
      <geegrid id="userGrid"></geegrid>
    </main>
    <aside>필터</aside>
  </gg-layout>
</gg-layout>

<button type="button" id="openUserLayerBtn">상세</button>

<gg-layer id="userLayer"
          layer-title="사용자"
          width="640px"
          height="480px"
          close="true"
          resize="true">
  <header>사용자</header>
  <main>상세 내용</main>
  <footer>
    <button type="button" click="save_user">저장</button>
    <button type="button" click="geegrid_layer_close">닫기</button>
  </footer>
</gg-layer>
~~~

~~~js
GeeGrid.on('save_user', function (payload) {
  GeeObject.layout.closeLayer(
    payload.button.closest('gg-layer').id
  );
});

document.getElementById('openUserLayerBtn')
  .addEventListener('click', function () {
    GeeObject.layout.openWindowLayer('userLayer');
  });
~~~

---

# 12. 서버 및 API 안전 규칙

1. API URL은 실제 요구사항 또는 기존 소스에서 확인한 값만 사용한다.
2. 요청 필드는 기존 API 계약에서 확인한다.
3. 인증 헤더는 사용자 또는 실제 소스에서 제공한 경우에만 작성한다.
4. orderColumn은 서버의 허용 컬럼 목록에 매핑한다.
5. orderMethod는 asc 또는 desc만 허용한다.
6. SQL, 인증, 배포 내부 구현은 화면 코드에 추측하여 넣지 않는다.
7. API 호출 전 mock 데이터로 Grid와 이벤트 흐름을 확인한다.

기존 API 래퍼가 제공되면 직접 fetch로 대체하지 않고 기존 래퍼 형식을 유지한다.

~~~js
function API_USER_LIST(param, callback) {
  this.url = '/users';
  this.params = [
    'keyword',
    'page',
    'pageSize',
    'orderColumn',
    'orderMethod'
  ];
  this.param = param;
  this.callback = callback;
  return CALL_JSON(this);
}
~~~

---

# 13. AI 입력 양식

사용자는 가능하면 다음 형태로 요구사항을 제공한다.

~~~text
[작업 유형]
신규 화면 | 기존 화면 수정

[화면 목적]
예: 사용자 검색 및 선택

[기존 소스]
기존 HTML과 JavaScript 전체 또는 관련 부분

[입력 항목]
예: 키워드, 부서, 사용 여부

[Grid 컬럼]
예: id, name, department, active

[데이터 형태]
객체 레코드 | 배열 행

[API]
URL, method, 요청 필드, 응답 예제

[변경 허용 범위]
예: 검색 영역과 userGrid만 수정

[출력 형식]
완성 HTML | 변경 코드 | 패치
~~~

입력 정보가 부족하면 확인되지 않은 계약을 만들지 않는다. 화면 구조에 영향을 주지 않는 범위에서는 Golden Example을 기본값으로 사용하고, API 계약이 없으면 mock 동작까지만 작성한다.

---

# 14. AI 출력 계약

사용자가 별도로 지정하지 않으면 다음 규칙을 적용한다.

1. 설명보다 완성된 결과물을 먼저 출력한다.
2. 신규 화면은 완성된 HTML 전체를 출력한다.
3. 기존 화면 수정은 변경 대상 파일과 변경 범위를 명시한다.
4. 코드 블록 밖에는 중요한 가정과 미확인 항목만 짧게 작성한다.
5. 확인하지 못한 API URL·요청·응답 계약은 코드로 만들지 않고 미확인 항목으로 보고한다.
6. 문서에 없는 태그, 속성, 메서드를 발명하지 않는다.
7. 코드가 Golden Example의 규칙을 따르는지 자체 검사한 뒤 출력한다.

바이트 단위의 재현성이 필요하면 출력 형식을 완성 HTML이 아니라 Template의 치환 값 목록으로 제한한다.

~~~text
TITLE=사용자 검색
GRID_ID=userGrid
HANDLER=load_users
SORT_HANDLER=sort_users
API_URL=사용자 제공값 또는 MOCK_ONLY
DATA_METHOD=setObjectData
~~~

---

# 15. 생성 후 자체 검증

AI는 결과를 출력하기 전에 다음 항목을 순서대로 확인한다.

검증기가 제공되는 환경에서는 출력 전에 다음 명령을 통과해야 한다.

~~~bash
node /home/git/html/codex_base/scripts/validate-geegrid-html.js generated.html --mode complete
~~~

검증 실패 결과는 완료 코드로 제공하지 않는다. 실제 API 계약과 페이지 전용 스타일이 승인된 경우에만 각각 `--api-contract`, `--allow-inline-style`을 추가한다.

## 구조

- 라이브러리 경로와 순서가 기준과 같은가
- 필수 CSS 2개와 JavaScript 5개가 모두 있는가
- 생성자에 전달한 id가 실제 DOM id와 같은가
- 기존 gg-frame, gg-layout 구조를 불필요하게 변경하지 않았는가
- geegrid와 column 태그가 올바르게 닫혔는가
- GeeGrid가 제공하는 기능을 일반 table 또는 div로 다시 구현하지 않았는가
- 팝업·오버레이에 gg-layer를 사용했는가
- 표준 HTML은 콘텐츠·접근성·기본 입력 역할에 사용했는가
- 기능이나 배치 책임이 없는 gg-* 또는 div 래퍼를 추가하지 않았는가

## 이벤트

- handler 이름이 GeeGrid.on에 등록되어 있는가
- sort_handler 이름이 GeeGrid.on에 등록되어 있는가
- renderer, onclick, onchange에 실행식이 아닌 이름만 있는가
- 네이티브 버튼은 addEventListener로 연결했는가

## 데이터

- 객체 레코드는 setObjectData, 배열 행은 setArrayData를 사용했는가
- setArrayData에 fieldNames를 전달했는가
- 조회 결과 반영 순서가 기준과 같은가
- records가 배열인지 확인했는가
- mock 데이터로 초기 화면을 확인할 수 있는가

## API와 보안

- 실제로 제공되지 않은 API URL을 발명하지 않았는가
- API 계약이 없을 때 fetch를 작성하지 않았는가
- 확인되지 않은 인증 헤더를 추가하지 않았는가
- 정렬값을 SQL과 직접 연결하지 않았는가
- Runtime과 Builder 내부 동작을 추측하지 않았는가

## 결과 보고

- 변경 파일을 명시했는가
- 실제 소스 근거를 명시했는가
- 정적 검사 결과를 명시했는가
- 브라우저와 API 실행 여부를 구분했는가
- 확인하지 못한 배포 경로를 명시했는가

---

# 16. 문서 유지관리 규칙

이 문서의 일관성을 유지하려면 다음 절차를 사용한다.

1. 실제 GeeGrid 소스와 운영 중인 예제를 먼저 변경한다.
2. 실제 소스에서 확인된 API만 이 문서에 추가한다.
3. Golden Example을 수정하면 mock 실행, 정렬, 페이징, 이벤트 연결을 다시 검사한다.
4. 기존 API 시그니처가 바뀌면 문서 버전을 올린다.
5. 폐기된 API는 즉시 삭제하지 말고 변경 이력에 기록한다.
6. AI에 전달하는 파일은 항상 같은 파일명과 최신 버전을 사용한다.
7. 가능하면 파일의 SHA-256 해시를 함께 관리해 서로 다른 문서가 섞이지 않도록 한다.

## 변경 이력

| 버전 | 변경 내용 |
| --- | --- |
| 1.0 | 오프라인 AI용 규칙, API, Golden Example, 출력 계약, 자체 검증을 단일 문서로 통합 |
| 1.1 | GeeGrid 태그와 표준 HTML 선택 기준 및 Hard Gate 추가 |
| 1.2 | Complete HTML 필수 계약, Mock 전용 Golden Example, 실제 데이터 API 기준 추가 |

---

# 17. 확인 범위와 제한

이 문서는 GeeGrid v3 실제 프로젝트 화면과 현재 확인된 GeeGrid 사용 소스를 기준으로 작성되었다.

확인된 범위:

- GeeGrid, GeeSearch, GeeObject 생성 방식
- geegrid, column 선언
- 객체·배열·JSON 데이터 설정
- 페이징과 정렬 연결
- GeeGrid.on과 GeeGrid.invoke
- 네이티브 검색 입력
- gg-layout, gg-frame, gg-layer의 공개 사용 방식
- mock 이후 실제 API 연결 흐름

확인하지 않은 범위:

- 실제 공개 서버의 배포 설정
- 프로젝트별 인증 방식
- Runtime과 Builder 내부 구현
- 배포와 복구 내부 알고리즘
- 라이선스와 보안 내부 로직
- 모든 프로젝트에서의 브라우저 호환성

AI는 확인하지 않은 범위를 사실처럼 생성하지 않는다.