@nine-lab/nine-mu 0.1.279 → 0.1.280

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.279",
+  "version": "0.1.280",
   "description": "AI-Driven Full-Stack Code Fabrication Engine",
   "type": "module",
   "main": "./dist/nine-mu.umd.js",

package/src/components/NineDiffPopup.js

@@ -4,8 +4,8 @@ import '@nine-lab/nine-util';
 
 export class NineDiffPopup extends HTMLElement {
     #dialog = null;
-    #diffView = null; // Container 대신 직접 에디터 뷰를 참조
-    #asisBackup = "";
+    #tabContainer = null;
+    #filesMap = new Map(); // 각 탭(파일)별 원본 및 에디터 뷰 인스턴스, 메타데이터 관리를 위한 맵
     #host;
 
     constructor() {
@@ -14,107 +14,167 @@ export class NineDiffPopup extends HTMLElement {
     }
 
     connectedCallback() {
-
         this.#host = this.getRootNode().host;
-
-        //console.log("찾은 호스트:", this.#host);
-
-        this.#render();
+        this.#renderScaffolding();
     }
 
-    #render() {
+    /**
+     * 💡 기본 다이얼로그 및 레이아웃 스케폴딩 렌더링
+     */
+    #renderScaffolding() {
         const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
+        const appVersion = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : 'latest';
 
         this.shadowRoot.innerHTML = `
-           	<style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${__APP_VERSION__}/dist/css/nine-mu.css";
+            <style>
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${appVersion}/dist/css/nine-mu.css";
                 ${customImport}
+                
+                .main-layout {
+                    display: flex;
+                    flex-direction: column;
+                    height: 80vh;
+                    width: 85vw;
+                    min-width: 800px;
+                }
+                .tab-area {
+                    flex: 1;
+                    overflow: hidden;
+                    display: flex;
+                    flex-direction: column;
+                }
+                nine-tab {
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    height: 100%;
+                }
+                .diff-wrapper {
+                    height: calc(80vh - 120px); /* 푸터와 탭 헤더 높이를 제외한 에디터 영역 확보 */
+                    width: 100%;
+                }
+                .footer {
+                    display: flex;
+                    justify-content: flex-end;
+                    gap: 10px;
+                    padding: 15px 0 0 0;
+                    border-top: 1px solid #e5e7eb;
+                }
             </style>
             
             <nine-dialog>
                 <div class="main-layout">
-                    <div class="diff-area">
-                        <nine-diff></nine-diff>
+                    <div class="tab-area">
+                        <nine-tab theme="theme-3"></nine-tab>
                     </div>
                     <div class="footer">
                         <button class="btn btn-cancel">취소</button>
-                        <button class="btn btn-confirm">저장</button>
+                        <button class="btn btn-confirm">모두 저장</button>
                     </div>
                 </div>
             </nine-dialog>
         `;
 
         this.#dialog = this.shadowRoot.querySelector('nine-dialog');
-        this.#diffView = this.shadowRoot.querySelector('nine-diff');
+        this.#tabContainer = this.shadowRoot.querySelector('nine-tab');
 
-        this.shadowRoot.querySelector('.btn-confirm').onclick = () => this.#handleConfirm();
+        this.shadowRoot.querySelector('.btn-confirm').onclick = () => this.#handleConfirmAll();
         this.shadowRoot.querySelector('.btn-cancel').onclick = () => this.#handleCancel();
     }
 
     popup() {
-        // 초기화
         this.#dialog.showModal();
-
         return this;
     }
 
     /**
-     * @param {string|object} asis - 소스 텍스트 또는 url:/file: 경로
-     * @param {string|object} tobe - 소스 텍스트 또는 url:/file: 경로
-     * @param {string} lang - 언어 설정
+     * 💡 [핵심 고도화] 여러 파일 리스트를 받아 동적으로 탭을 생성하고 데이터를 주입하는 함수
+     * @param {Array} fileList - [{ layer: "MyBatis", full_path: "...", asis_source: "...", source: "..." }]
      */
-    async data(asis, tobe, lang = "javascript") {
-        // 1. 데이터를 읽어오는 공통 로직 (내부 헬퍼)
-        const loadSource = async (src) => {
-            if (typeof src === 'string' && (src.startsWith('url:') || src.startsWith('file:'))) {
-                const targetUrl = src.replace(/^(url:|file:)/, '');
-                try {
-                    trace.log(`📡 리모트 로드: ${targetUrl}`);
-                    const res = await fetch(targetUrl);
-                    if (!res.ok) throw new Error(`Status: ${res.status}`);
-                    return await res.text();
-                } catch (e) {
-                    trace.error(`로드 실패 [${targetUrl}]:`, e);
-                    return `// 로드 실패: ${targetUrl}\n${e.message}`;
-                }
-            }
-            return src;
+    async data(fileList) {
+        if (!Array.isArray(fileList) || fileList.length === 0) return this;
+
+        // 기존에 빌드된 탭이 있다면 초기화
+        this.#tabContainer.innerHTML = "";
+        this.#filesMap.clear();
+
+        // 확장자 기반 주석/언어(Language) 유추 헬퍼
+        const detectLanguage = (path) => {
+            const lower = (path || "").toLowerCase();
+            if (lower.endsWith('.xml')) return 'xml';
+            if (lower.endsWith('.java')) return 'java';
+            if (lower.endsWith('.json')) return 'json';
+            return 'javascript';
         };
 
-        // 2. asis, tobe 둘 다 비동기로 병렬 로드
-        const [finalAsis, finalTobe] = await Promise.all([
-            loadSource(asis),
-            loadSource(tobe)
-        ]);
-
-        this.#asisBackup = finalAsis;
-
-        // 3. 에디터 준비 시 데이터 주입
-        this.#diffView.addEventListener('ready', () => {
-            const asisStr = typeof finalAsis === 'object' ? JSON.stringify(finalAsis, null, 2) : finalAsis;
-            const tobeStr = typeof finalTobe === 'object' ? JSON.stringify(finalTobe, null, 2) : finalTobe;
+        // 각 파일별로 nine-tab-page 및 nine-diff 엘리먼트 동적 빌드
+        fileList.forEach((file, index) => {
+            const { layer, full_path, asis_source, source } = file;
+            const lang = detectLanguage(full_path);
+            const caption = `${layer} (${full_path.split('/').pop()})`; // 탭 캡션 명세 (레이어명 + 파일명)
+
+            // 1. 탭 페이지 템플릿 마크업 생성
+            const tabPage = document.createElement('nine-tab-page');
+            tabPage.setAttribute('caption', caption);
+
+            const diffWrapper = document.createElement('div');
+            diffWrapper.className = 'diff-wrapper';
+
+            const diffView = document.createElement('nine-diff');
+            diffWrapper.appendChild(diffView);
+            tabPage.appendChild(diffWrapper);
+            this.#tabContainer.appendChild(tabPage);
+
+            // 2. 파일별 변경 상태 관리를 위해 맵(Map)에 정보 보존
+            const fileKey = `file_tab_${index}`;
+            this.#filesMap.set(fileKey, {
+                layer,
+                fullPath: full_path,
+                asisSource: asis_source,
+                diffView: diffView
+            });
 
-            this.#diffView.initialize(asisStr, tobeStr, lang);
-        }, { once: true });
+            // 3. 각 Web Component 에디터가 준비 완료(ready)되면 순수 소스 매핑 및 초기화
+            diffView.addEventListener('ready', () => {
+                diffView.initialize(asis_source || "", source || "", lang);
+            }, { once: true });
+        });
 
         return this;
     }
 
