@fuzionx/framework 0.1.46 → 0.1.48

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

@@ -0,0 +1,169 @@
+<!--
+  BoardDetail.vue — 게시글 상세 페이지.
+  
+  SSR board/show.html 완전 복제:
+  게시글 제목 (processing 뱃지), 메타 정보, 본문,
+  비디오 썸네일, 첨부파일 그리드 (이미지/비디오/일반 파일),
+  Lightbox 모달, Processing 상태 폴링.
+-->
+<template>
+  <div class="container">
+    <div v-if="post" class="glass-card">
+      <div class="page-header">
+        <h1 class="page-title">
+          <span v-if="post.status === 'processing'" class="badge badge-processing">🔄 {{ t('board.processing', '처리중') }}</span>
+          {{ post.title }}
+        </h1>
+        <div v-if="isOwner" class="page-actions">
+          <router-link :to="`/board/${post.id}/edit`" class="btn btn-outline">{{ t('btn.edit', '수정') }}</router-link>
+          <button class="btn btn-danger" @click="handleDelete">{{ t('btn.delete', '삭제') }}</button>
+        </div>
+      </div>
+
+      <div class="post-meta">
+        <span>{{ author?.name || '-' }}</span>
+        <span>{{ post.created_at }}</span>
+      </div>
+
+      <div class="post-content">{{ post.content }}</div>
+
+      <!-- ── 비디오 썸네일 본문 표시 ── -->
+      <template v-if="files.length">
+        <div v-for="file in videoFiles" :key="file.id" class="inline-video">
+          <img :src="file.thumbUrl" :alt="file.original_name" style="width:100%;max-height:500px;object-fit:contain;border-radius:var(--radius-sm, 8px)" />
+        </div>
+      </template>
+
+      <!-- ── 첨부파일 섹션 ── -->
+      <div v-if="files.length" class="post-attachments">
+        <h3>📎 {{ t('label.attachments', '첨부파일') }} ({{ files.length }})</h3>
+        <div class="attachment-grid">
+          <div v-for="file in files" :key="file.id" class="attachment-card">
+            <!-- 이미지 -->
+            <a v-if="file.isImage" href="#" @click.prevent="openLightbox(file.url, 'image')">
+              <div class="attachment-thumb">
+                <img :src="file.thumbUrl || file.url" :alt="file.original_name" loading="lazy" />
+              </div>
+              <div class="attachment-info">
+                <span class="attachment-name" :title="file.original_name">🖼️ {{ file.original_name }}</span>
+              </div>
+            </a>
+            <!-- 비디오 -->
+            <a v-else-if="file.isVideo" href="#" @click.prevent="openLightbox(file.url, 'video')">
+              <div class="attachment-thumb">
+                <img v-if="file.thumbUrl" :src="file.thumbUrl" :alt="file.original_name" loading="lazy" />
+                <div v-else class="thumb-placeholder">🎬</div>
+                <div class="play-overlay">▶</div>
+              </div>
+              <div class="attachment-info">
+                <span class="attachment-name" :title="file.original_name">🎬 {{ file.original_name }}</span>
+              </div>
+            </a>
+            <!-- 일반 파일 -->
+            <a v-else :href="file.url" class="attachment-download" download>
+              <div class="attachment-thumb">
+                <div class="thumb-placeholder">📄</div>
+              </div>
+              <div class="attachment-info">
+                <span class="attachment-name" :title="file.original_name">📄 {{ file.original_name }}</span>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div class="post-footer">
+        <router-link to="/board" class="btn btn-outline">{{ t('btn.back', '← 목록') }}</router-link>
+      </div>
+    </div>
+
+    <!-- ── Lightbox ── -->
+    <Lightbox ref="lightbox" />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useApi } from '../composables/useApi.js';
+import { useAuthStore } from '../stores/auth.js';
+import { useLocale } from '../composables/useLocale.js';
+import { useToast } from '../plugins/toast.js';
+import { useAlert } from '../plugins/alert.js';
+import Lightbox from '../components/Lightbox.vue';
+
+const route = useRoute();
+const router = useRouter();
+const api = useApi();
+const authStore = useAuthStore();
+const { t } = useLocale();
+const toast = useToast();
+const fxAlert = useAlert();
+
+const post = ref(null);
+const author = ref(null);
+const files = ref([]);
+const lightbox = ref(null);
+let pollingTimer = null;
+
+/** 비디오 파일 중 썸네일이 있는 것만 */
+const videoFiles = computed(() => files.value.filter(f => f.isVideo && f.thumbUrl));
+
+/** 내가 작성한 글인지 */
+const isOwner = computed(() => authStore.user?.id && post.value?.user_id === authStore.user.id);
+
+/** 게시글 로드 */
+async function loadPost() {
+  try {
+    const res = await api.get(`/api/posts/${route.params.id}`);
+    if (res) {
+      post.value = res.post || res;
+      author.value = res.author || null;
+      files.value = res.files || [];
+    }
+  } catch (e) {
+    console.error('[Board] load failed:', e);
+  }
+  // processing이면 폴링 시작
+  if (post.value?.status === 'processing') startPolling();
+}
+
+/** 삭제 처리 */
+async function handleDelete() {
+  const ok = await fxAlert.confirm(t('alert.confirm', '확인'), t('board.confirm_delete', '삭제하시겠습니까?'));
+  if (!ok) return;
+  try {
+    await api.del(`/api/posts/${post.value.id}`);
+    toast.success(t('board.deleted', '글이 삭제되었습니다.'));
+    router.push('/board');
+  } catch (e) {
+    toast.error(t('error.delete_failed', '삭제에 실패했습니다.'));
+  }
+}
+
+/** Lightbox 열기 */
+function openLightbox(src, type) {
+  lightbox.value?.open(src, type);
+}
+
+/** Processing 상태 폴링 — SSR board/show.html 패턴 */
+function startPolling() {
+  stopPolling();
+  pollingTimer = setInterval(async () => {
+    try {
+      const res = await api.get(`/api/posts/status?ids=${post.value.id}`);
+      if (res?.statuses && res.statuses[post.value.id] !== 'processing') {
+        stopPolling();
+        loadPost();
+      }
+    } catch { /* 무시 */ }
+  }, 5000);
+}
+
+function stopPolling() {
+  if (pollingTimer) { clearInterval(pollingTimer); pollingTimer = null; }
+}
+
+onMounted(loadPost);
+onUnmounted(stopPolling);
+</script>

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

