대시보드 및 Todo 카드 디자인 통일 (v1.5.0)

## 주요 변경사항

### 1. 대시보드 카드 레이아웃 일관성 개선
- **나의 Todo 카드**: 담당자 정보 제거 → 회의록 링크로 변경
  - 메타 정보: 🔗 회의 제목 + 마감일
  - 09-Todo관리.html과 동일한 구조 적용
- **나의 회의록 카드**: 배지 + 제목 + 👑 레이아웃 통일
  - 1줄: [상태배지] 제목 👑
  - 2줄: 📅 날짜/시간 👥 인원수 완료율%
- **최근 회의 카드**: 배지 + 제목👑 + 메타정보 3줄 구조
  - 1줄: [상태배지] 제목👑
  - 2줄: 📅 날짜/시간 👥 인원수
  - 3줄: 📍 장소

### 2. Todo 카드 스타일 공통화
- common.css에 Todo 카드 공통 스타일 추가 (1767-1890줄)
- 02-대시보드.html, 09-Todo관리.html에서 중복 스타일 제거 (~240줄)
- 페이지별 전용 스타일만 개별 파일에 유지

### 3. 샘플 데이터 정책 명확화
- SAMPLE_TODOS: status는 not_started/completed만 사용, progress 항목 제거
- SAMPLE_MINUTES: lastUpdated 날짜 형식 변경, participantCount 주석 추가
- draft 상태 회의록 최소 1개 보장 (상위 3개 중)

### 4. 유지보수성 향상
- 모든 화면에서 동일한 Todo 카드 디자인 보장
- 중앙 관리로 일관성 유지