+    /**
+     * 💡 [일괄 처리 갱신] 오픈된 모든 탭의 수정한 수정본 코드를 취합하여 백엔드로 API 일괄 전송
+     */
+    async #handleConfirmAll() {
+        const payloadList = [];
+
+        // 맵을 순회하며 변경 완료된 오른쪽 창(tobe)의 소스코드를 추출
+        for (const [key, fileObj] of this.#filesMap.entries()) {
+            const { diffView, fullPath, asisSource, layer } = fileObj;
 
-    #handleConfirm() {
-        // 에디터에서 직접 콘텐츠 추출
-        const content = this.#diffView ? this.#diffView.getContents() : this.#asisBackup;
+            // 사용자가 수정한 최종 TO-BE 코드를 추출 (에디터가 없거나 로드 전이면 원본 유지)
+            const currentContent = diffView ? diffView.getContents() : asisSource;
 
-        const params = {
-            packageName: this.#host.getAttribute('package-name'),
-            contents: content,
+            payloadList.push({
+                layer,
+                fullPath: fullPath,
+                packageName: this.#host?.getAttribute('package-name') || "com.ninelab.ai",
+                contents: currentContent
+            });
         }
 
-        api.post(`/nine-mu/source/generateJsonFile`, params).then(res => {
-            nine.alert("소스를 변경하였습니다.").then(res => {
-                this.#dialog.close();
-            });
-        });
+        try {
+            // 변경 사항을 일괄 전송하는 백엔드 규격 API 호출
+            // (컨트롤러 측 구조에 맞춰 묶음 발송 처리 하거나 루프를 활용하세요)
+            await api.post(`/nine-mu/source/generateJsonFileBatch`, { fileList: payloadList });
+
+            await nine.alert("요청하신 모든 파일의 소스 변경 사항이 성공적으로 반영되었습니다.");
+            this.#dialog.close();
+        } catch (error) {
+            trace.error("일괄 파일 저장 처리 중 실패:", error);
+            nine.alert("소스 저장 중 오류가 발생했습니다.");
+        }
     }
 
     #handleCancel() {

package/src/components/NineDiffPopup_BAK.js

