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/views/folder.ejs
+++ b/views/folder.ejs
@@ -3,7 +3,7 @@
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title><%= folder %> · 비디오 사이트</title>
+  <title><%= folder.name %> · 비디오 사이트</title>
  <link rel="stylesheet" href="/static/styles.css" />
 </head>
 <body class="siteBody">
@@ -15,41 +15,51 @@
    <a class="secondaryButton" href="/op">관리자</a>
  </header>

+  <%
+    // 현재 폴더까지의 경로 prefix (영상/하위폴더 URL 조립용)
+    var folderPathEnc = breadcrumb.map(function (s) { return encodeURIComponent(s) }).join('/')
+    var parentHref = isSubFolder ? '/folder/' + encodeURIComponent(breadcrumb[0]) : '/'
+    var parentLabel = isSubFolder ? '← ' + breadcrumb[0] : '← 폴더 목록'
+  %>
+
  <main class="pageWrap">
    <section class="hero">
-      <a class="muted" href="/">← 폴더 목록</a>
-      <h1>📁 <%= folder %></h1>
+      <a class="muted" href="<%= parentHref %>"><%= parentLabel %></a>
+      <h1>📁 <%= breadcrumb.join(' / ') %></h1>
    </section>

+    <% if (subFolders && subFolders.length > 0) { %>
+      <section class="folderGrid">
+        <% subFolders.forEach(function (sf) { %>
+          <a class="folderCard" href="/folder/<%= folderPathEnc %>/<%= encodeURIComponent(sf.name) %>">
+            <span class="folderIcon">📁</span>
+            <span class="folderName"><%= sf.name %></span>
+          </a>
+        <% }) %>
+      </section>
+    <% } %>
+
    <section class="videoGrid">
