2620227
84ce8567e7
- 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>
187 lines
16 KiB
CSS
187 lines
16 KiB
CSS
/* 콘텐츠 컴포넌트 — 개발 도구 · 내 프로젝트 · 공유 피드 카드. */
|
|
|
|
/* ===================== ① 개발 도구 ===================== */
|
|
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
|
|
.tool-card {
|
|
position: relative; text-align: left; background: var(--card); border: 1px solid var(--border-soft);
|
|
border-radius: 12px; padding: 16px; cursor: pointer; font-family: inherit; display: block;
|
|
transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
|
|
}
|
|
.tool-card:hover { border-color: var(--link); box-shadow: 0 6px 18px var(--shadow-hover); transform: translateY(-3px); }
|
|
.tool-card.admin { border-color: var(--admin-bd); }
|
|
.tool-icon {
|
|
width: 44px; height: 44px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
|
|
font-size: 24px; background: var(--tile); border: 1px solid var(--tile-bd);
|
|
}
|
|
.tool-card.admin .tool-icon { background: var(--admin-bg); border-color: var(--admin-bd); }
|
|
.tool-name { display: block; margin-top: 14px; font-size: 16.5px; font-weight: 700; color: var(--fg); }
|
|
.tool-desc { display: block; margin-top: 3px; font-size: 14.5px; color: var(--fg2); line-height: 1.45; }
|
|
.tool-admin-badge {
|
|
display: inline-flex; align-items: center; gap: 5px; margin-top: 11px; font-size: 11px; font-weight: 600;
|
|
color: var(--admin-fg); background: var(--admin-bg); border: 1px solid var(--admin-bd); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
|
|
}
|
|
|
|
/* ===================== ② 내 프로젝트 ===================== */
|
|
.myproj { position: relative; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; padding: 22px 22px 24px; }
|
|
.myproj-accent { position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--link); }
|
|
.myproj-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-left: 8px; flex-wrap: wrap; }
|
|
.myproj-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
|
.filter-tabs { display: inline-flex; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px; }
|
|
.filter-tab {
|
|
display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; border-radius: 6px; padding: 5px 11px;
|
|
cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg2); white-space: nowrap;
|
|
transition: background .14s ease, color .14s ease;
|
|
}
|
|
.filter-tab.on { background: var(--panel); color: var(--fg); box-shadow: inset 0 0 0 1px var(--border); }
|
|
.new-proj-btn {
|
|
display: inline-flex; align-items: center; gap: 6px; background: var(--success);
|
|
border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); border-radius: 8px; padding: 7px 13px;
|
|
cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; transition: background .14s ease;
|
|
}
|
|
.new-proj-btn:hover { background: var(--success-hover); }
|
|
.myproj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-left: 8px; }
|
|
|
|
/* 프로젝트 카드 (내 프로젝트 / 피드 공용 베이스) */
|
|
.pcard {
|
|
background: var(--card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 15px 16px 14px;
|
|
cursor: pointer; transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease; display: flex; flex-direction: column;
|
|
}
|
|
.pcard:hover { border-color: var(--link); box-shadow: 0 6px 18px var(--shadow); transform: translateY(-2px); }
|
|
.pcard.private { background: var(--bg); border: 1.5px dashed var(--border); }
|
|
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
|
.pcard-titlewrap { display: flex; align-items: center; gap: 7px; min-width: 0; }
|
|
.pcard-repoico { display: inline-flex; color: var(--fg2); flex: 0 0 auto; }
|
|
.pcard-title { font-size: 14px; font-weight: 700; color: var(--link); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.pcard-desc { margin-top: 8px; font-size: 12.5px; color: var(--fg2); line-height: 1.5; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
|
|
.pcard-tags { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.pcard-foot { margin-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
|
.pcard-stats { display: flex; align-items: center; gap: 13px; font-size: 12px; color: var(--fg2); }
|
|
.pcard-stats .stat { display: inline-flex; align-items: center; gap: 4px; }
|
|
.lang-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
|
|
.ico-heart { display: inline-flex; color: var(--heart); }
|
|
.ico-star { display: inline-flex; color: var(--attn); }
|
|
.ico-comment { display: inline-flex; color: var(--fg2); }
|
|
.vis-badge {
|
|
display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; font-size: 11px; font-weight: 600;
|
|
border-radius: 999px; padding: 1px 8px 1px 7px; white-space: nowrap;
|
|
}
|
|
.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;
|
|
}
|
|
.toggle-share-btn:hover { background: var(--btn-hover); color: var(--fg); border-color: var(--border); }
|
|
.private-note { font-size: 11.5px; color: var(--fg3); }
|
|
.share-mini-btn {
|
|
display: inline-flex; align-items: center; gap: 5px; background: var(--success);
|
|
border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); border-radius: 7px; padding: 4px 10px;
|
|
cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; transition: background .14s ease;
|
|
}
|
|
.share-mini-btn:hover { background: var(--success-hover); }
|
|
.add-card {
|
|
background: transparent; border: 1.5px dashed var(--border); border-radius: 12px; padding: 16px; cursor: pointer; font-family: inherit;
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--fg2); min-height: 158px; width: 100%;
|
|
transition: border-color .16s ease, color .16s ease, background .16s ease;
|
|
}
|
|
.add-card:hover { border-color: var(--success); color: var(--success); background: var(--card); }
|
|
.add-card-plus { width: 38px; height: 38px; border-radius: 50%; background: var(--success-bg); border: 1px solid var(--success-bd); display: inline-flex; align-items: center; justify-content: center; color: var(--success); }
|
|
.add-card-title { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
|
|
.add-card-sub { font-size: 11.5px; text-align: center; line-height: 1.4; }
|
|
.empty { grid-column: 1 / -1; text-align: center; padding: 30px; color: var(--fg2); font-size: 13px; border: 1px dashed var(--border); border-radius: 12px; }
|
|
|
|
/* ===================== ③ 공유 피드 ===================== */
|
|
.feed-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
|
|
.feed-head .section-titlewrap { padding-bottom: 14px; }
|
|
.feed-head-right { display: flex; align-items: flex-end; gap: 14px; }
|
|
.feed-star-btn {
|
|
display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--btn-bd); border-radius: 7px;
|
|
padding: 6px 12px; margin-bottom: 8px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--fg2); white-space: nowrap;
|
|
transition: background .14s ease, border-color .14s ease, color .14s ease;
|
|
}
|
|
.feed-star-btn:hover { border-color: var(--attn-bd); color: var(--attn-fg); }
|
|
.feed-star-btn.on { background: var(--attn-bg); border-color: var(--attn-bd); color: var(--attn-fg); }
|
|
.feed-star-btn .ico { display: inline-flex; }
|
|
.sort-tabs { display: flex; gap: 2px; }
|
|
.sort-tab { background: transparent; border: 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px 14px; color: var(--fg2); transition: color .14s ease; }
|
|
.sort-tab.on { color: var(--fg); box-shadow: inset 0 -2px 0 var(--tab-underline); }
|
|
.feed-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
|
|
|
|
.fcard { background: var(--card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 18px; cursor: pointer; transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease; display: flex; flex-direction: column; }
|
|
.fcard:hover { border-color: var(--link); box-shadow: 0 6px 18px var(--shadow); transform: translateY(-2px); }
|
|
.fcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
|
.fcard-titlewrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
.fcard-title { font-size: 15px; font-weight: 700; color: var(--link); line-height: 1.3; }
|
|
.react-btns { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
|
|
.react-btn {
|
|
display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; background: var(--btn-bg); border: 1px solid var(--btn-bd);
|
|
border-radius: 7px; padding: 4px 9px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--fg);
|
|
transition: background .14s ease, border-color .14s ease, color .14s ease;
|
|
}
|
|
.react-btn .count { font-variant-numeric: tabular-nums; }
|
|
.react-btn.heart.on { background: var(--heart-bg); border-color: var(--heart-bd); color: var(--heart-fg); }
|
|
.react-btn.star.on { background: var(--attn-bg); border-color: var(--attn-bd); color: var(--attn-fg); }
|
|
/* 채움(on) / 외곽선(off) 아이콘 토글 — JS 가 .on 클래스만 바꾸면 됨 */
|
|
.react-btn .ico, .modal-action .ico { display: inline-flex; }
|
|
.react-btn .ico-on, .modal-action .ico-on { display: none; }
|
|
.react-btn.on .ico-on, .modal-action.on .ico-on { display: inline-flex; }
|
|
.react-btn.on .ico-off, .modal-action.on .ico-off { display: none; }
|
|
/* flex:1 로 설명 영역이 남는 높이를 채워, 태그+푸터를 카드 하단에 정렬한다(짧은 카드의 큰 빈 공간 방지). 미리보기는 2줄까지만. */
|
|
.fcard-desc { margin-top: 8px; font-size: 13px; color: var(--fg2); line-height: 1.55; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
|
|
.fcard-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.fcard-foot { margin-top: 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
|
|
.fcard-author { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
.fcard-author .sabun { font-size: 12.5px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
|
|
.fcard-author .date { font-size: 11.5px; color: var(--fg3); }
|
|
.fcard-meta { display: flex; align-items: center; gap: 13px; font-size: 12px; color: var(--fg2); }
|
|
.fcard-meta .stat { display: inline-flex; align-items: center; gap: 5px; }
|
|
.bara-link { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--link); white-space: nowrap; }
|
|
.fcard .fcard-foot > .date { font-size: 11.5px; color: var(--fg3); margin-left: auto; }
|
|
|
|
/* ===================== 프로필 링크(아바타+이름) ===================== */
|
|
/* 카드/모달/댓글의 작성자 아바타·이름을 프로필로 잇는 링크. 클릭 시 카드 모달 대신 이동. */
|
|
.fcard-author:hover .sabun { text-decoration: underline; }
|
|
.meta-author { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
|
|
.meta-author:hover .sabun { text-decoration: underline; }
|
|
.cavatar { display: inline-flex; flex: 0 0 auto; }
|
|
.comment-author:hover { text-decoration: underline; }
|
|
|
|
/* ===================== 프로필 페이지 ===================== */
|
|
.profile-hero { display: flex; align-items: center; gap: 20px; }
|
|
.profile-avatar-wrap { position: relative; flex: 0 0 auto; }
|
|
.profile-avatar { width: 96px; height: 96px; border-radius: 24px; object-fit: cover; background: var(--avatar-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent); display: block; }
|
|
.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 { 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; }
|
|
.crop-head { padding: 16px 20px; border-bottom: 1px solid var(--divider); display: flex; align-items: center; justify-content: space-between; }
|
|
.crop-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--fg); }
|
|
.crop-body { padding: 18px 20px; }
|
|
.crop-stage { position: relative; width: 300px; height: 300px; max-width: 100%; margin: 0 auto; border-radius: 12px; overflow: hidden; background: var(--inset); touch-action: none; cursor: grab; user-select: none; }
|
|
.crop-stage:active { cursor: grabbing; }
|
|
#cropImg { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; will-change: transform; pointer-events: none; }
|
|
.crop-veil { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent); border-radius: 12px; }
|
|
.crop-zoom { margin-top: 14px; display: flex; align-items: center; gap: 10px; color: var(--fg2); }
|
|
.crop-zoom input[type=range] { flex: 1; accent-color: var(--link); }
|
|
.crop-hint { margin: 10px 0 0; font-size: 11.5px; color: var(--fg3); line-height: 1.5; }
|