@@ -0,0 +1,192 @@
+<!--
+  BoardForm.vue — 게시글 작성/수정 페이지.
+  
+  SSR board/form.html 완전 복제:
+  제목, 에디터 툴바 + 내용, 기존 첨부파일 (수정 모드),
+  새 파일 업로드 (드래그&드롭 + 진행률), XHR 업로드.
+-->
+<template>
+  <div class="container">
+    <div class="glass-card">
+      <h1 class="page-title">
+        {{ isEdit ? t('board.edit_title', '글 수정') : t('board.new_title', '새 글 작성') }}
+      </h1>
+
+      <form class="form" @submit.prevent="handleSubmit">
+        <div class="form-group">
+          <label for="title">{{ t('label.title', '제목') }}</label>
+          <input v-model="form.title" type="text" id="title" required />
+        </div>
+
+        <div class="form-group">
+          <label for="board-content">{{ t('label.content', '내용') }}</label>
+          <EditorToolbar target-id="board-content" />
+          <textarea
+            v-model="form.content"
+            id="board-content"
+            rows="14"
+            class="has-toolbar"
+            required
+          ></textarea>
+        </div>
+
+        <!-- ── 기존 첨부파일 (수정 모드) ── -->
+        <div v-if="isEdit && existingFiles.length" class="form-group">
+          <label>{{ t('board.attached_files', '기존 첨부파일') }}</label>
+          <div class="existing-files-grid">
+            <div v-for="file in existingFiles" :key="file.id" class="existing-file-card">
+              <div class="existing-file-thumb">
+                <img v-if="file.thumbUrl" :src="file.thumbUrl" :alt="file.original_name" loading="lazy" />
+                <img v-else-if="file.isImage" :src="file.url" :alt="file.original_name" loading="lazy" />
+                <div v-else-if="file.isVideo" class="thumb-placeholder">🎬</div>
+                <div v-else class="thumb-placeholder">📄</div>
+              </div>
+              <div class="existing-file-info">
+                <span class="file-name" :title="file.original_name">{{ file.original_name }}</span>
+                <button type="button" class="file-remove" title="삭제" @click="deleteExistingFile(file.id)">✕</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ── 새 파일 업로드 ── -->
+        <FileUpload
+          ref="fileUploader"
+          :label="t('label.attachments', '첨부파일')"
+          :drop-text="t('board.drop_files', '클릭 또는 파일을 여기에 드래그')"
+          :hint-text="t('board.file_hint', '이미지, 비디오, 문서 파일')"
+          @update:files="onFilesChange"
+        />
+
+        <div class="form-actions">
+          <button type="submit" class="btn btn-primary" :disabled="submitting">
+            {{ submitBtnText }}
+          </button>
+          <router-link to="/board" class="btn btn-outline">{{ t('btn.cancel', '취소') }}</router-link>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useApi } from '../composables/useApi.js';
+import { useLocale } from '../composables/useLocale.js';
+import { useToast } from '../plugins/toast.js';
+import { useAlert } from '../plugins/alert.js';
+import EditorToolbar from '../components/EditorToolbar.vue';
+import FileUpload from '../components/FileUpload.vue';
+
+const route = useRoute();
+const router = useRouter();
+const api = useApi();
+const { t } = useLocale();
+const toast = useToast();
+const fxAlert = useAlert();
+
+const isEdit = computed(() => !!route.params.id);
+const form = reactive({ title: '', content: '' });
+const existingFiles = ref([]);
+const selectedFiles = ref(null);
+const submitting = ref(false);
+const fileUploader = ref(null);
+
+const submitBtnText = computed(() => {
+  if (submitting.value) return '업로드 중...';
+  return isEdit.value ? t('btn.edit', '수정') : t('btn.create', '작성');
+});
+
+/** 수정 모드 — 기존 데이터 로드 */
+onMounted(async () => {
+  if (!isEdit.value) return;
+  try {
+    const res = await api.get(`/api/posts/${route.params.id}`);
+    if (res) {
+      const post = res.post || res;
+      form.title = post.title || '';
+      form.content = post.content || '';
+      existingFiles.value = res.files || [];
+    }
+  } catch (e) {
+    console.error('[BoardForm] load failed:', e);
+  }
+});
+
+/** 파일 선택 콜백 */
+function onFilesChange(fileList) {
+  selectedFiles.value = fileList;
+}
+
+/** 기존 첨부파일 삭제 */
+async function deleteExistingFile(fileId) {
+  const ok = await fxAlert.confirm(t('alert.confirm', '확인'), t('board.confirm_delete_file', '첨부파일을 삭제하시겠습니까?'));
+  if (!ok) return;
+  try {
+    await api.del(`/api/posts/attachment/${fileId}`);
+    existingFiles.value = existingFiles.value.filter(f => f.id !== fileId);
+    toast.success(t('board.file_deleted', '첨부파일이 삭제되었습니다.'));
+  } catch (e) {
+    toast.error(t('error.delete_failed', '삭제에 실패했습니다.'));
+  }
+}
+
+/** 폼 제출 — 파일이 있으면 XHR 업로드 (진행률) */
+async function handleSubmit() {
+  // 수정 모드일 때 확인
+  if (isEdit.value) {
+    const ok = await fxAlert.confirm(t('alert.confirm', '확인'), t('board.confirm_edit', '수정하시겠습니까?'));
+    if (!ok) return;
+  }
+
+  submitting.value = true;
+  const hasFiles = selectedFiles.value && selectedFiles.value.length > 0;
+
+  const formData = new FormData();
+  formData.append('title', form.title);
+  formData.append('content', form.content);
+
+  if (hasFiles) {
+    for (let i = 0; i < selectedFiles.value.length; i++) {
+      formData.append('files', selectedFiles.value[i]);
+    }
+  }
+
+  // 파일 업로드: /board (non-API, ASP bypass — XHR plain POST)
+  // JSON only: /api/posts (ASP 암호화 — WASM client)
+  const uploadUrl = isEdit.value ? `/board/${route.params.id}` : '/board';
+  const apiUrl = isEdit.value ? `/api/posts/${route.params.id}` : '/api/posts';
+  const method = isEdit.value ? 'PUT' : 'POST';
+
+  try {
+    if (hasFiles) {
+      // XHR 업로드 + 진행률
+      const result = await api.uploadWithProgress(uploadUrl, formData, (pct, speed) => {
+        fileUploader.value?.setProgress(pct, speed);
+      }, method);
+      fileUploader.value?.setComplete('업로드 완료!');
+      toast.success(isEdit.value ? t('board.updated', '글이 수정되었습니다.') : t('board.created', '글이 작성되었습니다.'));
+      setTimeout(() => {
+        router.push(isEdit.value ? `/board/${route.params.id}` : '/board');
+      }, 1500);
+    } else {
+      // 파일 없으면 일반 API 호출
+      if (isEdit.value) {
+        await api.put(apiUrl, { title: form.title, content: form.content });
+        toast.success(t('board.updated', '글이 수정되었습니다.'));
+        router.push(`/board/${route.params.id}`);
+      } else {
+        await api.post(apiUrl, { title: form.title, content: form.content });
+        toast.success(t('board.created', '글이 작성되었습니다.'));
+        router.push('/board');
+      }
+    }
+  } catch (e) {
+    fileUploader.value?.setError('오류 발생');
+    toast.error(t('error.submit_failed', '저장에 실패했습니다.'));
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>

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

@@ -0,0 +1,129 @@
+<!--
+  BoardList.vue — 게시판 목록 페이지.
+  
+  SSR board/index.html 완전 복제:
+  게시글 목록 (썸네일 + 제목 + processing 뱃지 + 메타),
+  페이지네이션, processing 상태 REST 폴링.
+-->
+<template>
+  <div class="container">
+    <div class="glass-card">
+      <div class="page-header">
+        <h1 class="page-title">{{ t('board.title', '게시판') }}</h1>
+        <router-link to="/board/new" class="btn btn-primary">{{ t('btn.new_post', '새 글') }}</router-link>
+      </div>
+
+      <div class="post-list">
+        <router-link
+          v-for="post in posts"
+          :key="post.id"
+          :to="`/board/${post.id}`"
+          class="post-card"
+        >
+          <div v-if="post.thumbUrl" class="post-card-thumb">
+            <img :src="post.thumbUrl" :alt="post.title" loading="lazy" />
+          </div>
+          <div class="post-card-body">
+            <h3 class="post-card-title">
+              <span v-if="post.status === 'processing'" class="badge badge-processing">🔄 {{ t('board.processing', '처리중') }}</span>
+              {{ post.title }}
+            </h3>
+            <div class="post-card-meta">
+              <span>{{ post.user_name || '-' }}</span>
+              <span>{{ post.created_at }}</span>
+            </div>
+          </div>
+        </router-link>
+
+        <div v-if="!posts.length && !loading" class="post-list-empty">
+          {{ t('board.empty', '게시글이 없습니다.') }}
+        </div>
+      </div>
+
+      <Pagination
+        :page="page"
+        :last-page="lastPage"
+        @change="onPageChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useApi } from '../composables/useApi.js';
+import { useLocale } from '../composables/useLocale.js';
+import Pagination from '../components/Pagination.vue';
+
+const router = useRouter();
+const route = useRoute();
+const api = useApi();
+const { t } = useLocale();
+
+const posts = ref([]);
+const page = ref(1);
+const lastPage = ref(1);
+const loading = ref(false);
+let pollingTimer = null;
+
+/** 게시글 목록 로드 */
+async function loadPosts() {
+  loading.value = true;
+  try {
+    const res = await api.get(`/api/posts?page=${page.value}`);
+    if (res) {
+      posts.value = res.data || res.posts || [];
+      page.value = res.page || 1;
+      lastPage.value = res.lastPage || 1;
+    }
+  } catch (e) {
+    console.error('[Board] load failed:', e);
+  } finally {
+    loading.value = false;
+  }
+  // processing 게시글 있으면 폴링 시작
+  startPolling();
+}
+
+/** 페이지 변경 */
+function onPageChange(newPage) {
+  page.value = newPage;
+  loadPosts();
+}
+
+/** Processing 상태 REST 폴링 — SSR board/index.html 패턴 */
+function startPolling() {
+  stopPolling();
+  const processingIds = posts.value
+    .filter(p => p.status === 'processing')
+    .map(p => p.id);
+  if (!processingIds.length) return;
+
+  pollingTimer = setInterval(async () => {
+    try {
+      const res = await api.get(`/api/posts/status?ids=${processingIds.join(',')}`);
+      if (!res?.statuses) return;
+      let allDone = true;
+      for (const id of processingIds) {
+        if (res.statuses[id] === 'processing') { allDone = false; break; }
+      }
+      if (allDone) {
+        stopPolling();
+        loadPosts();
+      }
+    } catch { /* 무시 */ }
+  }, 5000);
+}
+
+function stopPolling() {
+  if (pollingTimer) { clearInterval(pollingTimer); pollingTimer = null; }
+}
+
+onMounted(() => {
+  page.value = parseInt(route.query.page) || 1;
+  loadPosts();
+});
+
+onUnmounted(stopPolling);
+</script>