@fuzionx/framework 0.1.46 → 0.1.48

package/cli/templates/make/app-spa/views/default/spa/src/components/Navbar.vue

@@ -0,0 +1,68 @@
+<!--
+  Navbar.vue — 메인 네비게이션 바.
+  
+  SSR main.html의 navbar를 Vue 컴포넌트로 완전 복제.
+  인증 여부에 따라 프로필/로그아웃 또는 로그인/회원가입 표시.
+  로케일 전환 버튼 포함. 모바일 토글 지원.
+-->
+<template>
+  <nav class="navbar">
+    <div class="nav-container">
+      <router-link to="/" class="nav-brand">FuzionX</router-link>
+      <div :class="['nav-links', { open: mobileOpen }]">
+        <router-link to="/" class="nav-link">{{ t('nav.home', 'Home') }}</router-link>
+        <router-link to="/features" class="nav-link">{{ t('nav.features', 'Features') }}</router-link>
+        <router-link to="/chat" class="nav-link">{{ t('nav.chat', 'Chat Demo') }}</router-link>
+        <router-link to="/board" class="nav-link">{{ t('nav.board', '게시판') }}</router-link>
+        <template v-if="authStore.isAuthenticated">
+          <router-link to="/profile" class="nav-link">{{ t('nav.profile', '프로필') }}</router-link>
+          <button class="nav-link btn-link" @click="handleLogout">{{ t('nav.logout', '로그아웃') }}</button>
+        </template>
+        <template v-else>
+          <router-link to="/login" class="nav-link">{{ t('nav.login', '로그인') }}</router-link>
+          <router-link to="/register" class="nav-link">{{ t('nav.register', '회원가입') }}</router-link>
+        </template>
+        <LanguageSwitcher />
+      </div>
+      <button class="nav-mobile-toggle" @click="mobileOpen = !mobileOpen" aria-label="Menu">
+        <span></span><span></span><span></span>
+      </button>
+    </div>
+  </nav>
+  <div :class="['nav-backdrop', { open: mobileOpen }]" @click="mobileOpen = false"></div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useAuthStore } from '../stores/auth.js';
+import { useLocale } from '../composables/useLocale.js';
+import { useApi } from '../composables/useApi.js';
+import LanguageSwitcher from './LanguageSwitcher.vue';
+
+const authStore = useAuthStore();
+const { t, locale } = useLocale();
+const router = useRouter();
+const route = useRoute();
+const api = useApi();
+
+/** 모바일 메뉴 토글 상태 */
+const mobileOpen = ref(false);
+
+/** 라우트 변경 시 모바일 메뉴 자동 닫기 */
+watch(() => route.path, () => {
+  mobileOpen.value = false;
+});
+
+/** 로그아웃 처리 — 서버 API + Pinia 초기화 */
+async function handleLogout() {
+  try {
+    await api.post('/api/auth/logout');
+  } catch {
+    // 무시 — 서버 세션 만료 가능
+  }
+  authStore.logout();
+  mobileOpen.value = false;
+  router.push('/login');
+}
+</script>

package/cli/templates/make/app-spa/views/default/spa/src/components/Pagination.vue

