From b512ab21439034349f1c6bba411c7a64f68c652a Mon Sep 17 00:00:00 2001
From: 2620227 <hyemin.lee@bok.or.kr>
Date: Thu, 2 Jul 2026 16:04:19 +0900
Subject: [PATCH] =?UTF-8?q?fix(modal):=20=EC=83=81=EC=84=B8=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=ED=8F=AD=20=ED=99=95=EB=8C=80=20+=20=EA=B3=B5?=
 =?UTF-8?q?=EA=B0=9C/=EB=B9=84=EA=B3=B5=EA=B0=9C=20=EB=B0=B0=EC=A7=80=20?=
 =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=ED=86=A0=EA=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 모달 max-width 760→880px (min-width 아님: 화면 분할 시 잘림 방지 위해
  반응형 유지).
- 상세 모달의 '공개/비공개' 배지를 소유자가 클릭하면 바로 토글되도록 변경.
  별도 '비공개로 전환' 버튼은 제거(배지가 그 역할). 삭제 버튼은 유지.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 public/css/components.css |  4 ++++
 public/css/modal.css      |  2 +-
 views/_project_detail.ejs | 17 +++++++++++------
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/public/css/components.css b/public/css/components.css
index 5ad8a5e..f8b964d 100644
--- a/public/css/components.css
+++ b/public/css/components.css
@@ -67,6 +67,10 @@
 }
 .vis-badge.public { color: var(--success-fg); background: var(--success-bg); border: 1px solid var(--success-bd); }
 .vis-badge.private { color: var(--fg2); background: var(--panel); border: 1px solid var(--border); }
+/* 배지 자체를 클릭하면 공개/비공개 토글(소유자). 버튼 기본 스타일 초기화 + 클릭 어포던스. */
+.vis-badge-form { display: inline-flex; }
+.vis-badge-btn { cursor: pointer; font-family: inherit; line-height: 1.4; transition: filter .14s ease, box-shadow .14s ease; }
+.vis-badge-btn:hover { filter: brightness(1.05); box-shadow: 0 0 0 3px var(--focus-ring); }
 .toggle-share-btn {
   display: inline-flex; align-items: center; gap: 5px; background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 7px; padding: 4px 10px;
   cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--fg2); white-space: nowrap; transition: background .14s ease, color .14s ease, border-color .14s ease;
diff --git a/public/css/modal.css b/public/css/modal.css
index 975c388..63c47b5 100644
--- a/public/css/modal.css
+++ b/public/css/modal.css
@@ -4,7 +4,7 @@
 .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; }
 /* margin:auto → 내용이 짧으면 화면 정중앙, 길면 위에 붙어 스크롤(잘림 방지). */
-.modal { width: 100%; max-width: 760px; 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 { width: 100%; max-width: 880px; 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; }
diff --git a/views/_project_detail.ejs b/views/_project_detail.ejs
index 2be76bd..6d85df0 100644
--- a/views/_project_detail.ejs
+++ b/views/_project_detail.ejs
@@ -20,7 +20,17 @@
       <div class="modal-title-line">
         <span class="modal-repoico"><%- icon("repo", { size: 18 }) %></span>
         <h3 class="modal-title"><%= p.title %></h3>
-        <span class="vis-badge <%= p.is_public ? "public" : "private" %>"><%- icon(p.is_public ? "globe" : "lock", { size: 11 }) %><%= p.is_public ? "공개" : "비공개" %></span>
+        <% if (p.owner_sabun === me) { %>
+          <form method="post" action="/projects/<%= p.id %>/visibility" class="vis-badge-form" data-stop>
+            <input type="hidden" name="is_public" value="<%= p.is_public ? "0" : "1" %>" />
+            <input type="hidden" name="return_to" value="<%= returnTo %>" />
+            <button type="submit" class="vis-badge vis-badge-btn <%= p.is_public ? "public" : "private" %>" title="클릭하면 <%= p.is_public ? "비공개" : "공개" %>로 전환">
+              <%- icon(p.is_public ? "globe" : "lock", { size: 11 }) %><%= p.is_public ? "공개" : "비공개" %>
+            </button>
+          </form>
+        <% } else { %>
+          <span class="vis-badge <%= p.is_public ? "public" : "private" %>"><%- icon(p.is_public ? "globe" : "lock", { size: 11 }) %><%= p.is_public ? "공개" : "비공개" %></span>
+        <% } %>
       </div>
       <div class="modal-meta">
         <a class="meta-author" href="/u/<%= p.owner_sabun %>" title="<%= p.owner_name || p.owner_sabun %> 프로필">
@@ -62,11 +72,6 @@
     <% } %>
     <% if (p.owner_sabun === me) { %>
       <div class="modal-actions-owner">
-        <form method="post" action="/projects/<%= p.id %>/visibility">
-          <input type="hidden" name="is_public" value="<%= p.is_public ? "0" : "1" %>" />
-          <input type="hidden" name="return_to" value="<%= returnTo %>" />
-          <button type="submit" class="modal-action"><%- icon(p.is_public ? "lock" : "globe", { size: 14 }) %><%= p.is_public ? "비공개로 전환" : "공개로 전환" %></button>
-        </form>
         <form method="post" action="/projects/<%= p.id %>/delete">
           <input type="hidden" name="return_to" value="/" />
           <button type="submit" class="comment-link comment-del" data-confirm="이 프로젝트를 삭제할까요? 댓글·반응도 함께 삭제됩니다." style="font-size:12.5px"><%- icon("trash", { size: 13 }) %>프로젝트 삭제</button>