Align dashboard and installer flows with spec

views/op/dashboard.ejs

@@ -14,14 +14,23 @@
       <form method="post" action="/op/dashboard/packs">
         <button class="primaryButton" type="submit">서버팩 추가</button>
       </form>
-      <form method="post" action="/op/dashboard/packs/delete" class="deleteForm">
-        <button class="dangerButton" type="submit">선택 삭제</button>
+      <form method="post" action="/op/dashboard/packs/delete" class="deleteForm" data-delete-form>
+        <div class="deleteToolbar">
+          <button class="dangerButton" type="button" data-delete-toggle>서버팩 삭제</button>
+          <div class="deleteActions hidden" data-delete-actions>
+            <button class="ghostButton" type="button" data-delete-cancel>취소</button>
+            <button class="dangerButton" type="submit">확인</button>
+          </div>
+        </div>
         <div class="cardRow">
           <% packs.forEach((pack) => { %>
             <label class="packCard selectableCard">
-              <input type="checkbox" name="packKeys" value="<%= pack.file %>" />
+              <input class="selectionBox hidden" type="checkbox" name="packKeys" value="<%= pack.file %>" />
               <span class="selectionTitle"><%= pack.name %></span>
               <span><code><%= pack.file %></code></span>
+              <% if (!pack.registered) { %>
+                <span class="warningBadge">manifest.json 미등록</span>
+              <% } %>
               <a class="ghostLink" href="/op/dashboard/<%= pack.file %>">편집</a>
             </label>
           <% }) %>
@@ -29,5 +38,33 @@
       </form>
     </section>
   </main>
+  <script>
+    (() => {
+      const form = document.querySelector('[data-delete-form]')
+      if (form == null) {
+        return
+      }
+
+      const toggleButton = form.querySelector('[data-delete-toggle]')
+      const cancelButton = form.querySelector('[data-delete-cancel]')
+      const actions = form.querySelector('[data-delete-actions]')
+      const checkboxes = form.querySelectorAll('.selectionBox')
+
+      const setDeleteMode = (enabled) => {
+        form.classList.toggle('deleteMode', enabled)
+        actions.classList.toggle('hidden', !enabled)
+        checkboxes.forEach((checkbox) => {
+          checkbox.classList.toggle('hidden', !enabled)
+          if (!enabled) {
+            checkbox.checked = false
+          }
+        })
+      }
+
+      toggleButton?.addEventListener('click', () => setDeleteMode(true))
+      cancelButton?.addEventListener('click', () => setDeleteMode(false))
+      setDeleteMode(false)
+    })()
+  </script>
 </body>
 </html>