@fuzionx/framework 0.1.45 → 0.1.47

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

@@ -0,0 +1,179 @@
+<!--
+  AlertDialog.vue — 글로벌 알럿/확인 다이얼로그.
+  
+  App.vue에 1회 포함하면 $alert.show() / $alert.confirm() 으로 사용.
+  Promise 기반: confirm()은 true/false 반환.
+-->
+<template>
+  <Teleport to="body">
+    <Transition name="alert">
+      <div v-if="state.visible" class="fx-alert-backdrop" @click.self="onCancel">
+        <div :class="['fx-alert-dialog', `fx-alert-${state.type}`]">
+          <div class="fx-alert-header" v-if="state.title">
+            <span class="fx-alert-icon">{{ icons[state.type] || icons.info }}</span>
+            <h3 class="fx-alert-title">{{ state.title }}</h3>
+          </div>
+          <p class="fx-alert-message" v-if="state.message">{{ state.message }}</p>
+          <div class="fx-alert-actions">
+            <button
+              v-if="state.showCancel"
+              class="fx-alert-btn fx-alert-cancel"
+              @click="onCancel"
+            >{{ state.cancelText }}</button>
+            <button
+              class="fx-alert-btn fx-alert-ok"
+              @click="onOk"
+              ref="okBtn"
+            >{{ state.okText }}</button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue';
+import { alertState, handleOk, handleCancel } from '../plugins/alert.js';
+
+const state = alertState;
+const okBtn = ref(null);
+
+const icons = {
+  success: '✓',
+  error: '✕',
+  warning: '⚠',
+  info: 'ℹ',
+  confirm: '?',
+};
+
+function onOk() { handleOk(); }
+function onCancel() { handleCancel(); }
+
+// 열릴 때 OK 버튼에 포커스
+watch(() => state.visible, async (v) => {
+  if (v) {
+    await nextTick();
+    okBtn.value?.focus();
+  }
+});
+</script>
+
+<style>
+/* ── Alert Backdrop ── */
+.fx-alert-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.6);
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+/* ── Alert Dialog ── */
+.fx-alert-dialog {
+  background: rgba(25, 25, 50, 0.98);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 16px;
+  padding: 2rem;
+  max-width: 420px;
+  width: 100%;
+  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
+}
+.fx-alert-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+.fx-alert-icon {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  font-size: 1.1rem;
+  flex-shrink: 0;
+}
+.fx-alert-info .fx-alert-icon {
+  background: rgba(102,126,234,0.15);
+  color: #7b93ff;
+}
+.fx-alert-confirm .fx-alert-icon {
+  background: rgba(102,126,234,0.15);
+  color: #7b93ff;
+}
+.fx-alert-warning .fx-alert-icon {
+  background: rgba(241,196,15,0.15);
+  color: #f1c40f;
+}
+.fx-alert-error .fx-alert-icon {
+  background: rgba(231,76,60,0.15);
+  color: #e74c3c;
+}
+.fx-alert-title {
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: #fff;
+  margin: 0;
+}
+.fx-alert-message {
+  font-size: 0.9rem;
+  color: rgba(255,255,255,0.7);
+  line-height: 1.6;
+  margin: 0 0 1.5rem;
+}
+.fx-alert-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+}
+.fx-alert-btn {
+  padding: 0.6rem 1.5rem;
+  border-radius: 10px;
+  font-size: 0.88rem;
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+  font-family: inherit;
+}
+.fx-alert-ok {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: #fff;
+}
+.fx-alert-ok:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 15px rgba(102,126,234,0.3);
+}
+.fx-alert-cancel {
+  background: rgba(255,255,255,0.08);
+  color: rgba(255,255,255,0.7);
+  border: 1px solid rgba(255,255,255,0.1);
+}
+.fx-alert-cancel:hover {
+  background: rgba(255,255,255,0.12);
+  color: #fff;
+}
+
+/* Transition */
+.alert-enter-active { animation: alertIn 0.25s ease-out; }
+.alert-leave-active { animation: alertOut 0.2s ease-in forwards; }
+
+@keyframes alertIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes alertIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes alertOut {
+  from { opacity: 1; transform: scale(1); }
+  to { opacity: 0; transform: scale(0.95); }
+}
+</style>

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

