ide-assi 0.328.0 → 0.330.0

package/dist/components/ideAssi.js

@@ -120,10 +120,329 @@ export class IdeAssi extends HTMLElement
 
 		//this.shadowRoot.querySelector('ide-diff-popup').remove();
 
-		const a = this.shadowRoot.appendChild(document.createElement('ide-diff-popup'));
-		console.log(a);
+		this.shadowRoot.appendChild(document.createElement('ide-diff-popup'));
+
 		//setTimeout(() => {
-		this.shadowRoot.querySelector("ide-diff-popup").popup("aaa", "bbb");
+		const src1 = `
+		import React, { useRef, useEffect } from "react";
+import { api, ai } from "ide-assi";
+import ninegrid from "ninegrid2";
+
+const DocManager = () => {
+  const tabRef = useRef(null);
+  const gridRef = useRef(null);
+
+  const selectList = async (params) => {
+    if (!gridRef.current) return;
+    gridRef.current.classList.add("loading");
+    api.post(\`/api/tmpl-a/doc-manager/selectList\`, params).then((res) => {
+      gridRef.current.data.source = res.list;
+    });
+  };
+
+  const handleNaturalLanguageSearch = async () => {
+    const searchTextElement = ninegrid.querySelector("#searchText", tabRef.current);
+    const searchText = searchTextElement ? searchTextElement.value : "";
+
+    if (!gridRef.current) return;
+    gridRef.current.classList.add("loading");
+
+    let params = {};
+    if (searchText) {
+      params = {
+        _whereClause: await ai.generateWhereCause(
+          "tmpla/DocManagerMapper.xml",
+          "selectList",
+          searchText,
+          import.meta.env.VITE_GEMINI_API_KEY
+        ),
+      };
+    }
+    selectList(params);
+  };
+
+  const handleClassicSearch = () => {
+    const form2Element = ninegrid.querySelector(".form2", tabRef.current);
+    const params = form2Element ? form2Element.getData() : {};
+    selectList(params);
+  };
+
+  useEffect(() => {
+    selectList({});
+
+    const searchTextElement = ninegrid.querySelector("#searchText", tabRef.current);
+    const searchButton = ninegrid.querySelector(".search", tabRef.current);
+
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && !e.isComposing) {
+        handleNaturalLanguageSearch();
+      }
+    };
+
+    const handleClick = () => {
+      handleClassicSearch();
+    };
+
+    if (searchTextElement) {
+      searchTextElement.addEventListener("keydown", handleKeyDown);
+    }
+    if (searchButton) {
+      searchButton.addEventListener("click", handleClick);
+    }
+
+    return () => {
+      if (searchTextElement) {
+        searchTextElement.removeEventListener("keydown", handleKeyDown);
+      }
+      if (searchButton) {
+        searchButton.removeEventListener("click", handleClick);
+      }
+    };
+  }, []);
+
+  return (
+    <div className="wrapper">
+      <nx-collapse target="nx-tab" className="search-collapse"></nx-collapse>
+      <div className="list-wrapper">
+        <nx-tab theme="theme-3" ref={tabRef}>
+          <nx-tab-page caption="자연어 검색">
+            <nx-form className="form1">
+              <input
+                type="text"
+                id="searchText"
+                name="searchText"
+                placeholder="자연어 검색어를 입력하세요 (ex: 작성자가 홍길동인 데이타를 찾아줘)"
+              />
+            </nx-form>
+          </nx-tab-page>
+          <nx-tab-page caption="클래식 검색">
+            <nx-form className="form2">
+              <label>문서명: <input type="text" name="docNm" /></label>
+              <label>매출액:
+                <input type="number" name="minAmt" placeholder="최소" /> ~
+                <input type="number" name="maxAmt" placeholder="최대" />
+              </label>
+            </nx-form>
+            <button className="search">검색</button>
+          </nx-tab-page>
+        </nx-tab>
+
+        <div className="grid-wrapper">
+          <nine-grid
+            ref={gridRef}
+            caption="문서관리"
+            select-type="row"
+            show-title-bar="true"
+            show-menu-icon="true"
+            show-status-bar="true"
+            enable-fixed-col="true"
+            row-resizable="false"
+            col-movable="true"
+          >
+            <table>
+              <colgroup>
+                <col width="50" fixed="left" background-color="gray" />
+                <col width="100" />
+                <col width="100" />
+                <col width="200" />
+                <col width="120" />
+                <col width="100" />
+                <col width="150" />
+                <col width="150" />
+              </colgroup>
+              <thead>
+                <tr>
+                  <th>No.</th>
+                  <th>최종수정자</th>
+                  <th>문서ID</th>
+                  <th>문서명</th>
+                  <th>매출액</th>
+                  <th>최초등록자</th>
+                  <th>최초등록일</th>
+                  <th>최종수정일</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th><ng-row-indicator /></th>
+                  <td data-bind="updateUser" text-align="center"></td>
+                  <td data-bind="docId" text-align="center"></td>
+                  <td data-bind="docNm" text-align="left"></td>
+                  <td
+                    data-bind="amt"
+                    data-expr="data.amt.toLocaleString()"
+                    text-align="right"
+                    show-icon="true"
+                    icon-type="sphere"
+                    icon-color="data.amt >= 2000 ? 'red' : 'gray'"
+                  ></td>
+                  <td data-bind="insertUser" text-align="center"></td>
+                  <td data-bind="insertDt" text-align="center"></td>
+                  <td data-bind="updateDt" text-align="center"></td>
+                </tr>
+              </tbody>
+            </table>
+          </nine-grid>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DocManager;
+		`;
+
+		const src2 = `
+		import React, { useRef, useEffect } from 'react';
+import { api, ai } from "ide-assi";
+import ninegrid from "ninegrid2";
+
+const DocManager = () => {
+  const tabRef = useRef(null);
+  const gridRef = useRef(null);
+
+  const toCamelCase = (s) => {
+    return s.toLowerCase().replace(/_([a-z])/g, (g) => g[1].toUpperCase());
+  };
+
+  const tableDefinitions = JSON.parse(\`{"list":[{"columns":[{"COLUMN_NAME":"doc_id","COLUMN_ID":1,"COLUMN_COMMENT":"문서ID"},{"COLUMN_NAME":"doc_nm","COLUMN_ID":2,"COLUMN_COMMENT":"문서명"},{"COLUMN_NAME":"amt","COLUMN_ID":3,"COLUMN_COMMENT":"매출액"},{"COLUMN_NAME":"insert_user","COLUMN_ID":4,"COLUMN_COMMENT":"최초등록자"},{"COLUMN_NAME":"insert_dt","COLUMN_ID":5,"COLUMN_COMMENT":"최초등록일"},{"COLUMN_NAME":"update_user","COLUMN_ID":6,"COLUMN_COMMENT":"최종수정자"},{"COLUMN_NAME":"update_dt","COLUMN_ID":7,"COLUMN_COMMENT":"최종수정일"}],"table":"t_doc"},{"columns":[{"COLUMN_NAME":"file_id","COLUMN_ID":1,"COLUMN_COMMENT":""},{"COLUMN_NAME":"doc_id","COLUMN_ID":2,"COLUMN_COMMENT":""},{"COLUMN_NAME":"download_cnt","COLUMN_ID":3,"COLUMN_COMMENT":""},{"COLUMN_NAME":"file_nm","COLUMN_ID":4,"COLUMN_COMMENT":""},{"COLUMN_NAME":"file_size","COLUMN_ID":5,"COLUMN_COMMENT":""},{"COLUMN_NAME":"file_contents","COLUMN_ID":6,"COLUMN_COMMENT":""},{"COLUMN_NAME":"insert_user","COLUMN_ID":7,"COLUMN_COMMENT":""},{"COLUMN_NAME":"insert_dt","COLUMN_ID":8,"COLUMN_COMMENT":""}],"table":"t_doc_file"},{"columns":[{"COLUMN_NAME":"file_id","COLUMN_ID":1,"COLUMN_COMMENT":""},{"COLUMN_NAME":"page","COLUMN_ID":2,"COLUMN_COMMENT":""},{"COLUMN_NAME":"text","COLUMN_ID":3,"COLUMN_COMMENT":""},{"COLUMN_NAME":"image","COLUMN_ID":4,"COLUMN_COMMENT":""},{"COLUMN_NAME":"vector_text","COLUMN_ID":5,"COLUMN_COMMENT":""},{"COLUMN_NAME":"vector_image","COLUMN_ID":6,"COLUMN_COMMENT":""}],"table":"t_doc_file_page"}]}\`);
+  const mainTableColumns = tableDefinitions.list[0].columns;
+
+  const selectList = async (formData = {}) => {
+    if (!gridRef.current) return;
+
+    gridRef.current.classList.add("loading");
+    /**
+    const form1Data = ninegrid.querySelector(".form1", tabRef.current).getData();
+    const form2Data = ninegrid.querySelector(".form2", tabRef.current).getData();
+    const formData = { ...form1Data, ...form2Data };
+
+    const formData1 = {
+      "_whereClause": await getWhere(),
+    }
+    console.log(formData1);
+        */
+
+    console.log(formData);
+
+    api.post(\`/api/tmpl-a/doc-manager/selectList\`, formData).then((res) => {
+      gridRef.current.data.source = res.list;
+    });
+  };
+
+  const getWhere = async () => {
+   return await ai.generateWhereCause("tmpla/DocManagerMapper.xml", "selectList", ninegrid.querySelector("#searchText", tabRef.current).value, import.meta.env.VITE_GEMINI_API_KEY);
+  };
+
+  useEffect(() => {
+    selectList();
+
+    const searchTextInput = ninegrid.querySelector("#searchText", tabRef.current);
+    const searchButton = ninegrid.querySelector(".search", tabRef.current);
+
+    const handleSearchTextKeydown = (e) => {
+      if (e.key === 'Enter' && !e.isComposing) {
+
+        //getWhere();
+        getWhere().then(res => {
+          selectList({"_whereClause":res});
+        });
+      }
+    };
+
+    const handleSearchButtonClick = () => {
+      selectList(ninegrid.querySelector(".form2", tabRef.current).getData());
+    };
+
+    if (searchTextInput) {
+      searchTextInput.addEventListener('keydown', handleSearchTextKeydown);
+    }
+    if (searchButton) {
+      searchButton.addEventListener('click', handleSearchButtonClick);
+    }
+
+    return () => {
+      if (searchTextInput) {
+        searchTextInput.removeEventListener('keydown', handleSearchTextKeydown);
+      }
+      if (searchButton) {
+        searchButton.removeEventListener('click', handleSearchButtonClick);
+      }
+    };
+  }, []);
+
+  return (
+    <div className="wrapper">
+      <nx-collapse target="nx-tab" className="search-collapse"></nx-collapse>
+      <div className="list-wrapper">
+        <nx-tab theme="theme-3" ref={tabRef}>
+          <nx-tab-page caption="자연어 검색">
+            <nx-form className="form1">
+              <input type="text" id="searchText" name="searchText"
+                     placeholder="자연어 검색어를 입력하세요 (ex: 작성자가 홍길동인 데이타를 찾아줘)"/>
+            </nx-form>
+          </nx-tab-page>
+          <nx-tab-page caption="클래식 검색">
+            <nx-form className="form2">
+              <label>문서ID: <input type="text" name="docId"/></label>
+              <label>문서명: <input type="text" name="docNm"/></label>
+              <label>매출액: <input type="number" name="amt"/></label>
+              <label>최초등록자: <input type="text" name="insertUser"/></label>
+              <label>최초등록일: <input type="text" name="insertDt"/></label>
+              <label>최종수정자: <input type="text" name="updateUser"/></label>
+              <label>최종수정일: <input type="text" name="updateDt"/></label>
+            </nx-form>
+            <button className="search">검색</button>
+          </nx-tab-page>
+        </nx-tab>
+
+        <div className="grid-wrapper">
+          <nine-grid
+             ref={gridRef}
+             caption="문서관리"
+             select-type="row"
+             show-title-bar="true"
+             show-menu-icon="true"
+             show-status-bar="true"
+             enable-fixed-col="true"
+             row-resizable="false"
+             col-movable="true"
+           >
+            <table>
+              <colgroup>
+                <col width="50" fixed="left" background-color="gray"/>
+                {mainTableColumns.map((col) => (
+                  <col key={col.COLUMN_ID} width="150"/>
+                ))}
+              </colgroup>
+              <thead>
+                <tr>
+                  <th>No.</th>
+                  {mainTableColumns.map((col) => (
+                    <th key={col.COLUMN_ID}>{col.COLUMN_COMMENT || col.COLUMN_NAME}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th><ng-row-indicator/></th>
+                  {mainTableColumns.map((col) => (
+                    <td key={col.COLUMN_ID} data-bind={toCamelCase(col.COLUMN_NAME)}></td>
+                  ))}
+                </tr>
+              </tbody>
+            </table>
+          </nine-grid>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DocManager;
+		`;
+
+		this.shadowRoot.querySelector("ide-diff-popup").popup(src1, src2);
 
 		return;
 