@@ -0,0 +1,125 @@
+import { trace } from '@nopeer';
+import { api, nine } from '@nine-lab/nine-util';
+import '@nine-lab/nine-util';
+
+export class NineDiffPopup extends HTMLElement {
+    #dialog = null;
+    #diffView = null; // Container 대신 직접 에디터 뷰를 참조
+    #asisBackup = "";
+    #host;
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+
+        this.#host = this.getRootNode().host;
+
+        //console.log("찾은 호스트:", this.#host);
+
+        this.#render();
+    }
+
+    #render() {
+        const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
+
+        this.shadowRoot.innerHTML = `
+           	<style>
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${__APP_VERSION__}/dist/css/nine-mu.css";
+                ${customImport}
+            </style>
+            
+            <nine-dialog>
+                <div class="main-layout">
+                    <div class="diff-area">
+                        <nine-diff></nine-diff>
+                    </div>
+                    <div class="footer">
+                        <button class="btn btn-cancel">취소</button>
+                        <button class="btn btn-confirm">저장</button>
+                    </div>
+                </div>
+            </nine-dialog>
+        `;
+
+        this.#dialog = this.shadowRoot.querySelector('nine-dialog');
+        this.#diffView = this.shadowRoot.querySelector('nine-diff');
+
+        this.shadowRoot.querySelector('.btn-confirm').onclick = () => this.#handleConfirm();
+        this.shadowRoot.querySelector('.btn-cancel').onclick = () => this.#handleCancel();
+    }
+
+    popup() {
+        // 초기화
+        this.#dialog.showModal();
+
+        return this;
+    }
+
+    /**
+     * @param {string|object} asis - 소스 텍스트 또는 url:/file: 경로
+     * @param {string|object} tobe - 소스 텍스트 또는 url:/file: 경로
+     * @param {string} lang - 언어 설정
+     */
+    async data(asis, tobe, lang = "javascript") {
+        // 1. 데이터를 읽어오는 공통 로직 (내부 헬퍼)
+        const loadSource = async (src) => {
+            if (typeof src === 'string' && (src.startsWith('url:') || src.startsWith('file:'))) {
+                const targetUrl = src.replace(/^(url:|file:)/, '');
+                try {
+                    trace.log(`📡 리모트 로드: ${targetUrl}`);
+                    const res = await fetch(targetUrl);
+                    if (!res.ok) throw new Error(`Status: ${res.status}`);
+                    return await res.text();
+                } catch (e) {
+                    trace.error(`로드 실패 [${targetUrl}]:`, e);
+                    return `// 로드 실패: ${targetUrl}\n${e.message}`;
+                }
+            }
+            return src;
+        };
+
+        // 2. asis, tobe 둘 다 비동기로 병렬 로드
+        const [finalAsis, finalTobe] = await Promise.all([
+            loadSource(asis),
+            loadSource(tobe)
+        ]);
+
+        this.#asisBackup = finalAsis;
+
+        // 3. 에디터 준비 시 데이터 주입
+        this.#diffView.addEventListener('ready', () => {
+            const asisStr = typeof finalAsis === 'object' ? JSON.stringify(finalAsis, null, 2) : finalAsis;
+            const tobeStr = typeof finalTobe === 'object' ? JSON.stringify(finalTobe, null, 2) : finalTobe;
+
+            this.#diffView.initialize(asisStr, tobeStr, lang);
+        }, { once: true });
+
+        return this;
+    }
+
+
+    #handleConfirm() {
+        // 에디터에서 직접 콘텐츠 추출
+        const content = this.#diffView ? this.#diffView.getContents() : this.#asisBackup;
+
+        const params = {
+            packageName: this.#host.getAttribute('package-name'),
+            contents: content,
+        }
+
+        api.post(`/nine-mu/source/generateJsonFile`, params).then(res => {
+            nine.alert("소스를 변경하였습니다.").then(res => {
+                this.#dialog.close();
+            });
+        });
+    }
+
+    #handleCancel() {
+        this.#dialog.close();
+    }
+}
+
+customElements.define("nine-diff-popup", NineDiffPopup);

package/src/components/NotificationHandler.js

@@ -46,14 +46,14 @@ export class NotificationHandler {
         switch (logger) {
             case "generate-source-brain":
                 if (data && data.source) {
-                    trace.log(`[시그널 감지] 설계 완료`, data);
+                    //trace.log(`[시그널 감지] 설계 완료`, data);
                     this.#generateSource(data);
                 }
                 break;
 
             case "modify-source-brain":
                 if (data && data.source) {
-                    trace.log(`[시그널 감지] 설계 완료`, data);
+                    //trace.log(`[시그널 감지] 설계 완료`, data);
                     this.#modifySource(data);
                 }
                 break;
@@ -62,7 +62,7 @@ export class NotificationHandler {
     }
 
     #modifySource = async (data) => {
-        console.log(data.source);
+        console.log(data);
     };
 
     /**
@@ -83,9 +83,5 @@ export class NotificationHandler {
         });
 
         trace.log(res)
-
-
-        // TODO: 추후 다른 거 개발 완료 시, 여기에 실제 로컬 물리 파일 라이터 서비스 연결
-        // Example: FileWritableService.write(sourceData.path, sourceData.file_name, sourceData.source);
     }
 }