@@ -0,0 +1,33 @@
+<!--
+  CodeBlock.vue — 코드 블록 재사용 컴포넌트.
+  
+  SSR features.html / home.html의 코드 블록 스타일을 Vue 컴포넌트로 추출.
+  코드 헤더(점 3개 + 제목) + pre 코드 본문.
+  
+  v-html 기반 렌더링으로 <span> 태그 줄바꿈 보장.
+  @example
+  <CodeBlock title="app.js" :code="codeHtml" />
+-->
+<template>
+  <div class="feat-code-block">
+    <div class="code-header">
+      <span class="code-dot red"></span>
+      <span class="code-dot yellow"></span>
+      <span class="code-dot green"></span>
+      <span class="code-title">{{ title }}</span>
+    </div>
+    <pre class="code-body" v-if="code" v-html="code"></pre>
+    <pre class="code-body" v-else><slot /></pre>
+  </div>
+</template>
+
+<script setup>
+/**
+ * @prop {string} title - 코드 블록 상단 타이틀 (예: 'app.js', 'Terminal')
+ * @prop {string} code - HTML 코드 문자열 (v-html로 렌더링, 줄바꿈 보장)
+ */
+defineProps({
+  title: { type: String, default: '' },
+  code: { type: String, default: '' },
+});
+</script>

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

@@ -0,0 +1,54 @@
+<!--
+  EditorToolbar.vue — 마크다운 에디터 툴바.
+  
+  SSR board/form.html의 에디터 툴바를 Vue 컴포넌트로 추출.
+  Bold, Italic, Underline, H1, H2, List, Quote, Code, Link.
+-->
+<template>
+  <div class="editor-toolbar">
+    <button type="button" @click="wrap('bold')" title="Bold"><b>B</b></button>
+    <button type="button" @click="wrap('italic')" title="Italic"><i>I</i></button>
+    <button type="button" @click="wrap('underline')" title="Underline"><u>U</u></button>
+    <div class="separator"></div>
+    <button type="button" @click="insert('# ')" title="H1">H1</button>
+    <button type="button" @click="insert('## ')" title="H2">H2</button>
+    <div class="separator"></div>
+    <button type="button" @click="insert('- ')" title="List">⊙</button>
+    <button type="button" @click="insert('> ')" title="Quote">❝</button>
+    <button type="button" @click="insert('```\n\n```')" title="Code">⟨/⟩</button>
+    <div class="separator"></div>
+    <button type="button" @click="insert('[링크](url)')" title="Link">🔗</button>
+  </div>
+</template>
+
+<script setup>
+/**
+ * @prop {string} targetId - 연결할 textarea의 ref ID
+ */
+const props = defineProps({
+  targetId: { type: String, required: true },
+});
+
+/** 선택 텍스트 감싸기 (Bold/Italic/Underline) */
+function wrap(type) {
+  const ta = document.getElementById(props.targetId);
+  if (!ta) return;
+  const start = ta.selectionStart;
+  const end = ta.selectionEnd;
+  const sel = ta.value.substring(start, end);
+  const wrapMap = { bold: ['**', '**'], italic: ['_', '_'], underline: ['__', '__'] };
+  const w = wrapMap[type] || ['', ''];
+  ta.setRangeText(w[0] + sel + w[1], start, end, 'end');
+  ta.focus();
+  ta.dispatchEvent(new Event('input'));
+}
+
+/** 커서 위치에 텍스트 삽입 */
+function insert(text) {
+  const ta = document.getElementById(props.targetId);
+  if (!ta) return;
+  ta.setRangeText(text, ta.selectionStart, ta.selectionStart, 'end');
+  ta.focus();
+  ta.dispatchEvent(new Event('input'));
+}
+</script>

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