@@ -0,0 +1,166 @@
+<!--
+  Pagination.vue — 범용 페이지네이션 컴포넌트.
+  
+  번호 페이지 버튼 + 이전/다음 화살표 + ellipsis 지원.
+  개발자가 바로 사용할 수 있는 템플릿 형태.
+  
+  @example
+  <Pagination :page="1" :last-page="10" @change="onPageChange" />
+  <Pagination :page="5" :last-page="20" :siblings="2" @change="onPageChange" />
+-->
+<template>
+  <nav v-if="lastPage > 1" class="pagination" role="navigation" aria-label="Pagination">
+    <!-- 이전 -->
+    <button
+      class="page-btn page-prev"
+      :disabled="page <= 1"
+      @click="$emit('change', page - 1)"
+      :aria-label="t('pagination.prev', '이전')"
+    >←</button>
+
+    <!-- 페이지 번호 -->
+    <template v-for="item in pages" :key="item.key">
+      <span v-if="item.type === 'ellipsis'" class="page-ellipsis">…</span>
+      <button
+        v-else
+        :class="['page-btn', 'page-num', { active: item.page === page }]"
+        @click="$emit('change', item.page)"
+        :aria-current="item.page === page ? 'page' : undefined"
+      >{{ item.page }}</button>
+    </template>
+
+    <!-- 다음 -->
+    <button
+      class="page-btn page-next"
+      :disabled="page >= lastPage"
+      @click="$emit('change', page + 1)"
+      :aria-label="t('pagination.next', '다음')"
+    >→</button>
+
+    <!-- 페이지 정보 (모바일) -->
+    <span class="page-info-mobile">{{ page }} / {{ lastPage }}</span>
+  </nav>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useLocale } from '../composables/useLocale.js';
+
+const { t } = useLocale();
+
+/**
+ * @prop {number} page - 현재 페이지 (1-indexed)
+ * @prop {number} lastPage - 마지막 페이지
+ * @prop {number} siblings - 현재 페이지 좌우 표시할 페이지 수 (기본 1)
+ */
+const props = defineProps({
+  page: { type: Number, required: true },
+  lastPage: { type: Number, required: true },
+  siblings: { type: Number, default: 1 },
+});
+
+defineEmits(['change']);
+
+/**
+ * 페이지 번호 목록 생성 (ellipsis 포함).
+ * [1] ... [4] [5*] [6] ... [20]
+ */
+const pages = computed(() => {
+  const { page, lastPage, siblings } = props;
+  const items = [];
+  
+  // 항상 첫 페이지
+  items.push({ type: 'page', page: 1, key: 'p1' });
+
+  const rangeStart = Math.max(2, page - siblings);
+  const rangeEnd = Math.min(lastPage - 1, page + siblings);
+
+  // 첫 페이지와 범위 사이에 간격이 있으면 ellipsis
+  if (rangeStart > 2) {
+    items.push({ type: 'ellipsis', key: 'e1' });
+  }
+
+  // 중간 범위
+  for (let i = rangeStart; i <= rangeEnd; i++) {
+    items.push({ type: 'page', page: i, key: `p${i}` });
+  }
+
+  // 범위와 마지막 페이지 사이에 간격이 있으면 ellipsis
+  if (rangeEnd < lastPage - 1) {
+    items.push({ type: 'ellipsis', key: 'e2' });
+  }
+
+  // 항상 마지막 페이지 (1 초과일 때만)
+  if (lastPage > 1) {
+    items.push({ type: 'page', page: lastPage, key: `p${lastPage}` });
+  }
+
+  return items;
+});
+</script>
+
+<style scoped>
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  margin-top: 2rem;
+  flex-wrap: wrap;
+}
+.page-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  height: 36px;
+  padding: 0 8px;
+  border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
+  border-radius: 8px;
+  background: rgba(255,255,255,0.05);
+  color: var(--text-secondary, rgba(255,255,255,0.65));
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+}
+.page-btn:hover:not(:disabled):not(.active) {
+  background: rgba(255,255,255,0.12);
+  color: #fff;
+  border-color: rgba(102,126,234,0.4);
+}
+.page-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+.page-btn.active {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: #fff;
+  border-color: transparent;
+  font-weight: 700;
+  box-shadow: 0 2px 8px rgba(102,126,234,0.3);
+}
+.page-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  color: var(--text-muted, rgba(255,255,255,0.35));
+  font-size: 0.9rem;
+  user-select: none;
+}
+.page-info-mobile {
+  display: none;
+}
+@media (max-width: 480px) {
+  .page-num, .page-ellipsis { display: none; }
+  .page-info-mobile {
+    display: inline-flex;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    padding: 0 0.5rem;
+  }
+}
+</style>

package/cli/templates/make/app-spa/views/default/spa/src/components/ToastContainer.vue

