@fuzionx/framework 0.1.46 → 0.1.47

package/cli/templates/make/app-spa/views/default/spa/src/composables/useFlash.js

@@ -0,0 +1,46 @@
+/**
+ * useFlash — Flash 메시지 상태 관리 composable.
+ *
+ * 성공/에러 메시지를 표시하고 자동으로 사라지게 한다.
+ * SSR의 flash.error / flash.success와 동일한 역할.
+ */
+import { ref } from 'vue';
+
+/** 현재 Flash 메시지 (모듈 레벨 싱글톤) */
+const flash = ref({ type: '', message: '' });
+let _timer = null;
+
+export function useFlash() {
+  /**
+   * 성공 메시지 표시.
+   * @param {string} message
+   * @param {number} duration - 표시 시간 (ms), 기본 3000
+   */
+  function success(message, duration = 3000) {
+    flash.value = { type: 'success', message };
+    _autoClear(duration);
+  }
+
+  /**
+   * 에러 메시지 표시.
+   * @param {string} message
+   * @param {number} duration - 표시 시간 (ms), 기본 5000
+   */
+  function error(message, duration = 5000) {
+    flash.value = { type: 'error', message };
+    _autoClear(duration);
+  }
+
+  /** Flash 메시지 수동 제거 */
+  function clear() {
+    flash.value = { type: '', message: '' };
+    if (_timer) clearTimeout(_timer);
+  }
+
+  function _autoClear(duration) {
+    if (_timer) clearTimeout(_timer);
+    _timer = setTimeout(clear, duration);
+  }
+
+  return { flash, success, error, clear };
+}

package/cli/templates/make/app-spa/views/default/spa/src/composables/useHeartbeat.js

@@ -0,0 +1,45 @@
+/**
+ * useHeartbeat — 세션 연장 heartbeat composable.
+ *
+ * SSR main.html의 setInterval(fxFetch('/api/heartbeat'), 5분) 패턴.
+ * Pinia auth store와 연동하여 401 시 로그아웃.
+ */
+import { onMounted, onUnmounted } from 'vue';
+import { useApi } from './useApi.js';
+import { useAuthStore } from '../stores/auth.js';
+
+/** Heartbeat 간격 (5분) */
+const INTERVAL_MS = 5 * 60 * 1000;
+
+export function useHeartbeat() {
+  let timer = null;
+  const api = useApi();
+  const authStore = useAuthStore();
+
+  function start() {
+    if (!authStore.isAuthenticated) return;
+    timer = setInterval(async () => {
+      try {
+        const res = await api.get('/api/heartbeat');
+        if (res && res.status === 401) {
+          authStore.logout();
+          window.location.href = '/#/login';
+        }
+      } catch {
+        // 네트워크 오류 무시
+      }
+    }, INTERVAL_MS);
+  }
+
+  function stop() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  }
+
+  onMounted(start);
+  onUnmounted(stop);
+
+  return { start, stop };
+}

package/cli/templates/make/app-spa/views/default/spa/src/composables/useLocalStorage.js

@@ -0,0 +1,43 @@
+/**
+ * useLocalStorage — 타입 안전한 localStorage composable.
+ *
+ * ref와 localStorage를 동기화. JSON 직렬화/역직렬화 자동 처리.
+ * @example
+ * const theme = useLocalStorage('fx_theme', 'dark');
+ * theme.value = 'light';  // localStorage + ref 동시 업데이트
+ */
+import { ref, watch } from 'vue';
+
+/**
+ * localStorage와 동기화된 ref 생성.
+ * @param {string} key - localStorage 키
+ * @param {*} defaultValue - 기본값
+ * @returns {import('vue').Ref}
+ */
+export function useLocalStorage(key, defaultValue) {
+  // 초기값 로드
+  let initial = defaultValue;
+  try {
+    const stored = localStorage.getItem(key);
+    if (stored !== null) {
+      initial = JSON.parse(stored);
+    }
+  } catch {
+    // 파싱 실패 시 기본값 사용
+  }
+
+  const data = ref(initial);
+
+  // ref 변경 시 localStorage에 저장
+  watch(data, (val) => {
+    try {
+      if (val === null || val === undefined) {
+        localStorage.removeItem(key);
+      } else {
+        localStorage.setItem(key, JSON.stringify(val));
+      }
+    } catch {}
+  }, { deep: true });
+
+  return data;
+}

