From 5c76786adadc3a05631be6957eed0234b02fe89d Mon Sep 17 00:00:00 2001 From: 2620227 Date: Fri, 10 Jul 2026 16:44:47 +0900 Subject: [PATCH] =?UTF-8?q?fix(profile):=20=ED=95=9C=EC=A4=84=20=EC=86=8C?= =?UTF-8?q?=EA=B0=9C=20=ED=8E=B8=EC=A7=91=EC=9D=84=20=E2=9C=93/=E2=9C=95?= =?UTF-8?q?=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EB=B2=84=ED=8A=BC=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 텍스트 저장/취소 버튼이 줄바꿈되며 프로필 카드를 밀어버리던 문제 수정. input과 같은 줄에 24px check(저장)/x(취소) 아이콘 버튼 2개 배치. JS의 textContent 토글 제거(아이콘 지워지지 않도록 disabled만). Co-Authored-By: Claude --- public/css/components.css | 6 ++++-- public/css/responsive.css | 1 + public/js/profile.js | 4 ++-- views/profile.ejs | 4 ++-- 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/public/css/components.css b/public/css/components.css index a48330a..0dffbf9 100644 --- a/public/css/components.css +++ b/public/css/components.css @@ -171,10 +171,12 @@ .profile-bio.is-empty { color: var(--fg3); font-style: italic; } .profile-bio-edit { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--fg3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .profile-bio-edit:hover { color: var(--fg); border-color: var(--fg3); } -.profile-bio-form { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } +.profile-bio-save { color: var(--link); border-color: var(--link); } +.profile-bio-save:hover { background: var(--link); color: #fff; border-color: var(--link); } +.profile-bio-form { margin-top: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; } /* hidden 속성이 켜져 있으면 확실히 숨긴다 (display:flex 가 [hidden] 기본 규칙을 이겨 항상 보이던 버그 방지). */ .profile-bio-form[hidden] { display: none; } -.profile-bio-form input { flex: 1 1 240px; min-width: 0; padding: 6px 10px; font-size: 13.5px; color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: 8px; } +.profile-bio-form input { flex: 1 1 auto; min-width: 0; padding: 6px 10px; font-size: 13.5px; color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: 8px; } .profile-bio-form input:focus { outline: none; border-color: var(--link); } /* ===================== 프로필 사진 크롭 모달 ===================== */ diff --git a/public/css/responsive.css b/public/css/responsive.css index fc6c385..77e2bf3 100644 --- a/public/css/responsive.css +++ b/public/css/responsive.css @@ -26,6 +26,7 @@ .icon-btn, .modal-close { width: 44px; height: 44px; } .hdr-link, .usermenu-btn { min-height: 44px; } .profile-bio-edit { width: 40px; height: 40px; } /* 배지형이라 44는 과함 */ + .profile-bio-form .profile-bio-edit { width: 32px; height: 32px; } /* 폼 안 check/x 는 인풋과 한 줄 유지 */ .profile-avatar-edit { width: 36px; height: 36px; } .filter-tab, .sort-tab, .vis-opt, .react-btn, .readme-btn, .toggle-share-btn, .share-mini-btn, .new-proj-btn, .feed-star-btn, diff --git a/public/js/profile.js b/public/js/profile.js index a7f57f2..85f3dd5 100644 --- a/public/js/profile.js +++ b/public/js/profile.js @@ -28,7 +28,7 @@ function initBio() { e.preventDefault(); const bio = input.value.trim().slice(0, 80); const saveBtn = $("#bioSave"); - if (saveBtn) { saveBtn.disabled = true; saveBtn.textContent = "저장 중…"; } + if (saveBtn) saveBtn.disabled = true; try { const res = await fetch("/profile/bio", { method: "POST", @@ -43,7 +43,7 @@ function initBio() { } catch (err) { toast("저장에 실패했어요"); } finally { - if (saveBtn) { saveBtn.disabled = false; saveBtn.textContent = "저장"; } + if (saveBtn) saveBtn.disabled = false; } }); } diff --git a/views/profile.ejs b/views/profile.ejs index 695b217..7b1e47e 100644 --- a/views/profile.ejs +++ b/views/profile.ejs @@ -37,8 +37,8 @@ <% if (isSelf) { %> <% } %> <% } %>