@@ -0,0 +1,135 @@
+<!--
+  ToastContainer.vue — 토스트 알림 컨테이너.
+  
+  App.vue에 1회 포함하면 $toast.success() 등으로 자동 표시.
+  우측 상단 스택, 자동 dismiss, 애니메이션 포함.
+-->
+<template>
+  <Teleport to="body">
+    <div class="fx-toast-container" v-if="toasts.length">
+      <TransitionGroup name="toast">
+        <div
+          v-for="item in toasts"
+          :key="item.id"
+          :class="['fx-toast', `fx-toast-${item.type}`]"
+          @click="dismiss(item.id)"
+        >
+          <span class="fx-toast-icon">{{ icons[item.type] || icons.info }}</span>
+          <span class="fx-toast-msg">{{ item.message }}</span>
+          <button class="fx-toast-close" @click.stop="dismiss(item.id)">×</button>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { toastState, toast } from '../plugins/toast.js';
+import { computed } from 'vue';
+
+const toasts = computed(() => toastState.items);
+const dismiss = toast.dismiss;
+
+const icons = {
+  success: '✓',
+  error: '✕',
+  warning: '⚠',
+  info: 'ℹ',
+};
+</script>
+
+<style>
+/* ── Toast Container ── */
+.fx-toast-container {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-width: 380px;
+  pointer-events: none;
+}
+.fx-toast {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.75rem 1rem;
+  border-radius: 10px;
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255,255,255,0.1);
+  color: #fff;
+  font-size: 0.88rem;
+  line-height: 1.4;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+}
+.fx-toast-success {
+  background: rgba(46, 204, 113, 0.9);
+  border-color: rgba(46, 204, 113, 0.4);
+}
+.fx-toast-error {
+  background: rgba(231, 76, 60, 0.9);
+  border-color: rgba(231, 76, 60, 0.4);
+}
+.fx-toast-warning {
+  background: rgba(241, 196, 15, 0.9);
+  border-color: rgba(241, 196, 15, 0.4);
+  color: #1a1a2e;
+}
+.fx-toast-info {
+  background: rgba(102, 126, 234, 0.9);
+  border-color: rgba(102, 126, 234, 0.4);
+}
+.fx-toast-icon {
+  font-size: 1rem;
+  font-weight: 700;
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgba(255,255,255,0.2);
+}
+.fx-toast-msg {
+  flex: 1;
+}
+.fx-toast-close {
+  background: none;
+  border: none;
+  color: inherit;
+  font-size: 1.2rem;
+  cursor: pointer;
+  opacity: 0.7;
+  padding: 0 2px;
+  line-height: 1;
+}
+.fx-toast-close:hover { opacity: 1; }
+
+/* Transitions */
+.toast-enter-active { animation: toastIn 0.3s ease-out; }
+.toast-leave-active { animation: toastOut 0.25s ease-in forwards; }
+.toast-move { transition: transform 0.3s ease; }
+
+@keyframes toastIn {
+  from { opacity: 0; transform: translateX(80px) scale(0.9); }
+  to { opacity: 1; transform: translateX(0) scale(1); }
+}
+@keyframes toastOut {
+  from { opacity: 1; transform: translateX(0) scale(1); }
+  to { opacity: 0; transform: translateX(80px) scale(0.9); }
+}
+
+/* Mobile */
+@media (max-width: 480px) {
+  .fx-toast-container {
+    left: 0.5rem;
+    right: 0.5rem;
+    max-width: none;
+  }
+}
+</style>

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

