@fuzionx/framework 0.1.48 → 0.1.49

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

@@ -54,7 +54,8 @@
       </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>
+        <span>{{ sizeText }}</span>
+        <span>{{ speedLabel }}</span>
       </div>
     </div>
   </div>
@@ -62,6 +63,9 @@
 
 <script setup>
 import { ref, computed } from 'vue';
+import { useLocale } from '../composables/useLocale.js';
+
+const { t } = useLocale();
 
 /**
  * @prop {string} label - 레이블 텍스트
@@ -83,14 +87,16 @@ const selectedFiles = ref([]);
 const uploading = ref(false);
 const progress = ref(0);
 const progressText = ref('0%');
-const speedText = ref('');
+const sizeText = ref('');
+const speedLabel = 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';
+  if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
+  return (bytes / 1073741824).toFixed(2) + ' GB';
 }
 
 /** 파일 선택 이벤트 */
@@ -122,23 +128,32 @@ function setFiles(fileList) {
 }
 
 /** 진행률 업데이트 (외부에서 호출) */
-function setProgress(pct, speed) {
+function setProgress(pct, speed, loaded, total) {
   uploading.value = true;
   progress.value = pct;
   progressText.value = pct + '%';
-  speedText.value = speed || '';
+
+  // 파일 크기 표시
+  if (loaded !== undefined && total !== undefined) {
+    sizeText.value = formatSize(loaded) + ' / ' + formatSize(total);
+  }
+
+  // 속도 레이블
+  if (speed) {
+    speedLabel.value = t('board.upload_speed', '속도') + ': ' + speed;
+  }
 }
 
 /** 업로드 완료 */
-function setComplete(text = '업로드 완료!') {
+function setComplete(text) {
   progress.value = 100;
-  progressText.value = text;
-  speedText.value = '';
+  progressText.value = text || t('board.upload_complete', '업로드 완료!');
+  speedLabel.value = '';
 }
 
 /** 업로드 오류 */
-function setError(text = '오류 발생') {
-  progressText.value = text;
+function setError(text) {
+  progressText.value = text || t('board.upload_error', '오류 발생');
   progressColor.value = '#e74c3c';
 }
 
@@ -153,7 +168,8 @@ function reset() {
   uploading.value = false;
   progress.value = 0;
   progressText.value = '0%';
-  speedText.value = '';
+  sizeText.value = '';
+  speedLabel.value = '';
   progressColor.value = 'linear-gradient(90deg, #667eea, #764ba2)';
 }
 

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

@@ -80,7 +80,7 @@ export function useApi() {
    * XHR 업로드 — 진행률 콜백 지원.
    * @param {string} url - 업로드 URL
    * @param {FormData} formData - 폼 데이터
-   * @param {Function} onProgress - 진행률 콜백 (percent, speed)
+   * @param {Function} onProgress - 진행률 콜백 (percent, speed, loaded, total)
    * @param {string} [method='POST'] - HTTP 메서드
    * @returns {Promise<{ok: boolean, responseURL: string}>}
    */
@@ -100,7 +100,7 @@ export function useApi() {
             ? (bps / 1048576).toFixed(1) + ' MB/s'
             : (bps / 1024).toFixed(0) + ' KB/s';
         }
-        onProgress(pct, speed);
+        onProgress(pct, speed, ev.loaded, ev.total);
       };
 
       xhr.onload = () => {

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

@@ -162,10 +162,10 @@ async function handleSubmit() {
   try {
     if (hasFiles) {
       // XHR 업로드 + 진행률
-      const result = await api.uploadWithProgress(uploadUrl, formData, (pct, speed) => {
-        fileUploader.value?.setProgress(pct, speed);
+      const result = await api.uploadWithProgress(uploadUrl, formData, (pct, speed, loaded, total) => {
+        fileUploader.value?.setProgress(pct, speed, loaded, total);
       }, method);
-      fileUploader.value?.setComplete('업로드 완료!');
+      fileUploader.value?.setComplete();
       toast.success(isEdit.value ? t('board.updated', '글이 수정되었습니다.') : t('board.created', '글이 작성되었습니다.'));
       setTimeout(() => {
         router.push(isEdit.value ? `/board/${route.params.id}` : '/board');

package/cli/templates/make/app-ssr/routes/web.js

@@ -1,4 +1,4 @@
-import { auth } from '@fuzionx/framework';
+import { auth, loadUser } from '@fuzionx/framework';
 import HomeController from '../controllers/HomeController.js';
 import FeaturesController from '../controllers/FeaturesController.js';
 import ChatController from '../controllers/ChatController.js';
@@ -7,9 +7,11 @@ import UserController from '../controllers/UserController.js';
 import PostController from '../controllers/PostController.js';
 
 export default (r) => {
-  // ── 공개 페이지 (인증 불필요) ──
-  r.get('/', HomeController.index);
-  r.get('/features', FeaturesController.index);
+  // ── 공개 페이지 (인증 불필요, 세션 유저 로드) ──
+  r.group('', { middleware: [loadUser()] }, (r) => {
+    r.get('/', HomeController.index);
+    r.get('/features', FeaturesController.index);
+  });
 
   // ── 인증 ──
   r.get('/login', AuthController.loginPage);

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

@@ -81,6 +81,7 @@
         </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="progressSize"></span>
           <span id="progressSpeed"></span>
         </div>
       </div>
@@ -128,7 +129,8 @@ function editorInsert(text) {
   function formatSize(bytes) {
     if (bytes < 1024) return bytes + ' B';
     if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
-    return (bytes / 1048576).toFixed(1) + ' MB';
+    if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
+    return (bytes / 1073741824).toFixed(2) + ' GB';
   }
 
   function renderFiles() {
@@ -168,7 +170,25 @@ function editorInsert(text) {
   });
 })();
 
-/** XHR 업로드 — 진행률 + 자동 리다이렉트 */
+/** i18n 텍스트 */
+var _uploadLabels = {
+  speed: '{{ t(key="board.upload_speed", default="속도") }}',
+  complete: '{{ t(key="board.upload_complete", default="업로드 완료!") }}',
+  error: '{{ t(key="board.upload_error", default="오류 발생") }}',
+  networkError: '{{ t(key="board.upload_network_error", default="네트워크 오류") }}',
+  uploading: '{{ t(key="board.uploading", default="업로드 중...") }}',
+  thumbnailExtracting: '{{ t(key="board.thumbnail_extracting", default="🔄 썸네일 추출중...") }}'
+};
+
+/** 파일 크기 포맷 (진행률용) */
+function _fmtSize(bytes) {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+  if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
+  return (bytes / 1073741824).toFixed(2) + ' GB';
+}
+
+/** XHR 업로드 — 진행률 + 파일 크기 + 속도 + 자동 리다이렉트 */
 function handleUpload(e) {
   var fileInput = document.getElementById('fileInput');
   if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
@@ -181,10 +201,11 @@ function handleUpload(e) {
   var progress = document.getElementById('uploadProgress');
   var fill = document.getElementById('progressFill');
   var pText = document.getElementById('progressText');
+  var pSize = document.getElementById('progressSize');
   var pSpeed = document.getElementById('progressSpeed');
 
   btn.disabled = true;
-  btn.textContent = '업로드 중...';
+  btn.textContent = _uploadLabels.uploading;
   progress.style.display = 'block';
 
   var formData = new FormData(form);
@@ -197,30 +218,35 @@ function handleUpload(e) {
     fill.style.width = pct + '%';
     pText.textContent = pct + '%';
 
+    // 파일 크기 표시 (loaded / total)
+    pSize.textContent = _fmtSize(ev.loaded) + ' / ' + _fmtSize(ev.total);
+
     var elapsed = (Date.now() - startTime) / 1000;
     if (elapsed > 0.5) {
       var bps = ev.loaded / elapsed;
+      var speedVal;
       if (bps > 1048576) {
-        pSpeed.textContent = (bps / 1048576).toFixed(1) + ' MB/s';
+        speedVal = (bps / 1048576).toFixed(1) + ' MB/s';
       } else {
-        pSpeed.textContent = (bps / 1024).toFixed(0) + ' KB/s';
+        speedVal = (bps / 1024).toFixed(0) + ' KB/s';
       }
+      pSpeed.textContent = _uploadLabels.speed + ': ' + speedVal;
     }
   };
 
   xhr.onload = function() {
     if (xhr.status >= 200 && xhr.status < 400) {
       fill.style.width = '100%';
-      pText.textContent = '업로드 완료!';
+      pText.textContent = _uploadLabels.complete;
       pSpeed.textContent = '';
-      btn.textContent = '🔄 썸네일 추출중...';
+      btn.textContent = _uploadLabels.thumbnailExtracting;
       setTimeout(function() {
         window.location.href = xhr.responseURL || '/board';
       }, 1500);
     } else {
       btn.disabled = false;
       btn.textContent = '재시도';
-      pText.textContent = '오류 발생';
+      pText.textContent = _uploadLabels.error;
       fill.style.background = '#e74c3c';
     }
   };
@@ -228,7 +254,7 @@ function handleUpload(e) {
   xhr.onerror = function() {
     btn.disabled = false;
     btn.textContent = '재시도';
-    pText.textContent = '네트워크 오류';
+    pText.textContent = _uploadLabels.networkError;
     fill.style.background = '#e74c3c';
   };
 

package/index.js

@@ -64,4 +64,4 @@ export { default as OpenAPI } from './lib/view/OpenAPI.js';
 export { PaginationUtil, StrUtil, NumUtil, DateUtil, ArrUtil, FunctionUtil, ObjectUtil } from './lib/utilities/index.js';
 
 // ── Built-in Middleware ──
-export { bodyParser, cors, auth, apiAuth, csrf, session, theme } from './lib/middleware/index.js';
+export { bodyParser, cors, auth, apiAuth, csrf, session, theme, loadUser } from './lib/middleware/index.js';

package/lib/middleware/index.js

@@ -11,3 +11,4 @@ export { apiAuth } from './apiAuth.js';
 export { csrf } from './csrf.js';
 export { session } from './session.js';
 export { theme } from './theme.js';
+export { loadUser } from './loadUser.js';

package/lib/middleware/loadUser.js

@@ -0,0 +1,48 @@
+/**
+ * loadUser — 세션 유저 로드 미들웨어 (비강제)
+ *
+ * auth 미들웨어와 동일하게 ctx.session.userId → db.User.find() → ctx.user 설정.
+ * 차이점: 세션이 없거나 userId가 없으면 redirect/401 없이 그냥 통과.
+ *
+ * 공개 페이지에서도 로그인 상태를 확인하여 네비게이션 메뉴 등에 반영할 때 사용.
+ *
+ * @example
+ *   // 글로벌 미들웨어로 등록 (모든 라우트에 적용)
+ *   import { loadUser } from '@fuzionx/framework';
+ *   app.use(loadUser());
+ *
+ *   // 또는 특정 라우트/그룹에만 적용
+ *   r.group('', { middleware: [loadUser()] }, (r) => {
+ *     r.get('/', HomeController.index);
+ *   });
+ *
+ * @see docs/framework/14-authentication.md
+ *
+ * @param {object} [opts]
+ * @param {string} [opts.sessionKey='userId'] - 세션에서 유저 ID를 읽을 키
+ * @param {string} [opts.model='User'] - DB 모델명
+ */
+export function loadUser(opts = {}) {
+    const sessionKey = opts.sessionKey || 'userId';
+    const modelName = opts.model || 'User';
+
+    return async (ctx, next) => {
+        // 이미 auth 미들웨어로 ctx.user가 설정된 경우 스킵
+        if (ctx.user) {
+            await next();
+            return;
+        }
+
+        const userId = ctx._rawReq?.session?.[sessionKey];
+
+        if (userId && ctx.app?.db?.[modelName]) {
+            try {
+                ctx.user = await ctx.app.db[modelName].find(userId);
+            } catch {
+                ctx.user = null;
+            }
+        }
+
+        await next();
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuzionx/framework",
-  "version": "0.1.48",
+  "version": "0.1.49",
   "type": "module",
   "description": "Full-stack MVC framework built on @fuzionx/core — Controller, Service, Model, Middleware, DI, EventBus",
   "main": "index.js",
@@ -34,7 +34,7 @@
     "url": "https://github.com/saytohenry/fuzionx"
   },
   "dependencies": {
-    "@fuzionx/core": "^0.1.48",
+    "@fuzionx/core": "^0.1.49",
     "better-sqlite3": "^12.8.0",
     "knex": "^3.2.5",
     "mongoose": "^9.3.2",