-      <% if (videos.length === 0) { %>
+      <% if (videos.length === 0 && (!subFolders || subFolders.length === 0)) { %>
        <p class="muted">이 폴더에 영상이 없습니다.</p>
      <% } %>
      <% videos.forEach(function (v) { %>
-        <button type="button" class="videoCard" data-video-id="<%= v.id %>">
+        <%
+          var shareUrl = '/video/' + folderPathEnc + '/' + encodeURIComponent(v.id)
+        %>
+        <a class="videoCard" href="<%= shareUrl %>"
+           data-video-id="<%= v.id %>" data-share-url="<%= shareUrl %>">
          <div class="videoThumb">▶</div>
          <div class="videoTitle"><%= v.title %></div>
-        </button>
+        </a>
      <% }) %>
    </section>
  </main>

-  <div class="playerOverlay" id="playerOverlay" hidden>
-    <div class="playerModal" role="dialog" aria-modal="true">
-      <button type="button" class="playerClose" id="playerClose" aria-label="닫기">✕</button>
-      <div class="playerTitle" id="playerTitle"></div>
-      <video id="playerVideo" controls preload="metadata"></video>
-    </div>
-  </div>
-
  <div class="ctxMenu" id="ctxMenu" hidden>
    <button type="button" data-action="copyUrl">영상 주소 복사</button>
  </div>

-  <script>
-    window.__SITE__ = { folder: <%- jsonForScript(folder) %> }
-  </script>
-  <script src="/static/player.js"></script>
  <script src="/static/public-folder.js"></script>
 </body>
 </html>
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -25,10 +25,10 @@
      <% if (folders.length === 0) { %>
        <p class="muted">아직 폴더가 없습니다. 관리자 페이지에서 폴더를 추가해 주세요.</p>
      <% } %>
-      <% folders.forEach(function (name) { %>
-        <a class="folderCard" href="/folder/<%= encodeURIComponent(name) %>">
+      <% folders.forEach(function (f) { %>
+        <a class="folderCard" href="/folder/<%= encodeURIComponent(f.name) %>">
          <span class="folderIcon">📁</span>
-          <span class="folderName"><%= name %></span>
+          <span class="folderName"><%= f.name %></span>
        </a>
      <% }) %>
    </section>
--- a/views/op/dashboard.ejs
+++ b/views/op/dashboard.ejs
@@ -21,11 +21,11 @@
      <% if (folders.length === 0) { %>
        <p class="muted">아직 폴더가 없습니다. 우측 상단에서 폴더를 추가해 주세요.</p>
      <% } %>
-      <% folders.forEach(function (name) { %>
-        <div class="folderCard adminFolder" data-name="<%= name %>">
-          <a class="folderCardLink" href="/op/folder/<%= encodeURIComponent(name) %>">
+      <% folders.forEach(function (f) { %>
+        <div class="folderCard adminFolder" data-folder-id="<%= f.id %>" data-name="<%= f.name %>">
+          <a class="folderCardLink" href="/op/folder/<%= encodeURIComponent(f.name) %>">
            <span class="folderIcon">📁</span>
-            <span class="folderName"><%= name %></span>
+            <span class="folderName"><%= f.name %></span>
          </a>
        </div>
      <% }) %>
--- a/views/op/editor.ejs
+++ b/views/op/editor.ejs
@@ -3,13 +3,18 @@
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>영상 편집 · <%= folder %></title>
+  <title>영상 편집 · <%= breadcrumb.join(' / ') %></title>
  <link rel="stylesheet" href="/static/styles.css" />
 </head>
 <body class="siteBody">
+  <%
+    var folderPathEnc = breadcrumb.map(function (s) { return encodeURIComponent(s) }).join('/')
+    var folderHref = '/op/folder/' + folderPathEnc
+    var folderLabel = breadcrumb.join(' / ')
+  %>
  <header class="editorNav">
    <div class="editorNavLeft">
-      <a class="muted" href="/op/folder/<%= encodeURIComponent(folder) %>">← <%= folder %></a>
+      <a class="muted" href="<%= folderHref %>">← <%= folderLabel %></a>
      <input type="text" id="titleInput" class="titleInput" placeholder="영상 제목" value="<%= video ? video.title : '' %>" />
    </div>
    <div class="editorNavRight">
@@ -35,7 +40,7 @@

      <div id="videoPanel" class="videoPanel" <% if (!video) { %>hidden<% } %>>
        <video id="editVideo" controls preload="metadata"
-          <% if (video) { %>src="/api/video/<%= video.id %>/file?edited=0"<% } %>></video>
+          <% if (video) { %>src="/api/video/<%= encodeURIComponent(video.id) %>/file?edited=0"<% } %>></video>

        <div class="trimTimeline">
          <div class="trimTimelineHeader">
@@ -66,7 +71,8 @@

  <script>
    window.__EDITOR__ = {
-      folder: <%- jsonForScript(folder) %>,
+      folderPath: <%- jsonForScript(breadcrumb) %>,
+      folderId: <%- jsonForScript(folder.id) %>,
      video: <%- jsonForScript(video) %>
    }
  </script>
--- a/views/op/folder.ejs
+++ b/views/op/folder.ejs
@@ -3,32 +3,65 @@
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>관리자 · <%= folder %></title>
+  <title>관리자 · <%= breadcrumb.join(' / ') %></title>
  <link rel="stylesheet" href="/static/styles.css" />
 </head>
 <body class="siteBody">
  <%- include('../partials/navbar', { userId }) %>

+  <%
+    var folderPathEnc = breadcrumb.map(function (s) { return encodeURIComponent(s) }).join('/')
+    var parentHref = isSubFolder ? '/op/folder/' + encodeURIComponent(breadcrumb[0]) : '/op/dashboard'
+    var parentLabel = isSubFolder ? '← ' + breadcrumb[0] : '← 폴더 목록'
+    var editorHref = '/op/folder/' + folderPathEnc + '/video/editor'
+    var playlistHref = '/op/folder/' + folderPathEnc + '/playlist/new'
+  %>
+
  <main class="pageWrap">
    <section class="dashboardHeader">
      <div>
-        <a class="muted" href="/op/dashboard">← 폴더 목록</a>
-        <h1>📁 <%= folder %></h1>
+        <a class="muted" href="<%= parentHref %>"><%= parentLabel %></a>
+        <h1>📁 <%= breadcrumb.join(' / ') %></h1>
      </div>
      <div class="dashboardActions">
-        <a class="primaryButton" href="/op/folder/<%= encodeURIComponent(folder) %>/video/editor">영상 추가</a>
+        <% if (!isSubFolder) { %>
+          <button type="button" class="secondaryButton" id="addSubFolderBtn">하위 폴더 추가</button>
+        <% } %>
+        <a class="primaryButton" href="<%= editorHref %>">영상 추가</a>
+        <% if (isSubFolder) { %>
+          <a class="primaryButton" href="<%= playlistHref %>">플레이리스트 추가</a>
+        <% } %>
      </div>
    </section>

+    <% if (!isSubFolder && subFolders && subFolders.length > 0) { %>
+      <section class="folderGrid" id="subFolderGrid">
+        <% subFolders.forEach(function (sf) { %>
+          <div class="folderCard adminFolder" data-folder-id="<%= sf.id %>" data-name="<%= sf.name %>">
+            <a class="folderCardLink" href="/op/folder/<%= folderPathEnc %>/<%= encodeURIComponent(sf.name) %>">
+              <span class="folderIcon">📁</span>
+              <span class="folderName"><%= sf.name %></span>
+            </a>
+          </div>
+        <% }) %>
+      </section>
+    <% } %>
+
    <section class="videoGrid" id="videoGrid">
-      <% if (videos.length === 0) { %>
+      <% if (videos.length === 0 && (isSubFolder || !subFolders || subFolders.length === 0)) { %>
        <p class="muted">이 폴더에 영상이 없습니다. 우측 상단에서 영상을 추가하세요.</p>
      <% } %>
-      <% videos.forEach(function (v) { %>
-        <div class="videoCard adminVideo" data-id="<%= v.id %>" data-video-id="<%= v.id %>" data-title="<%= v.title %>">
+      <% videos.forEach(function (v) {
+           var shareUrl = '/video/' + folderPathEnc + '/' + encodeURIComponent(v.id)
+      %>
+        <div class="videoCard adminVideo"
+             data-id="<%= v.id %>"
+             data-video-id="<%= v.id %>"
+             data-title="<%= v.title %>"
+             data-share-url="<%= shareUrl %>">
          <div class="videoThumb">▶</div>
          <div class="videoTitle"><%= v.title %></div>
-          <% if (v.sourceType === 'youtube' && !v.originalFile.includes('original.') === false) { %>
+          <% if (v.sourceType === 'youtube') { %>
            <div class="muted">YouTube</div>
          <% } %>
        </div>
@@ -39,10 +72,16 @@
  <div class="ctxMenu" id="ctxMenu" hidden>
    <button type="button" data-action="edit">수정</button>
    <button type="button" data-action="rename">이름 변경</button>
+    <button type="button" data-action="changeId">ID 변경</button>
    <button type="button" data-action="copyUrl">영상 주소 복사</button>
    <button type="button" data-action="delete" class="dangerLink">삭제</button>
  </div>

+  <div class="ctxMenu" id="folderCtxMenu" hidden>
+    <button type="button" data-action="rename">이름 변경</button>
+    <button type="button" data-action="delete" class="dangerLink">삭제</button>
+  </div>
+
  <div class="playerOverlay" id="playerOverlay" hidden>
    <div class="playerModal" role="dialog" aria-modal="true">
      <button type="button" class="playerClose" id="playerClose" aria-label="닫기">✕</button>
@@ -51,9 +90,26 @@
    </div>
  </div>

+  <div class="modalOverlay" id="addSubFolderModal" hidden>
+    <div class="modalCard">
+      <h2>하위 폴더 추가</h2>
+      <label>
+        <span>폴더 이름</span>
+        <input type="text" id="addSubFolderInput" autofocus />
+      </label>
+      <div class="modalActions">
+        <button type="button" class="secondaryButton" id="addSubFolderCancel">취소</button>
+        <button type="button" class="primaryButton" id="addSubFolderConfirm">생성</button>
+      </div>
+    </div>
+  </div>
+
  <script>
-    window.__OP__ = { folder: <%- jsonForScript(folder) %> }
-    window.__SITE__ = { folder: <%- jsonForScript(folder) %> }
+    window.__OP__ = {
+      folderId: <%- jsonForScript(folder.id) %>,
+      folderPath: <%- jsonForScript(breadcrumb) %>,
+      isSubFolder: <%- jsonForScript(isSubFolder) %>
+    }
  </script>
  <script src="/static/folder.js"></script>
  <script src="/static/player.js"></script>
--- a/views/player.ejs
+++ b/views/player.ejs
@@ -7,22 +7,27 @@
  <link rel="stylesheet" href="/static/styles.css" />
 </head>
 <body class="siteBody">
+  <%
+    var folderPathEnc = breadcrumb.map(function (s) { return encodeURIComponent(s) }).join('/')
+    var folderHref = '/folder/' + folderPathEnc
+    var folderLabel = breadcrumb.join(' / ')
+  %>
  <header class="publicNav">
    <a class="navBrand" href="/">
      <span class="navLogo">🎬</span>
      <span class="navTitle">비디오 사이트</span>
    </a>
-    <a class="secondaryButton" href="/folder/<%= encodeURIComponent(folder) %>">폴더로</a>
+    <a class="secondaryButton" href="<%= folderHref %>">폴더로</a>
  </header>

  <main class="pageWrap">
    <section class="hero">
-      <a class="muted" href="/folder/<%= encodeURIComponent(folder) %>">← <%= folder %></a>
+      <a class="muted" href="<%= folderHref %>">← <%= folderLabel %></a>
      <h1><%= video.title %></h1>
    </section>

    <div class="standalonePlayer">
-      <video controls autoplay preload="metadata" src="/api/video/<%= video.id %>/file"></video>
+      <video controls autoplay preload="metadata" src="/api/video/<%= encodeURIComponent(video.id) %>/file"></video>
    </div>
  </main>
 </body>