@@ -0,0 +1,129 @@
+/**
+ * useApi — FuzionX WASM client를 사용한 ASP 호환 API 호출.
+ *
+ * tester 템플릿의 aspFetch 패턴 적용:
+ * - _aspReady Promise로 WASM 초기화 대기
+ * - /api 경로는 WASM client 메서드 사용 (자동 ASP 암/복호화)
+ * - FormData는 upload() 메서드로 위임
+ * - 비-api 경로는 plain fetch
+ */
+
+let _aspClient = null;
+let _aspReady = null;
+
+/**
+ * main.js에서 WASM 초기화 후 호출.
+ * @param {object} client - FuzionXClient 인스턴스
+ */
+export function setAspClient(client) {
+  _aspClient = client;
+}
+
+/**
+ * main.js에서 WASM 로딩 Promise를 설정.
+ * @param {Promise} promise - WASM 초기화 Promise
+ */
+export function setAspReady(promise) {
+  _aspReady = promise;
+}
+
+export function useApi() {
+  /**
+   * aspFetch — tester 템플릿과 동일한 패턴.
+   * /api 경로: WASM client 메서드로 ASP 자동 처리
+   * 비-api 경로: plain fetch
+   * @param {string} url - 요청 URL
+   * @param {object} opts - fetch 옵션
+   */
+  async function apiFetch(url, opts = {}) {
+    if (_aspReady) await _aspReady;
+
+    const method = (opts.method || 'GET').toUpperCase();
+
+    // /api가 아닌 경로는 plain fetch
+    if (!url.startsWith('/api')) {
+      return window.fetch(url, opts).then(r => r.json());
+    }
+
+    // FormData (파일 업로드) — WASM upload() 메서드로 위임
+    if (opts.body instanceof FormData) {
+      return _aspClient.upload(url, opts.body);
+    }
+
+    // JSON body 파싱
+    let bodyObj = undefined;
+    if (opts.body) {
+      bodyObj = typeof opts.body === 'string' ? JSON.parse(opts.body) : opts.body;
+    }
+
+    // WASM client 메서드 사용 — 자동 ASP 암/복호화
+    let res;
+    switch (method) {
+      case 'GET':    res = _aspClient.get(url, window.__FX__ENC_ENABLED); break;
+      case 'POST':   res = _aspClient.post(url, bodyObj, window.__FX__ENC_ENABLED); break;
+      case 'PUT':    res = _aspClient.put(url, bodyObj, window.__FX__ENC_ENABLED); break;
+      case 'PATCH':  res = _aspClient.patch(url, bodyObj, window.__FX__ENC_ENABLED); break;
+      case 'DELETE': res = _aspClient.delete(url, window.__FX__ENC_ENABLED); break;
+      default:       res = _aspClient.get(url, window.__FX__ENC_ENABLED); break;
+    }
+
+    if (res.status === 401) {
+      localStorage.removeItem('fx_auth');
+      window.location.href = '/#/login';
+      return;
+    }
+
+    return res;
+  }
+
+  /**
+   * XHR 업로드 — 진행률 콜백 지원.
+   * @param {string} url - 업로드 URL
+   * @param {FormData} formData - 폼 데이터
+   * @param {Function} onProgress - 진행률 콜백 (percent, speed)
+   * @param {string} [method='POST'] - HTTP 메서드
+   * @returns {Promise<{ok: boolean, responseURL: string}>}
+   */
+  function uploadWithProgress(url, formData, onProgress, method = 'POST') {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      const startTime = Date.now();
+
+      xhr.upload.onprogress = (ev) => {
+        if (!ev.lengthComputable || !onProgress) return;
+        const pct = Math.round((ev.loaded / ev.total) * 100);
+        const elapsed = (Date.now() - startTime) / 1000;
+        let speed = '';
+        if (elapsed > 0.5) {
+          const bps = ev.loaded / elapsed;
+          speed = bps > 1048576
+            ? (bps / 1048576).toFixed(1) + ' MB/s'
+            : (bps / 1024).toFixed(0) + ' KB/s';
+        }
+        onProgress(pct, speed);
+      };
+
+      xhr.onload = () => {
+        if (xhr.status >= 200 && xhr.status < 400) {
+          resolve({ ok: true, responseURL: xhr.responseURL });
+        } else {
+          reject(new Error(`Upload failed: ${xhr.status}`));
+        }
+      };
+
+      xhr.onerror = () => reject(new Error('Network error'));
+      xhr.open(method, url);
+      xhr.send(formData);
+    });
+  }
+
+  // 편의 메서드
+  const get = (url) => apiFetch(url);
+  const post = (url, body) => apiFetch(url, { method: 'POST', body });
+  const put = (url, body) => apiFetch(url, { method: 'PUT', body });
+  const patch = (url, body) => apiFetch(url, { method: 'PATCH', body });
+  const del = (url) => apiFetch(url, { method: 'DELETE' });
+  const upload = (url, formData) => apiFetch(url, { method: 'POST', body: formData });
+
+  return { fetch: apiFetch, get, post, put, patch, del, upload, uploadWithProgress };
+}

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

@@ -0,0 +1,44 @@
+/**
+ * useClipboard — 클립보드 복사 composable.
+ *
+ * @example
+ * const { copy, copied } = useClipboard();
+ * copy('텍스트');  // → copied.value = true (2초 후 false)
+ */
+import { ref } from 'vue';
+
+export function useClipboard() {
+  const copied = ref(false);
+  let timer = null;
+
+  /**
+   * 텍스트를 클립보드에 복사.
+   * @param {string} text
+   * @param {number} [resetMs=2000] - copied 상태 리셋 시간
+   * @returns {Promise<boolean>}
+   */
+  async function copy(text, resetMs = 2000) {
+    try {
+      await navigator.clipboard.writeText(text);
+      copied.value = true;
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => { copied.value = false; }, resetMs);
+      return true;
+    } catch {
+      // 폴백 — textarea 이용
+      const ta = document.createElement('textarea');
+      ta.value = text;
+      ta.style.cssText = 'position:fixed;left:-9999px';
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand('copy');
+      document.body.removeChild(ta);
+      copied.value = true;
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => { copied.value = false; }, resetMs);
+      return true;
+    }
+  }
+
+  return { copy, copied };
+}

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

