feat(project): 홈 프로젝트 카드 수정 버튼 + 완료 프로젝트 비활성/숨기기

- 카드에 수정(연필) 버튼: 이름·설명·기간·색상·완료 토글 + 삭제 (관리자)
- 프로젝트 상태에 'completed' 추가, update_project status 허용
- 완료 프로젝트: 흐리게 비활성 + 홈 목록 맨 끝으로 정렬
- '완료 N개 숨기기' 토글 버튼(localStorage 기억)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-25 16:34:09 +09:00
parent e36fcb1a34
commit 17f2d56231
5 changed files with 165 additions and 35 deletions
+18 -2
View File
@@ -35,10 +35,26 @@
.pj-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.pj-project-card {
display: flex; gap: 12px; padding: 16px; border: 1px solid #e7e9ec; border-radius: 14px;
background: #fff; text-decoration: none; color: inherit; transition: box-shadow .14s, transform .1s;
position: relative; border: 1px solid #e7e9ec; border-radius: 14px;
background: #fff; transition: box-shadow .14s, transform .1s;
}
.pj-project-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
.pj-project-cardlink { display: flex; gap: 12px; padding: 16px; text-decoration: none; color: inherit; }
/* 완료 프로젝트 — 비활성(흐리게) */
.pj-project-card.is-done { background: #f6f7f8; opacity: .62; }
.pj-project-card.is-done:hover { opacity: .85; }
.pj-project-card.is-done .pj-project-dot { background: #9aa5b1; }
/* 완료 숨기기 토글 */
.pj-project-grid.pj-hide-done .pj-project-card.is-done { display: none; }
/* 카드 수정 버튼 */
.pj-card-edit {
position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px; color: #6b7280; opacity: 0; transition: opacity .12s;
}
.pj-card-edit .material-symbols-outlined { font-size: 18px; }
.pj-project-card:hover .pj-card-edit { opacity: 1; }
.pj-card-edit:hover { background: #eceef0; color: #1e1f21; }
.pj-project-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pj-color, #4573d2); margin-top: 5px; flex: 0 0 auto; }
.pj-project-name { font-weight: 700; font-size: 15px; }
.pj-project-desc { color: #6b7280; font-size: 12.5px; margin-top: 3px; }