playground/ai-dev-portal
121
3
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(modal): 모달 닫기·프로젝트 삭제 동작 + 세로 가운데 정렬

Browse Source 
- 모달 오버레이 마커를 data-open-id → data-open-pid 로 변경
  (열기 감지 셀렉터 [data-open-id] 와 충돌해 모달 내부 클릭이
   닫기/삭제 대신 모달 재오픈으로 잡히던 문제)
- .modal/.share-modal 에 margin:auto → 짧으면 정중앙, 길면 스크롤
- 프로젝트 삭제 버튼 앞에 휴지통 아이콘 추가

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
이혜민(2620227)
2026-06-30 16:32:28 +09:00
parent ebf9599199
commit 540a170b0d
3 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/css/modal.css
View File

@@ -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; }

6
public/js/modals.js
View File

@@ -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 = "";
}