package/dist/components/ideDiff.js

@@ -1,31 +1,63 @@
 import ninegrid from "ninegrid2";
-//import { IdeAi } from "./ideAi.js";
 import {diff_match_patch} from 'diff-match-patch';
 
 export class IdeDiff extends HTMLElement
 {
 	#asisSrc;
 	#tobeSrc;
+	#asisPre; // <pre> 요소 참조 저장
+	#tobePre; // <pre> 요소 참조 저장
 
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
 	}
-	
-	connectedCallback() {
 
+	connectedCallback() {
 		this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
-				${ninegrid.getCustomPath(this,"ideDiff.css")}
-			</style>
-
-			<div class="wrapper">
-				<div class="panel asis"><pre></pre></div>
-				<nx-splitter></nx-splitter>
-				<div class="panel tobe"><pre></pre></div>
-			</div>
-		`;
+          <style>
+             /* 전역 또는 컴포넌트 스코프에서 box-sizing: border-box; 적용 권장 */
+             * {
+                box-sizing: border-box;
+             }
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
+             ${ninegrid.getCustomPath(this,"ideDiff.css")}
+
+             /* 추가 CSS (필요 시) */
+             .wrapper {
+                 display: flex; /* 스플리터와 함께 작동하도록 flex 컨테이너 */
+                 height: 100%; /* 부모의 높이를 채우도록 설정 */
+                 overflow: hidden; /* 내부 스크롤을 위해 overflow 처리 */
+             }
+             .panel {
+                 flex: 1; /* 패널들이 남은 공간을 채우도록 */
+                 overflow: auto; /* 각 패널 내부에서 스크롤 가능하게 */
+                 position: relative; /* 자식 요소의 absolute 포지셔닝 기준 */
+             }
+             .panel pre {
+                 margin: 0; /* pre 태그의 기본 마진 제거 */
+                 padding: 10px; /* 코드 가독성을 위한 내부 패딩 */
+                 white-space: pre-wrap; /* 긴 줄 자동 줄바꿈 */
+                 word-break: break-all; /* 단어가 길어도 강제 줄바꿈 */
+                 /* white-space: pre-wrap; 을 사용하면 가로 스크롤 없이 줄바꿈됩니다.
+                    만약 가로 스크롤을 원하면 white-space: pre; 로 두고 overflow-x: auto; 를 panel에 추가 */
+             }
+             ins {
+                 background-color: #d4edda; /* 삽입된 텍스트 배경색 (예시) */
+                 text-decoration: none; /* 밑줄 제거 (일반적으로) */
+             }
+             del {
+                 background-color: #f8d7da; /* 삭제된 텍스트 배경색 (예시) */
+                 text-decoration: none; /* 취소선 제거 (일반적으로) */
+             }
+          </style>
+
+          <div class="wrapper">
+             <div class="panel asis"><pre></pre></div>
+             <nx-splitter></nx-splitter>
+             <div class="panel tobe"><pre></pre></div>
+          </div>
+       `;
 
 		requestAnimationFrame(() => {
 			this.#init();
@@ -33,38 +65,71 @@ export class IdeDiff extends HTMLElement
 	};
 
 	#init = () => {
+		// 패널 pre 요소에 대한 참조를 저장
+		this.#asisPre = this.shadowRoot.querySelector('.asis pre');
+		this.#tobePre = this.shadowRoot.querySelector('.tobe pre');
+
+		// 스크롤 동기화 이벤트 리스너 추가
+		this.#asisPre.addEventListener('scroll', this.#syncScroll);
+		this.#tobePre.addEventListener('scroll', this.#syncScroll);
+	};
+
+	#syncScroll = (e) => {
+		// 스크롤 이벤트 발생 시 다른 패널의 스크롤 위치를 동기화
+		// `e.target`이 스크롤 이벤트를 발생시킨 요소
+		if (e.target === this.#asisPre) {
+			this.#tobePre.scrollTop = this.#asisPre.scrollTop;
+		} else if (e.target === this.#tobePre) {
+			this.#asisPre.scrollTop = this.#tobePre.scrollTop;
+		}
 	};
 
 	#renderDiff = () => {
 		const dmp = new diff_match_patch();
-		const diffs = dmp.diff_main(this.#asisSrc, this.#tobeSrc);
+		// 공백 문자를 정규화하여 diff 정확도 향상 (선택 사항)
+		const cleanedAsisSrc = this.#asisSrc.replace(/\r\n/g, '\n');
+		const cleanedTobeSrc = this.#tobeSrc.replace(/\r\n/g, '\n');
+
+		const diffs = dmp.diff_main(cleanedAsisSrc, cleanedTobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
 		const asisHtml = [];
 		const tobeHtml = [];
 
 		for (const [op, text] of diffs) {
+			// HTML 이스케이프 처리: <, >, & 등 특수문자 변환
+			const escapedText = text
+				.replace(/&/g, '&amp;')
+				.replace(/</g, '&lt;')
+				.replace(/>/g, '&gt;');
+
 			switch (op) {
 				case diff_match_patch.DIFF_INSERT:
-					tobeHtml.push(`<ins>${text}</ins>`);
+					tobeHtml.push(`<ins>${escapedText}</ins>`);
+					// 삭제된 내용이 없으므로 asis에는 공백을 유지 (줄 맞춤 고려)
+					// 만약 줄 단위로 완벽하게 매칭하려면 여기에 다른 로직 필요
 					break;
 				case diff_match_patch.DIFF_DELETE:
-					asisHtml.push(`<del>${text}</del>`);
+					asisHtml.push(`<del>${escapedText}</del>`);
+					// 추가된 내용이 없으므로 tobe에는 공백을 유지
 					break;
 				case diff_match_patch.DIFF_EQUAL:
-					asisHtml.push(`<span>${text}</span>`);
-					tobeHtml.push(`<span>${text}</span>`);
+					asisHtml.push(`<span>${escapedText}</span>`);
+					tobeHtml.push(`<span>${escapedText}</span>`);
 					break;
 			}
 		}
 
-		this.shadowRoot.querySelector('.asis pre').innerHTML = asisHtml.join('');
-		this.shadowRoot.querySelector('.tobe pre').innerHTML = tobeHtml.join('');
+		// 중요한 부분: `innerHTML` 대신 `textContent`를 사용하면
+		// `diff-match-patch`의 출력에 따라 HTML 태그가 그대로 보이므로,
+		// 여기서는 `innerHTML`을 사용하되, 텍스트는 `escapedText`로 처리하여 XSS 방지.
+		this.#asisPre.innerHTML = asisHtml.join('');
+		this.#tobePre.innerHTML = tobeHtml.join('');
 	};
 
 
 	initialize = (src1, src2) => {
-		console.log(src1, src2);
+		console.log("Initializing IdeDiff with sources:", src1, src2);
 
 		this.#asisSrc = src1;
 		this.#tobeSrc = src2;
@@ -73,4 +138,4 @@ export class IdeDiff extends HTMLElement
 	};
 }
 
-customElements.define("ide-diff", IdeDiff);
+customElements.define("ide-diff", IdeDiff);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ide-assi",
   "type": "module",
-  "version": "0.328.0",
+  "version": "0.330.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {