feat(lecture-ppt): PPT/PDF 슬라이드 1·2·3단 그리드 보기 및 1단 시 너비 제한

Made-with: Cursor

views/lecture-ppt.ejs

@@ -17,8 +17,14 @@
           <h1><%= lecture.title %></h1>
           <p class="description"><%= lecture.description || "설명이 없습니다." %></p>
 
-          <div class="ppt-tools">
+          <div class="ppt-tools ppt-tools-row">
             <span>총 <b><%= slides.length %></b>장</span>
+            <div class="slide-layout-toggle" role="group" aria-label="슬라이드 한 화면 열 개수">
+              <span class="slide-layout-toggle-label">보기</span>
+              <button type="button" class="slide-layout-btn" data-cols="1" aria-pressed="true">1단</button>
+              <button type="button" class="slide-layout-btn" data-cols="2" aria-pressed="false">2단</button>
+              <button type="button" class="slide-layout-btn" data-cols="3" aria-pressed="false">3단</button>
+            </div>
           </div>
 
           <% if (typeof slidesError !== 'undefined' && slidesError && (!slideImageUrls || slideImageUrls.length === 0)) { %>
@@ -29,7 +35,7 @@
           <p class="empty">슬라이드 내용을 불러올 수 없습니다.</p>
           <% } %>
 
-          <section class="slide-list">
+          <section class="slide-list slide-list--cols-1" id="slide-list">
             <% slides.forEach((slide, index) => { %>
             <article class="slide-card">
               <header>
@@ -46,5 +52,40 @@
         </main>
       </div>
     </div>
+    <script>
+      (function () {
+        var KEY = "learningCenterSlideColumns";
+        var list = document.getElementById("slide-list");
+        var buttons = document.querySelectorAll(".slide-layout-btn");
+        if (!list || !buttons.length) return;
+
+        function applyCols(n) {
+          list.classList.remove("slide-list--cols-1", "slide-list--cols-2", "slide-list--cols-3");
+          list.classList.add("slide-list--cols-" + n);
+          buttons.forEach(function (btn) {
+            var on = btn.getAttribute("data-cols") === String(n);
+            btn.setAttribute("aria-pressed", on ? "true" : "false");
+            btn.classList.toggle("is-active", on);
+          });
+          try {
+            localStorage.setItem(KEY, String(n));
+          } catch (e) {}
+        }
+
+        var saved = null;
+        try {
+          saved = localStorage.getItem(KEY);
+        } catch (e) {}
+        var initial = saved === "2" || saved === "3" ? saved : "1";
+        applyCols(initial);
+
+        buttons.forEach(function (btn) {
+          btn.addEventListener("click", function () {
+            var n = btn.getAttribute("data-cols");
+            if (n === "1" || n === "2" || n === "3") applyCols(n);
+          });
+        });
+      })();
+    </script>
   </body>
 </html>