refactor(js): app.js 를 브라우저 네이티브 ESM 모듈로 분할

public/js/{util,ui,reactions,modals,comments,feed,main}.js 로 분리하고 dashboard/project 에서 <script type="module" src="/public/js/main.js"> 로 로드. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-29 17:53:46 +09:00
parent bc1327a6dc
commit 2b74b59f81
10 changed files with 384 additions and 387 deletions
--- a/public/js/modals.js
+++ b/public/js/modals.js
@@ -0,0 +1,68 @@
+// 상세 모달 · 공유(등록) 모달 — 열기/닫기 및 공개범위 토글.
+import { $, $$ } from "./util.js";
+
+export function openDetail(id) {
+  const tpl = $('#detailStore template[data-detail-id="' + id + '"]');
+  const overlay = $("#detailModal");
+  if (!tpl || !overlay) { window.location.href = "/projects/" + id; return; }
+  const mount = $(".modal", overlay) || overlay;
+  mount.innerHTML = tpl.innerHTML;
+  overlay.hidden = false;
+  document.body.style.overflow = "hidden";
+  overlay.setAttribute("data-open-id", id);
+  const ta = $(".comment-input", overlay);
+  if (ta) ta.focus();
+}
+function closeDetail() {
+  const overlay = $("#detailModal");
+  if (!overlay || overlay.hidden) return;
+  overlay.hidden = true;
+  overlay.removeAttribute("data-open-id");
+  document.body.style.overflow = "";
+}
+
+function openShare() {
+  const m = $("#shareModal"); if (!m) return;
+  m.hidden = false; document.body.style.overflow = "hidden";
+  const t = $('input[name="title"]', m); if (t) t.focus();
+}
+function closeShare() {
+  const m = $("#shareModal"); if (!m || m.hidden) return;
+  m.hidden = true; document.body.style.overflow = "";
+}
+
+export function initModals() {
+  document.addEventListener("click", (e) => {
+    // 상세 모달 열기 (카드 클릭 — 반응 버튼/링크/data-stop 은 제외)
+    const opener = e.target.closest("[data-open-id]");
+    if (opener && !e.target.closest("[data-react]") && !e.target.closest("a") && !e.target.closest("[data-stop]")) {
+      e.preventDefault();
+      openDetail(opener.getAttribute("data-open-id"));
+      return;
+    }
+    if (e.target.closest("[data-close-detail]")) { e.preventDefault(); closeDetail(); return; }
+    if (e.target.closest("[data-open-share]")) { e.preventDefault(); openShare(); return; }
+    if (e.target.closest("[data-close-share]")) { e.preventDefault(); closeShare(); return; }
+
+    const detail = $("#detailModal");
+    if (detail && !detail.hidden && e.target === detail) { closeDetail(); return; }
+    const share = $("#shareModal");
+    if (share && !share.hidden && e.target === share) { closeShare(); return; }
+
+    // 공유 모달 공개/비공개 토글
+    const vo = e.target.closest("[data-vis]");
+    if (vo && share) {
+      const val = vo.getAttribute("data-vis");
+      const input = $('input[name="is_public"]', share);
+      if (input) input.value = val === "public" ? "1" : "0";
+      $$("[data-vis]", share).forEach((b) => {
+        const pub = b.getAttribute("data-vis") === "public";
+        b.classList.toggle("on-public", pub && val === "public");
+        b.classList.toggle("on-private", !pub && val === "private");
+      });
+      const hint = $(".share-vishint", share);
+      if (hint) hint.textContent = val === "public" ? "피드에 공개되어 동료가 볼 수 있어요" : "나만 볼 수 있어요 · 언제든 공유로 전환 가능";
+    }
+  });
+  document.addEventListener("keydown", (e) => { if (e.key === "Escape") { closeDetail(); closeShare(); } });
+}