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

feat(profile): 프로필에 '한줄 소개' 추가 — 본인만 인라인 편집

Browse Source 
- users.bio 컬럼(멱등) + db.setBio / getUserProfile 조회 포함
- POST /profile/bio (본인만, fetch JSON / 폼 POST 폴백)
- 프로필 히어로: 이름·사번 한 줄로 합치고 한줄 소개를 3줄째로 배치
- 본인은 연필 버튼으로 인라인 편집(저장/취소·Esc), 최대 80자
- word-break: keep-all 로 한글 단어 중간 잘림 방지

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
이혜민(2620227)
2026-07-10 13:43:49 +09:00
parent 0ed41849ca
commit 84ce8567e7
6 changed files with 97 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/css/components.css
View File

@@ -157,9 +157,20 @@
.profile-avatar-edit { position: absolute; right: -4px; bottom: -4px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--card); background: var(--link); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px var(--shadow); }
.profile-avatar-edit:hover { filter: brightness(1.08); }
.profile-info { min-width: 0; }
.profile-idline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.profile-name { margin: 0; font-size: 24px; font-weight: 800; color: var(--fg); letter-spacing: -.01em; }
.profile-sabun { margin-top: 3px; font-size: 13px; color: var(--fg2); font-variant-numeric: tabular-nums; }
.profile-metaline { margin-top: 8px; display: flex; gap: 6px; font-size: 12.5px; color: var(--fg3); }
.profile-sabun { font-size: 13px; color: var(--fg2); font-variant-numeric: tabular-nums; }
.profile-metaline { margin-top: 6px; display: flex; gap: 6px; font-size: 12.5px; color: var(--fg3); }
/* 한줄 소개 */
.profile-bio-row { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.profile-bio { margin: 0; font-size: 13.5px; color: var(--fg2); line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; }
.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-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:focus { outline: none; border-color: var(--link); }
/* ===================== 프로필 사진 크롭 모달 ===================== */
.crop-modal { width: 100%; max-width: 420px; 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; }