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) { %>
<% } %> <% } %>