package/cli/templates/make/app-spa/views/default/spa/src/composables/useLocale.js

@@ -0,0 +1,79 @@
+/**
+ * useLocale — i18n 다국어 지원 composable.
+ *
+ * fxConfig.translations에서 번역문을 가져오고,
+ * 로케일 전환 시 서버에 알려 쿠키를 설정한다.
+ * locales() 로 서버에서 제공하는 사용 가능한 로케일 목록 조회.
+ */
+import { ref } from 'vue';
+
+/** 현재 로케일 (모듈 레벨 싱글톤) */
+const currentLocale = ref('ko');
+let _translations = {};
+let _availableLocales = [];
+
+/** ISO 639-1 → 표시 이름 매핑 */
+const LOCALE_LABELS = {
+  ko: '한국어',
+  en: 'English',
+  ja: '日本語',
+  zh: '中文',
+  es: 'Español',
+  fr: 'Français',
+  de: 'Deutsch',
+  pt: 'Português',
+  ru: 'Русский',
+  ar: 'العربية',
+  vi: 'Tiếng Việt',
+  th: 'ภาษาไทย',
+  id: 'Bahasa Indonesia',
+};
+
+/**
+ * i18n composable 초기화.
+ * main.js에서 fxConfig 로드 후 호출.
+ * @param {string} locale - 현재 로케일
+ * @param {object} translations - 번역 데이터
+ * @param {string[]} [locales] - 사용 가능한 로케일 목록
+ */
+export function initLocale(locale, translations, locales) {
+  currentLocale.value = locale || 'ko';
+  _translations = translations || {};
+  _availableLocales = locales || [];
+}
+
+export function useLocale() {
+  /**
+   * 번역 키 조회.
+   * @param {string} key - 번역 키 (예: 'home.hero_title_1')
+   * @param {string} fallback - 키가 없을 때 기본값
+   * @returns {string}
+   */
+  function t(key, fallback) {
+    return _translations[key] || fallback || key;
+  }
+
+  /** 로케일 전환 (서버 쿠키 + 페이지 새로고침) */
+  function switchLocale(locale) {
+    currentLocale.value = locale;
+    window.location.href = `?lang=${locale}`;
+  }
+
+  /**
+   * 사용 가능한 로케일 목록 (서버에서 제공).
+   * @returns {{ code: string, label: string }[]}
+   */
+  function locales() {
+    return _availableLocales.map(code => ({
+      code,
+      label: LOCALE_LABELS[code] || code.toUpperCase(),
+    }));
+  }
+
+  return {
+    locale: currentLocale,
+    t,
+    switchLocale,
+    locales,
+  };
+}

package/cli/templates/make/app-spa/views/default/spa/src/composables/useWebSocket.js

