@nine-lab/nine-mu 0.1.14

package/src/components/NineChat.js

@@ -0,0 +1,124 @@
+import { nine, trace } from '@nine-lab/nine-util';
+import { NineMuService } from '../services/NineMuService.js';
+
+export class NineChat extends HTMLElement {
+    #service = null;
+    #routes = [];
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    async connectedCallback() {
+        // 서비스 초기화
+        const connectorUrl = this.getAttribute('connector-url') || 'http://localhost:3002';
+        this.#service = new NineMuService(connectorUrl);
+
+        this.#render();
+        this.#initInteractions(); // UI 토글 로직
+        this.#initActions();      // 엔터 시 실행 로직
+
+        // 경로 데이터 로드
+        this.#routes = await this.#service.fetchRoutes(this.getAttribute('route-url'));
+    }
+
+    // --- [그룹 1: Interaction] 화면 토글 및 메뉴 클릭 ---
+    #initInteractions() {
+        const $settings = this.shadowRoot.querySelector('nine-ai-settings');
+        const $menuIcons = this.shadowRoot.querySelectorAll(".menu-icon");
+
+        const toggleUI = () => this.classList.toggle("collapse");
+        this.shadowRoot.querySelector(".expand-icon").addEventListener("click", toggleUI);
+        this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", toggleUI);
+
+        $menuIcons.forEach(el => {
+            el.addEventListener("click", (e) => {
+                $menuIcons.forEach(icon => icon.classList.remove("active"));
+                const clicked = e.target.closest(".menu-icon");
+                clicked.classList.add("active");
+                $settings.classList.toggle("expand", clicked.classList.contains('menu-setting'));
+            });
+        });
+    }
+
+    // --- [그룹 2: Action] 엔터키 입력 시 서비스 호출 ---
+    #initActions() {
+        const $textarea = this.shadowRoot.querySelector('#q');
+        const $status = this.shadowRoot.querySelector('#status-tag');
+
+        $textarea.addEventListener('keypress', async (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                const command = e.target.value.trim();
+                if (!command) return;
+
+                // 1. UI 피드백
+                $status.textContent = "⚙️ 공정 분석 중...";
+                e.target.value = '';
+
+                // 2. 체크된 타겟 수집
+                const targets = Array.from(this.shadowRoot.querySelectorAll('input[name="gen_target"]:checked'))
+                    .map(el => el.value);
+
+                // 3. 분리된 서비스 호출
+                try {
+                    const result = await this.#service.generate(command, targets, this.#routes);
+
+                    // 4. 성공 처리
+                    $status.textContent = "✅ 완료";
+                    nine.alert("소스 생성 성공").rgb();
+                    this.dispatchEvent(new CustomEvent('nine-fab-completed', { detail: result, bubbles: true }));
+                } catch (err) {
+                    // 5. 실패 처리
+                    $status.textContent = "❌ 실패";
+                    nine.alert(err.message).rgb().shake();
+                }
+            }
+        });
+    }
+
+    #render() {
+        const placeholder = this.getAttribute("placeholder") || "나에게 무엇이든 물어봐...";
+        const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-fab@${__APP_VERSION__}/dist/css/nine-fab.css";
+                ${customImport}
+            </style>
+            <div class="wrapper">
+                <nine-ai-settings></nine-ai-settings>
+                <div class="container">
+                    <div class="head">
+                        <div class="logo"><span></span></div>
+                        <div id="status-tag" style="font-size:10px; color:#ff5722; padding:5px;">Fab Engine Ready</div>
+                    </div>
+                    <nx-ai-chat></nx-ai-chat>
+                    <div class="foot">
+                        <div class="apply-src">
+                            ${['MyBatis', 'Service', 'Controller', 'JavaScript'].map(t => `
+                                <div>
+                                    <input type="checkbox" id="${t.toLowerCase()}" name="gen_target" value="${t}" checked />
+                                    <label for="${t.toLowerCase()}">${t}</label>
+                                </div>
+                            `).join('')}
+                        </div>
+                        <textarea id="q" rows="4" placeholder="${placeholder}"></textarea>
+                    </div>
+                </div>
+                <div class="menu">
+                    <div class="collapse-icon"></div>
+                    <div class="menu-icon menu-filter active"></div>
+                    <div class="menu-icon menu-general"></div>
+                    <div class="menu-icon menu-setting"></div>
+                </div>
+            </div>
+            <div class="expand-icon"></div>
+        `;
+    }
+}
+
+if (!customElements.get('nine-chat')) {
+    customElements.define('nine-chat', NineChat);
+}

package/src/index.js

@@ -0,0 +1,17 @@
+import { trace } from '@nine-lab/nine-util';
+import { NineChat } from './components/NineChat.js';
+
+/**
+ * Nine-Fab 엔진 메인 클래스
+ */
+export const NineFab = {
+    version: typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.1.0',
+    init: (config) => {
+        trace.log("🛠️ Nine-Fab Engine initialized", config);
+        // 향후 커넥터 URL 전역 설정이나 인증 토큰 처리 로직 추가 가능
+    }
+};
+
+// 기본 export 및 컴포넌트 export
+export default NineFab;
+export { NineChat };

package/src/services/NineMuService.js

@@ -0,0 +1,55 @@
+import { nine, trace } from '@nine-lab/nine-util';
+
+export class NineMuService {
+    constructor(connectorUrl) {
+        this.connectorUrl = connectorUrl;
+    }
+
+    /**
+     * AI 소스 생성 실행
+     * @param {string} command - 사용자 입력 명령
+     * @param {Array} targets - 체크된 생성 대상 (MyBatis, Service 등)
+     * @param {Array} currentRoutes - 현재 프로젝트 경로 정보
+     */
+    async generate(command, targets, currentRoutes) {
+        try {
+            trace.log(`🚀 Fab 공정 시작: "${command}" [대상: ${targets.join(', ')}]`);
+
+            const response = await fetch(`${this.connectorUrl}/api/fab/generate`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    command,
+                    targets,
+                    projectType: 'spring-react',
+                    currentRoutes
+                })
+            });
+
+            const result = await response.json();
+
+            if (!result.success) {
+                throw new Error(result.error || "소스 생성 중 서버 오류가 발생했습니다.");
+            }
+
+            return result;
+        } catch (error) {
+            trace.error("❌ Fab Service Error:", error);
+            throw error;
+        }
+    }
+
+    /**
+     * 초기 경로 정보 로드
+     */
+    async fetchRoutes(routeUrl) {
+        if (!routeUrl) return [];
+        try {
+            const res = await fetch(routeUrl);
+            return await res.json();
+        } catch (err) {
+            trace.error("Route load fail", err);
+            return [];
+        }
+    }
+}

package/vite.config.js

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import pkg from './package.json';
+
+export default defineConfig({
+  define: {
+    '__APP_VERSION__': JSON.stringify(pkg.version)
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.js'),
+      name: 'NineFab',
+      fileName: (format) => `nine-mu.${format === 'es' ? 'js' : 'umd.js'}`,
+      formats: ['es', 'umd']
+    },
+    rollupOptions: {
+      external: ['@nine-lab/nine-ai', '@nine-lab/nine-util', '@nine-lab/nine-ux'],
+      output: {
+        globals: {
+          '@nine-lab/nine-ai': 'NineAi',
+          '@nine-lab/nine-util': 'NineUtil',
+          '@nine-lab/nine-ux': 'NineUx'
+        }
+      }
+    },
+    minify: 'terser',
+    sourcemap: true,
+    emptyOutDir: true
+  }
+});