## 수정 파일
- design/uiux/prototype/02-대시보드.html
- design/uiux/prototype/09-Todo관리.html
- design/uiux/prototype/common.css (Todo 카드 공통 스타일 추가)
- design/uiux/prototype/common.js (샘플 데이터 개선)
- design/uiux/uiux.md (v1.5.0 변경 이력 추가)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812
2025-10-23 19:10:06 +09:00
parent 000a54cd20
commit a2deb108ac
6 changed files with 1386 additions and 328 deletions
+8 -2
View File
@@ -4,7 +4,7 @@
- **작성일**: 2025-10-21
- **최종 수정일**: 2025-10-23
- **작성자**: 이미준 (서비스 기획자)
- **버전**: 1.4.8
- **버전**: 1.4.10
- **설계 철학**: Mobile First Design
---
@@ -1321,9 +1321,13 @@ graph TD
- 각 카드: 결정 내용 + 결정자 + 시간 + 배경 설명
- **Todo 진행상황 섹션** (📋)
- **전체 진행률 표시**: 상단에 원형 진행 바 (완료 Todo 개수 / 전체 Todo 개수)
- 진행률 퍼센트 중앙 표시 (예: "60%")
- 색상: Primary 색상 (#4DD5A7)
- 크기: 80px (Desktop), 60px (Mobile)
- 상태별 필터 탭 (전체/시작 전/진행 중/완료)
- 담당자별 그룹화
- 각 Todo: 제목 + 진행률 바 + 마감일 + 우선순위 배지
- 각 Todo: 제목 + 마감일 + 우선순위 배지 (개별 진행률 바 제거)
- **참고자료 섹션** (📚)
- 참고자료 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
@@ -2075,6 +2079,8 @@ graph TD
| 1.4.6 | 2025-10-23 | 강지수 | 검증완료 섹션 잠금해제 정책 단순화<br>- **정책 변경**: 검증완료 섹션은 회의 생성자만 잠금 해제 후 수정 가능 (참석자는 수정 불가)<br>- **제거**: 참석자용 잠금해제 요청 기능 완전 제거 (공수 절감)<br>- **11-회의록수정**: 검증완료 섹션에 "🔒 읽기 전용" 배지 표시 (참석자 화면)<br> - 잠금해제요청 버튼 제거<br> - unlockSection() 함수 제거<br> - 읽기 전용 안내 텍스트 추가: "(잠금됨 · 회의 생성자만 수정 가능)"<br>- **06-검증완료**: 회의 생성자용 잠금해제 버튼 유지 (변경 없음)<br>- **인터랙션**: "3. 섹션 잠금 해제" → "3. 검증완료 섹션 (권한별 차등 표시)"로 수정<br>- **유저스토리**: UFR-MEET-055, UFR-COLLAB-030 권한 제어 명확화 |
| 1.4.7 | 2025-10-23 | 강지수, 도그냥 | Todo 및 회의록 관련 UI/UX 재정의<br>- **09-Todo관리**: "Todo수정" → "Todo관리" 기능 확장<br> - 통계 블록: 전체(미완료), 마감임박(3일 이내), 지연(기한 경과)<br> - 필터 탭 개수 표시: 전체(개수), 지연(개수), 마감임박(개수), 완료(개수)<br> - 편집 모달: 제목, 담당자, 마감일, 우선순위 수정<br> - 체크박스 확인 모달: 완료/미완료 전환 시 확인<br> - 프로토타입: 09-Todo관리.html (통계, 필터, 모달 구현)<br>- **10-회의록상세조회**: 탭 순서 및 기본 노출 변경<br> - 탭 순서: 대시보드 → 회의록 (기존: 회의록 → 대시보드)<br> - 기본 활성 탭: 대시보드 (Desktop/Mobile 공통)<br> - 프로토타입: 10-회의록상세조회.html (탭 순서 변경, active 클래스 이동)<br>- **11-회의록수정**: 진입 경로 및 권한 제어 명확화<br> - 진입 경로: 10-회의록상세조회 → "수정" 버튼 클릭<br> - 권한 제어: 검증완료 전(모든 참석자), 검증완료 후(회의 생성자만)<br> - 회의 일시/장소: 읽기 전용 표시 추가 "(읽기 전용)"<br> - UI 구성: 회의록 리스트 제거, 직접 편집 화면으로 시작<br> - 프로토타입: 11-회의록수정.html (권한 코멘트 추가, readonly 표시) |
| 1.4.8 | 2025-10-23 | 강지수 | Todo 관리 화면 UI/UX 개선 (컴팩트 디자인 및 시각적 계층 차별화)<br>- **09-Todo관리**: 통계 블록 및 Todo 카드 디자인 전면 개선<br> - **통계 블록**: 정보 표시 전용 디자인으로 변경<br> - 그라데이션 제거 → 모던한 단색 배경 + 좌측 4px 액센트 라인<br> - 상태별 연한 단색 배경 (블루 #F8FBFF / 오렌지 #FFFBF5 / 레드 #FFF8F8)<br> - 호버 효과 추가: 살짝 떠오르는 애니메이션 (translateY -2px)<br> - 미묘한 그림자로 깊이감 표현 (0 1px 3px rgba(0,0,0,0.05))<br> - 모바일에서도 3개 블록 한 줄 유지 (grid-template-columns: repeat(3, 1fr))<br> - 큰 숫자 + 작은 레이블로 정보 계층 명확화<br> - **Todo 카드**: 컴팩트 레이아웃으로 재설계<br> - 레이아웃: [체크박스] [배지] [배지] [✏️] / [제목] / [🔗 링크] [마감일]<br> - 편집 버튼: 우측 상단 절대 위치, ✏️ 이모지 아이콘 사용 (32×32px)<br> - 담당자 정보 제거 (간결한 디자인)<br> - 얇은 테두리 + 얇은 그림자로 인터랙티브 의도 명확화<br> - **Todo 편집 모달**: 모바일 전체화면 모드로 변경<br> - 모바일: 전체화면 (100vh), 헤더/바디/푸터 flexbox 구조<br> - 바디 영역만 스크롤 가능 (overflow-y: auto, -webkit-overflow-scrolling: touch)<br> - 데스크톱: 중앙 모달 (max-width: 600px, max-height: 90vh)<br> - 버튼 크기 확대 (40px) 및 가로 균등 배치 (flex: 1)<br> - **시각적 차별화**: 정보 블록 vs 인터랙티브 블록<br> - 통계 블록: 정보 표시 + 부드러운 호버 효과<br> - Todo 카드: 인터랙티브 (호버 시 테두리/그림자 변경)<br>- **프로토타입**: design/uiux/prototype/09-Todo관리.html 전면 개선 |
| 1.4.9 | 2025-10-23 | 강지수 | 회의록 상세조회 화면 Todo 진행상황 섹션 정책 추가<br>- **10-회의록상세조회**: Todo 진행상황 섹션에 전체 진행률 표시 추가<br> - **전체 진행률**: 원형 진행 바로 완료 Todo / 전체 Todo 비율 표시<br> - 진행률 퍼센트 중앙 표시 (예: "60%")<br> - 색상: Primary 색상 (#4DD5A7)<br> - 크기: 80px (Desktop), 60px (Mobile)<br> - **개별 Todo 진행률 바 제거**: Todo는 완료/미완료 상태만 존재하므로 개별 진행률 표시 불필요<br> - Todo 카드 구성: 제목 + 마감일 + 우선순위 배지만 표시<br>- **이유**: 회의록에 포함된 Todo의 전체 완료 상황을 한눈에 파악하기 위함 |
| 1.4.10 | 2025-10-23 | 강지수 | 대시보드 카드 디자인 통일 및 Todo 카드 스타일 공통화<br>- **02-대시보드**: 모든 카드 레이아웃 일관성 개선 (배지 우선 배치)<br> - **나의 Todo 카드**: 담당자 정보 제거 → 회의록 링크로 변경<br> - 메타 정보: 🔗 회의 제목 + 마감일 (담당자 정보 제거, 나의 Todo이므로 불필요)<br> - 09-Todo관리.html과 동일한 구조 적용<br> - **나의 회의록 카드**: 배지 + 제목 + 👑 레이아웃 통일<br> - 1줄: [상태배지] 제목 👑<br> - 2줄: 📅 날짜/시간 👥 인원수 완료율%<br> - **최근 회의 카드**: 배지 + 제목👑 + 메타정보 3줄 구조<br> - 1줄: [상태배지] 제목👑<br> - 2줄: 📅 날짜/시간 👥 인원수<br> - 3줄: 📍 장소<br>- **공통 스타일 관리**: Todo 카드 스타일 common.css로 이동<br> - common.css 1767-1890 라인에 Todo 카드 공통 스타일 추가<br> - 02-대시보드.html, 09-Todo관리.html에서 중복 스타일 제거 (~240줄 절감)<br> - 페이지별 전용 스타일만 개별 파일에 유지<br>- **샘플 데이터 개선**: common.js 샘플 데이터 정책 명확화<br> - SAMPLE_TODOS: status는 not_started/completed만 사용, progress 항목 제거<br> - SAMPLE_MINUTES: lastUpdated를 날짜 형식으로 변경, participantCount 의미 주석 추가, draft 상태 최소 1개 보장<br>- **유지보수성 향상**: 모든 화면에서 동일한 Todo 카드 디자인, 중앙 관리로 일관성 보장<br>- **프로토타입**: 02-대시보드.html, 09-Todo관리.html, common.css, common.js 수정 |
---