Add /op/list, /op/list/:pack, /op/datapack web admin + spec lock
docs/add.md - 사진 PNG 규격을 1024×1024 (4×4 블록 슬롯 × ×16 배율) 로 못박음 - 짧은 변 기준 가운데 정사각 크롭 + 1024 초과 시만 축소, 미만은 native 유지 신규 라우트 (모두 requireAuth): - GET /op/list → manifest 카드 목록 - GET /op/list/:pack → 음악목록·사진목록 탭 편집기 - POST /op/list/:pack → file/list/<pack>.json 저장 (JSON) - POST /op/list/:pack/playlist → yt-dlp 로 플레이리스트 펼치기 - GET /op/datapack → 음악퀴즈 선택 + 출력 - GET /op/datapack/:pack/generate → 임시 포맷 mcfunction 텍스트 shared/types.ts: PackList / MusicListEntry / ImageListEntry shared/store.ts: loadPackList, savePackList, normalizePackList shared/paths.ts: fileListDirPath = file/list/ server/youtube.ts: yt-dlp 플레이리스트 펼치기 (--flat-playlist --dump-json), 설치 안 됐을 때 NO_YTDLP 코드로 503. UI: - views/op/list.ejs: 가로 카드 목록 + 돌아가기 버튼 - views/op/listEditor.ejs + public/listEditor.js: 탭 전환, 드래그 정렬, 우클릭 컨텍스트 메뉴(수정/삭제), 사진 수정 모달의 [유튜브 / 이미지] 토글, 목록 저장·초기화·플레이리스트 불러오기 확인 팝업 - views/op/datapack.ejs: 음악퀴즈 카드 선택 팝업 → 데이터팩 출력 + 복사 - views/op/dashboard.ejs: 상단에 [음악목록 수정] [데이터팩 수정] 버튼 - public/styles.css: 탭, 트랙 로우, 이미지 그리드, 컨텍스트 메뉴, 모달, 코드블록 .gitignore: conversations/ 추가. 스모크: login → /op/list 렌더, POST 저장 라운드트립 OK, /op/datapack/.../generate 텍스트 출력 OK, 플레이리스트 fetch는 yt-dlp 미설치 환경에서 503 NO_YTDLP 메시지 정상. Section 1 (리소스팩 설치기 EXE: yt-dlp 음악 다운로드, painting variant 텍스처 패키징, 리소스팩 zip 배치) 은 후속 커밋에서 작업. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
313
public/listEditor.js
Normal file
313
public/listEditor.js
Normal file
@@ -0,0 +1,313 @@
|
||||
(function () {
|
||||
'use strict'
|
||||
|
||||
var state = {
|
||||
musicPlaylistUrl: (INITIAL.musicPlaylistUrl) || '',
|
||||
imagePlaylistUrl: (INITIAL.imagePlaylistUrl) || '',
|
||||
music: Array.isArray(INITIAL.music) ? INITIAL.music.slice() : [],
|
||||
images: Array.isArray(INITIAL.images) ? INITIAL.images.slice() : []
|
||||
}
|
||||
|
||||
// ── 탭 ────────────────────────────────────────────
|
||||
var tabBtns = document.querySelectorAll('.tabBtn')
|
||||
tabBtns.forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
tabBtns.forEach(function (b) { b.classList.remove('active') })
|
||||
btn.classList.add('active')
|
||||
var key = btn.getAttribute('data-tab')
|
||||
document.getElementById('tab-music').hidden = (key !== 'music')
|
||||
document.getElementById('tab-image').hidden = (key !== 'image')
|
||||
})
|
||||
})
|
||||
|
||||
// ── 유틸 ──────────────────────────────────────────
|
||||
function ytIdFromUrl(url) {
|
||||
if (!url) return ''
|
||||
var m = url.match(/[?&]v=([\w-]{11})/) || url.match(/youtu\.be\/([\w-]{11})/) ||
|
||||
url.match(/\/embed\/([\w-]{11})/) || url.match(/\/shorts\/([\w-]{11})/)
|
||||
return m ? m[1] : ''
|
||||
}
|
||||
function isYtUrl(url) { return ytIdFromUrl(url).length > 0 }
|
||||
function thumbUrl(url) {
|
||||
var id = ytIdFromUrl(url)
|
||||
if (id) return 'https://i.ytimg.com/vi/' + id + '/hqdefault.jpg'
|
||||
return url
|
||||
}
|
||||
function fmtTime(sec) {
|
||||
var s = Math.max(0, Math.floor(Number(sec) || 0))
|
||||
var m = Math.floor(s / 60)
|
||||
var rem = s % 60
|
||||
return m + ':' + (rem < 10 ? '0' : '') + rem
|
||||
}
|
||||
function setStatus(id, text, isError) {
|
||||
var el = document.getElementById(id)
|
||||
el.textContent = text || ''
|
||||
el.classList.toggle('error', !!isError)
|
||||
}
|
||||
|
||||
// ── 렌더 ──────────────────────────────────────────
|
||||
function renderMusic() {
|
||||
var ol = document.getElementById('music-list')
|
||||
ol.innerHTML = ''
|
||||
state.music.forEach(function (entry, idx) {
|
||||
var li = document.createElement('li')
|
||||
li.className = 'trackRow'
|
||||
li.draggable = true
|
||||
li.dataset.index = String(idx)
|
||||
li.innerHTML =
|
||||
'<span class="rowNum">' + (idx + 1) + '</span>' +
|
||||
'<img class="rowThumb" src="' + thumbUrl(entry.url) + '" alt="" loading="lazy"/>' +
|
||||
'<div class="rowMeta">' +
|
||||
'<div class="rowTitle">' + escapeHtml(entry.title || '(제목 없음)') + '</div>' +
|
||||
'<div class="rowSub">' + escapeHtml(entry.artist || '') + '</div>' +
|
||||
'</div>' +
|
||||
'<span class="rowDur">' + fmtTime(entry.durationSec) + '</span>'
|
||||
attachRowEvents(li, 'music', idx)
|
||||
ol.appendChild(li)
|
||||
})
|
||||
}
|
||||
|
||||
function renderImage() {
|
||||
var grid = document.getElementById('image-list')
|
||||
grid.innerHTML = ''
|
||||
state.images.forEach(function (entry, idx) {
|
||||
var card = document.createElement('div')
|
||||
card.className = 'imageCard'
|
||||
card.draggable = true
|
||||
card.dataset.index = String(idx)
|
||||
card.innerHTML =
|
||||
'<span class="cardNum">' + (idx + 1) + '</span>' +
|
||||
'<img src="' + thumbUrl(entry.url) + '" alt="" loading="lazy"/>'
|
||||
attachRowEvents(card, 'image', idx)
|
||||
grid.appendChild(card)
|
||||
})
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s).replace(/[&<>"']/g, function (c) {
|
||||
return ({ '&':'&','<':'<','>':'>','"':'"',"'":''' })[c]
|
||||
})
|
||||
}
|
||||
|
||||
// ── 행/카드 이벤트 (드래그·우클릭) ─────────────────
|
||||
var dragSrc = null
|
||||
function attachRowEvents(el, type, idx) {
|
||||
el.addEventListener('dragstart', function (e) {
|
||||
dragSrc = { type: type, index: idx }
|
||||
el.classList.add('dragging')
|
||||
try { e.dataTransfer.setData('text/plain', String(idx)) } catch (_) {}
|
||||
e.dataTransfer.effectAllowed = 'move'
|
||||
})
|
||||
el.addEventListener('dragend', function () {
|
||||
el.classList.remove('dragging')
|
||||
dragSrc = null
|
||||
})
|
||||
el.addEventListener('dragover', function (e) {
|
||||
if (!dragSrc || dragSrc.type !== type) return
|
||||
e.preventDefault()
|
||||
e.dataTransfer.dropEffect = 'move'
|
||||
el.classList.add('dragOver')
|
||||
})
|
||||
el.addEventListener('dragleave', function () { el.classList.remove('dragOver') })
|
||||
el.addEventListener('drop', function (e) {
|
||||
e.preventDefault()
|
||||
el.classList.remove('dragOver')
|
||||
if (!dragSrc || dragSrc.type !== type) return
|
||||
var srcIdx = dragSrc.index
|
||||
var dstIdx = idx
|
||||
if (srcIdx === dstIdx) return
|
||||
var arr = (type === 'music') ? state.music : state.images
|
||||
var moved = arr.splice(srcIdx, 1)[0]
|
||||
arr.splice(dstIdx, 0, moved)
|
||||
if (type === 'music') renderMusic(); else renderImage()
|
||||
})
|
||||
el.addEventListener('contextmenu', function (e) {
|
||||
e.preventDefault()
|
||||
openCtxMenu(e.pageX, e.pageY, type, idx)
|
||||
})
|
||||
}
|
||||
|
||||
// ── 컨텍스트 메뉴 ─────────────────────────────────
|
||||
var ctxMenu = document.getElementById('ctxMenu')
|
||||
var ctxTarget = null
|
||||
function openCtxMenu(x, y, type, idx) {
|
||||
ctxTarget = { type: type, index: idx }
|
||||
ctxMenu.style.left = x + 'px'
|
||||
ctxMenu.style.top = y + 'px'
|
||||
ctxMenu.hidden = false
|
||||
}
|
||||
function closeCtxMenu() {
|
||||
ctxMenu.hidden = true
|
||||
ctxTarget = null
|
||||
}
|
||||
document.addEventListener('click', function (e) {
|
||||
if (ctxMenu.hidden) return
|
||||
if (!ctxMenu.contains(e.target)) closeCtxMenu()
|
||||
})
|
||||
ctxMenu.querySelectorAll('button').forEach(function (b) {
|
||||
b.addEventListener('click', function () {
|
||||
if (!ctxTarget) return
|
||||
var action = b.getAttribute('data-ctx')
|
||||
var t = ctxTarget
|
||||
closeCtxMenu()
|
||||
if (action === 'delete') {
|
||||
if (t.type === 'music') state.music.splice(t.index, 1)
|
||||
else state.images.splice(t.index, 1)
|
||||
if (t.type === 'music') renderMusic(); else renderImage()
|
||||
} else if (action === 'edit') {
|
||||
openEditModal(t.type, t.index)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// ── 수정 팝업 ─────────────────────────────────────
|
||||
var editMusic = document.getElementById('editMusicModal')
|
||||
var editImage = document.getElementById('editImageModal')
|
||||
var editingIdx = -1
|
||||
var editingImageMode = 'yt'
|
||||
|
||||
function openEditModal(type, idx) {
|
||||
editingIdx = idx
|
||||
if (type === 'music') {
|
||||
document.getElementById('edit-music-url').value = state.music[idx].url || ''
|
||||
editMusic.hidden = false
|
||||
} else {
|
||||
var url = state.images[idx].url || ''
|
||||
editingImageMode = isYtUrl(url) ? 'yt' : 'img'
|
||||
updateSegButtons()
|
||||
document.getElementById('edit-image-url').value = url
|
||||
editImage.hidden = false
|
||||
}
|
||||
}
|
||||
function closeAllModals() {
|
||||
document.querySelectorAll('.modalOverlay').forEach(function (m) { m.hidden = true })
|
||||
}
|
||||
document.querySelectorAll('[data-modal-close]').forEach(function (b) {
|
||||
b.addEventListener('click', closeAllModals)
|
||||
})
|
||||
document.querySelectorAll('.modalOverlay').forEach(function (m) {
|
||||
m.addEventListener('click', function (e) {
|
||||
if (e.target === m) closeAllModals()
|
||||
})
|
||||
})
|
||||
|
||||
document.getElementById('edit-music-save').addEventListener('click', function () {
|
||||
var url = document.getElementById('edit-music-url').value.trim()
|
||||
if (!url) { return }
|
||||
state.music[editingIdx].url = url
|
||||
closeAllModals()
|
||||
renderMusic()
|
||||
})
|
||||
|
||||
// 이미지 수정 팝업의 토글 (유튜브 주소 / 이미지 주소)
|
||||
function updateSegButtons() {
|
||||
document.querySelectorAll('#editImageModal .segBtn').forEach(function (b) {
|
||||
b.classList.toggle('active', b.getAttribute('data-seg') === editingImageMode)
|
||||
})
|
||||
}
|
||||
document.querySelectorAll('#editImageModal .segBtn').forEach(function (b) {
|
||||
b.addEventListener('click', function () {
|
||||
editingImageMode = b.getAttribute('data-seg')
|
||||
updateSegButtons()
|
||||
})
|
||||
})
|
||||
document.getElementById('edit-image-save').addEventListener('click', function () {
|
||||
var url = document.getElementById('edit-image-url').value.trim()
|
||||
if (!url) return
|
||||
state.images[editingIdx].url = url
|
||||
closeAllModals()
|
||||
renderImage()
|
||||
})
|
||||
|
||||
// ── 액션 (save/clear/fetch) ───────────────────────
|
||||
var confirmModal = document.getElementById('confirmModal')
|
||||
function ask(title, message, onOk) {
|
||||
document.getElementById('confirm-title').textContent = title
|
||||
document.getElementById('confirm-message').textContent = message
|
||||
confirmModal.hidden = false
|
||||
var ok = document.getElementById('confirm-ok')
|
||||
var handler = function () {
|
||||
ok.removeEventListener('click', handler)
|
||||
confirmModal.hidden = true
|
||||
onOk()
|
||||
}
|
||||
ok.addEventListener('click', handler)
|
||||
}
|
||||
|
||||
document.querySelectorAll('[data-action]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
var action = btn.getAttribute('data-action')
|
||||
var target = btn.getAttribute('data-target')
|
||||
if (action === 'clear') {
|
||||
ask('목록 초기화', '"' + (target === 'music' ? '음악' : '사진') + '목록"을 비웁니다. 진행할까요?', function () {
|
||||
if (target === 'music') { state.music = []; renderMusic() }
|
||||
else { state.images = []; renderImage() }
|
||||
})
|
||||
} else if (action === 'save') {
|
||||
doSave(target)
|
||||
} else if (action === 'fetch') {
|
||||
doFetch(target)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function doSave(target) {
|
||||
state.musicPlaylistUrl = document.getElementById('music-playlist-url').value.trim()
|
||||
state.imagePlaylistUrl = document.getElementById('image-playlist-url').value.trim()
|
||||
var statusId = 'status-' + target
|
||||
setStatus(statusId, '저장 중…')
|
||||
fetch('/op/list/' + encodeURIComponent(PACK_KEY), {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify(state)
|
||||
}).then(function (r) {
|
||||
return r.json().then(function (body) { return { ok: r.ok, body: body } })
|
||||
}).then(function (result) {
|
||||
if (result.ok && result.body.ok) setStatus(statusId, '저장 완료')
|
||||
else setStatus(statusId, '저장 실패: ' + (result.body.message || ''), true)
|
||||
}).catch(function (err) {
|
||||
setStatus(statusId, '저장 실패: ' + err.message, true)
|
||||
})
|
||||
}
|
||||
|
||||
function doFetch(target) {
|
||||
var input = document.getElementById(target + '-playlist-url')
|
||||
var url = input.value.trim()
|
||||
if (!url) {
|
||||
setStatus('status-' + target, '플레이리스트 주소를 입력해 주세요.', true)
|
||||
return
|
||||
}
|
||||
ask('플레이리스트 불러오기', '현재 ' + (target === 'music' ? '음악' : '사진') + '목록 순서가 모두 사라집니다. 진행할까요?', function () {
|
||||
setStatus('status-' + target, '불러오는 중…')
|
||||
fetch('/op/list/' + encodeURIComponent(PACK_KEY) + '/playlist', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ url: url })
|
||||
}).then(function (r) {
|
||||
return r.json().then(function (body) { return { ok: r.ok, body: body } })
|
||||
}).then(function (result) {
|
||||
if (!result.ok || !result.body.ok) {
|
||||
setStatus('status-' + target, '실패: ' + (result.body.message || ''), true)
|
||||
return
|
||||
}
|
||||
var entries = result.body.entries || []
|
||||
if (target === 'music') {
|
||||
state.music = entries.map(function (e) {
|
||||
return { url: e.url, title: e.title || '', artist: e.channel || '', durationSec: e.durationSec || 0 }
|
||||
})
|
||||
renderMusic()
|
||||
} else {
|
||||
state.images = entries.map(function (e) { return { url: e.url } })
|
||||
renderImage()
|
||||
}
|
||||
setStatus('status-' + target, entries.length + '개 항목을 불러왔습니다.')
|
||||
}).catch(function (err) {
|
||||
setStatus('status-' + target, '실패: ' + err.message, true)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 초기 렌더
|
||||
renderMusic()
|
||||
renderImage()
|
||||
})()
|
||||
@@ -357,3 +357,125 @@ body.siteBody.centerLayout {
|
||||
font-size: 13px;
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
/* ── /op/list, /op/list/:pack, /op/datapack ────────────── */
|
||||
|
||||
.tabBar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
|
||||
.tabBtn {
|
||||
background: transparent; border: none; color: var(--text-muted);
|
||||
padding: 10px 18px; cursor: pointer; font-size: 14px;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
.tabBtn:hover { color: var(--text); }
|
||||
.tabBtn.active { color: var(--text); border-bottom-color: var(--accent); }
|
||||
|
||||
.tabPanel { display: block; }
|
||||
|
||||
.listActionsRow { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
|
||||
.statusText { font-size: 13px; color: var(--text-muted); margin-left: 8px; }
|
||||
.statusText.error { color: var(--danger); }
|
||||
|
||||
.playlistRow { display: flex; gap: 8px; margin-bottom: 16px; }
|
||||
.textInput {
|
||||
flex: 1; background: var(--bg); color: var(--text);
|
||||
border: 1px solid var(--border); padding: 10px 12px; border-radius: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.textInput:focus { outline: none; border-color: var(--accent); }
|
||||
|
||||
/* 음악 행 */
|
||||
.trackList { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
|
||||
.trackRow {
|
||||
display: grid;
|
||||
grid-template-columns: 36px 80px 1fr auto;
|
||||
gap: 12px; align-items: center;
|
||||
padding: 8px 12px; background: var(--bg-card);
|
||||
border: 1px solid var(--border); border-radius: 8px;
|
||||
cursor: grab; user-select: none;
|
||||
}
|
||||
.trackRow.dragging { opacity: 0.5; }
|
||||
.trackRow.dragOver { border-color: var(--accent); }
|
||||
.rowNum { color: var(--text-muted); font-size: 14px; text-align: center; }
|
||||
.rowThumb { width: 80px; height: 45px; object-fit: cover; border-radius: 4px; background: #000; }
|
||||
.rowMeta { min-width: 0; }
|
||||
.rowTitle { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.rowSub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
|
||||
.rowDur { color: var(--text-muted); font-size: 13px; }
|
||||
|
||||
/* 사진 그리드 */
|
||||
.imageGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.imageCard {
|
||||
position: relative; aspect-ratio: 1 / 1; background: var(--bg-card);
|
||||
border: 1px solid var(--border); border-radius: 10px;
|
||||
overflow: hidden; cursor: grab; user-select: none;
|
||||
}
|
||||
.imageCard.dragging { opacity: 0.5; }
|
||||
.imageCard.dragOver { border-color: var(--accent); }
|
||||
.imageCard img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.cardNum {
|
||||
position: absolute; top: 6px; left: 6px;
|
||||
background: rgba(0,0,0,0.7); color: #fff;
|
||||
padding: 2px 8px; border-radius: 999px;
|
||||
font-size: 12px; font-weight: 600;
|
||||
}
|
||||
|
||||
/* 컨텍스트 메뉴 */
|
||||
.ctxMenu {
|
||||
position: absolute; z-index: 200;
|
||||
background: var(--bg-card); border: 1px solid var(--border);
|
||||
border-radius: 8px; padding: 4px; min-width: 120px;
|
||||
box-shadow: 0 12px 24px rgba(0,0,0,0.5);
|
||||
}
|
||||
.ctxMenu button {
|
||||
display: block; width: 100%; text-align: left;
|
||||
background: transparent; border: none; color: var(--text);
|
||||
padding: 8px 12px; cursor: pointer; font-size: 13px; border-radius: 4px;
|
||||
}
|
||||
.ctxMenu button:hover { background: var(--bg); }
|
||||
|
||||
/* 모달 (음악퀴즈 인스톨러의 modalOverlay 와 호환) */
|
||||
.modalOverlay {
|
||||
position: fixed; inset: 0; background: rgba(0,0,0,0.6);
|
||||
display: flex; align-items: center; justify-content: center; z-index: 1000;
|
||||
}
|
||||
.modalOverlay[hidden] { display: none; }
|
||||
.modalCard {
|
||||
background: var(--bg-alt); border: 1px solid var(--border);
|
||||
border-radius: 12px; width: min(560px, 92vw); max-height: 86vh;
|
||||
display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
|
||||
}
|
||||
.modalCard > header {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 12px 16px; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.modalCard > header h3 { margin: 0; font-size: 16px; }
|
||||
.modalCard > footer { padding: 12px 16px; border-top: 1px solid var(--border); }
|
||||
.modalClose { background: transparent; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; }
|
||||
.modalClose:hover { color: var(--text); }
|
||||
.modalBody { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
|
||||
.modalBody label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); }
|
||||
|
||||
/* 토글 버튼 (segmented) */
|
||||
.segmentedRow { display: flex; gap: 4px; }
|
||||
.segBtn {
|
||||
background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted);
|
||||
padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px;
|
||||
}
|
||||
.segBtn.active { border-color: var(--accent); color: var(--text); background: rgba(47,129,247,0.15); }
|
||||
|
||||
/* 데이터팩 페이지 */
|
||||
.dpControls { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
|
||||
.dpActions { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
|
||||
.codeBlock {
|
||||
background: var(--bg-card); border: 1px solid var(--border);
|
||||
border-radius: 10px; padding: 14px 16px; overflow-x: auto;
|
||||
font-family: 'Consolas','SFMono-Regular',monospace; font-size: 13px;
|
||||
white-space: pre-wrap; word-break: break-word;
|
||||
max-height: 60vh; overflow-y: auto;
|
||||
}
|
||||
.packCard.pickable { cursor: pointer; }
|
||||
.packCard.pickable:hover { border-color: var(--accent); }
|
||||
|
||||
Reference in New Issue
Block a user