@@ -0,0 +1,93 @@
+/**
+ * useWebSocket — WASM FuzionXSocket 래퍼 composable.
+ *
+ * SSR chat.html의 WebSocket 로직을 Vue composable로 캡슐화.
+ * WASM 로드 대기, connect, event listener, send, disconnect 제공.
+ */
+import { ref, onUnmounted, inject } from 'vue';
+
+export function useWebSocket() {
+  /** WebSocket 인스턴스 */
+  const ws = ref(null);
+  /** 연결 상태 */
+  const connected = ref(false);
+  /** 내 세션 ID */
+  const mySessionId = ref(null);
+
+  /**
+   * WebSocket 연결.
+   * @param {string} path - WS 경로 (예: '/ws/chat')
+   * @param {string} masterSecret - ASP master secret
+   * @param {boolean} aspEnabled - ASP 활성화 여부
+   */
+  async function connect(path, masterSecret = '', aspEnabled = false) {
+    const wsProto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const url = `${wsProto}//${location.host}${path}`;
+
+    // WASM 로드 대기
+    if (window._aspReady) await window._aspReady;
+
+    // FuzionXSocket 로드
+    if (!window.FuzionXSocket) {
+      try {
+        const _v = Date.now();
+        const mod = await import(/* @vite-ignore */ `/wasm/fuzionx_client_wasm.js?v=${_v}`);
+        await mod.default({ module_or_path: `/wasm/fuzionx_client_wasm_bg.wasm?v=${_v}` });
+        window.FuzionXSocket = mod.FuzionXSocket;
+      } catch (e) {
+        console.error('[WS] WASM load failed:', e);
+        return;
+      }
+    }
+
+    ws.value = new window.FuzionXSocket(url, masterSecret, aspEnabled);
+    ws.value.on('connect', () => { connected.value = true; });
+    ws.value.on('disconnect', () => { connected.value = false; });
+    ws.value.connect();
+  }
+
+  /**
+   * 이벤트 리스너 등록.
+   * @param {string} event - 이벤트명
+   * @param {Function} handler - 핸들러
+   */
+  function on(event, handler) {
+    if (ws.value) ws.value.on(event, handler);
+  }
+
+  /**
+   * 메시지 전송.
+   * @param {string} type - 메시지 타입
+   * @param {object} data - 메시지 데이터
+   */
+  function send(type, data) {
+    if (ws.value && ws.value.is_connected()) {
+      ws.value.send(type, data);
+    }
+  }
+
+  /** 연결 종료 */
+  function disconnect() {
+    if (ws.value) {
+      ws.value.disconnect();
+      ws.value = null;
+    }
+    connected.value = false;
+    mySessionId.value = null;
+  }
+
+  /** 컴포넌트 언마운트 시 자동 정리 */
+  onUnmounted(() => {
+    disconnect();
+  });
+
+  return {
+    ws,
+    connected,
+    mySessionId,
+    connect,
+    on,
+    send,
+    disconnect,
+  };
+}

package/cli/templates/make/app-spa/views/default/spa/src/main.js

