npm - @fuzionx/framework - Versions diffs - 0.1.45 → 0.1.47 - Mend

@fuzionx/framework 0.1.45 → 0.1.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (92) hide show

package/cli/templates/make/app-ssr/services/UserService.js ADDED Viewed

@@ -0,0 +1,48 @@
+import { Service } from '@fuzionx/framework';
+/**
+ * UserService — SSR 사용자 서비스
+ *
+ * 사용자 프로필 조회 및 수정 비즈니스 로직 처리.
+ * 비밀번호 변경 시 bcrypt 해시 적용.
+ *
+ * @extends Service
+ */
+export default class UserService extends Service {
+  /**
+   * 사용자 단건 조회
+   *
+   * @param {number} id - 사용자 ID
+   * @returns {Promise<import('../../../database/models/User.js').default|null>} 사용자 또는 null
+   */
+  async find(id) {
+    return this.db.User.find(id);
+  }
+  /**
+   * 사용자 프로필 수정
+   *
+   * name, email, password 중 변경된 필드만 업데이트.
+   * password가 있을 경우 bcrypt 해시 후 저장.
+   *
+   * @param {number} id   - 사용자 ID
+   * @param {Object} data - 수정할 데이터
+   * @param {string} [data.name]     - 이름
+   * @param {string} [data.email]    - 이메일
+   * @param {string} [data.password] - 새 비밀번호 (평문 → bcrypt 해시)
+   * @returns {Promise<import('../../../database/models/User.js').default>} 수정된 사용자
+   * @throws {AppError} 404 — 사용자 없음
+   */
+  async update(id, data) {
+    const user = await this.db.User.find(id);
+    if (!user) throw this.error('User not found', 404);
+    const updates = {};
+    if (data.name) updates.name = data.name;
+    if (data.email) updates.email = data.email;
+    if (data.password) updates.password = this.app.hash.bcrypt(data.password);
+    await user.update(updates);
+    return user;
+  }
+}

package/cli/templates/make/app-ssr/views/default/errors/404.html ADDED Viewed

@@ -0,0 +1,11 @@
+{% extends "layouts/main.html" %}
+{% block title %}404{% endblock %}
+{% block content %}
+<div class="auth-container">
+  <div class="glass-card auth-card">
+    <div class="auth-logo">404</div>
+    <p class="auth-subtitle">{{ t(key="page.404", default="페이지를 찾을 수 없습니다") }}</p>
+    <a href="/" class="btn btn-primary btn-full">{{ t(key="btn.go_home", default="홈으로") }}</a>
+  </div>
+</div>
+{% endblock %}

package/cli/templates/make/app-ssr/views/default/errors/500.html ADDED Viewed

