@fuzionx/framework 0.1.45 → 0.1.47

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

@@ -0,0 +1,27 @@
+{% extends "layouts/main.html" %}
+{% block title %}{{ t(key="page.login", default="로그인") }} — FuzionX{% endblock %}
+{% block content %}
+<div class="auth-container">
+  <div class="glass-card auth-card">
+    <div class="auth-logo">FuzionX</div>
+    <p class="auth-subtitle">{{ t(key="page.login", default="로그인") }}</p>
+
+    <form class="auth-form" action="/login" method="POST">
+      <div class="form-group">
+        <label for="email">{{ t(key="label.email", default="이메일") }}</label>
+        <input type="email" id="email" name="email" required placeholder="name@example.com">
+      </div>
+      <div class="form-group">
+        <label for="password">{{ t(key="label.password", default="비밀번호") }}</label>
+        <input type="password" id="password" name="password" required>
+      </div>
+      <button type="submit" class="btn btn-primary btn-full">{{ t(key="btn.login", default="로그인") }}</button>
+    </form>
+
+    <div class="auth-footer">
+      {{ t(key="auth.no_account", default="계정이 없으신가요?") }}
+      <a href="/register">{{ t(key="btn.register", default="회원가입") }}</a>
+    </div>
+  </div>
+</div>
+{% endblock %}

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

@@ -0,0 +1,36 @@
+{% extends "layouts/main.html" %}
+{% block title %}{{ t(key="profile.title", default="프로필 수정") }} — FuzionX{% endblock %}
+{% block flash_messages %}{% endblock %}
+{% block content %}
+<div class="container">
+  <div class="glass-card">
+    <h1 class="page-title">{{ t(key="profile.title", default="프로필 수정") }}</h1>
+
+    <form class="form" action="/profile" method="POST">
+      <div class="form-group">
+        <label for="name">{{ t(key="label.name", default="이름") }}</label>
+        <input type="text" id="name" name="name" value="{{ auth.user.name }}" required>
+      </div>
+      <div class="form-group">
+        <label for="email">{{ t(key="label.email", default="이메일") }}</label>
+        <input type="email" id="email" name="email" value="{{ auth.user.email }}" required>
+      </div>
+      <div class="form-group">
+        <label for="password">{{ t(key="profile.new_password", default="새 비밀번호 (변경 시에만)") }}</label>
+        <input type="password" id="password" name="password">
+      </div>
+      <div class="form-group">
+        <label for="password_confirm">{{ t(key="label.password_confirm", default="비밀번호 확인") }}</label>
+        <input type="password" id="password_confirm" name="password_confirm">
+      </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 %}
+      <button type="submit" class="btn btn-primary">{{ t(key="btn.save", default="저장") }}</button>
+    </form>
+  </div>
+</div>
+{% endblock %}

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

@@ -0,0 +1,35 @@
+{% extends "layouts/main.html" %}
+{% block title %}{{ t(key="page.register", default="회원가입") }} — FuzionX{% endblock %}
+{% block content %}
+<div class="auth-container">
+  <div class="glass-card auth-card">
+    <div class="auth-logo">FuzionX</div>
+    <p class="auth-subtitle">{{ t(key="page.register", default="회원가입") }}</p>
+
+    <form class="auth-form" action="/register" method="POST">
+      <div class="form-group">
+        <label for="name">{{ t(key="label.name", default="이름") }}</label>
+        <input type="text" id="name" name="name" required>
+      </div>
+      <div class="form-group">
+        <label for="email">{{ t(key="label.email", default="이메일") }}</label>
+        <input type="email" id="email" name="email" required placeholder="name@example.com">
+      </div>
+      <div class="form-group">
+        <label for="password">{{ t(key="label.password", default="비밀번호") }}</label>
+        <input type="password" id="password" name="password" required>
+      </div>
+      <div class="form-group">
+        <label for="password_confirm">{{ t(key="label.password_confirm", default="비밀번호 확인") }}</label>
+        <input type="password" id="password_confirm" name="password_confirm" required>
+      </div>
+      <button type="submit" class="btn btn-primary btn-full">{{ t(key="btn.register", default="회원가입") }}</button>
+    </form>
+
+    <div class="auth-footer">
+      {{ t(key="auth.has_account", default="이미 계정이 있으신가요?") }}
+      <a href="/login">{{ t(key="btn.login", default="로그인") }}</a>
+    </div>
+  </div>
+</div>
+{% endblock %}