@@ -0,0 +1,106 @@
+/**
+ * main.js — SPA 부트스트랩.
+ *
+ * WASM 초기화, ASP 클라이언트 설정, Pinia 등록,
+ * 인증 상태 확인, i18n 초기화, Vue 앱 마운트.
+ */
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import { createRouter, createWebHashHistory } from 'vue-router';
+import App from './App.vue';
+import { routes } from './router/index.js';
+import { useAuthStore } from './stores/auth.js';
+import { setAspClient, setAspReady, useApi } from './composables/useApi.js';
+import { initLocale } from './composables/useLocale.js';
+import ToastPlugin from './plugins/toast.js';
+import AlertPlugin from './plugins/alert.js';
+import './assets/style.css';
+import './assets/landing.css';
+
+// ── Pinia 생성 ──
+const pinia = createPinia();
+
+// ── 라우터 생성 ──
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+// ── 네비게이션 가드 (인증 상태에 따라 리다이렉트) ──
+router.beforeEach((to) => {
+  const authStore = useAuthStore(pinia);
+  if (to.meta.auth && !authStore.isAuthenticated) {
+    return { name: 'login' };
+  }
+  if (to.meta.guest && authStore.isAuthenticated) {
+    return { name: 'home' };
+  }
+});
+
+// ── 부트스트랩 ──
+async function bootstrap() {
+  const clientSecret = window.__FX_CLIENT_SECRET__;
+  const encPayload = window.__FX__;
+  let masterSecret = '';
+  let fxConfig = {};  
+
+  // WASM 초기화 Promise를 useApi에 등록 (aspFetch가 대기할 수 있도록)
+  const wasmInit = (async () => {
+    const wasmJsUrl = '/wasm/fuzionx_client_wasm.js';
+    const wasmBgUrl = '/wasm/fuzionx_client_wasm_bg.wasm';
+    const wasm = await import(/* @vite-ignore */ wasmJsUrl);
+    await wasm.default({ module_or_path: wasmBgUrl });
+
+    // 복호화용 임시 클라이언트
+    const client = new wasm.FuzionXClient('_init_');
+    const configJson = client.decrypt_custom(clientSecret, encPayload);
+    fxConfig = JSON.parse(configJson);
+
+    masterSecret = fxConfig.asp.masterSecret;    
+
+    // ASP 활성 클라이언트
+    const headerSignal = fxConfig.asp?.headerSignal || 'Ruxy-Enc-Mode';
+    const aspClient = wasm.FuzionXClient.new_with_options(masterSecret, headerSignal);
+    setAspClient(aspClient);
+    console.log('[ASP] WASM client initialized');
+  })();
+
+  setAspReady(wasmInit);
+  // WASM 초기화 Promise를 전역에 노출 (chat에서 사용)
+  window._aspReady = wasmInit;
+
+  try {
+    await wasmInit;
+  } catch (e) {
+    console.error('[FuzionX] WASM init failed:', e);
+  }
+
+  // ── i18n 초기화 ──
+  initLocale(fxConfig.locale || 'ko', fxConfig.translations || {}, fxConfig.locales || []);
+
+  // ── Pinia 스토어 초기화 ──
+  const authStore = useAuthStore(pinia);
+  authStore.restoreFromStorage();
+
+  // ── 인증 상태 확인 (서버 세션 검증) ──
+  try {
+    const api = useApi();
+    const authData = await api.get('/api/auth/check');
+    authStore.setUser(authData?.user || fxConfig.user || null);
+  } catch (e) {
+    console.warn('[FX] auth/check failed:', e);
+    authStore.setUser(fxConfig.user || null);
+  }
+
+  // ── Vue 앱 생성 + 마운트 ──
+  const app = createApp(App);
+  app.use(pinia);
+  app.use(ToastPlugin);
+  app.use(AlertPlugin);
+  app.provide('fxConfig', fxConfig);
+  app.provide('masterSecret', masterSecret);
+  app.use(router);
+  app.mount('#app');
+}
+
+bootstrap();

package/cli/templates/make/app-spa/views/default/spa/src/plugins/alert.js