@@ -0,0 +1,48 @@
+{% extends "layouts/main.html" %}
+{% block title %}500{% endblock %}
+{% block content %}
+<div class="auth-container">
+  <div class="glass-card auth-card">
+    <div class="auth-logo">500</div>
+    <p class="auth-subtitle">{{ t(key="page.500", default="서버 오류가 발생했습니다") }}</p>
+    {# 개발 모드: 에러 메시지 + 스택 트레이스 표시 #}
+    {% if config.debug and error %}
+    <div class="error-detail">
+      <p class="error-message">{{ error.message }}</p>
+      {% if error.stack %}
+      <pre class="error-stack">{{ error.stack }}</pre>
+      {% endif %}
+    </div>
+    {% endif %}
+    <a href="/" class="btn btn-primary btn-full">{{ t(key="btn.go_home", default="홈으로") }}</a>
+  </div>
+</div>
+<style>
+.error-detail {
+  margin: 1.5rem 0;
+  text-align: left;
+}
+.error-message {
+  color: var(--danger, #e74c3c);
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  word-break: break-all;
+}
+.error-stack {
+  background: rgba(0, 0, 0, 0.3);
+  color: var(--text-secondary, #aaa);
+  padding: 1rem;
+  border-radius: var(--radius-sm, 8px);
+  font-size: 0.75rem;
+  line-height: 1.6;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 400px;
+  overflow-y: auto;
+}
+</style>
+{% endblock %}

package/cli/templates/make/app-ssr/views/default/layouts/main.html ADDED Viewed

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="{{ locale }}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{% block title %}FuzionX{% endblock %}</title>
+  <meta name="description" content="{% block description %}FuzionX — Rust-powered full-stack Node.js framework for production-grade applications{% endblock %}">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/public/css/style.css">
+  <link rel="stylesheet" href="/public/css/landing.css">
+  <link rel="stylesheet" href="/public/css/fx-ui.css">
+  {% block head %}{% endblock %}
+  <script>
+    window.__FX__ENC_ENABLED = {{ config.bridge.asp.enabled | default(value=false) }} || {{ config.app.asp.enabled | default(value=false) }}
+  </script>
+</head>
+<body>
+  <div class="orb orb-1"></div>
+  <div class="orb orb-2"></div>
+  <div class="orb orb-3"></div>
+  <nav class="navbar">
+    <div class="nav-container">
+      <a href="/" class="nav-brand">FuzionX</a>
+      <div class="nav-links">
+        <a href="/" class="nav-link">{{ t(key="nav.home", default="Home") }}</a>
+        <a href="/features" class="nav-link">{{ t(key="nav.features", default="Features") }}</a>
+        <a href="/chat" class="nav-link">{{ t(key="nav.chat", default="Chat Demo") }}</a>
+        <a href="/board" class="nav-link">{{ t(key="nav.board", default="게시판") }}</a>
+        {% if auth.user %}
+        <a href="/profile" class="nav-link">{{ t(key="nav.profile", default="프로필") }}</a>
+        <form action="/logout" method="POST" class="nav-logout">
+          <button type="submit" class="nav-link btn-link">{{ t(key="nav.logout", default="로그아웃") }}</button>
+        </form>
+        {% else %}
+        <a href="/login" class="nav-link">{{ t(key="nav.login", default="로그인") }}</a>
+        <a href="/register" class="nav-link">{{ t(key="nav.register", default="회원가입") }}</a>
+        {% endif %}
+        <div class="lang-switcher">
+          <button class="lang-switcher-btn" onclick="this.parentElement.classList.toggle('open')">
+            {{ locale | upper }}
+            <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">
+            {% for loc in locales %}
+            <li class="lang-switcher-item{% if loc == locale %} active{% endif %}">
+              <a href="?lang={{ loc }}" class="lang-switcher-link">{{ loc | upper }}</a>
+            </li>
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+      <button class="nav-mobile-toggle" onclick="var nl=document.querySelector('.nav-links'),bd=document.querySelector('.nav-backdrop');nl.classList.toggle('open');bd.classList.toggle('open')" aria-label="Menu">
+        <span></span><span></span><span></span>
+      </button>
+    </div>
+  </nav>
+  <div class="nav-backdrop" onclick="document.querySelector('.nav-links').classList.remove('open');this.classList.remove('open')"></div>
+  <main class="main-content has-nav">
+    {% block flash_messages %}
+    {% if flash.error %}
+    <div class="container" style="margin-bottom: -1rem;">
+      <div class="alert alert-error">{{ flash.error }}</div>
+    </div>
+    {% endif %}
+    {% if flash.success %}
+    <div class="container" style="margin-bottom: -1rem;">
+      <div class="alert alert-success">{{ flash.success }}</div>
+    </div>
+    {% endif %}
+    {% endblock flash_messages %}
+    {% block content %}{% endblock %}
+  </main>
+  <script src="/public/js/fx-client.js"></script>
+  {% if auth.user and _fx_client_secret %}
+  <script>
+    FxClient.init('{{ _fx_client_secret | safe }}', '{{ _fx_asp_secret | safe }}', '{{ _fx_asp_header | safe }}');
+    setInterval(function() {
+      aspFetch('/api/heartbeat')
+        .then(function(r) { if (r && r.status === 401) window.location.href = '/login'; })
+        .catch(function() {});
+    }, 5 * 60 * 1000);
+  </script>
+  {% elif config.bridge.asp.enabled is defined and config.bridge.asp.enabled %}
+  <script>
+    FxClient.initPublic('{{ config.bridge.asp.master_secret }}', '{{ config.bridge.asp.header_signal | default(value="Ruxy-Enc-Mode") }}');
+  </script>
+  {% endif %}
+  <script>document.addEventListener('click',function(e){document.querySelectorAll('.lang-switcher.open').forEach(function(el){if(!el.contains(e.target))el.classList.remove('open')})});</script>
+  <script src="/public/js/fx-ui.js"></script>
+  {% block scripts %}{% endblock %}
+</body>
+</html>

package/cli/templates/make/app-ssr/views/default/pages/board/form.html ADDED Viewed

@@ -0,0 +1,240 @@
+{% extends "layouts/main.html" %}
+{% block title %}{% if post %}{{ t(key="board.edit_title", default="글 수정") }}{% else %}{{ t(key="board.new_title", default="새 글 작성") }}{% endif %} — FuzionX{% endblock %}
+{% block flash_messages %}{% endblock %}
+{% block content %}
+<div class="container">
+  <div class="glass-card">
+    <h1 class="page-title">{% if post %}{{ t(key="board.edit_title", default="글 수정") }}{% else %}{{ t(key="board.new_title", default="새 글 작성") }}{% endif %}</h1>
+    <form class="form" action="{% if post %}/board/{{ post.id }}{% else %}/board{% endif %}" method="POST" enctype="multipart/form-data" onsubmit="return handleUpload(event)">
+      <div class="form-group">
+        <label for="title">{{ t(key="label.title", default="제목") }}</label>
+        <input type="text" id="title" name="title" value="{% if post %}{{ post.title }}{% endif %}" required>
+      </div>
+      <div class="form-group">
+        <label for="content">{{ t(key="label.content", default="내용") }}</label>
+        {# ── 마크다운 에디터 툴바 (프레임워크 기능 시연) ── #}
+        <div class="editor-toolbar" id="editorToolbar">
+          <button type="button" onclick="editorCmd('bold')" title="Bold"><b>B</b></button>
+          <button type="button" onclick="editorCmd('italic')" title="Italic"><i>I</i></button>
+          <button type="button" onclick="editorCmd('underline')" title="Underline"><u>U</u></button>
+          <div class="separator"></div>
+          <button type="button" onclick="editorInsert('# ')" title="H1">H1</button>
+          <button type="button" onclick="editorInsert('## ')" title="H2">H2</button>
+          <div class="separator"></div>
+          <button type="button" onclick="editorInsert('- ')" title="List">⊙</button>
+          <button type="button" onclick="editorInsert('> ')" title="Quote">❝</button>
+          <button type="button" onclick="editorInsert('```\n\n```')" title="Code">⟨/⟩</button>
+          <div class="separator"></div>
+          <button type="button" onclick="editorInsert('[링크](url)')" title="Link">🔗</button>
+        </div>
+        <textarea id="content" name="content" rows="14" class="has-toolbar" required>{% if post %}{{ post.content }}{% endif %}</textarea>
+      </div>
+      {# ── 기존 첨부파일 목록 (수정 모드, 썸네일 + 개별 삭제) ── #}
+      {% if post and files and files | length > 0 %}
+      <div class="form-group">
+        <label>{{ t(key="board.attached_files", default="기존 첨부파일") }}</label>
+        <div class="existing-files-grid">
+          {% for file in files %}
+          <div class="existing-file-card">
+            <div class="existing-file-thumb">
+              {% if file.thumbUrl %}
+              <img src="{{ file.thumbUrl }}" alt="{{ file.original_name }}" loading="lazy">
+              {% elif file.isImage %}
+              <img src="{{ file.url }}" alt="{{ file.original_name }}" loading="lazy">
+              {% elif file.isVideo %}
+              <div class="thumb-placeholder">🎬</div>
+              {% else %}
+              <div class="thumb-placeholder">📄</div>
+              {% endif %}
+            </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="삭제"
+                onclick="if(confirm('삭제?')){var f=document.createElement('form');f.method='POST';f.action='/board/attachment/{{ file.id }}/delete';document.body.appendChild(f);f.submit();}">✕</button>
+            </div>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
+      {# ── 새 파일 업로드 (드래그&드롭 + 클릭) ── #}
+      <div class="form-group">
+        <label>{{ t(key="label.attachments", default="첨부파일") }}</label>
+        <div class="file-upload-area" id="dropZone" onclick="document.getElementById('fileInput').click()">
+          <div class="upload-icon">📎</div>
+          <div class="upload-text">{{ t(key="board.drop_files", default="클릭 또는 파일을 여기에 드래그") }}</div>
+          <div class="upload-hint">{{ t(key="board.file_hint", default="이미지, 비디오, 문서 파일") }}</div>
+        </div>
+        <input type="file" id="fileInput" name="files" multiple style="display:none"
+               accept="image/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip">
+        <div class="file-list" id="fileList"></div>
+      </div>
+      {# ── 업로드 진행률 ── #}
+      <div class="upload-progress" id="uploadProgress" style="display:none;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" id="progressFill" style="height:100%;width:0;background:linear-gradient(90deg,#667eea,#764ba2);border-radius: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 id="progressText">0%</span>
+          <span id="progressSpeed"></span>
+        </div>
+      </div>
+      {% if flash.error %}
+      <div class="alert alert-error">{{ flash.error }}</div>
+      {% endif %}
+      {% if flash.success %}
+      <div class="alert alert-success">{{ flash.success }}</div>
+      {% endif %}
+      <div class="form-actions">
+        <button type="submit" class="btn btn-primary" id="submitBtn">{% if post %}{{ t(key="btn.edit", default="수정") }}{% else %}{{ t(key="btn.create", default="작성") }}{% endif %}</button>
+        <a href="/board" class="btn btn-outline">{{ t(key="btn.cancel", default="취소") }}</a>
+      </div>
+    </form>
+  </div>
+</div>
+<script>
+/** 에디터 텍스트 감싸기 (Bold/Italic/Underline) */
+function editorCmd(type) {
+  var ta = document.getElementById('content');
+  var start = ta.selectionStart, end = ta.selectionEnd;
+  var sel = ta.value.substring(start, end);
+  var wrap = { bold: ['**','**'], italic: ['_','_'], underline: ['__','__'] };
+  var w = wrap[type] || ['',''];
+  ta.setRangeText(w[0] + sel + w[1], start, end, 'end');
+  ta.focus();
+}
+/** 에디터 텍스트 삽입 */
+function editorInsert(text) {
+  var ta = document.getElementById('content');
+  ta.setRangeText(text, ta.selectionStart, ta.selectionStart, 'end');
+  ta.focus();
+}
+/** 파일 업로드 — 드래그&드롭 + 미리보기 */
+(function() {
+  var drop = document.getElementById('dropZone');
+  var input = document.getElementById('fileInput');
+  var list = document.getElementById('fileList');
+  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 renderFiles() {
+    list.innerHTML = '';
+    if (!input.files.length) return;
+    for (var i = 0; i < input.files.length; i++) {
+      var f = input.files[i];
+      var div = document.createElement('div');
+      div.className = 'file-item';
+      var preview = '';
+      if (f.type.startsWith('image/')) {
+        var url = URL.createObjectURL(f);
+        preview = '<img src="' + url + '" class="file-preview">';
+      } else if (f.type.startsWith('video/')) {
+        preview = '<span class="file-preview-icon">🎬</span>';
+      } else {
+        preview = '<span class="file-preview-icon">📄</span>';
+      }
+      div.innerHTML = preview + '<span class="file-name">' + f.name + '</span><span class="file-size">' + formatSize(f.size) + '</span>';
+      list.appendChild(div);
+    }
+  }
+  input.addEventListener('change', renderFiles);
+  ['dragenter','dragover'].forEach(function(e) {
+    drop.addEventListener(e, function(ev) { ev.preventDefault(); drop.classList.add('dragover'); });
+  });
+  ['dragleave','drop'].forEach(function(e) {
+    drop.addEventListener(e, function(ev) { ev.preventDefault(); drop.classList.remove('dragover'); });
+  });
+  drop.addEventListener('drop', function(ev) {
+    input.files = ev.dataTransfer.files;
+    renderFiles();
+  });
+})();
+/** XHR 업로드 — 진행률 + 자동 리다이렉트 */
+function handleUpload(e) {
+  var fileInput = document.getElementById('fileInput');
+  if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
+    return true; // 파일 없으면 기본 폼 제출
+  }
+  e.preventDefault();
+  var form = e.target;
+  var btn = document.getElementById('submitBtn');
+  var progress = document.getElementById('uploadProgress');
+  var fill = document.getElementById('progressFill');
+  var pText = document.getElementById('progressText');
+  var pSpeed = document.getElementById('progressSpeed');
+  btn.disabled = true;
+  btn.textContent = '업로드 중...';
+  progress.style.display = 'block';
+  var formData = new FormData(form);
+  var xhr = new XMLHttpRequest();
+  var startTime = Date.now();
+  xhr.upload.onprogress = function(ev) {
+    if (!ev.lengthComputable) return;
+    var pct = Math.round((ev.loaded / ev.total) * 100);
+    fill.style.width = pct + '%';
+    pText.textContent = pct + '%';
+    var elapsed = (Date.now() - startTime) / 1000;
+    if (elapsed > 0.5) {
+      var bps = ev.loaded / elapsed;
+      if (bps > 1048576) {
+        pSpeed.textContent = (bps / 1048576).toFixed(1) + ' MB/s';
+      } else {
+        pSpeed.textContent = (bps / 1024).toFixed(0) + ' KB/s';
+      }
+    }
+  };
+  xhr.onload = function() {
+    if (xhr.status >= 200 && xhr.status < 400) {
+      fill.style.width = '100%';
+      pText.textContent = '업로드 완료!';
+      pSpeed.textContent = '';
+      btn.textContent = '🔄 썸네일 추출중...';
+      setTimeout(function() {
+        window.location.href = xhr.responseURL || '/board';
+      }, 1500);
+    } else {
+      btn.disabled = false;
+      btn.textContent = '재시도';
+      pText.textContent = '오류 발생';
+      fill.style.background = '#e74c3c';
+    }
+  };
+  xhr.onerror = function() {
+    btn.disabled = false;
+    btn.textContent = '재시도';
+    pText.textContent = '네트워크 오류';
+    fill.style.background = '#e74c3c';
+  };
+  xhr.open('POST', form.action);
+  xhr.send(formData);
+  return false;
+}
+</script>
+{% endblock %}

package/cli/templates/make/app-ssr/views/default/pages/board/index.html ADDED Viewed

@@ -0,0 +1,73 @@
+{% extends "layouts/main.html" %}
+{% block title %}{{ t(key="board.title", default="게시판") }} — FuzionX{% endblock %}
+{% block content %}
+<div class="container">
+  <div class="glass-card">
+    <div class="page-header">
+      <h1 class="page-title">{{ t(key="board.title", default="게시판") }}</h1>
+      <a href="/board/new" class="btn btn-primary">{{ t(key="btn.new_post", default="새 글") }}</a>
+    </div>
+    <div class="post-list">
+      {% for post in posts %}
+      <a href="/board/{{ post.id }}" class="post-card">
+        {% if post.thumbUrl %}
+        <div class="post-card-thumb">
+          <img src="{{ post.thumbUrl }}" alt="{{ post.title }}" loading="lazy">
+        </div>
+        {% endif %}
+        <div class="post-card-body">
+          <h3 class="post-card-title">
+            {% if post.status == "processing" %}<span class="badge badge-processing">🔄 {{ t(key="board.processing", default="처리중") }}</span> {% endif %}{{ post.title }}
+          </h3>
+          <div class="post-card-meta">
+            <span>{{ post.user_name | default(value="-") }}</span>
+            <span>{{ post.created_at }}</span>
+          </div>
+        </div>
+      </a>
+      {% endfor %}
+      {% if not posts or posts | length == 0 %}
+      <div class="post-list-empty">{{ t(key="board.empty", default="게시글이 없습니다.") }}</div>
+      {% endif %}
+    </div>
+    {% set baseUrl = "/board" %}
+    {% include "partials/pagination.html" %}
+  </div>
+</div>
+{# processing 게시글이 있으면 REST 폴링으로 상태 확인 #}
+<script>
+(function() {
+  var badges = document.querySelectorAll('.badge-processing');
+  if (!badges.length) return;
+  // processing post ID 수집 (부모 .post-card의 href에서 추출)
+  var ids = [];
+  badges.forEach(function(b) {
+    var card = b.closest('.post-card');
+    if (card) {
+      var m = card.getAttribute('href').match(/\/board\/(\d+)/);
+      if (m) ids.push(m[1]);
+    }
+  });
+  if (!ids.length) return;
+  var timer = setInterval(function() {
+    aspFetch('/api/board/status?ids=' + ids.join(','))
+      .then(function(res) {
+        if (!res || !res.statuses) return;
+        var allDone = true;
+        for (var i = 0; i < ids.length; i++) {
+          if (res.statuses[ids[i]] === 'processing') { allDone = false; break; }
+        }
+        if (allDone) {
+          clearInterval(timer);
+          location.reload();
+        }
+      });
+  }, 5000);
+})();
+</script>
+{% endblock %}

package/cli/templates/make/app-ssr/views/default/pages/board/show.html ADDED Viewed

@@ -0,0 +1,148 @@
+{% extends "layouts/main.html" %}
+{% block title %}{{ post.title }} — FuzionX{% endblock %}
+{% block content %}
+<div class="container">
+  <div class="glass-card">
+    <div class="page-header">
+      <h1 class="page-title">
+        {% if post.status == "processing" %}<span class="badge badge-processing">🔄 {{ t(key="board.processing", default="처리중") }}</span> {% endif %}{{ post.title }}
+      </h1>
+      {% if auth.user.id == post.user_id %}
+      <div class="page-actions">
+        <a href="/board/{{ post.id }}/edit" class="btn btn-outline">{{ t(key="btn.edit", default="수정") }}</a>
+        <form action="/board/{{ post.id }}/delete" method="POST" style="display:inline">
+          <button type="submit" class="btn btn-danger" onclick="return confirm('{{ t(key="board.confirm_delete", default="삭제하시겠습니까?") }}')">{{ t(key="btn.delete", default="삭제") }}</button>
+        </form>
+      </div>
+      {% endif %}
+    </div>
+    <div class="post-meta">
+      <span>{% if author %}{{ author.name }}{% else %}-{% endif %}</span>
+      <span>{{ post.created_at }}</span>
+    </div>
+    <div class="post-content">{{ post.content }}</div>
+    {# ── 비디오 썸네일 본문 표시 ── #}
+    {% if files and files | length > 0 %}
+    {% for file in files %}
+    {% if file.isVideo and file.thumbUrl %}
+    <div 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>
+    {% endif %}
+    {% endfor %}
+    {% endif %}
+    {# ── 첨부파일 섹션 ── #}
+    {% if files and files | length > 0 %}
+    <div class="post-attachments">
+      <h3>📎 {{ t(key="label.attachments", default="첨부파일") }} ({{ files | length }})</h3>
+      <div class="attachment-grid">
+        {% for file in files %}
+        <div class="attachment-card">
+          {% if file.isImage %}
+          {# 이미지: 썸네일 표시, 클릭 시 원본 lightbox #}
+          <a href="{{ file.url }}" class="lightbox-trigger" data-type="image" target="_blank">
+            <div class="attachment-thumb">
+              <img src="{{ file.thumbUrl | default(value=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>
+          {% elif file.isVideo %}
+          {# 비디오: 프레임 썸네일 + ▶ 오버레이 #}
+          <a href="{{ file.url }}" class="lightbox-trigger" data-type="video" target="_blank">
+            <div class="attachment-thumb">
+              {% if file.thumbUrl %}
+              <img src="{{ file.thumbUrl }}" alt="{{ file.original_name }}" loading="lazy">
+              {% else %}
+              <div class="thumb-placeholder">🎬</div>
+              {% endif %}
+              <div class="play-overlay">▶</div>
+            </div>
+            <div class="attachment-info">
+              <span class="attachment-name" title="{{ file.original_name }}">🎬 {{ file.original_name }}</span>
+            </div>
+          </a>
+          {% else %}
+          {# 일반 파일: 다운로드 링크 #}
+          <a 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>
+          {% endif %}
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+    {% endif %}
+    <div class="post-footer">
+      <a href="/board" class="btn btn-outline">{{ t(key="btn.back", default="← 목록") }}</a>
+    </div>
+  </div>
+</div>
+{# processing 상태면 REST 폴링으로 상태 확인 #}
+{% if post.status == "processing" %}
+<script>
+(function() {
+  var postId = '{{ post.id }}';
+  var timer = setInterval(function() {
+    aspFetch('/api/board/status?ids=' + postId)
+      .then(function(res) {
+        if (!res || !res.statuses) return;
+        if (res.statuses[postId] !== 'processing') {
+          clearInterval(timer);
+          location.reload();
+        }
+      });
+  }, 5000);
+})();
+</script>
+{% endif %}
+{# ── Lightbox 모달 (이미지 원본 / 비디오 재생) ── #}
+<div class="lightbox-overlay" id="lightbox" style="display:none">
+  <div class="lightbox-content">
+    <button class="lightbox-close" onclick="closeLightbox()">✕</button>
+    <div id="lightboxBody"></div>
+  </div>
+</div>
+<script>
+/** Lightbox — 이미지 원본 보기 / 비디오 재생 모달 */
+document.querySelectorAll('.lightbox-trigger').forEach(function(el) {
+  el.addEventListener('click', function(e) {
+    e.preventDefault();
+    var url = this.getAttribute('href');
+    var type = this.getAttribute('data-type');
+    var body = document.getElementById('lightboxBody');
+    if (type === 'video') {
+      body.innerHTML = '<video controls autoplay style="max-width:100%;max-height:80vh"><source src="' + url + '"></video>';
+    } else {
+      body.innerHTML = '<img src="' + url + '" style="max-width:100%;max-height:80vh">';
+    }
+    document.getElementById('lightbox').style.display = 'flex';
+  });
+});
+function closeLightbox() {
+  document.getElementById('lightbox').style.display = 'none';
+  document.getElementById('lightboxBody').innerHTML = '';
+}
+document.getElementById('lightbox').addEventListener('click', function(e) {
+  if (e.target === this) closeLightbox();
+});
+</script>
+{% endblock %}