서버 게시글

GameServer/wwwroot/js/views/post.js

@@ -0,0 +1,135 @@
+// views/post.js — 게시물 상세 화면
+// 라우트: #/post/:postNo
+// 구성: 카테고리 → 제목 → 요약 → 날짜 → 마크다운 본문
+//
+// 표지 이미지와 하단 갤러리는 두지 않는다.
+// 이미지는 본문 안에서 마크다운으로 직접 배치한다. ( ![캡션|half](주소) )
+
+import { api } from '../api.js';
+import { escapeHtml, formatDate, setBusy, toast } from '../ui.js';
+import { renderMarkdown } from '../markdown.js';
+
+/** accent 는 CSS 값으로 들어가므로 헥사 색상만 통과시킨다. */
+function safeAccent(value) {
+    const text = typeof value === 'string' ? value.trim() : '';
+    return /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(text) ? text : '';
+}
+
+/** 정수 안전 변환 */
+function toInt(value) {
+    const n = Number(value);
+    return Number.isFinite(n) ? Math.trunc(n) : 0;
+}
+
+/** '12' 처럼 양의 정수인지 확인한다. */
+function parsePostNo(value) {
+    const text = String(value === null || value === undefined ? '' : value).trim();
+    if (!/^\d{1,9}$/.test(text)) return 0;
+    const n = Number(text);
+    return n > 0 ? n : 0;
+}
+
+/** 찾을 수 없음 / 오류 화면 */
+function stateHtml(icon, title, detail) {
+    return (
+        '<div class="empty">' +
+        '<div class="empty__icon" aria-hidden="true">' + icon + '</div>' +
+        '<p>' + escapeHtml(title) + '</p>' +
+        (detail ? '<p class="tagline">' + escapeHtml(detail) + '</p>' : '') +
+        '<a class="btn btn--ghost" href="#/">작업 목록으로</a>' +
+        '</div>'
+    );
+}
+
+/**
+ * 게시물 본문 마크업.
+ * 사용자 데이터는 모두 escapeHtml 을 거치고, 본문만 renderMarkdown 결과를 넣는다.
+ */
+function postHtml(post) {
+    const title = String((post && post.title) || '(제목 없음)');
+    const catName = String((post && post.categoryName) || '미분류');
+    const catSlug = String((post && post.categorySlug) || '');
+    const accent = safeAccent(post && post.categoryAccent);
+    const summary = post && post.summary ? String(post.summary) : '';
+    const created = formatDate(post && post.createdAt);
+    const updated = formatDate(post && post.updatedAt);
+
+    const catHref = catSlug ? '#/?cat=' + encodeURIComponent(catSlug) : '#/';
+
+    let html =
+        '<article class="post"' + (accent ? ' style="--card-accent:' + accent + '"' : '') + '>' +
+        '<header class="post__head">' +
+        '<a class="post__cat" href="' + escapeHtml(catHref) + '">' +
+        '<span class="cat__dot" aria-hidden="true"' + (accent ? ' style="background:' + accent + '"' : '') + '></span>' +
+        escapeHtml(catName) +
+        '</a>' +
+        '<h1 class="post__title">' + escapeHtml(title) + '</h1>' +
+        (summary ? '<p class="hero__sub">' + escapeHtml(summary) + '</p>' : '') +
+        '<div class="post__meta">' +
+        (created ? '<span>작성 ' + escapeHtml(created) + '</span>' : '') +
+        (updated && updated !== created ? '<span>수정 ' + escapeHtml(updated) + '</span>' : '') +
+        '</div>' +
+        '</header>';
+
+    const body = post && post.contentMd ? renderMarkdown(post.contentMd) : '';
+    html += '<div class="post__body">' + (body || '<p class="md-p">본문이 아직 없습니다.</p>') + '</div>';
+
+    html +=
+        '<nav class="post__nav">' +
+        '<a class="btn btn--ghost" href="#/">← 작업 목록</a>' +
+        (catSlug ? '<a class="btn btn--ghost" href="' + escapeHtml(catHref) + '">' +
+            escapeHtml(catName) + ' 더 보기</a>' : '') +
+        '</nav>' +
+        '</article>';
+
+    return html;
+}
+
+/**
+ * 게시물 상세 뷰.
+ * @param {Object} params 라우터 캡처값 (postNo)
+ * @param {HTMLElement} outlet
+ * @returns {Function} cleanup
+ */
+export async function view(params, outlet) {
+    const postNo = parsePostNo(params && params.postNo);
+    let disposed = false;
+
+    if (!postNo) {
+        outlet.innerHTML = stateHtml('✦', '게시물을 찾을 수 없습니다.', '주소가 올바르지 않습니다.');
+        return () => { disposed = true; };
+    }
+
+    outlet.innerHTML =
+        '<div class="empty"><div class="empty__icon" aria-hidden="true">◌</div>' +
+        '<p>불러오는 중…</p></div>';
+
+    setBusy(true);
+    try {
+        const post = await api.posts.get(postNo);
+        if (disposed) return () => { disposed = true; };
+
+        outlet.innerHTML = postHtml(post);
+        document.title = '김낙준 · ' + String((post && post.title) || '작업');
+    } catch (err) {
+        if (!disposed) {
+            const status = err && err.status;
+            if (status === 404) {
+                outlet.innerHTML = stateHtml('✦', '게시물을 찾을 수 없습니다.', '삭제되었거나 주소가 바뀌었을 수 있습니다.');
+            } else {
+                outlet.innerHTML = stateHtml('⚠', '게시물을 불러오지 못했습니다.',
+                    (err && err.message) || '알 수 없는 오류가 발생했습니다.');
+                toast((err && err.message) || '게시물을 불러오지 못했습니다.', 'error');
+            }
+        }
+    } finally {
+        setBusy(false);
+    }
+
+    return () => {
+        disposed = true;
+        setBusy(false);
+    };
+}
+
+export default view;