@@ -0,0 +1,96 @@
+/**
+ * FuzionX Alert Plugin
+ * 
+ * Vue 3 global plugin — import 없이 전역 사용.
+ * 
+ * Options API: this.$alert.show('제목', '내용')
+ * Composition API: const { $alert } = getCurrentInstance().appContext.config.globalProperties
+ * 또는 useAlert() composable 사용.
+ * 
+ * @example
+ * await this.$alert.confirm('삭제', '정말 삭제하시겠습니까?');     // true/false
+ * await this.$alert.show('알림', '처리 완료');                      // void
+ * await this.$alert.confirm('확인', '계속?', { ok: '네', cancel: '아니오' });
+ */
+import { reactive } from 'vue';
+
+/** 알럿 상태 (reactive) */
+export const alertState = reactive({
+  visible: false,
+  title: '',
+  message: '',
+  type: 'info',       // 'info' | 'warning' | 'error' | 'confirm'
+  okText: '확인',
+  cancelText: '취소',
+  showCancel: false,
+  resolve: null,
+});
+
+/**
+ * 알럿 표시 (Promise 반환).
+ * @param {string} title - 제목
+ * @param {string} message - 내용
+ * @param {object} opts - { type, okText, cancelText }
+ * @returns {Promise<boolean>} confirm 모드일 때 true/false
+ */
+function show(title, message, opts = {}) {
+  return new Promise((resolve) => {
+    alertState.title = title || '';
+    alertState.message = message || '';
+    alertState.type = opts.type || 'info';
+    alertState.okText = opts.ok || opts.okText || '확인';
+    alertState.cancelText = opts.cancel || opts.cancelText || '취소';
+    alertState.showCancel = false;
+    alertState.visible = true;
+    alertState.resolve = resolve;
+  });
+}
+
+/**
+ * 확인/취소 다이얼로그.
+ */
+function confirm(title, message, opts = {}) {
+  return new Promise((resolve) => {
+    alertState.title = title || '';
+    alertState.message = message || '';
+    alertState.type = opts.type || 'confirm';
+    alertState.okText = opts.ok || opts.okText || '확인';
+    alertState.cancelText = opts.cancel || opts.cancelText || '취소';
+    alertState.showCancel = true;
+    alertState.visible = true;
+    alertState.resolve = resolve;
+  });
+}
+
+/** 확인 버튼 핸들러 */
+export function handleOk() {
+  alertState.visible = false;
+  alertState.resolve?.(true);
+  alertState.resolve = null;
+}
+
+/** 취소 버튼 핸들러 */
+export function handleCancel() {
+  alertState.visible = false;
+  alertState.resolve?.(false);
+  alertState.resolve = null;
+}
+
+/** 퍼블릭 API */
+export const alert = {
+  show,
+  confirm,
+};
+
+/** Composition API 용 */
+export function useAlert() {
+  return alert;
+}
+
+/** Vue Plugin */
+export default {
+  install(app) {
+    app.config.globalProperties.$alert = alert;
+    app.provide('alert', alert);
+  },
+};

package/cli/templates/make/app-spa/views/default/spa/src/plugins/toast.js

@@ -0,0 +1,79 @@
+/**
+ * FuzionX Toast Plugin
+ * 
+ * Vue 3 global plugin — import 없이 전역 사용.
+ * 
+ * Options API: this.$toast.success('저장됨!')
+ * Composition API: const { $toast } = getCurrentInstance().appContext.config.globalProperties
+ * 또는 useToast() composable 사용.
+ * 
+ * @example
+ * this.$toast.success('성공!');
+ * this.$toast.error('실패!');
+ * this.$toast.info('안내');
+ * this.$toast.warning('주의');
+ * this.$toast.show({ message: '커스텀', type: 'info', duration: 5000 });
+ */
+import { reactive } from 'vue';
+
+/** 토스트 상태 (reactive) */
+export const toastState = reactive({
+  items: [],
+});
+
+let _id = 0;
+
+/**
+ * 토스트 추가.
+ * @param {string|object} opts - 메시지 문자열 또는 { message, type, duration }
+ */
+function show(opts) {
+  const config = typeof opts === 'string' ? { message: opts } : { ...opts };
+  const item = {
+    id: ++_id,
+    message: config.message || '',
+    type: config.type || 'info',
+    duration: config.duration ?? 3000,
+  };
+  toastState.items.push(item);
+
+  if (item.duration > 0) {
+    setTimeout(() => dismiss(item.id), item.duration);
+  }
+  return item.id;
+}
+
+/** 토스트 제거 */
+function dismiss(id) {
+  const idx = toastState.items.findIndex(t => t.id === id);
+  if (idx !== -1) toastState.items.splice(idx, 1);
+}
+
+/** 전체 제거 */
+function clear() {
+  toastState.items.splice(0);
+}
+
+/** 퍼블릭 API */
+export const toast = {
+  show,
+  dismiss,
+  clear,
+  success: (msg, duration) => show({ message: msg, type: 'success', duration }),
+  error: (msg, duration) => show({ message: msg, type: 'error', duration }),
+  info: (msg, duration) => show({ message: msg, type: 'info', duration }),
+  warning: (msg, duration) => show({ message: msg, type: 'warning', duration }),
+};
+
+/** Composition API 용 */
+export function useToast() {
+  return toast;
+}
+
+/** Vue Plugin */
+export default {
+  install(app) {
+    app.config.globalProperties.$toast = toast;
+    app.provide('toast', toast);
+  },
+};