@@ -0,0 +1,161 @@
+<!--
+  FileUpload.vue — 드래그&드롭 파일 업로드 + 진행률 컴포넌트.
+  
+  SSR board/form.html의 파일 업로드 영역을 Vue 컴포넌트로 추출.
+  드래그&드롭, 파일 미리보기, 진행률 바 포함.
+-->
+<template>
+  <div class="form-group">
+    <label>{{ label }}</label>
+
+    <!-- 드래그&드롭 영역 -->
+    <div
+      :class="['file-upload-area', { dragover: isDragover }]"
+      @click="$refs.fileInput.click()"
+      @dragenter.prevent="isDragover = true"
+      @dragover.prevent="isDragover = true"
+      @dragleave.prevent="isDragover = false"
+      @drop.prevent="onDrop"
+    >
+      <div class="upload-icon">📎</div>
+      <div class="upload-text">{{ dropText }}</div>
+      <div class="upload-hint">{{ hintText }}</div>
+    </div>
+
+    <!-- 숨겨진 파일 input -->
+    <input
+      ref="fileInput"
+      type="file"
+      :name="name"
+      multiple
+      style="display: none;"
+      accept="image/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip"
+      @change="onFileChange"
+    />
+
+    <!-- 선택된 파일 목록 -->
+    <div class="file-list">
+      <div v-for="(f, i) in selectedFiles" :key="i" class="file-item">
+        <img v-if="f.preview" :src="f.preview" class="file-preview" />
+        <span v-else-if="f.isVideo" class="file-preview-icon">🎬</span>
+        <span v-else class="file-preview-icon">📄</span>
+        <span class="file-name">{{ f.name }}</span>
+        <span class="file-size">{{ formatSize(f.size) }}</span>
+      </div>
+    </div>
+
+    <!-- 진행률 바 -->
+    <div v-if="uploading" class="upload-progress" style="margin: 1rem 0;">
+      <div class="progress-bar-track" style="background: rgba(255,255,255,0.15); border-radius: 8px; height: 14px; overflow: hidden;">
+        <div
+          class="progress-bar-fill"
+          :style="{ width: progress + '%', height: '100%', background: progressColor, borderRadius: '8px', transition: 'width 0.3s ease' }"
+        ></div>
+      </div>
+      <div class="progress-info" style="display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.85rem; color: #aaa;">
+        <span>{{ progressText }}</span>
+        <span>{{ speedText }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+/**
+ * @prop {string} label - 레이블 텍스트
+ * @prop {string} name - form field name
+ * @prop {string} dropText - 드래그 영역 메인 텍스트
+ * @prop {string} hintText - 드래그 영역 힌트 텍스트
+ */
+const props = defineProps({
+  label: { type: String, default: '첨부파일' },
+  name: { type: String, default: 'files' },
+  dropText: { type: String, default: '클릭 또는 파일을 여기에 드래그' },
+  hintText: { type: String, default: '이미지, 비디오, 문서 파일' },
+});
+
+const emit = defineEmits(['update:files']);
+
+const isDragover = ref(false);
+const selectedFiles = ref([]);
+const uploading = ref(false);
+const progress = ref(0);
+const progressText = ref('0%');
+const speedText = ref('');
+const progressColor = ref('linear-gradient(90deg, #667eea, #764ba2)');
+
+/** 파일 크기 포맷 */
+function formatSize(bytes) {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+  return (bytes / 1048576).toFixed(1) + ' MB';
+}
+
+/** 파일 선택 이벤트 */
+function onFileChange(e) {
+  setFiles(e.target.files);
+}
+
+/** 드래그&드롭 이벤트 */
+function onDrop(e) {
+  isDragover.value = false;
+  setFiles(e.dataTransfer.files);
+}
+
+/** 선택된 파일 설정 + 미리보기 생성 */
+function setFiles(fileList) {
+  const arr = [];
+  for (let i = 0; i < fileList.length; i++) {
+    const f = fileList[i];
+    arr.push({
+      name: f.name,
+      size: f.size,
+      isVideo: f.type.startsWith('video/'),
+      preview: f.type.startsWith('image/') ? URL.createObjectURL(f) : null,
+      raw: f,
+    });
+  }
+  selectedFiles.value = arr;
+  emit('update:files', fileList);
+}
+
+/** 진행률 업데이트 (외부에서 호출) */
+function setProgress(pct, speed) {
+  uploading.value = true;
+  progress.value = pct;
+  progressText.value = pct + '%';
+  speedText.value = speed || '';
+}
+
+/** 업로드 완료 */
+function setComplete(text = '업로드 완료!') {
+  progress.value = 100;
+  progressText.value = text;
+  speedText.value = '';
+}
+
+/** 업로드 오류 */
+function setError(text = '오류 발생') {
+  progressText.value = text;
+  progressColor.value = '#e74c3c';
+}
+
+/** 파일 목록 반환 */
+function getFiles() {
+  return selectedFiles.value.map(f => f.raw);
+}
+
+/** 상태 초기화 */
+function reset() {
+  selectedFiles.value = [];
+  uploading.value = false;
+  progress.value = 0;
+  progressText.value = '0%';
+  speedText.value = '';
+  progressColor.value = 'linear-gradient(90deg, #667eea, #764ba2)';
+}
+
+defineExpose({ setProgress, setComplete, setError, getFiles, reset });
+</script>

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

@@ -0,0 +1,39 @@
+<!--
+  FlashMessage.vue — Alert 표시 컴포넌트.
+  
+  SSR main.html의 flash.error / flash.success 표시를 Vue 컴포넌트로 구현.
+  자동 사라짐 + 수동 닫기 지원.
+-->
+<template>
+  <Transition name="flash-fade">
+    <div v-if="flash.message" class="container" style="margin-bottom: -1rem;">
+      <div :class="['alert', `alert-${flash.type}`]">
+        {{ flash.message }}
+        <button class="flash-close" @click="clear">✕</button>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { useFlash } from '../composables/useFlash.js';
+
+const { flash, clear } = useFlash();
+</script>
+
+<style scoped>
+.flash-close {
+  float: right;
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-size: 0.9rem;
+  opacity: 0.7;
+}
+.flash-close:hover { opacity: 1; }
+.flash-fade-enter-active,
+.flash-fade-leave-active { transition: opacity 0.3s, transform 0.3s; }
+.flash-fade-enter-from,
+.flash-fade-leave-to { opacity: 0; transform: translateY(-10px); }
+</style>

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

@@ -0,0 +1,108 @@
+<!--
+  LanguageSwitcher.vue — 다국어 드롭다운 메뉴.
+  
+  서버에서 제공하는 locales 목록을 기반으로 동적 렌더링.
+  새 언어 파일 추가 시 자동으로 반영됨.
+-->
+<template>
+  <div :class="['lang-switcher', { open }]" ref="root">
+    <button class="lang-switcher-btn" @click="open = !open" :title="currentLabel">
+      {{ locale.toUpperCase() }}
+      <svg width="10" height="6" viewBox="0 0 10 6" fill="currentColor"><path d="M1 1l4 4 4-4"/></svg>
+    </button>
+    <ul class="lang-switcher-menu">
+      <li
+        v-for="loc in availableLocales"
+        :key="loc.code"
+        :class="['lang-switcher-item', { active: loc.code === locale }]"
+      >
+        <a :href="`?lang=${loc.code}`" class="lang-switcher-link">
+          {{ loc.label }}
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useLocale } from '../composables/useLocale.js';
+
+const { locale, locales } = useLocale();
+const open = ref(false);
+
+const availableLocales = computed(() => locales());
+const currentLabel = computed(() => {
+  const found = availableLocales.value.find(l => l.code === locale.value);
+  return found ? found.label : locale.value;
+});
+
+// 외부 클릭 시 닫기
+const root = ref(null);
+function onClickOutside(e) {
+  if (root.value && !root.value.contains(e.target)) {
+    open.value = false;
+  }
+}
+onMounted(() => document.addEventListener('click', onClickOutside));
+onUnmounted(() => document.removeEventListener('click', onClickOutside));
+</script>
+
+<style scoped>
+.lang-switcher {
+  position: relative;
+  display: inline-flex;
+}
+.lang-switcher-btn {
+  background: rgba(255,255,255,0.1);
+  border: 1px solid rgba(255,255,255,0.2);
+  color: inherit;
+  padding: 0.3rem 0.7rem;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  transition: background 0.2s;
+}
+.lang-switcher-btn:hover {
+  background: rgba(255,255,255,0.2);
+}
+.lang-switcher-menu {
+  display: none;
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  background: rgba(20, 20, 40, 0.95);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255,255,255,0.15);
+  border-radius: 8px;
+  list-style: none;
+  margin: 0;
+  padding: 4px;
+  min-width: 140px;
+  z-index: 1000;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+}
+.lang-switcher.open .lang-switcher-menu {
+  display: block;
+}
+.lang-switcher-item.active .lang-switcher-link {
+  color: var(--accent, #a78bfa);
+  font-weight: 600;
+}
+.lang-switcher-link {
+  display: block;
+  padding: 0.45rem 0.8rem;
+  color: rgba(255,255,255,0.85);
+  text-decoration: none;
+  font-size: 0.85rem;
+  border-radius: 5px;
+  transition: background 0.15s;
+}
+.lang-switcher-link:hover {
+  background: rgba(255,255,255,0.1);
+}
+</style>

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

@@ -0,0 +1,62 @@
+<!--
+  Lightbox.vue — 이미지/비디오 모달 컴포넌트.
+  
+  SSR board/show.html의 Lightbox 모달을 Vue 컴포넌트로 구현.
+  이미지 원본 보기 / 비디오 인라인 재생 모달.
+-->
+<template>
+  <Teleport to="body">
+    <div
+      v-if="visible"
+      class="lightbox-overlay"
+      style="display: flex;"
+      @click.self="close"
+    >
+      <div class="lightbox-content">
+        <button class="lightbox-close" @click="close">✕</button>
+        <!-- 비디오 -->
+        <video
+          v-if="mediaType === 'video'"
+          controls
+          autoplay
+          style="max-width: 100%; max-height: 80vh;"
+        >
+          <source :src="mediaSrc" />
+        </video>
+        <!-- 이미지 -->
+        <img
+          v-else
+          :src="mediaSrc"
+          style="max-width: 100%; max-height: 80vh;"
+        />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const visible = ref(false);
+const mediaSrc = ref('');
+const mediaType = ref('image');
+
+/**
+ * Lightbox 열기.
+ * @param {string} src - 미디어 URL
+ * @param {'image'|'video'} type - 미디어 타입
+ */
+function open(src, type = 'image') {
+  mediaSrc.value = src;
+  mediaType.value = type;
+  visible.value = true;
+}
+
+/** Lightbox 닫기 */
+function close() {
+  visible.value = false;
+  mediaSrc.value = '';
+}
+
+defineExpose({ open, close });
+</script>