From 540a170b0d9c350ca4d7ecc882429140c5d4753e Mon Sep 17 00:00:00 2001 From: 2620227 Date: Tue, 30 Jun 2026 16:32:28 +0900 Subject: [PATCH] =?UTF-8?q?fix(modal):=20=EB=AA=A8=EB=8B=AC=20=EB=8B=AB?= =?UTF-8?q?=EA=B8=B0=C2=B7=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EB=8F=99=EC=9E=91=20+=20=EC=84=B8=EB=A1=9C=20?= =?UTF-8?q?=EA=B0=80=EC=9A=B4=EB=8D=B0=20=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 모달 오버레이 마커를 data-open-id → data-open-pid 로 변경 (열기 감지 셀렉터 [data-open-id] 와 충돌해 모달 내부 클릭이 닫기/삭제 대신 모달 재오픈으로 잡히던 문제) - .modal/.share-modal 에 margin:auto → 짧으면 정중앙, 길면 스크롤 - 프로젝트 삭제 버튼 앞에 휴지통 아이콘 추가 Co-Authored-By: Claude Opus 4.8 (1M context) --- public/css/modal.css | 7 ++++--- public/js/modals.js | 6 ++++-- views/_project_detail.ejs | 2 +- 3 files changed, 9 insertions(+), 6 deletions(-) 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) { %>
- +
<% } %>