432 lines
16 KiB
JavaScript
432 lines
16 KiB
JavaScript
// views/home.js — 홈(작업 인덱스) 화면
|
|
// 라우트: #/ · #/?cat=<slug>
|
|
// 구성: 히어로 → 인라인 카테고리 필터 → 대표 작업 한 건 → 번호 매긴 인덱스
|
|
//
|
|
// 카드 그리드 대신 '작품집 목차' 형태를 쓰되, 이미지가 늘 자리를 갖도록
|
|
// 맨 앞 글은 크게(lead) 보여 주고 나머지 행에는 작은 썸네일을 붙인다.
|
|
// 이미지가 없는 글은 제목 첫 글자를 넣은 파스텔 판으로 대신한다.
|
|
|
|
import { api } from '../api.js';
|
|
import { el, escapeHtml, formatDate, setBusy, skeletonRows, toast } from '../ui.js';
|
|
|
|
/** 한 번에 불러오는 게시물 수 */
|
|
const PAGE_SIZE = 20;
|
|
/** 카테고리 캐시 수명 (ms) */
|
|
const CATEGORY_TTL_MS = 60000;
|
|
|
|
// 카테고리 목록은 모듈 스코프에 캐시한다.
|
|
// 필터만 바뀌는 경우(#/ ↔ #/?cat=game) 뷰가 다시 마운트돼도 다시 요청하지 않는다.
|
|
let catCache = null;
|
|
let catCachedAt = 0;
|
|
let catInflight = null;
|
|
|
|
/**
|
|
* 카테고리 목록을 가져온다. 캐시가 살아 있으면 즉시 반환한다.
|
|
* @returns {Promise<Array>}
|
|
*/
|
|
function getCategories() {
|
|
if (catCache && Date.now() - catCachedAt < CATEGORY_TTL_MS) {
|
|
return Promise.resolve(catCache);
|
|
}
|
|
if (catInflight) return catInflight;
|
|
|
|
catInflight = api.categories.list().then(
|
|
(list) => {
|
|
catCache = Array.isArray(list) ? list : [];
|
|
catCachedAt = Date.now();
|
|
catInflight = null;
|
|
return catCache;
|
|
},
|
|
(err) => {
|
|
catInflight = null;
|
|
throw err;
|
|
}
|
|
);
|
|
return catInflight;
|
|
}
|
|
|
|
/** params.cat 정규화. 비었거나 형식이 이상하면 'all' */
|
|
function normalizeSlug(value) {
|
|
const text = typeof value === 'string' ? value.trim().toLowerCase() : '';
|
|
if (!text || text === 'all') return 'all';
|
|
return /^[a-z0-9-]{1,64}$/.test(text) ? text : 'all';
|
|
}
|
|
|
|
/** 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 : '';
|
|
}
|
|
|
|
/** http(s) 또는 사이트 상대경로만 허용. 그 외에는 빈 문자열 */
|
|
function safeUrl(value) {
|
|
const text = typeof value === 'string' ? value.trim() : '';
|
|
if (!text) return '';
|
|
if (text.slice(0, 2) === '//') return '';
|
|
if (text.charAt(0) === '/') return text;
|
|
return /^https?:\/\//i.test(text) ? text : '';
|
|
}
|
|
|
|
/** 정수 안전 변환 */
|
|
function toInt(value) {
|
|
const n = Number(value);
|
|
return Number.isFinite(n) ? Math.trunc(n) : 0;
|
|
}
|
|
|
|
/** 01, 02 … 형태의 두 자리 번호 */
|
|
function padNo(n) {
|
|
return String(n).padStart(2, '0');
|
|
}
|
|
|
|
/** 'YYYY. MM. DD.' → 'YY.MM' (인덱스에서는 짧게 쓴다) */
|
|
function shortDate(iso) {
|
|
const full = formatDate(iso);
|
|
const m = /^(\d{4})\.\s*(\d{2})\./.exec(full);
|
|
return m ? m[1].slice(2) + '.' + m[2] : full;
|
|
}
|
|
|
|
/** 썸네일이 없을 때 쓸 첫 글자 (서로게이트 페어 안전) */
|
|
function firstChar(title) {
|
|
const text = String(title || '').trim();
|
|
if (!text) return '·';
|
|
return Array.from(text)[0];
|
|
}
|
|
|
|
/**
|
|
* 이미지 자리. 그림이 있으면 img, 없으면 첫 글자를 넣은 판.
|
|
* @param {string} cls 바깥 figure 의 클래스
|
|
* @param {string} url 안전하게 걸러진 이미지 주소 ('' 가능)
|
|
* @param {string} title alt / 대체 글자용
|
|
*/
|
|
function mediaHtml(cls, url, title) {
|
|
if (url) {
|
|
return (
|
|
'<figure class="' + cls + '">' +
|
|
'<img src="' + escapeHtml(url) + '" alt="' + escapeHtml(title) + '"' +
|
|
' loading="lazy" decoding="async">' +
|
|
'</figure>'
|
|
);
|
|
}
|
|
return (
|
|
'<figure class="' + cls + ' ' + cls + '--none" aria-hidden="true">' +
|
|
'<span>' + escapeHtml(firstChar(title)) + '</span>' +
|
|
'</figure>'
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 카테고리 필터 한 칸. 칩이 아니라 글자 링크다.
|
|
*/
|
|
function filterHtml(slug, name, count, accent, active) {
|
|
const href = slug === 'all' ? '#/' : '#/?cat=' + encodeURIComponent(slug);
|
|
const style = accent ? ' style="--card-accent:' + accent + '"' : '';
|
|
return (
|
|
'<a class="filter' + (active ? ' is-active' : '') + '" href="' + escapeHtml(href) + '"' +
|
|
style + (active ? ' aria-current="true"' : '') + '>' +
|
|
escapeHtml(name) +
|
|
'<span class="filter__count">' + toInt(count) + '</span>' +
|
|
'</a>'
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 대표 작업(가장 최근 글) 한 건을 크게 보여 준다.
|
|
* @param {Object} post PostSummaryDto
|
|
*/
|
|
function leadHtml(post) {
|
|
const postNo = toInt(post && post.postNo);
|
|
const title = String((post && post.title) || '(제목 없음)');
|
|
const catName = String((post && post.categoryName) || '미분류');
|
|
const summary = post && post.summary ? String(post.summary) : '';
|
|
const accent = safeAccent(post && post.categoryAccent);
|
|
const thumb = safeUrl(post && post.thumbnailUrl);
|
|
|
|
return (
|
|
'<a class="lead" href="#/post/' + postNo + '"' +
|
|
(accent ? ' style="--card-accent:' + accent + '"' : '') + '>' +
|
|
mediaHtml('lead__media', thumb, title) +
|
|
'<div class="lead__body">' +
|
|
'<span class="lead__label">최신 작업</span>' +
|
|
'<span class="lead__cat">' + escapeHtml(catName) + '</span>' +
|
|
'<h3 class="lead__title">' + escapeHtml(title) + '</h3>' +
|
|
(summary ? '<p class="lead__sum">' + escapeHtml(summary) + '</p>' : '') +
|
|
'<span class="lead__meta">' +
|
|
escapeHtml(formatDate(post && post.createdAt)) +
|
|
'</span>' +
|
|
'<span class="lead__more">자세히 보기</span>' +
|
|
'</div>' +
|
|
'</a>'
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 인덱스 행 하나.
|
|
* @param {Object} post PostSummaryDto
|
|
* @param {number} order 화면상의 순번 (1 부터)
|
|
*/
|
|
function rowHtml(post, order) {
|
|
const postNo = toInt(post && post.postNo);
|
|
const title = String((post && post.title) || '(제목 없음)');
|
|
const catName = String((post && post.categoryName) || '미분류');
|
|
const summary = post && post.summary ? String(post.summary) : '';
|
|
const accent = safeAccent(post && post.categoryAccent);
|
|
const thumb = safeUrl(post && post.thumbnailUrl);
|
|
|
|
return (
|
|
'<li class="index__item">' +
|
|
'<a class="idx" href="#/post/' + postNo + '"' +
|
|
(accent ? ' style="--card-accent:' + accent + '"' : '') + '>' +
|
|
'<span class="idx__no">' + padNo(order) + '</span>' +
|
|
mediaHtml('idx__thumb', thumb, title) +
|
|
'<span class="idx__body">' +
|
|
'<span class="idx__title">' + escapeHtml(title) + '</span>' +
|
|
(summary ? '<span class="idx__sum">' + escapeHtml(summary) + '</span>' : '') +
|
|
'</span>' +
|
|
'<span class="idx__meta">' +
|
|
'<span class="idx__cat">' + escapeHtml(catName) + '</span>' +
|
|
'<span class="idx__date">' + escapeHtml(shortDate(post && post.createdAt)) + '</span>' +
|
|
'</span>' +
|
|
'</a>' +
|
|
'</li>'
|
|
);
|
|
}
|
|
|
|
/** 화면 뼈대 (API 데이터가 섞이지 않는 정적 마크업) */
|
|
const SHELL_HTML =
|
|
'<section class="hero">' +
|
|
'<h1 class="hero__title">게임을 <span class="hero__grad">만듭니다</span></h1>' +
|
|
'<div class="hero__meta" id="home-stats"></div>' +
|
|
'</section>' +
|
|
'<section class="section">' +
|
|
'<div class="section__head">' +
|
|
'<h2 class="section__title">작업</h2>' +
|
|
'<nav class="filters" id="home-cats" aria-label="카테고리 필터" aria-busy="true"></nav>' +
|
|
'</div>' +
|
|
'<div id="home-lead"></div>' +
|
|
'<ol class="index" id="home-grid"></ol>' +
|
|
'<div id="home-state"></div>' +
|
|
'<div id="home-more"></div>' +
|
|
'</section>';
|
|
|
|
/**
|
|
* 홈 뷰.
|
|
* @param {Object} params 라우터가 넘겨주는 캡처/쿼리 값 (cat)
|
|
* @param {HTMLElement} outlet
|
|
* @returns {Function} cleanup
|
|
*/
|
|
export async function view(params, outlet) {
|
|
const query = params || {};
|
|
const activeSlug = normalizeSlug(query.cat);
|
|
|
|
let disposed = false;
|
|
let page = 1;
|
|
let loaded = 0;
|
|
let total = 0;
|
|
|
|
outlet.insertAdjacentHTML('beforeend', SHELL_HTML);
|
|
|
|
const statsEl = outlet.querySelector('#home-stats');
|
|
const catsEl = outlet.querySelector('#home-cats');
|
|
const leadEl = outlet.querySelector('#home-lead');
|
|
const listEl = outlet.querySelector('#home-grid');
|
|
const stateEl = outlet.querySelector('#home-state');
|
|
const moreEl = outlet.querySelector('#home-more');
|
|
|
|
// ── 카테고리 필터 ─────────────────────────────────────────────
|
|
function renderFilters(cats) {
|
|
const list = Array.isArray(cats) ? cats : [];
|
|
const totalPosts = list.reduce((sum, c) => sum + toInt(c && c.postCount), 0);
|
|
|
|
let html = filterHtml('all', '전체', totalPosts, '', activeSlug === 'all');
|
|
for (const cat of list) {
|
|
const slug = String((cat && cat.slug) || '');
|
|
if (!slug) continue;
|
|
html += filterHtml(
|
|
slug,
|
|
String((cat && cat.name) || slug),
|
|
toInt(cat && cat.postCount),
|
|
safeAccent(cat && cat.accent),
|
|
slug.toLowerCase() === activeSlug
|
|
);
|
|
}
|
|
catsEl.innerHTML = html;
|
|
catsEl.setAttribute('aria-busy', 'false');
|
|
}
|
|
|
|
function renderStats(cats) {
|
|
const list = Array.isArray(cats) ? cats : [];
|
|
const totalPosts = list.reduce((sum, c) => sum + toInt(c && c.postCount), 0);
|
|
statsEl.innerHTML =
|
|
'<span class="hero__stat">작업 <b>' + totalPosts + '</b></span>' +
|
|
'<span class="hero__stat">카테고리 <b>' + list.length + '</b></span>' +
|
|
'<span class="hero__stat">Unity · .NET · MariaDB</span>';
|
|
}
|
|
|
|
// 필터를 누르면 해시에 기록한다.
|
|
// 보조 버튼·수정키 클릭은 브라우저 기본 동작(새 탭 등)에 맡긴다.
|
|
function onCatsClick(ev) {
|
|
if (ev.defaultPrevented) return;
|
|
if (ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey) return;
|
|
const target = ev.target instanceof Element ? ev.target.closest('a.filter') : null;
|
|
if (!target || !catsEl.contains(target)) return;
|
|
ev.preventDefault();
|
|
const next = target.getAttribute('href');
|
|
if (next && next !== location.hash) location.hash = next;
|
|
}
|
|
|
|
// ── 상태 표시 ─────────────────────────────────────────────────
|
|
function clearState() {
|
|
stateEl.innerHTML = '';
|
|
}
|
|
|
|
function showEmpty() {
|
|
leadEl.innerHTML = '';
|
|
listEl.innerHTML = '';
|
|
listEl.classList.add('is-hidden');
|
|
moreEl.innerHTML = '';
|
|
const filtered = activeSlug !== 'all';
|
|
stateEl.innerHTML =
|
|
'<div class="empty">' +
|
|
'<p>' + (filtered ? '이 카테고리에는 아직 작업이 없습니다.' : '아직 등록된 작업이 없습니다.') + '</p>' +
|
|
'<p class="tagline">' + (filtered ? '다른 카테고리도 살펴보세요.' : '관리자로 로그인해 첫 글을 써 보세요.') + '</p>' +
|
|
(filtered ? '<a class="btn btn--ghost" href="#/">전체 보기</a>'
|
|
: '<a class="btn btn--ghost" href="#/admin">관리자</a>') +
|
|
'</div>';
|
|
}
|
|
|
|
function showError(err) {
|
|
leadEl.innerHTML = '';
|
|
listEl.innerHTML = '';
|
|
listEl.classList.add('is-hidden');
|
|
moreEl.innerHTML = '';
|
|
stateEl.innerHTML =
|
|
'<div class="empty">' +
|
|
'<p>작업 목록을 불러오지 못했습니다.</p>' +
|
|
'<p class="tagline">' + escapeHtml((err && err.message) || '알 수 없는 오류가 발생했습니다.') + '</p>' +
|
|
'</div>';
|
|
const box = stateEl.querySelector('.empty');
|
|
if (box) {
|
|
box.appendChild(
|
|
el('button', {
|
|
class: 'btn btn--ghost',
|
|
type: 'button',
|
|
text: '다시 시도',
|
|
onclick: () => { loadFirstPage(); }
|
|
})
|
|
);
|
|
}
|
|
}
|
|
|
|
// ── 목록 ──────────────────────────────────────────────────────
|
|
/** 첫 페이지: 맨 앞 글은 lead 로, 나머지는 인덱스 행으로. */
|
|
function drawFirst(items) {
|
|
leadEl.innerHTML = leadHtml(items[0]);
|
|
const rest = items.slice(1);
|
|
listEl.innerHTML = rest.map((p, i) => rowHtml(p, i + 2)).join('');
|
|
listEl.classList.toggle('is-hidden', rest.length === 0);
|
|
}
|
|
|
|
function drawMore(items) {
|
|
const startAt = loaded - items.length;
|
|
listEl.classList.remove('is-hidden');
|
|
listEl.insertAdjacentHTML('beforeend', items.map((p, i) => rowHtml(p, startAt + i + 1)).join(''));
|
|
}
|
|
|
|
function renderMoreButton() {
|
|
moreEl.innerHTML = '';
|
|
if (loaded >= total) return;
|
|
const btn = el('button', {
|
|
class: 'btn btn--ghost',
|
|
type: 'button',
|
|
text: '더 보기',
|
|
onclick: () => { loadNextPage(btn); }
|
|
});
|
|
moreEl.appendChild(btn);
|
|
}
|
|
|
|
async function loadFirstPage() {
|
|
page = 1;
|
|
loaded = 0;
|
|
total = 0;
|
|
clearState();
|
|
moreEl.innerHTML = '';
|
|
leadEl.innerHTML = '';
|
|
listEl.classList.remove('is-hidden');
|
|
listEl.innerHTML = skeletonRows(4);
|
|
setBusy(true);
|
|
try {
|
|
const res = await api.posts.list({ category: activeSlug, page: 1, size: PAGE_SIZE });
|
|
if (disposed) return;
|
|
const items = res && Array.isArray(res.items) ? res.items : [];
|
|
loaded = items.length;
|
|
total = Math.max(toInt(res && res.total), loaded);
|
|
if (!items.length) {
|
|
showEmpty();
|
|
return;
|
|
}
|
|
drawFirst(items);
|
|
renderMoreButton();
|
|
} catch (err) {
|
|
if (disposed) return;
|
|
showError(err);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
async function loadNextPage(btn) {
|
|
if (btn.disabled) return;
|
|
btn.disabled = true;
|
|
btn.textContent = '불러오는 중…';
|
|
setBusy(true);
|
|
try {
|
|
const res = await api.posts.list({ category: activeSlug, page: page + 1, size: PAGE_SIZE });
|
|
if (disposed) return;
|
|
const items = res && Array.isArray(res.items) ? res.items : [];
|
|
page += 1;
|
|
loaded += items.length;
|
|
total = Math.max(toInt(res && res.total), loaded);
|
|
// 빈 페이지가 오면 더 이상 없는 것으로 본다(무한 클릭 방지).
|
|
if (!items.length) total = loaded;
|
|
else drawMore(items);
|
|
renderMoreButton();
|
|
} catch (err) {
|
|
if (disposed) return;
|
|
// 이미 그려진 행은 그대로 두고 버튼만 되돌린다.
|
|
btn.disabled = false;
|
|
btn.textContent = '더 보기';
|
|
toast((err && err.message) || '더 불러오지 못했습니다.', 'error');
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
catsEl.addEventListener('click', onCatsClick);
|
|
|
|
// 카테고리와 첫 페이지는 서로를 기다리지 않는다.
|
|
getCategories().then(
|
|
(cats) => {
|
|
if (disposed) return;
|
|
renderFilters(cats);
|
|
renderStats(cats);
|
|
},
|
|
() => {
|
|
if (disposed) return;
|
|
// 카테고리를 못 받아도 목록 자체는 보여준다.
|
|
renderFilters([]);
|
|
statsEl.innerHTML = '<span class="hero__stat">Unity · .NET · MariaDB</span>';
|
|
}
|
|
);
|
|
|
|
// await 하지 않는다: 라우터가 곧바로 cleanup 을 받아 갈 수 있게 한다.
|
|
loadFirstPage();
|
|
|
|
return () => {
|
|
disposed = true;
|
|
catsEl.removeEventListener('click', onCatsClick);
|
|
setBusy(false);
|
|
};
|
|
}
|
|
|
|
export default view;
|