diff --git a/public/css/modal.css b/public/css/modal.css index 4301c6a..7a421f3 100644 --- a/public/css/modal.css +++ b/public/css/modal.css @@ -1,9 +1,10 @@ /* 모달 — 상세 모달 · 댓글 스레드 · 공유(등록) 모달 · 토스트 · 플라이어. */ /* ===================== 상세 모달 ===================== */ -.modal-overlay { position: fixed; inset: 0; z-index: 500; background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding: 48px 20px; overflow-y: auto; animation: aidev-fade .16s ease-out; } +.modal-overlay { position: fixed; inset: 0; z-index: 500; background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding: 32px 20px; overflow-y: auto; animation: aidev-fade .16s ease-out; } .modal-overlay[hidden] { display: none; } -.modal { width: 100%; max-width: 640px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px var(--shadow-strong); overflow: hidden; animation: aidev-pop .18s ease-out; } +/* margin:auto → 내용이 짧으면 화면 정중앙, 길면 위에 붙어 스크롤(잘림 방지). */ +.modal { width: 100%; max-width: 640px; margin: auto; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px var(--shadow-strong); overflow: hidden; animation: aidev-pop .18s ease-out; } .modal-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--divider); } .modal-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .modal-titlewrap { min-width: 0; } @@ -64,7 +65,7 @@ .comment-hint { margin-top: 7px; font-size: 11px; color: var(--fg3); padding-left: 38px; } /* ===================== 공유(등록) 모달 ===================== */ -.share-modal { width: 100%; max-width: 520px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px var(--shadow-strong); overflow: hidden; animation: aidev-pop .18s ease-out; } +.share-modal { width: 100%; max-width: 520px; margin: auto; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px var(--shadow-strong); overflow: hidden; animation: aidev-pop .18s ease-out; } .share-head { padding: 20px 24px; border-bottom: 1px solid var(--divider); display: flex; align-items: center; justify-content: space-between; } .share-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--fg); } .share-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 15px; } diff --git a/public/js/modals.js b/public/js/modals.js index af6024a..fa99775 100644 --- a/public/js/modals.js +++ b/public/js/modals.js @@ -9,7 +9,9 @@ export function openDetail(id) { mount.innerHTML = tpl.innerHTML; overlay.hidden = false; document.body.style.overflow = "hidden"; - overlay.setAttribute("data-open-id", id); + // 주의: 열기 감지 셀렉터가 [data-open-id] 라서 같은 이름을 쓰면 모달 내부 클릭(닫기/삭제)이 + // 다시 "열기"로 잡힌다. 마커는 반드시 다른 속성명(data-open-pid)으로 둔다. + overlay.setAttribute("data-open-pid", id); const ta = $(".comment-input", overlay); if (ta) ta.focus(); } @@ -17,7 +19,7 @@ function closeDetail() { const overlay = $("#detailModal"); if (!overlay || overlay.hidden) return; overlay.hidden = true; - overlay.removeAttribute("data-open-id"); + overlay.removeAttribute("data-open-pid"); document.body.style.overflow = ""; } diff --git a/views/_project_detail.ejs b/views/_project_detail.ejs index 358e536..be41508 100644 --- a/views/_project_detail.ejs +++ b/views/_project_detail.ejs @@ -57,7 +57,7 @@ <% if (p.owner_sabun === me) { %>
<% } %>