sori.studio/uniare.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

덱 목록 무한 스크롤과 WebP 썸네일 최적화 추가

Browse Source 
- 내 덱·공개 덱 목록을 무한 스크롤로 전환(공용 페이저 모듈 추가)
- 즐겨찾기 토글 시 카드만 in-place 갱신해 스크롤 위치 유지
- 저장 시 420px WebP 썸네일 생성·전송, 목록은 썸네일 우선 사용
- 삭제·미참조 정리에서 원본 PNG와 썸네일 함께 처리

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zenn
2026-07-02 18:17:58 +09:00
parent 63aabf61c4
commit a90bdcbe13
15 changed files with 516 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
preset.html
View File

@@ -74,6 +74,7 @@
<script src="/script/deck-favorites.js?v=4.0.8"></script>
<script src="/script/deck-favorites-shim.js?v=4.0.8"></script>
<script src="/script/deck-preview-hold.js?v=4.0.8"></script>
<script src="/script/deck-list-pager.js?v=4.0.19"></script>
<script src="/script/page-i18n.js?v=4.0.8"></script>
<script src="/script/page-help.js?v=4.0.8"></script>
<script src="/script/auth-header.js?v=4.0.8"></script>
@@ -138,14 +139,34 @@
}
/**
* 미디어 URL에 갱신 시각 기반 캐시 무효화 쿼리를 붙인다.
* @param {string|null} apiPath
* @param {string|null} updatedAt
* @returns {string|null}
*/
function withVersion(apiPath, updatedAt) {
if (!apiPath) return null;
const src = UaDeckApi.resolveMediaUrl(apiPath);
const version = updatedAt ? `?v=${encodeURIComponent(updatedAt)}` : '';
return src + version;
}
/**
* 목록 표시용 이미지(썸네일 우선)
* @param {object} d
* @returns {string|null}
*/
function getPreviewSrc(d) {
if (!d.preview_url) return null;
const src = UaDeckApi.resolveMediaUrl(d.preview_url);
const version = d.updated_at ? `?v=${encodeURIComponent(d.updated_at)}` : '';
return src + version;
function getThumbSrc(d) {
return withVersion(d.thumbnail_url || d.preview_url, d.updated_at);
}
/**
* 확대 표시용 원본 이미지(원본 우선)
* @param {object} d
* @returns {string|null}
*/
function getFullSrc(d) {
return withVersion(d.preview_url || d.thumbnail_url, d.updated_at);
}
/**
@@ -171,12 +192,13 @@
}
function renderPreviewHtml(d, title) {
const previewSrc = getPreviewSrc(d);
if (!previewSrc) {
const thumbSrc = getThumbSrc(d);
if (!thumbSrc) {
return `<div class="deck-card-preview"><div class="deck-card-preview-placeholder">${escapeHtml(t('deckNoPreview', '미리보기 없음'))}</div></div>`;
}
const holdAttrs = `data-hold-preview data-preview-src="${escapeHtml(previewSrc)}"`;
return `<div class="deck-card-preview deck-card-preview--holdable" ${holdAttrs}><img src="${escapeHtml(previewSrc)}" alt="${title}" loading="lazy" class="deck-card-preview-img" draggable="false" /></div>`;
const fullSrc = getFullSrc(d) || thumbSrc;
const holdAttrs = `data-hold-preview data-preview-src="${escapeHtml(fullSrc)}"`;
return `<div class="deck-card-preview deck-card-preview--holdable" ${holdAttrs}><img src="${escapeHtml(thumbSrc)}" alt="${title}" loading="lazy" class="deck-card-preview-img" draggable="false" /></div>`;
}
function renderDeckCard(d) {
@@ -199,27 +221,55 @@
</article>`;
}
/** @type {{ refresh: (items: object[]) => void }|null} */
let deckPager = null;
/**
* 현재 필터 상태에서 표시할 빈 목록 메시지
* @returns {string}
*/
function emptyMessage() {
const favOnly =
document.getElementById('deck-favorite-filter')?.getAttribute('aria-pressed') === 'true';
return favOnly
? t('deckNoFavorites', '즐겨찾기한 덱이 없습니다.')
: allDecks.length
? t('deckNoMatch', '조건에 맞는 덱이 없습니다.')
: t('publicDeckEmpty', '공개된 덱이 없습니다.');
}
/**
* 즐겨찾기 상태를 카드 DOM에 즉시 반영 (전체 리렌더 없이 스크롤 유지)
* @param {string} shareCode
* @param {boolean} on
*/
function applyFavoriteState(shareCode, on) {
const article = document.querySelector(`#preset-list .deck-card[data-code="${CSS.escape(shareCode)}"]`);
if (article) article.classList.toggle('is-favorite', on);
const btn = document.querySelector(`#preset-list [data-favorite="${CSS.escape(shareCode)}"]`);
if (btn) {
btn.classList.toggle('is-on', on);
btn.setAttribute('aria-pressed', on ? 'true' : 'false');
const star = btn.querySelector('.deck-star-icon');
if (star) star.classList.toggle('is-on', on);
}
}
function renderList() {
const list = document.getElementById('preset-list');
const countEl = document.getElementById('deck-count');
const filtered = getFilteredDecks();
countEl.textContent = formatDeckCount(filtered.length, allDecks.length);
document.getElementById('deck-count').textContent = formatDeckCount(filtered.length, allDecks.length);
updateFavCount();
if (!filtered.length) {
const favOnly =
document.getElementById('deck-favorite-filter')?.getAttribute('aria-pressed') === 'true';
const emptyMsg = favOnly
? t('deckNoFavorites', '즐겨찾기한 덱이 없습니다.')
: allDecks.length
? t('deckNoMatch', '조건에 맞는 덱이 없습니다.')
: t('publicDeckEmpty', '공개된 덱이 없습니다.');
list.innerHTML = `<div class="deck-grid"><div class="deck-grid-empty">${escapeHtml(emptyMsg)}</div></div>`;
return;
if (!deckPager) {
deckPager = UaDeckPager.create({
container: list,
renderItem: renderDeckCard,
emptyHtml: () =>
`<div class="deck-grid"><div class="deck-grid-empty">${escapeHtml(emptyMessage())}</div></div>`,
});
}
list.innerHTML = `<div class="deck-grid">${filtered.map(renderDeckCard).join('')}</div>`;
UaDeckPreviewHold.bindHoldPreview(list);
deckPager.refresh(filtered);
}
async function loadPublicDecks() {
@@ -266,8 +316,16 @@
const favBtn = e.target.closest('[data-favorite]');
if (favBtn) {
try {
await UaDeckFavorites.toggle(favBtn.dataset.favorite);
renderList();
const code = favBtn.dataset.favorite;
const nowFav = await UaDeckFavorites.toggle(code);
const favOnly =
document.getElementById('deck-favorite-filter')?.getAttribute('aria-pressed') === 'true';
if (favOnly) {
renderList();
} else {
applyFavoriteState(code, nowFav);
updateFavCount();
}
} catch (err) {
alert(err.message || t('deckFavoriteFailed', '즐겨찾기 변경에 실패했습니다.'));
}