package/cli/templates/make/app-spa/views/default/spa/src/router/index.js

@@ -0,0 +1,29 @@
+/**
+ * router/index.js — SPA 라우트 정의.
+ *
+ * SSR web.js 라우트 구조와 동일:
+ * - 공개: /, /features (guest 불가)
+ * - 게스트: /login, /register
+ * - 인증: /chat, /profile, /board/...
+ *
+ * Lazy loading으로 초기 번들 크기 최적화.
+ */
+import HomeView from '../views/HomeView.vue';
+
+export const routes = [
+  // ── 공개 페이지 (인증 불필요) ──
+  { path: '/', name: 'home', component: HomeView },
+  { path: '/features', name: 'features', component: () => import('../views/FeaturesView.vue') },
+
+  // ── 게스트 전용 (로그인 상태면 홈으로) ──
+  { path: '/login', name: 'login', component: () => import('../views/Login.vue'), meta: { guest: true } },
+  { path: '/register', name: 'register', component: () => import('../views/Register.vue'), meta: { guest: true } },
+
+  // ── 인증 필요 ──
+  { path: '/chat', name: 'chat', component: () => import('../views/ChatView.vue'), meta: { auth: true } },
+  { path: '/profile', name: 'profile', component: () => import('../views/Profile.vue'), meta: { auth: true } },
+  { path: '/board', name: 'board', component: () => import('../views/BoardList.vue'), meta: { auth: true } },
+  { path: '/board/new', name: 'board-new', component: () => import('../views/BoardForm.vue'), meta: { auth: true } },
+  { path: '/board/:id', name: 'board-detail', component: () => import('../views/BoardDetail.vue'), meta: { auth: true } },
+  { path: '/board/:id/edit', name: 'board-edit', component: () => import('../views/BoardForm.vue'), meta: { auth: true } },
+];

package/cli/templates/make/app-spa/views/default/spa/src/stores/auth.js

@@ -0,0 +1,58 @@
+/**
+ * stores/auth — Pinia 사용자 상태 관리 스토어.
+ *
+ * 사용자 정보, 인증 상태, 로그인/로그아웃 액션을 관리한다.
+ * DevTools 디버깅 지원 및 $reset()으로 깔끔한 상태 초기화.
+ */
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+export const useAuthStore = defineStore('auth', () => {
+  /* ── State ── */
+  const user = ref(null);
+
+  /* ── Getters ── */
+  const isAuthenticated = computed(() => !!user.value);
+  const userName = computed(() => user.value?.name || '');
+  const userEmail = computed(() => user.value?.email || '');
+
+  /* ── Actions ── */
+
+  /** 사용자 정보 설정 (로그인 성공 또는 초기 로드 시) */
+  function setUser(userData) {
+    user.value = userData || null;
+    if (userData) {
+      localStorage.setItem('fx_auth', JSON.stringify(userData));
+    } else {
+      localStorage.removeItem('fx_auth');
+    }
+  }
+
+  /** 로그아웃 — 상태 초기화 + localStorage 정리 */
+  function logout() {
+    user.value = null;
+    localStorage.removeItem('fx_auth');
+  }
+
+  /** localStorage에서 사용자 정보 복원 (앱 시작 시) */
+  function restoreFromStorage() {
+    try {
+      const stored = localStorage.getItem('fx_auth');
+      if (stored) {
+        user.value = JSON.parse(stored);
+      }
+    } catch {
+      localStorage.removeItem('fx_auth');
+    }
+  }
+
+  return {
+    user,
+    isAuthenticated,
+    userName,
+    userEmail,
+    setUser,
+    logout,
+    restoreFromStorage,
+  };
+});