feat(folders): nested folder tree (max depth 2) + id-based mutations

- new storeDb.ts: DB+FS layer (folders w/ parent_id, videos w/ global id) - depth cap: sub-folder cannot have children (enforced in createFolder) - video id: editable anytime (changeVideoId), uniqueness via PK - routes: - public /folder/:topName[/:subName], /video/:topName[/:subName]/:videoId - admin /op/folder/:topName[/:subName], id-based /op/folders/:id/* and /op/videos/:id/* (rename/changeId/delete/save + idAvailable check) - views: breadcrumb + subFolder grid; 플레이리스트 추가 button shows at 2단계 - client JS: id-based mutation endpoints, share URL data attribute, in-site player pushes share URL to address bar - store.ts slimmed to Account + readAccounts (FS layer moved to storeDb) - pickIntId accepts numeric JSON bodies Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-31 23:36:02 +09:00
parent 3560dcb802
commit c5faa8808c
17 changed files with 1207 additions and 577 deletions
--- a/public/dashboard.js
+++ b/public/dashboard.js
@@ -1,5 +1,6 @@
 (function () {
  var ctxMenu = document.getElementById('ctxMenu')
+  var targetId = null
  var targetName = null

  function showCtx(x, y) {
@@ -7,11 +8,12 @@
    ctxMenu.style.top = y + 'px'
    ctxMenu.hidden = false
  }
-  function hideCtx() { ctxMenu.hidden = true; targetName = null }
+  function hideCtx() { ctxMenu.hidden = true; targetId = null; targetName = null }

  document.querySelectorAll('.adminFolder').forEach(function (card) {
    card.addEventListener('contextmenu', function (e) {
      e.preventDefault()
+      targetId = card.getAttribute('data-folder-id')
      targetName = card.getAttribute('data-name')
      showCtx(e.clientX, e.clientY)
    })
@@ -23,15 +25,15 @@

  ctxMenu.addEventListener('click', function (e) {
    var btn = e.target.closest('button')
-    if (!btn) return
+    if (!btn || !targetId) return
    var action = btn.getAttribute('data-action')
    if (action === 'rename') {
      var newName = window.prompt('새 폴더 이름', targetName)
      if (newName && newName !== targetName) {
-        fetch('/op/folders/rename', {
+        fetch('/op/folders/' + encodeURIComponent(targetId) + '/rename', {
          method: 'POST',
          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({ oldName: targetName, newName: newName })
+          body: JSON.stringify({ newName: newName })
        }).then(function (r) { return r.json() }).then(function (j) {
          if (j.ok) location.reload()
          else alert(j.message || '이름 변경 실패')
@@ -39,10 +41,8 @@
      }
    } else if (action === 'delete') {
      if (window.confirm('"' + targetName + '" 폴더를 정말 삭제할까요? 안의 영상이 모두 사라집니다.')) {
-        fetch('/op/folders/delete', {
-          method: 'POST',
-          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({ name: targetName })
+        fetch('/op/folders/' + encodeURIComponent(targetId) + '/delete', {
+          method: 'POST'
        }).then(function (r) { return r.json() }).then(function (j) {
          if (j.ok) location.reload()
          else alert(j.message || '삭제 실패')
@@ -61,20 +61,22 @@

  function openModal() { modal.hidden = false; input.value = ''; setTimeout(function () { input.focus() }, 0) }
  function closeModal() { modal.hidden = true }
-  addBtn.addEventListener('click', openModal)
-  cancelBtn.addEventListener('click', closeModal)
-  modal.addEventListener('click', function (e) { if (e.target === modal) closeModal() })
-  input.addEventListener('keydown', function (e) { if (e.key === 'Enter') confirmBtn.click() })
-  confirmBtn.addEventListener('click', function () {
-    var name = input.value.trim()
-    if (!name) return
-    fetch('/op/folders', {
-      method: 'POST',
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ name: name })
-    }).then(function (r) { return r.json() }).then(function (j) {
-      if (j.ok) location.reload()
-      else alert(j.message || '폴더 생성 실패')
+  if (addBtn) {
+    addBtn.addEventListener('click', openModal)
+    cancelBtn.addEventListener('click', closeModal)
+    modal.addEventListener('click', function (e) { if (e.target === modal) closeModal() })
+    input.addEventListener('keydown', function (e) { if (e.key === 'Enter') confirmBtn.click() })
+    confirmBtn.addEventListener('click', function () {
+      var name = input.value.trim()
+      if (!name) return
+      fetch('/op/folders', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ name: name })
+      }).then(function (r) { return r.json() }).then(function (j) {
+        if (j.ok) location.reload()
+        else alert(j.message || '폴더 생성 실패')
+      })
    })
-  })
+  }
 })()
--- a/public/editor.js
+++ b/public/editor.js
@@ -1,6 +1,7 @@
 (function () {
-  var ctx = window.__EDITOR__ || { folder: '', video: null }
-  var folder = ctx.folder
+  var ctx = window.__EDITOR__ || { folderPath: [], folderId: null, video: null }
+  var folderPathEnc = (ctx.folderPath || []).map(encodeURIComponent).join('/')
+  var folderBaseUrl = '/op/folder/' + folderPathEnc
  var video = ctx.video

  var dropZone = document.getElementById('dropZone')
@@ -46,7 +47,7 @@
    form.append('title', titleInput.value || file.name)
    uploadStatus.textContent = '업로드 중...'
    var xhr = new XMLHttpRequest()
-    xhr.open('POST', '/op/folder/' + encodeURIComponent(folder) + '/video/upload')
+    xhr.open('POST', folderBaseUrl + '/video/upload')
    xhr.upload.addEventListener('progress', function (e) {
      if (e.lengthComputable) {
        var pct = Math.round((e.loaded / e.total) * 100)
@@ -57,7 +58,7 @@
      try {
        var res = JSON.parse(xhr.responseText)
        if (res.ok) {
-          location.href = '/op/folder/' + encodeURIComponent(folder) + '/video/editor?id=' + encodeURIComponent(res.videoId)
+          location.href = folderBaseUrl + '/video/editor?id=' + encodeURIComponent(res.videoId)
        } else {
          uploadStatus.textContent = '업로드 실패: ' + (res.message || '')
        }
@@ -89,7 +90,7 @@
    probeInfo.textContent = '확인 중...'
    ytProbeBtn.disabled = true
    ytStartBtn.disabled = true
-    fetch('/op/folder/' + encodeURIComponent(folder) + '/video/youtube/probe', {
+    fetch(folderBaseUrl + '/video/youtube/probe', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ url: url })
@@ -144,7 +145,7 @@
    }
    // 중복 클릭 방지
    ytStartBtn.disabled = true
-    fetch('/op/folder/' + encodeURIComponent(folder) + '/video/youtube/start', {
+    fetch(folderBaseUrl + '/video/youtube/start', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ url: url, title: titleInput.value })
@@ -180,7 +181,7 @@
        dlProgress.value = job.progress
        probeInfo.textContent = job.message
        if (job.status === 'done') {
-          location.href = '/op/folder/' + encodeURIComponent(folder) + '/video/editor?id=' + encodeURIComponent(videoId)
+          location.href = folderBaseUrl + '/video/editor?id=' + encodeURIComponent(videoId)
        } else if (job.status === 'error') {
          probeInfo.textContent = '실패: ' + (job.error || '')
        } else {
@@ -364,14 +365,13 @@
  saveBtn.addEventListener('click', function () {
    if (!video) { alert('먼저 영상을 추가하세요.'); return }
    var payload = {
-      id: video.id,
      title: titleInput.value,
      startSec: trimStart,
      endSec: trimEnd
    }
    saveBtn.disabled = true
    saveBtn.textContent = '저장 중...'
-    fetch('/op/folder/' + encodeURIComponent(folder) + '/video/save', {
+    fetch('/op/videos/' + encodeURIComponent(video.id) + '/save', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify(payload)
@@ -380,7 +380,7 @@
      saveBtn.textContent = '저장'
      if (j.ok) {
        alert(j.note || '저장 완료')
-        location.href = '/op/folder/' + encodeURIComponent(folder)
+        location.href = folderBaseUrl
      } else {
        alert(j.message || '저장 실패')
      }
--- a/public/folder.js
+++ b/public/folder.js
@@ -1,74 +1,171 @@
 (function () {
-  var folder = (window.__OP__ || {}).folder
-  var ctxMenu = document.getElementById('ctxMenu')
-  var targetId = null
-  var targetTitle = null
+  var op = window.__OP__ || { folderId: null, folderPath: [], isSubFolder: false }
+  var folderPathEnc = (op.folderPath || []).map(encodeURIComponent).join('/')

-  function showCtx(x, y) {
-    ctxMenu.style.left = x + 'px'
-    ctxMenu.style.top = y + 'px'
-    ctxMenu.hidden = false
+  // ── 영상 컨텍스트 메뉴 ───────────────────────────────────────────────
+  var videoCtxMenu = document.getElementById('ctxMenu')
+  var videoTargetId = null
+  var videoTargetTitle = null
+  var videoTargetShareUrl = null
+
+  function showVideoCtx(x, y) {
+    videoCtxMenu.style.left = x + 'px'
+    videoCtxMenu.style.top = y + 'px'
+    videoCtxMenu.hidden = false
  }
-  function hideCtx() { ctxMenu.hidden = true }
+  function hideVideoCtx() { videoCtxMenu.hidden = true }

  document.querySelectorAll('.adminVideo').forEach(function (card) {
    card.addEventListener('contextmenu', function (e) {
      e.preventDefault()
-      targetId = card.getAttribute('data-id')
-      targetTitle = card.getAttribute('data-title')
-      showCtx(e.clientX, e.clientY)
+      videoTargetId = card.getAttribute('data-id')
+      videoTargetTitle = card.getAttribute('data-title')
+      videoTargetShareUrl = card.getAttribute('data-share-url')
+      showVideoCtx(e.clientX, e.clientY)
    })
  })

-  document.addEventListener('click', function (e) {
-    if (!ctxMenu.contains(e.target)) hideCtx()
-  })
-
-  ctxMenu.addEventListener('click', function (e) {
+  videoCtxMenu.addEventListener('click', function (e) {
    var btn = e.target.closest('button')
-    if (!btn) return
+    if (!btn || !videoTargetId) return
    var action = btn.getAttribute('data-action')
    if (action === 'edit') {
-      location.href = '/op/folder/' + encodeURIComponent(folder) + '/video/editor?id=' + encodeURIComponent(targetId)
+      location.href = '/op/folder/' + folderPathEnc + '/video/editor?id=' + encodeURIComponent(videoTargetId)
    } else if (action === 'copyUrl') {
-      copyVideoUrl(targetId)
+      copyUrl(location.origin + videoTargetShareUrl)
    } else if (action === 'rename') {
-      var t = window.prompt('새 영상 제목', targetTitle)
-      if (t && t !== targetTitle) {
-        fetch('/op/folder/' + encodeURIComponent(folder) + '/video/rename', {
+      var t = window.prompt('새 영상 제목', videoTargetTitle)
+      if (t && t !== videoTargetTitle) {
+        fetch('/op/videos/' + encodeURIComponent(videoTargetId) + '/rename', {
          method: 'POST',
          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({ id: targetId, title: t })
+          body: JSON.stringify({ title: t })
        }).then(function (r) { return r.json() }).then(function (j) {
          if (j.ok) location.reload()
          else alert(j.message || '이름 변경 실패')
        })
      }
-    } else if (action === 'delete') {
-      if (window.confirm('"' + targetTitle + '" 영상을 정말 삭제할까요?')) {
-        fetch('/op/folder/' + encodeURIComponent(folder) + '/video/delete', {
+    } else if (action === 'changeId') {
+      var newId = window.prompt('새 영상 ID (영문/숫자/_/-, 1~64자)', videoTargetId)
+      if (newId && newId !== videoTargetId) {
+        fetch('/op/videos/' + encodeURIComponent(videoTargetId) + '/changeId', {
          method: 'POST',
          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({ id: targetId })
+          body: JSON.stringify({ newId: newId })
+        }).then(function (r) { return r.json() }).then(function (j) {
+          if (j.ok) location.reload()
+          else alert(j.message || 'ID 변경 실패')
+        })
+      }
+    } else if (action === 'delete') {
+      if (window.confirm('"' + videoTargetTitle + '" 영상을 정말 삭제할까요?')) {
+        fetch('/op/videos/' + encodeURIComponent(videoTargetId) + '/delete', {
+          method: 'POST'
        }).then(function (r) { return r.json() }).then(function (j) {
          if (j.ok) location.reload()
          else alert(j.message || '삭제 실패')
        })
      }
    }
-    hideCtx()
+    hideVideoCtx()
  })

-  function copyVideoUrl(id) {
-    var url = location.origin + '/file/video/' + encodeURIComponent(id)
-    if (navigator.clipboard && navigator.clipboard.writeText) {
-      navigator.clipboard.writeText(url).then(function () {
-        flashToast('주소가 복사되었습니다.')
-      }, function () {
-        fallbackCopy(url)
+  // ── 하위 폴더 컨텍스트 메뉴 (rename / delete) ────────────────────────
+  var folderCtxMenu = document.getElementById('folderCtxMenu')
+  var folderTargetId = null
+  var folderTargetName = null
+
+  function showFolderCtx(x, y) {
+    folderCtxMenu.style.left = x + 'px'
+    folderCtxMenu.style.top = y + 'px'
+    folderCtxMenu.hidden = false
+  }
+  function hideFolderCtx() { folderCtxMenu.hidden = true }
+
+  document.querySelectorAll('#subFolderGrid .adminFolder').forEach(function (card) {
+    card.addEventListener('contextmenu', function (e) {
+      e.preventDefault()
+      folderTargetId = card.getAttribute('data-folder-id')
+      folderTargetName = card.getAttribute('data-name')
+      showFolderCtx(e.clientX, e.clientY)
+    })
+  })
+
+  if (folderCtxMenu) {
+    folderCtxMenu.addEventListener('click', function (e) {
+      var btn = e.target.closest('button')
+      if (!btn || !folderTargetId) return
+      var action = btn.getAttribute('data-action')
+      if (action === 'rename') {
+        var newName = window.prompt('새 폴더 이름', folderTargetName)
+        if (newName && newName !== folderTargetName) {
+          fetch('/op/folders/' + encodeURIComponent(folderTargetId) + '/rename', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ newName: newName })
+          }).then(function (r) { return r.json() }).then(function (j) {
+            if (j.ok) location.reload()
+            else alert(j.message || '이름 변경 실패')
+          })
+        }
+      } else if (action === 'delete') {
+        if (window.confirm('"' + folderTargetName + '" 폴더를 정말 삭제할까요? 안의 영상이 모두 사라집니다.')) {
+          fetch('/op/folders/' + encodeURIComponent(folderTargetId) + '/delete', {
+            method: 'POST'
+          }).then(function (r) { return r.json() }).then(function (j) {
+            if (j.ok) location.reload()
+            else alert(j.message || '삭제 실패')
+          })
+        }
+      }
+      hideFolderCtx()
+    })
+  }
+
+  document.addEventListener('click', function (e) {
+    if (videoCtxMenu && !videoCtxMenu.contains(e.target)) hideVideoCtx()
+    if (folderCtxMenu && !folderCtxMenu.contains(e.target)) hideFolderCtx()
+  })
+
+  // ── 하위 폴더 추가 모달 ──────────────────────────────────────────────
+  var addSubBtn = document.getElementById('addSubFolderBtn')
+  if (addSubBtn) {
+    var subModal = document.getElementById('addSubFolderModal')
+    var subInput = document.getElementById('addSubFolderInput')
+    var subCancel = document.getElementById('addSubFolderCancel')
+    var subConfirm = document.getElementById('addSubFolderConfirm')
+
+    function openSubModal() {
+      subModal.hidden = false; subInput.value = ''
+      setTimeout(function () { subInput.focus() }, 0)
+    }
+    function closeSubModal() { subModal.hidden = true }
+    addSubBtn.addEventListener('click', openSubModal)
+    subCancel.addEventListener('click', closeSubModal)
+    subModal.addEventListener('click', function (e) { if (e.target === subModal) closeSubModal() })
+    subInput.addEventListener('keydown', function (e) { if (e.key === 'Enter') subConfirm.click() })
+    subConfirm.addEventListener('click', function () {
+      var name = subInput.value.trim()
+      if (!name) return
+      fetch('/op/folders', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ name: name, parentId: op.folderId })
+      }).then(function (r) { return r.json() }).then(function (j) {
+        if (j.ok) location.reload()
+        else alert(j.message || '폴더 생성 실패')
      })
+    })
+  }
+
+  // ── 유틸 ──────────────────────────────────────────────────────────
+  function copyUrl(text) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(text).then(function () {
+        flashToast('주소가 복사되었습니다.')
+      }, function () { fallbackCopy(text) })
    } else {
-      fallbackCopy(url)
+      fallbackCopy(text)
    }
  }
  function fallbackCopy(text) {
--- a/public/player.js
+++ b/public/player.js
@@ -1,13 +1,15 @@
 (function () {
  var overlay = document.getElementById('playerOverlay')
+  if (!overlay) return
  var closeBtn = document.getElementById('playerClose')
  var video = document.getElementById('playerVideo')
  var titleEl = document.getElementById('playerTitle')

-  function openPlayer(videoId, title) {
-    // 스펙: /player/:videoId 로 이동한 것처럼 동작하면서 내부 팝업으로 띄운다.
-    // pushState 로 URL 만 바꿔, 새로고침/직접접근 시 player.ejs 가 응답한다.
-    history.pushState({ player: true, videoId: videoId }, '', '/player/' + encodeURIComponent(videoId))
+  function openPlayer(videoId, title, shareUrl) {
+    // 사이트 내 재생도 share URL 을 주소창에 보이도록 pushState.
+    // share URL 이 없으면 단순한 /file/video/:id 로 폴백.
+    var url = shareUrl || ('/file/video/' + encodeURIComponent(videoId))
+    history.pushState({ player: true, videoId: videoId }, '', url)
    titleEl.textContent = title || ''
    video.src = '/api/video/' + encodeURIComponent(videoId) + '/file'
    overlay.hidden = false
@@ -19,17 +21,19 @@
    video.pause()
    video.removeAttribute('src')
    video.load()
-    // 폴더 페이지로 되돌리기
    if (history.state && history.state.player) {
      history.back()
    }
  }

  document.querySelectorAll('.videoCard').forEach(function (card) {
+    // <a> 태그면 클릭 시 share URL 로 풀 페이지 이동하도록 두고, 모달은 띄우지 않는다.
+    if (card.tagName && card.tagName.toLowerCase() === 'a') return
    card.addEventListener('click', function () {
      var id = card.getAttribute('data-video-id')
-      var title = card.querySelector('.videoTitle')
-      openPlayer(id, title ? title.textContent : '')
+      var titleNode = card.querySelector('.videoTitle')
+      var shareUrl = card.getAttribute('data-share-url')
+      openPlayer(id, titleNode ? titleNode.textContent : '', shareUrl)
    })
  })

--- a/public/public-folder.js
+++ b/public/public-folder.js
@@ -1,7 +1,7 @@
 (function () {
  var ctxMenu = document.getElementById('ctxMenu')
  if (!ctxMenu) return
-  var targetId = null
+  var targetShareUrl = null

  function showCtx(x, y) {
    ctxMenu.style.left = x + 'px'
@@ -13,7 +13,7 @@
  document.querySelectorAll('.videoCard').forEach(function (card) {
    card.addEventListener('contextmenu', function (e) {
      e.preventDefault()
-      targetId = card.getAttribute('data-video-id') || card.getAttribute('data-id')
+      targetShareUrl = card.getAttribute('data-share-url')
      showCtx(e.clientX, e.clientY)
    })
  })
@@ -27,22 +27,19 @@
    var btn = e.target.closest('button')
    if (!btn) return
    var action = btn.getAttribute('data-action')
-    if (action === 'copyUrl' && targetId) {
-      copyVideoUrl(targetId)
+    if (action === 'copyUrl' && targetShareUrl) {
+      copyUrl(location.origin + targetShareUrl)
    }
    hideCtx()
  })

-  function copyVideoUrl(id) {
-    var url = location.origin + '/file/video/' + encodeURIComponent(id)
+  function copyUrl(text) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
-      navigator.clipboard.writeText(url).then(function () {
+      navigator.clipboard.writeText(text).then(function () {
        flashToast('주소가 복사되었습니다.')
-      }, function () {
-        fallbackCopy(url)
-      })
+      }, function () { fallbackCopy(text) })
    } else {
-      fallbackCopy(url)
+      fallbackCopy(text)
    }
  }
  function fallbackCopy(text) {