ide-assi 0.493.0 → 0.495.0

package/dist/bundle.cjs.js

@@ -121079,7 +121079,29 @@ class nxTab extends HTMLElement {
     }
 
     initialize = () => {
+        this.shadowRoot.querySelectorAll(".tab-button").forEach((el, i) => {
+           el.classList.remove("active");
+        });
+
+        const activeButton = this.shadowRoot.querySelector('.tab-button:not([style*="display: none"])');
+        console.log(activeButton);
+        console.log(activeButton.getAttribute('data-target'), activeButton.data);
+        //const tabPage = this.shadowRoot.querySelector(`#${activeButton.data}`);
+
+        if (activeButton) {
+            activeButton.click(); // 자동으로 탭 전환
+        }
 
+        /**
+        const activeTab = this.shadowRoot.querySelector('.tab-button.active');
+
+        // 현재 탭이 숨겨졌다면 첫 번째 visible 탭으로 이동
+        if (activeTab && activeTab.style.display === 'none') {
+            const nextVisibleTab = this.shadowRoot.querySelector('.tab-button:not([style*="display: none"])');
+            if (nextVisibleTab) {
+                nextVisibleTab.click(); // 자동으로 탭 전환
+            }
+        }*/
     }
 
     #renderTabs() {
@@ -121087,7 +121109,6 @@ class nxTab extends HTMLElement {
         const contents = this.shadowRoot.querySelector('.tab-pages');
         const tabItems = this.querySelectorAll('nx-tab-page');
 
-        /**
         tabItems.forEach((item, index) => {
             const tab = document.createElement('div');
             tab.classList.add('tab-button');
@@ -121100,20 +121121,6 @@ class nxTab extends HTMLElement {
             content.classList.add('tab-page');
             content.innerHTML = item.innerHTML;
             contents.appendChild(content);
-        }); */
-
-        tabItems.forEach((item, index) => {
-            const tab = document.createElement('div');
-            tab.classList.add('tab-button');
-            tab.textContent = item.getAttribute('caption');
-            tab.setAttribute('data-target', `content${index}`);
-            tabs.appendChild(tab);
-
-            const content = document.createElement('nx-tab-page');
-            content.id = `content${index}`;
-            content.classList.add('tab-page');
-            content.innerHTML = item.innerHTML;
-            contents.appendChild(content);
         });
 
         tabItems.forEach((item) => {
@@ -202617,6 +202624,351 @@ class IdeAssi extends HTMLElement
 		//this.shadowRoot.querySelector('ide-diff-popup').remove();
 
 		this.shadowRoot.appendChild(document.createElement('ide-diff-popup'));
+
+		//setTimeout(() => {
+		let src1 = `
+import React, { useRef, useEffect } from "react" adfa;
+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 = () => {
+    if (!gridRef.current) return;
+    gridRef.current.classList.add("loading");
+
+    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;
+		`;
+
+		let 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 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 = () => {
+    if (!gridRef.current) return;
+    gridRef.current.classList.add("loading");
+
+    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="120" />
+                <col width="100" />
+                <col width="200" />
+                <col width="100" />
+                <col width="150" />
+                <col width="150" />
+              </colgroup>
+              <thead>
+                <tr>
+                  <th>No.</th>
+                  <th>문서ID</th>
+                  <th>매출액</th>
+                  <th>최종수정자</th>
+                  <th>문서명</th>
+                  <th>최초등록자</th>
+                  <th>최초등록일</th>
+                  <th>최종수정일</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th><ng-row-indicator /></th>
+                  <td data-bind="docId" text-align="center"></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="updateUser" text-align="center"></td>
+                  <td data-bind="docNm" text-align="left"></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;
+		`;
 /**
 		src1 = `
 <tr>
@@ -202642,63 +202994,14 @@ class IdeAssi extends HTMLElement
 	<th>최종수정일</th>
 </tr>
 `; */
-
-		//this.shadowRoot.querySelector("ide-diff-popup").popup(src1, src2);
-
-		//return;
-
-
-
-
-
-		const apply = {
-			mybatis: this.shadowRoot.querySelector("#mybatis").checked,
-			service: this.shadowRoot.querySelector("#service").checked,
-			controller: this.shadowRoot.querySelector("#controller").checked,
-			javascript: this.shadowRoot.querySelector("#javascript").checked,
-		};
-
-		if (!apply.mybatis && !apply.service && !apply.controller && !apply.javascript) return;
-
-		const userPrompt = e.target.value.trim();
-		if (!userPrompt) return;
-
-		if (this.#ing) return;
-		this.#ing = true;
-
-		/**
-		 * 옵션저장
-		 */
-		this.#saveLocalSettings(apply);
-
-
-
-		/**
-		 * setTimeout 없으면, 맥에서 한글 잔상이 남음
-		 * setTimeout 내에서 e.target이 nx-ai-container가 된다.
-		 */
-		setTimeout(() => {
-			this.shadowRoot.querySelector("textarea").value = "";
-		});
-
-		const elAiChat = this.shadowRoot.querySelector("nx-ai-chat");
-
-
-		elAiChat.add("me", userPrompt);
-		elAiChat.add("ing", "...");
-
-
-		try {
-			const changedSource = await this.#ai.generateSourceClient(userPrompt, apply);
-			if (changedSource) {
-				this.shadowRoot.querySelector("ide-diff-popup").popup(changedSource);
+		this.shadowRoot.querySelector("ide-diff-popup").popup({
+			javascript: {
+				asis: src1,
+				tobe: src2
 			}
-		} catch (error) {
-			console.error(error);
-			elAiChat.add("ai", String(error).replace("Error:", ""));
-		}
+		});
 
-		this.#ing = false;
+		return;
 	}
 
 	#toggleCollapseHandler = () => {
@@ -202917,6 +203220,7 @@ class IdeDiffPopup extends HTMLElement
 		const tab = this.shadowRoot.querySelector('nx-tab');
 
 		setTimeout(() => {
+
 			for (const item of changedSource) {
 				const [type, diffData] = Object.entries(item)[0]; // 예: type = "mybatis", diffData = { asis, tobe }
 				const diff = ninegrid.querySelector(`ide-diff.${type}`, this.shadowRoot);
@@ -202929,6 +203233,8 @@ class IdeDiffPopup extends HTMLElement
 				);
 			}
 
+			tab.tabpage.showAll();
+
 			const types = changedSource.map(item => Object.keys(item)[0]);
 			ninegrid.querySelectorAll("ide-diff", this.shadowRoot).forEach(el => {
 				const type = el.className.trim();
@@ -202938,6 +203244,8 @@ class IdeDiffPopup extends HTMLElement
 			});
 			//this.shadowRoot.querySelector('nx-tab').tabpage.hide("mybatis");
 
+			tab.initialize();
+
 			this.shadowRoot.querySelector('nx-dialog')?.showModal();
 		}, 100);
 	};

package/dist/bundle.esm.js

@@ -121075,7 +121075,29 @@ class nxTab extends HTMLElement {
     }
 
     initialize = () => {
+        this.shadowRoot.querySelectorAll(".tab-button").forEach((el, i) => {
+           el.classList.remove("active");
+        });
+
+        const activeButton = this.shadowRoot.querySelector('.tab-button:not([style*="display: none"])');
+        console.log(activeButton);
+        console.log(activeButton.getAttribute('data-target'), activeButton.data);
+        //const tabPage = this.shadowRoot.querySelector(`#${activeButton.data}`);
+
+        if (activeButton) {
+            activeButton.click(); // 자동으로 탭 전환
+        }
 
+        /**
+        const activeTab = this.shadowRoot.querySelector('.tab-button.active');
+
+        // 현재 탭이 숨겨졌다면 첫 번째 visible 탭으로 이동
+        if (activeTab && activeTab.style.display === 'none') {
+            const nextVisibleTab = this.shadowRoot.querySelector('.tab-button:not([style*="display: none"])');
+            if (nextVisibleTab) {
+                nextVisibleTab.click(); // 자동으로 탭 전환
+            }
+        }*/
     }
 
     #renderTabs() {
@@ -121083,7 +121105,6 @@ class nxTab extends HTMLElement {
         const contents = this.shadowRoot.querySelector('.tab-pages');
         const tabItems = this.querySelectorAll('nx-tab-page');
 
-        /**
         tabItems.forEach((item, index) => {
             const tab = document.createElement('div');
             tab.classList.add('tab-button');
@@ -121096,20 +121117,6 @@ class nxTab extends HTMLElement {
             content.classList.add('tab-page');
             content.innerHTML = item.innerHTML;
             contents.appendChild(content);
-        }); */
-
-        tabItems.forEach((item, index) => {
-            const tab = document.createElement('div');
-            tab.classList.add('tab-button');
-            tab.textContent = item.getAttribute('caption');
-            tab.setAttribute('data-target', `content${index}`);
-            tabs.appendChild(tab);
-
-            const content = document.createElement('nx-tab-page');
-            content.id = `content${index}`;
-            content.classList.add('tab-page');
-            content.innerHTML = item.innerHTML;
-            contents.appendChild(content);
         });
 
         tabItems.forEach((item) => {
@@ -202613,6 +202620,351 @@ class IdeAssi extends HTMLElement
 		//this.shadowRoot.querySelector('ide-diff-popup').remove();
 
 		this.shadowRoot.appendChild(document.createElement('ide-diff-popup'));
+
+		//setTimeout(() => {
+		let src1 = `
+import React, { useRef, useEffect } from "react" adfa;
+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 = () => {
+    if (!gridRef.current) return;
+    gridRef.current.classList.add("loading");
+
+    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;
+		`;
+
+		let 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 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 = () => {
+    if (!gridRef.current) return;
+    gridRef.current.classList.add("loading");
+
+    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="120" />
+                <col width="100" />
+                <col width="200" />
+                <col width="100" />
+                <col width="150" />
+                <col width="150" />
+              </colgroup>
+              <thead>
+                <tr>
+                  <th>No.</th>
+                  <th>문서ID</th>
+                  <th>매출액</th>
+                  <th>최종수정자</th>
+                  <th>문서명</th>
+                  <th>최초등록자</th>
+                  <th>최초등록일</th>
+                  <th>최종수정일</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th><ng-row-indicator /></th>
+                  <td data-bind="docId" text-align="center"></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="updateUser" text-align="center"></td>
+                  <td data-bind="docNm" text-align="left"></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;
+		`;
 /**
 		src1 = `
 <tr>
@@ -202638,63 +202990,14 @@ class IdeAssi extends HTMLElement
 	<th>최종수정일</th>
 </tr>
 `; */
-
-		//this.shadowRoot.querySelector("ide-diff-popup").popup(src1, src2);
-
-		//return;
-
-
-
-
-
-		const apply = {
-			mybatis: this.shadowRoot.querySelector("#mybatis").checked,
-			service: this.shadowRoot.querySelector("#service").checked,
-			controller: this.shadowRoot.querySelector("#controller").checked,
-			javascript: this.shadowRoot.querySelector("#javascript").checked,
-		};
-
-		if (!apply.mybatis && !apply.service && !apply.controller && !apply.javascript) return;
-
-		const userPrompt = e.target.value.trim();
-		if (!userPrompt) return;
-
-		if (this.#ing) return;
-		this.#ing = true;
-
-		/**
-		 * 옵션저장
-		 */
-		this.#saveLocalSettings(apply);
-
-
-
-		/**
-		 * setTimeout 없으면, 맥에서 한글 잔상이 남음
-		 * setTimeout 내에서 e.target이 nx-ai-container가 된다.
-		 */
-		setTimeout(() => {
-			this.shadowRoot.querySelector("textarea").value = "";
-		});
-
-		const elAiChat = this.shadowRoot.querySelector("nx-ai-chat");
-
-
-		elAiChat.add("me", userPrompt);
-		elAiChat.add("ing", "...");
-
-
-		try {
-			const changedSource = await this.#ai.generateSourceClient(userPrompt, apply);
-			if (changedSource) {
-				this.shadowRoot.querySelector("ide-diff-popup").popup(changedSource);
+		this.shadowRoot.querySelector("ide-diff-popup").popup({
+			javascript: {
+				asis: src1,
+				tobe: src2
 			}
-		} catch (error) {
-			console.error(error);
-			elAiChat.add("ai", String(error).replace("Error:", ""));
-		}
+		});
 
-		this.#ing = false;
+		return;
 	}
 
 	#toggleCollapseHandler = () => {
@@ -202913,6 +203216,7 @@ class IdeDiffPopup extends HTMLElement
 		const tab = this.shadowRoot.querySelector('nx-tab');
 
 		setTimeout(() => {
+
 			for (const item of changedSource) {
 				const [type, diffData] = Object.entries(item)[0]; // 예: type = "mybatis", diffData = { asis, tobe }
 				const diff = ninegrid.querySelector(`ide-diff.${type}`, this.shadowRoot);
@@ -202925,6 +203229,8 @@ class IdeDiffPopup extends HTMLElement
 				);
 			}
 
+			tab.tabpage.showAll();
+
 			const types = changedSource.map(item => Object.keys(item)[0]);
 			ninegrid.querySelectorAll("ide-diff", this.shadowRoot).forEach(el => {
 				const type = el.className.trim();
@@ -202934,6 +203240,8 @@ class IdeDiffPopup extends HTMLElement
 			});
 			//this.shadowRoot.querySelector('nx-tab').tabpage.hide("mybatis");
 
+			tab.initialize();
+
 			this.shadowRoot.querySelector('nx-dialog')?.showModal();
 		}, 100);
 	};

package/dist/components/ideAssi.js

@@ -491,10 +491,14 @@ export default DocManager;
 	<th>최종수정일</th>
 </tr>
 `; */
+		this.shadowRoot.querySelector("ide-diff-popup").popup({
+			javascript: {
+				asis: src1,
+				tobe: src2
+			}
+		});
 
-		//this.shadowRoot.querySelector("ide-diff-popup").popup(src1, src2);
-
-		//return;
+		return;
 
 
 

package/dist/components/ideDiffPopup.js

@@ -41,6 +41,7 @@ class IdeDiffPopup extends HTMLElement
 		const tab = this.shadowRoot.querySelector('nx-tab');
 
 		setTimeout(() => {
+
 			for (const item of changedSource) {
 				const [type, diffData] = Object.entries(item)[0]; // 예: type = "mybatis", diffData = { asis, tobe }
 				const diff = ninegrid.querySelector(`ide-diff.${type}`, this.shadowRoot);
@@ -53,6 +54,8 @@ class IdeDiffPopup extends HTMLElement
 				);
 			}
 
+			tab.tabpage.showAll();
+
 			const types = changedSource.map(item => Object.keys(item)[0]);
 			ninegrid.querySelectorAll("ide-diff", this.shadowRoot).forEach(el => {
 				const type = el.className.trim();
@@ -62,6 +65,8 @@ class IdeDiffPopup extends HTMLElement
 			});
 			//this.shadowRoot.querySelector('nx-tab').tabpage.hide("mybatis");
 
+			tab.initialize();
+
 			this.shadowRoot.querySelector('nx-dialog')?.showModal();
 		}, 100);
 	};

package/package.json

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

package/src/components/ideAssi.js

@@ -491,10 +491,14 @@ export default DocManager;
 	<th>최종수정일</th>
 </tr>
 `; */
+		this.shadowRoot.querySelector("ide-diff-popup").popup({
+			javascript: {
+				asis: src1,
+				tobe: src2
+			}
+		});
 
-		//this.shadowRoot.querySelector("ide-diff-popup").popup(src1, src2);
-
-		//return;
+		return;
 
 
 

package/src/components/ideDiffPopup.js

@@ -41,6 +41,7 @@ class IdeDiffPopup extends HTMLElement
 		const tab = this.shadowRoot.querySelector('nx-tab');
 
 		setTimeout(() => {
+
 			for (const item of changedSource) {
 				const [type, diffData] = Object.entries(item)[0]; // 예: type = "mybatis", diffData = { asis, tobe }
 				const diff = ninegrid.querySelector(`ide-diff.${type}`, this.shadowRoot);
@@ -53,6 +54,8 @@ class IdeDiffPopup extends HTMLElement
 				);
 			}
 
+			tab.tabpage.showAll();
+
 			const types = changedSource.map(item => Object.keys(item)[0]);
 			ninegrid.querySelectorAll("ide-diff", this.shadowRoot).forEach(el => {
 				const type = el.className.trim();
@@ -62,6 +65,8 @@ class IdeDiffPopup extends HTMLElement
 			});
 			//this.shadowRoot.querySelector('nx-tab').tabpage.hide("mybatis");
 
+			tab.initialize();
+
 			this.shadowRoot.querySelector('nx-dialog')?.showModal();
 		}, 100);
 	};