1f76329140
같은 프로젝트가 피드 카드 버튼·내 프로젝트 통계 줄·상세 모달(template) 세 곳에
렌더되는데, 기존 syncReaction 은 라이브 data-react 버튼만 갱신해 통계 줄과
모달(inert template 스냅샷)이 옛 값으로 남아 서로 달라졌다.
- reactions.js: 프로젝트별 {on,count} 를 단일 store(Map)로 관리. 로드 시
detailStore 템플릿에서 서버 원본값을 시드하고, 변경 시 그 값을 그리는 모든
라이브 DOM(버튼·통계 줄·data-pop)을 자동으로 다시 칠함.
- modals.js: 모달 마운트 직후 applyReactions 로 현재 store 값을 덮어써
템플릿 스냅샷의 옛 값 대신 최신 값을 표시.
- dashboard.ejs: 내 프로젝트 통계 숫자에 data-rcount/data-id/data-kind 바인딩 추가.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
75 lines
3.4 KiB
JavaScript
75 lines
3.4 KiB
JavaScript
// 상세 모달 · 공유(등록) 모달 — 열기/닫기 및 공개범위 토글.
|
|
import { $, $$ } from "./util.js";
|
|
import { applyReactions } from "./reactions.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;
|
|
// 템플릿은 로드 시점 스냅샷이라 그동안 바뀐 반응 수가 반영돼 있지 않다.
|
|
// 마운트 직후 현재 store 값으로 덮어써 카드와 항상 같은 값을 보이게 한다.
|
|
applyReactions(mount);
|
|
overlay.hidden = false;
|
|
document.body.style.overflow = "hidden";
|
|
// 주의: 열기 감지 셀렉터가 [data-open-id] 라서 같은 이름을 쓰면 모달 내부 클릭(닫기/삭제)이
|
|
// 다시 "열기"로 잡힌다. 마커는 반드시 다른 속성명(data-open-pid)으로 둔다.
|
|
overlay.setAttribute("data-open-pid", 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-pid");
|
|
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(); } });
|
|
}
|