@@ -0,0 +1,73 @@
+/**
+ * useDate — 날짜 포맷팅/상대시간 composable.
+ *
+ * 자주 쓰는 날짜 변환을 간결하게 사용.
+ * @example
+ * const { format, ago, isToday } = useDate();
+ * format(post.created_at);         // '2026-03-27 12:05'
+ * ago(post.created_at);            // '3시간 전'
+ * isToday(post.created_at);        // true
+ */
+export function useDate() {
+  const pad = (n) => String(n).padStart(2, '0');
+
+  /**
+   * ISO → 포맷 문자열.
+   * @param {string|Date} date
+   * @param {string} [fmt='YYYY-MM-DD HH:mm'] - 지원: YYYY, MM, DD, HH, mm, ss
+   * @returns {string}
+   */
+  function format(date, fmt = 'YYYY-MM-DD HH:mm') {
+    if (!date) return '-';
+    const d = date instanceof Date ? date : new Date(date);
+    if (isNaN(d.getTime())) return '-';
+    const tokens = {
+      YYYY: d.getFullYear(),
+      MM: pad(d.getMonth() + 1),
+      DD: pad(d.getDate()),
+      HH: pad(d.getHours()),
+      mm: pad(d.getMinutes()),
+      ss: pad(d.getSeconds()),
+    };
+    let result = fmt;
+    for (const [token, value] of Object.entries(tokens)) {
+      result = result.replace(token, value);
+    }
+    return result;
+  }
+
+  /**
+   * 상대 시간 (N분 전, N시간 전, ...)
+   * @param {string|Date} date
+   * @param {string} [locale='ko']
+   * @returns {string}
+   */
+  function ago(date, locale = 'ko') {
+    if (!date) return '-';
+    const d = date instanceof Date ? date : new Date(date);
+    const diffSec = Math.floor((Date.now() - d.getTime()) / 1000);
+
+    const units = locale === 'ko'
+      ? { just: '방금 전', sec: '초 전', min: '분 전', hour: '시간 전', day: '일 전', month: '개월 전', year: '년 전' }
+      : { just: 'just now', sec: 's ago', min: 'm ago', hour: 'h ago', day: 'd ago', month: 'mo ago', year: 'y ago' };
+
+    if (diffSec < 10) return units.just;
+    if (diffSec < 60) return `${diffSec}${units.sec}`;
+    if (diffSec < 3600) return `${Math.floor(diffSec / 60)}${units.min}`;
+    if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}${units.hour}`;
+    if (diffSec < 2592000) return `${Math.floor(diffSec / 86400)}${units.day}`;
+    if (diffSec < 31536000) return `${Math.floor(diffSec / 2592000)}${units.month}`;
+    return `${Math.floor(diffSec / 31536000)}${units.year}`;
+  }
+
+  /** 오늘인지 확인 */
+  function isToday(date) {
+    const d = date instanceof Date ? date : new Date(date);
+    const now = new Date();
+    return d.getFullYear() === now.getFullYear()
+      && d.getMonth() === now.getMonth()
+      && d.getDate() === now.getDate();
+  }
+
+  return { format, ago, isToday };
+}

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

@@ -0,0 +1,59 @@
+/**
+ * useDebounce — 디바운스 유틸리티 composable.
+ *
+ * 검색 입력, 창 리사이즈 등 빈번한 이벤트 제어.
+ * @example
+ * const { debounce } = useDebounce();
+ * const search = debounce((q) => api.get(`/api/search?q=${q}`), 300);
+ */
+import { onUnmounted } from 'vue';
+
+export function useDebounce() {
+  const timers = new Set();
+
+  /**
+   * 디바운스 함수 생성.
+   * @param {Function} fn - 지연 실행할 함수
+   * @param {number} [ms=300] - 디바운스 지연 시간 (ms)
+   * @returns {Function}
+   */
+  function debounce(fn, ms = 300) {
+    let timer = null;
+    const wrapped = (...args) => {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => fn(...args), ms);
+      timers.add(timer);
+    };
+    wrapped.cancel = () => {
+      if (timer) {
+        clearTimeout(timer);
+        timers.delete(timer);
+      }
+    };
+    return wrapped;
+  }
+
+  /**
+   * 쓰로틀 함수 생성.
+   * @param {Function} fn - 실행할 함수
+   * @param {number} [ms=300] - 최소 실행 간격 (ms)
+   * @returns {Function}
+   */
+  function throttle(fn, ms = 300) {
+    let last = 0;
+    return (...args) => {
+      const now = Date.now();
+      if (now - last >= ms) {
+        last = now;
+        fn(...args);
+      }
+    };
+  }
+
+  onUnmounted(() => {
+    for (const t of timers) clearTimeout(t);
+    timers.clear();
+  });
+
+  return { debounce, throttle };
+}