package/cli/templates/make/app-ssr/views/default/partials/pagination.html

@@ -0,0 +1,75 @@
+{#
+  pagination.html — 범용 페이지네이션 partial.
+  
+  개발자가 include로 쉽게 사용할 수 있는 템플릿.
+  번호 페이지 버튼 + 이전/다음 + ellipsis 지원.
+  
+  필요 변수:
+    - page: 현재 페이지 (number)
+    - lastPage: 마지막 페이지 (number)
+    - baseUrl: 페이지 링크 기본 URL (예: "/board")
+  
+  사용법:
+    {% set baseUrl = "/board" %}
+    {% include "partials/pagination.html" %}
+#}
+
+{% if lastPage > 1 %}
+<nav class="pagination" role="navigation" aria-label="Pagination">
+  {# 이전 #}
+  {% if page > 1 %}
+  <a href="{{ baseUrl }}?page={{ page - 1 }}" class="page-btn page-prev">←</a>
+  {% else %}
+  <span class="page-btn page-prev disabled">←</span>
+  {% endif %}
+
+  {# 첫 페이지 #}
+  {% if page == 1 %}
+  <span class="page-btn page-num active" aria-current="page">1</span>
+  {% else %}
+  <a href="{{ baseUrl }}?page=1" class="page-btn page-num">1</a>
+  {% endif %}
+
+  {# 앞쪽 ellipsis #}
+  {% if page > 3 %}
+  <span class="page-ellipsis">…</span>
+  {% endif %}
+
+  {# 중간 범위 (page-1, page, page+1) #}
+  {% if page - 1 > 1 and page - 1 < lastPage %}
+  <a href="{{ baseUrl }}?page={{ page - 1 }}" class="page-btn page-num">{{ page - 1 }}</a>
+  {% endif %}
+
+  {% if page != 1 and page != lastPage %}
+  <span class="page-btn page-num active" aria-current="page">{{ page }}</span>
+  {% endif %}
+
+  {% if page + 1 < lastPage and page + 1 > 1 %}
+  <a href="{{ baseUrl }}?page={{ page + 1 }}" class="page-btn page-num">{{ page + 1 }}</a>
+  {% endif %}
+
+  {# 뒤쪽 ellipsis #}
+  {% if page < lastPage - 2 %}
+  <span class="page-ellipsis">…</span>
+  {% endif %}
+
+  {# 마지막 페이지 #}
+  {% if lastPage > 1 %}
+    {% if page == lastPage %}
+    <span class="page-btn page-num active" aria-current="page">{{ lastPage }}</span>
+    {% else %}
+    <a href="{{ baseUrl }}?page={{ lastPage }}" class="page-btn page-num">{{ lastPage }}</a>
+    {% endif %}
+  {% endif %}
+
+  {# 다음 #}
+  {% if page < lastPage %}
+  <a href="{{ baseUrl }}?page={{ page + 1 }}" class="page-btn page-next">→</a>
+  {% else %}
+  <span class="page-btn page-next disabled">→</span>
+  {% endif %}
+
+  {# 모바일 정보 #}
+  <span class="page-info-mobile">{{ page }} / {{ lastPage }}</span>
+</nav>
+{% endif %}

package/cli/templates/make/app-ssr/ws/ChatHandler.js

@@ -0,0 +1,138 @@
+import { WsHandler } from '@fuzionx/framework';
+
+/** 채팅 WebSocket 핸들러 */
+export default class ChatHandler extends WsHandler {
+    static namespace = '/chat';
+    static middleware = ['auth'];
+
+    /**
+     * disconnect 시 metadata가 이미 삭제되므로,
+     * setUser 시점에 이름을 캐시하여 disconnect에서 사용.
+     * 연결/해제는 항상 같은 워커에서 발생하므로 per-worker 캐시로 충분.
+     */
+    static _nameCache = new Map();
+
+    static events(e) {
+        e.on('message', ChatHandler.prototype.handleMessage);
+        e.on('broadcast', ChatHandler.prototype.handleBroadcast);
+        e.on('typing', ChatHandler.prototype.handleTyping);
+        e.on('userlist', ChatHandler.prototype.handleUserList);
+        e.on('setUser', ChatHandler.prototype.handleSetUser);
+    }
+
+    /* ── helpers ── */
+
+    /** 사용자 이름 조회 (캐시 → metadata → UUID 폴백) */
+    _getName(socket, sid) {
+        return ChatHandler._nameCache.get(sid)
+            || socket.getMetadataFor(sid, 'name')
+            || sid;
+    }
+
+    /** 단일 사용자 정보 빌드 */
+    _buildUserInfo(socket, sid) {
+        return {
+            sid,
+            name: this._getName(socket, sid),
+            email: socket.getMetadataFor(sid, 'email') || '',
+        };
+    }
+
+    /** 전체 접속자 목록 빌드 */
+    _buildUserList(socket) {
+        const sessions = socket.sessionIds;
+        return {
+            count: socket.onlineCount,
+            users: sessions.map(sid => this._buildUserInfo(socket, sid)),
+        };
+    }
+
+    /* ── lifecycle ── */
+
+    async onConnect(socket) {
+        const sid = socket.sessionId;
+        console.log(`[Chat] 연결: ${sid}`);
+
+        socket.send(JSON.stringify({
+            type: 'chat_ready',
+            data: { sessionId: sid, timestamp: Date.now() },
+        }));
+    }
+
+    async onDisconnect(socket, code, reason) {
+        const sid = socket.sessionId;
+        const name = ChatHandler._nameCache.get(sid);
+        ChatHandler._nameCache.delete(sid);
+
+        // setUser 미완료 세션은 user_joined도 안 보냈으므로 user_left 불필요
+        if (!name) return;
+
+        console.log(`[Chat] 해제: ${name} code=${code ?? 'N/A'}`);
+        socket.broadcastExcluding(JSON.stringify({
+            type: 'user_left',
+            data: { sid, name, timestamp: Date.now() },
+        }));
+    }
+
+    /* ── event handlers ── */
+
+    /** setUser — 사용자 정보 등록 + userlist 응답 */
+    async handleSetUser(socket, data) {
+        const sid = socket.sessionId;
+        const name = (data.name || '').trim() || sid;
+
+        // Bridge metadata + 로컬 캐시 동시 저장
+        socket.setMetadata('name', name);
+        if (data.email) socket.setMetadata('email', data.email);
+        if (data.id) socket.setMetadata('userId', String(data.id));
+        ChatHandler._nameCache.set(sid, name);
+        console.log(`[Chat] 사용자 등록: ${sid} → ${name}`);
+
+        // 다른 사용자에게 참여 알림
+        socket.broadcastExcluding(JSON.stringify({
+            type: 'user_joined',
+            data: this._buildUserInfo(socket, sid),
+        }));
+
+        // 본인에게 전체 목록 응답
+        return {
+            type: 'userlist',
+            data: this._buildUserList(socket),
+        };
+    }
+
+    /** chat_msg — 본인 제외 전체 전송 */
+    async handleMessage(socket, data) {
+        const name = this._getName(socket, socket.sessionId);
+        socket.broadcastExcluding(JSON.stringify({
+            type: 'chat_msg',
+            data: { user: name, text: data.text || data, timestamp: Date.now() },
+        }));
+    }
+
+    /** broadcast — 공지 */
+    async handleBroadcast(socket, data) {
+        const name = this._getName(socket, socket.sessionId);
+        socket.broadcastExcluding(JSON.stringify({
+            type: 'broadcast',
+            data: { user: name, text: data.text || data, timestamp: Date.now() },
+        }));
+    }
+
+    /** typing — 타이핑 표시 */
+    async handleTyping(socket) {
+        const name = this._getName(socket, socket.sessionId);
+        socket.broadcastExcluding(JSON.stringify({
+            type: 'typing',
+            data: { user: name },
+        }));
+    }
+
+    /** userlist — 목록 요청 */
+    async handleUserList(socket) {
+        return {
+            type: 'userlist',
+            data: this._buildUserList(socket),
+        };
+    }
+}