# ZIXO Grid UI·조작 개선 (2026-10-13)

## 참고와 구현 방향

공식 문서에서 업무 그리드의 조작 방식을 참고하고 ZIXO의 기존 Core·선택 플러그인 위에 직접 구현했다. 세 제품의 소스·CSS·아이콘·상표 디자인을 복사하거나 런타임 의존성으로 추가하지 않았다.

- [AG Grid Column Menu](https://www.ag-grid.com/javascript-data-grid/column-menu/): 헤더에서 정렬·컬럼 고정·너비 조절·컬럼 선택·필터에 접근하는 흐름 참고.
- [AG Grid Keyboard Interaction](https://www.ag-grid.com/javascript-data-grid/keyboard-navigation/): 키보드 중심 데이터 탐색 참고.
- [IBSheet8 공식 샘플](https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/html/main.html), [IBSheet](https://www.ibsheet.com/): 필터·소계 업무 기능과 테마 구성 참고.
- [AUIGrid 공식 데모](https://www.auisoft.net/demo/auigrid/), [속성 문서](https://www.auisoft.net/documentation/auigrid/DataGrid/Properties.html): 컬럼 필터·표시 크기·데이터 탐색 흐름 참고.

해당 제품들의 전체 기능과 성능이 동등하다는 판정은 아니다. 이번 변경 범위와 실제 검사 결과를 AUDIT에 기록한다.

## 화면과 조작

루트 화면은 2,400건 주문을 표시하는 업무 워크스페이스다. 왼쪽 기능 탐색, 상단 검색·조건·컬럼 도구, 조회/완료/금액/변경 카드, 하단 선택 셀 합계·평균으로 구성했다. 행 상태는 텍스트·색상·표식을 함께 쓴다. 외부 폰트·이미지 다운로드는 없다.

- 전체 셀 선택과 활성 셀을 구별하고, 마우스 입력은 셀 강조만 표시한다. 키보드 접근의 그리드 포커스는 유지한다.
- 헤더 클릭은 오름차순 → 내림차순 → 해제 순환, Shift+클릭은 다중 정렬이다. 우선순위 숫자를 표시한다.
- 헤더 ⋮에서 정렬·너비 맞춤·고정·숨김·컬럼 관리·타입별 조건 필터를 조작한다. 적용 필터는 헤더와 조건 칩에 표시한다.
- 조건 빌더는 평면 AND/OR 최대20개 조건을 편집한다. 중첩 API 트리는 별도로 유지되며 빌더에서 적용하면 평면 조건으로 교체한다고 안내한다.
- 숫자 필터를 숫자로 변환하고 잘못된 값은 오류로 표시한다. 범위/목록은 쉼표로 구분한다. 체크박스 값은 true/false다.
- 표시 컬럼 관리에는 컬럼 검색이 있고 마지막 표시 컬럼 숨김을 거부한다. 표시 권한이 없는 컬럼은 도구에 제공하지 않는다.
- 경계 더블클릭은 현재 view의 처음500행 원시값 또는 format 결과로 너비를 계산한다. 라디오/커스텀 DOM 렌더러의 완전한 너비 측정은 아니다.
- 방향/Home/End/Tab 키보드 이동에서 화면 밖 가로 컬럼을 노출한다. Ctrl+A는 적재된 현재 view 전체 셀 선택, Esc는 선택 해제다. 10만행 전체선택의 메모리/속도 기준은 별도 미측정이다.
- 그룹 예제는 분류/지역별 수량 합계·평균 단가를 보여준다. 그룹을 접어도 집계는 표시된다.
- 변경 확정은 데모 메모리 기준값 확정이다. 외부 서버 저장은 서버 예제에서 별도로 제공한다. 레이아웃 저장은 브라우저 localStorage를 사용한다.

## 새 API

`columnToolsPlugin()`를 선택 설치하면 `openColumnMenu(field,anchor)`, `openColumns(anchor)`, `openFilterBuilder(anchor)`를 사용할 수 있다. 종료/플러그인 해제 시 팝업과 document 이벤트를 제거한다. 팝업은 Escape·바깥 클릭·Tab 순환과 종료 후 focus 복원을 제공한다.

Core에 `toggleSort(field,append)`, `setColumnVisible(field,visible)`, `setColumnPinned(field,null|'left'|'right')`, `autoSizeColumn(field)`, `scrollToColumn(field)`, `selectAll()`, `clearSelection()`을 추가했다. `filterable:false`로 도구의 컬럼 필터/조건 선택을 제외한다. `groupingPlugin({fields,aggregates:[{field,type,label}]})`의 type은 기존 모델 sum/avg/min/max를 사용한다.

## 남은 범위

Pivot 편집기·문자열 수식·수열 Fill·XLSX Import·운영 서버 권한/충돌 처리·전체 모듈 조합·고정행 초과 예산·가변 높이 앵커·lazy 동시 상태 통합은 이 변경으로 완료하지 않았다. 현재 UI를 원본 제품의 Enterprise 전체 기능 대체로 인증하지 않는다.


## 사이드바 내부 전환

2026-10-13 KST 사이드바를 문서 링크에서 내부 보기 선택 버튼으로 변경했다. URL·상단 바·사이드바는 유지하고 콘텐츠 영역에서 예제를 표시한다. 주문 관리 그리드와 방문한 예제 프레임은 유지하여 주문 편집과 예제 상태를 보존한다. 로컬 Chrome155에서 기존 워크스페이스10개와 메뉴 전환1개 총11개 통과, JavaScript 오류0건. 예제/자료7개 메뉴 클릭 중 최상위 문서 navigation0회·URL 불변, 주문 변경값 및 재방문 프레임 상태 보존, Enter 키 선택을 확인했다. 원문은 docs/test-results/menu-navigation.json이다.


## 헤더 드래그 삽입 위치 표시

드래그 대상 헤더의 왼쪽/오른쪽 절반에 따라 앞/뒤 삽입선을 표시하고 놓으면 그 위치로 이동한다. 자기 자신·이동 금지 컬럼·외부 드래그에는 삽입선을 표시하지 않는다. drop·dragend·헤더 재생성·destroy에서 표시를 정리한다. 기존 moveColumn(field,targetField)의 앞쪽 이동 계약은 유지하고 선택 인자 position=after를 추가했다. 로컬 Chrome 실제 입력9개 통과: 앞/뒤 표시선 좌표·이동 결과·Escape 취소 후 표시 제거를 확인했다. 원문은 docs/test-results/header-drag.json이다.


## 셀 내부 편집·원클릭 select 검증

2026-10-13 KST, 로컬 Chrome155.0.8059.39에서 셀 내부 편집과 원클릭 select 변경 후 전체 재검사를 완료했다. 기능16개·실제 입력11개·워크스페이스11개 총38개 통과, 독립 예제17개·매뉴얼 iframe17개/탭·Vue 생성/종료17개 통과. 접근성 예제·업무 라이트/다크·조건 팝업 axe 위반0건, Node21개·JS55개 구문/참조 검사 통과. 셀 내부 입력·렌더 중 입력 보존·Tab/blur 확정·Escape 취소·검증 실패 원자성·문자 입력 시작과 select 원클릭/즉시 반영/숫자 타입/readonly/Ctrl+Z를 실제 입력으로 확인했다. OS 한글 IME·모든 편집/팝업 상태의 axe·전체 기능 조합은 별도 미검증이다.

text/number/date/combo는 셀 내부 입력으로 전환했다. 명시적 editor:popup의 사용자 DOM/Abort/dispose 계약은 유지했다. 날짜 달력7열·단축 입력·비동기 옵션 취소 검사를 새 입력 흐름으로 갱신했다. 스크롤 직후 늦게 도착한 기존 scroll 이벤트로 새 편집기가 종료되지 않도록 좌표 변화가 있을 때만 확정한다. 원문은 docs/test-results/browser-inline-edit-2026-10-13.json이다.


## select 포커스·기능별 매뉴얼·소스 개편

select의 브라우저 기본 검은 outline을 제거하고 키보드 접근은 파란 표시를 유지한다. 기능42개를 7개 메뉴 그룹으로 나누고 검색·API/설명·예제·소스를 동일 화면에서 제공한다. 데이터/공통 도구/HTML/JavaScript/Vue/서버 탭과 복사 버튼을 제공한다. 예제17개는 해당 기능만 담은 독립 JS를 원본으로 삼고 공통 컬럼/도구를 example-helpers.js에 분리했다. build-manual은 독립 JS를 덮어쓰지 않고 읽어서 문서·HTML·Vue만 재생성한다. 소스 들여쓰기·주석·안전한 문법 강조를 제공한다.

2026-10-13 KST, Chrome155에서 기능16개·사용자 입력11개·워크스페이스11개·기능별 매뉴얼4개 총42개 검사 통과. 독립 예제17개·매뉴얼 iframe17개·Vue 생성/종료17개 통과, 접근성5상태 axe 위반0건. 문법 강조 후 매뉴얼4개/복사 원문·select 테두리 별도 재검사도 통과했고, CSS outline/border는 none이다. 조건부 readonly·텍스트 tooltip 예제도 직접 검사했다. JS56개 구문과 HTML/import 참조 검사 통과. 실제 스크린리더·Excel 앱·Spring·전체 UI 조합은 미검증이다.

원문: docs/test-results/browser-manual-2026-10-13.json(전체), manual-and-select.json(문법 강조·select 최종 확인). 수정 중 매뉴얼 landmark 이름을 지정했다. 해시 변경에 발생하는 framenavigated와 실제 문서 재로드를 구별해 load0회 및 동일 문서 토큰 보존을 검사한다.


## 개발 매뉴얼 독립 페이지 (2026-10-13 KST)

개발 매뉴얼을 내부 iframe 전환에서 분리하고 독립 /docs/manual.html 페이지를 새 탭으로 연다. 사이드바·사용 가이드·검증 범위 링크에 적용했다. 그리드 예제의 내부 전환은 유지한다. 실제 Chrome에서 새 탭 URL·42개 메뉴·기존 주문 변경값 및 워크스페이스 URL 유지·매뉴얼 iframe 미생성을 확인했다. 원문: docs/test-results/manual-new-page.json.


## 체크박스·라디오 스타일 개선

2026-10-13 KST 체크박스·라디오를 native input 의미를 유지한 커스텀 스타일로 변경했다. 체크박스는 둥근 사각형과 체크 표시, 라디오는 중앙 선택 점과 선택된 옵션 강조를 사용한다. 라이트/다크 테마·disabled·키보드 focus-visible·고대비 자동 복원·reduced-motion을 지원한다. 실제 Chrome에서 클릭 변경·라디오 ArrowRight·체크박스 Space·변경 후 focus 유지·readonly·Ctrl+Z를 확인했다. 두 테마의 axe 위반0건·JavaScript 오류0건. 원문 docs/test-results/choice-controls.json, 화면 choice-light.png/choice-dark.png. 전체 suite 재실행이나 실제 스크린리더 검증으로 확대하지 않는다.


## 값 체크 목록 중심 컬럼 메뉴 (2026-10-19)

헤더 메뉴를 상단 정렬 버튼·컬럼 설정 하위 창·값 검색/체크 목록/적용/초기화로 간소화했다. 텍스트/숫자/날짜 필터 하위 창에서 최대 두 조건을 AND/OR로 결합한다. 값 목록과 조건 적용은 해당 컬럼의 이전 필터를 교체하며 다른 컬럼·전역 조건은 유지한다. 검색 중 적용은 검색 결과에서 체크한 값만 반영하며 빈 선택은 0행이다. 체크 목록은 적재 데이터 기준이며 200개씩 더 볼 수 있다. 서버 전체 데이터의 값 목록을 자동으로 조회하지 않으며 전체 조회는 조건 필터를 사용한다. Escape는 하위 창부터, 바깥 클릭은 전체를 닫는다.

실제 Chrome 및 난독화 dist 전용 검사 각9개, Vue3/서버 조회/390px 경계·해당 axe 위반0을 확인했다. 결과는 docs/test-results/compact-column-menu.json과 compact-column-menu-dist.json이다.


컬럼 메뉴 후속 변경(2026-10-19): 메뉴 안의 정렬 버튼은 제거했다. 현재 기본 영역은 ['columns','filter']이며 ‘컬럼 표시 설정’ 하위 창과 필터를 제공한다. 이전 columnMenu의 sort 항목은 표시하지 않는다. 헤더 클릭 정렬 및 정렬 API는 유지한다.

컬럼 표시 설정 후속 변경(2026-10-19): 하위 창은 ‘표시 컬럼 관리’와 동일한 컬럼 검색·체크 목록을 직접 표시한다. 두 진입점은 공통 코드를 사용하며 체크 변경 즉시 표시/숨김, 숨긴 컬럼 복원, 권한 제외 및 마지막 표시 컬럼 보호를 동일하게 제공한다.

목록 스타일/예제 선택기 후속 수정(2026-10-19): 컬럼 표시·필터 값 목록은 공통 CSS와 텍스트 span을 사용한다. 매뉴얼 예제의 ‘전체 헤더 메뉴’ 선택은 모든 컬럼의 개별 columnMenu override를 제거하고 그리드 기본 구성을 변경하여 주문·수량·단가에 함께 적용한다. 초기 선택과 세 헤더의 메뉴 구성도 모두 ‘전체’로 맞췄다.


## 업무 팝업 제거·텍스트/이미지 복합 셀 (2026-10-19)

업무 팝업 편집과 전용 매뉴얼·예제를 제거했다. 이미지 컬럼은 imageText와 imageTextPosition으로 텍스트를 상하좌우에 함께 배치한다. imageText에 {left,right,top,bottom} 객체 또는 이를 반환하는 함수를 지정하면 여러 방향에 동시에 표시한다. 이미지 실패 후에도 텍스트는 유지하며 HTML 문자열은 실행하지 않는다. 기존 이미지·버튼 API와 원시 데이터 복사는 유지한다. 매뉴얼 이미지·텍스트·버튼 예제에서 위치 선택과 동시 배치를 직접 확인할 수 있다. 실제 JS/Vue·난독화 dist 전용각8개와 전체 Chrome/단일 HTML 핵심16·단위25·소스 대조43개가 통과했다.