diff --git a/design/uiux/prototype/09-Todo관리.html b/design/uiux/prototype/09-Todo관리.html index 757c592..6281fdd 100644 --- a/design/uiux/prototype/09-Todo관리.html +++ b/design/uiux/prototype/09-Todo관리.html @@ -83,8 +83,11 @@ /* 페이지 특화 스타일 */ - /* 통계 영역 - 모바일 최적화 */ + /* 통계 영역 - 모바일에서도 한 줄 유지 */ .stats-overview { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-sm); margin-bottom: var(--space-md); } @@ -92,27 +95,35 @@ .stat-box { min-height: 80px; padding: var(--space-sm); - background: var(--gray-100); /* 플랫한 배경 */ - border: 1px solid var(--gray-200); /* 얇은 경계선 */ - border-radius: var(--radius-md); /* 부드러운 모서리 */ - box-shadow: none; /* 그림자 제거 */ - transition: none; /* 호버 효과 제거 */ + background: var(--white); + border: 1px solid var(--gray-200); + border-radius: var(--radius-md); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + transition: transform 0.2s ease, box-shadow 0.2s ease; } - /* 상태별 컬러 코딩 */ + .stat-box:hover { + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); + } + + /* 상태별 컬러 코딩 - 단색 배경 + 좌측 액센트 라인 */ .stat-box.stat-incomplete { - background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%); /* 차분한 블루 그라데이션 */ - border-color: #90CAF9; + background: #F8FBFF; + border-left: 4px solid #2196F3; + border-color: #E3F2FD; } .stat-box.stat-urgent { - background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%); /* 주의 오렌지 그라데이션 */ - border-color: #FFB74D; + background: #FFFBF5; + border-left: 4px solid #FF9800; + border-color: #FFE0B2; } .stat-box.stat-overdue { - background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%); /* 긴급 레드 그라데이션 */ - border-color: #EF5350; + background: #FFF8F8; + border-left: 4px solid #F44336; + border-color: #FFCDD2; } .stat-number { @@ -289,6 +300,7 @@ display: flex; gap: var(--space-md); align-items: flex-start; + position: relative; } .todo-checkbox-wrapper { @@ -363,9 +375,11 @@ display: none; } - /* 액션 버튼 영역 */ + /* 액션 버튼 영역 - 우측 상단에 배치 */ .todo-actions { - margin-top: var(--space-xs); + position: absolute; + top: var(--space-md); + right: var(--space-md); } /* 아이콘 버튼 */ @@ -379,22 +393,19 @@ background: none; border: none; border-radius: var(--radius-md); - color: var(--gray-600); + font-size: 20px; cursor: pointer; transition: all var(--transition-fast); } .icon-btn:hover { background: var(--gray-100); - color: var(--primary); + transform: scale(1.1); } .icon-btn:active { background: var(--gray-200); - } - - .icon-btn .material-icons { - font-size: 20px; + transform: scale(1); } /* 빈 상태 */ @@ -420,11 +431,6 @@ margin-bottom: var(--space-lg); } - @media (min-width: 768px) { - .stats-overview { - grid-template-columns: repeat(4, 1fr); - } - } /* 날짜 입력 필드 래퍼 - 달력 아이콘 보호 */ .date-input-wrapper { @@ -466,6 +472,96 @@ box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.15), 0 4px 0 0 var(--primary); } + + /* Todo 편집 모달 - 모바일 전체화면 */ + #editTodoModal .modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100vh; + max-width: none; + max-height: none; + margin: 0; + border-radius: 0; + display: flex; + flex-direction: column; + overflow: hidden; + } + + #editTodoModal .modal-header { + flex-shrink: 0; + padding: var(--space-lg) var(--space-md); + border-bottom: 1px solid var(--gray-200); + display: flex; + align-items: center; + justify-content: space-between; + } + + #editTodoModal .modal-title { + font-size: var(--font-h3); + font-weight: var(--font-weight-bold); + margin: 0; + } + + #editTodoModal .modal-close { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + font-size: 28px; + background: none; + border: none; + cursor: pointer; + color: var(--gray-600); + border-radius: var(--radius-md); + transition: all var(--transition-fast); + } + + #editTodoModal .modal-close:hover { + background: var(--gray-100); + color: var(--gray-900); + } + + #editTodoModal .modal-body { + flex: 1; + overflow-y: auto; + padding: var(--space-lg) var(--space-md); + -webkit-overflow-scrolling: touch; + } + + #editTodoModal .modal-footer { + flex-shrink: 0; + padding: var(--space-md); + border-top: 1px solid var(--gray-200); + display: flex; + gap: var(--space-sm); + background: var(--white); + } + + #editTodoModal .modal-footer .btn { + flex: 1; + } + + /* 데스크톱에서는 중앙 모달로 복원 */ + @media (min-width: 768px) { + #editTodoModal .modal { + position: relative; + top: auto; + left: auto; + right: auto; + bottom: auto; + width: 90%; + max-width: 600px; + height: auto; + max-height: 90vh; + margin: 0 auto; + border-radius: var(--radius-lg); + } + } @@ -771,13 +867,11 @@ ${formatDate(todo.dueDate)} - ${!isCompleted ? ` -
- -
- ` : ''} + ${!isCompleted ? ` +
+ +
+ ` : ''} `); diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index ddead8e..adeacbb 100644 --- a/design/uiux/uiux.md +++ b/design/uiux/uiux.md @@ -4,7 +4,7 @@ - **작성일**: 2025-10-21 - **최종 수정일**: 2025-10-23 - **작성자**: 이미준 (서비스 기획자) -- **버전**: 1.4.7 +- **버전**: 1.4.8 - **설계 철학**: Mobile First Design --- @@ -1121,10 +1121,14 @@ graph TD - "Todo 관리" 타이틀 - 프로필 아이콘 (모바일) -- **상단 통계 블록** (4개 블록) - - **전체**: 미완료 전체 개수 - - **마감임박**: 기한 3일 이내 미완료 개수 (강조 스타일) - - **지연**: 기한이 지난 미완료 개수 +- **상단 통계 블록** (3개 블록, 정보 표시 전용) + - **디자인 특징**: + - 플랫한 디자인 (그림자 제거, 호버 효과 없음) + - 상태별 컬러 배경 + - 큰 숫자 + 작은 레이블로 정보 계층 명확화 + - **미완료**: 미완료 전체 개수 (블루) + - **마감임박**: 기한 3일 이내 미완료 개수 (오렌지) + - **지연**: 기한이 지난 미완료 개수 (레드) - **필터 탭** - **전체 (개수)**: 완료/미완료 전체 @@ -1134,20 +1138,37 @@ graph TD - **Todo 리스트 블록** - **정렬**: 미완료 → 완료 순서, 기한일 오래된 순 (복합 정렬) - - **각 Todo 카드** (블록 형태): - - **체크박스** (완료/미완료 토글, 액션 가능 표시) - - **Todo 제목** - - **상태 뱃지**: D+n(지연) / D-day / D-n / 완료 - - **우선순위 뱃지**: 높음(빨강) / 보통(노랑) / 낮음(회색) - - **기한** - - **회의록 제목 + 링크** (클릭 시 10-회의록상세조회 대시보드 탭으로 이동) - - **편집 버튼** (권한 있는 경우에만 노출, 액션 가능 표시) + - **각 Todo 카드** (컴팩트 디자인): + - **레이아웃 구조**: + ``` + [체크박스] [배지] [배지] [✏️] + [Todo 제목] + [🔗 회의록 링크] [마감일] + ``` + - **좌측**: **체크박스** (완료/미완료 토글, 24×24px) + - **우측 상단**: **✏️ 편집 버튼** (absolute position, 32×32px 아이콘 버튼) + - 호버: 연한 회색 배경 + 1.1배 확대 + - 권한 있는 경우에만 노출 (미완료 Todo) + - **콘텐츠 영역** (상단→하단 순서): + - **배지 영역**: 상태 뱃지 + 우선순위 뱃지 (가로 배치) + - 상태 뱃지: D+n(지연) / D-day / D-n / 완료 + - 우선순위 뱃지: 높음(빨강) / 보통(노랑) / 낮음(회색) + - **Todo 제목** (일반 폰트) + - **하단 메타 정보**: 회의록 링크 + 마감일 (연한 회색) + - 🔗 회의록 제목 (연한 초록색 링크, 클릭 시 10-회의록상세조회 대시보드 탭으로 이동) + - 마감일 (회색 텍스트) + - **담당자 정보**: 표시 안 함 (간결한 디자인) + - **카드 스타일**: + - 얇은 테두리 (1px solid #gray-200) + - 얇은 그림자 (0 1px 3px rgba(0,0,0,0.08)) + - 호버: 테두리 Primary 컬러로 변경 + 그림자 증가 - **페이징**: 최초 10건 노출, 10건 이상일 경우 하단에 "10개 더보기" 버튼 **Tablet/Desktop (768px+)** - 좌측 사이드바 + 메인 콘텐츠 영역 -- 통계 블록 4개 가로 배치 +- 통계 블록 3개 가로 배치 - Todo 리스트 그리드 레이아웃 (2열) +- 편집 버튼: 32×32px 아이콘 버튼 (우측 상단 고정) #### 인터랙션 1. **Todo 완료/미완료 상태 변경** @@ -1160,8 +1181,12 @@ graph TD 2. **Todo 편집 (UFR-TODO-040)** - **편집 버튼 클릭** (권한: 담당자 본인 OR 회의 생성자): - 편집 모달 표시 - - **모바일**: 바텀시트 형식 - - **데스크톱**: 중앙 모달 + - **모바일**: 전체화면 모드 + - `position: fixed`, 화면 전체 크기 (100vh) + - Flexbox 구조: 헤더(고정) + 바디(스크롤) + 푸터(고정) + - 바디 영역만 스크롤 가능 (`overflow-y: auto`, `-webkit-overflow-scrolling: touch`) + - 닫기 버튼 크기 확대 (40×40px) + - **데스크톱**: 중앙 모달 (max-width: 600px, max-height: 90vh) - **수정 가능 항목**: - ✏️ Todo 제목 (input, 필수) - 👤 담당자 (select, 회의록 참석자 중 선택) - **회의 생성자만 변경 가능** @@ -1170,6 +1195,9 @@ graph TD - **권한 표시**: - 담당자 본인: "본인에게 할당된 Todo만 수정할 수 있습니다. 담당자는 변경할 수 없습니다." - 회의 생성자: "회의 생성자로서 모든 항목을 수정할 수 있습니다. 담당자 변경 시 알림이 전송됩니다." + - **버튼 배치**: + - 모바일: 하단 고정, 가로로 균등 배치 (`flex: 1`) + - 데스크톱: 모달 하단, 우측 정렬 - **저장 버튼 클릭**: - 유효성 검사 (제목, 마감일 필수) - "Todo가 수정되었습니다" 토스트 메시지 @@ -1191,12 +1219,24 @@ graph TD - 페이지 새로고침 없이 무한 스크롤 방식 #### 디자인 요구사항 -- **액션 블록 vs 정보 블록 차별화**: - - 액션 가능 (체크박스, 편집 버튼): 호버 시 배경색 변경, 그림자 효과 - - 정보 표시 (상태 뱃지, 우선순위, 기한): 정적 표시, 호버 효과 없음 +- **정보 블록 vs 인터랙티브 블록 시각적 차별화**: + - **통계 블록** (정보 표시): + - 플랫한 디자인, 그림자 제거 + - 상태별 색상 배경 + - 호버 효과 없음 (읽기 전용 의도 명확화) + - **Todo 카드** (인터랙티브): + - 얇은 테두리 + 얇은 그림자 + - 호버: 테두리 색상 변경 + 그림자 증가 + - 체크박스, 편집 버튼, 회의록 링크 액션 가능 +- **편집 버튼 디자인**: + - ✏️ 이모지 아이콘 사용 (Material Icons 대신) + - 32×32px 정사각형 아이콘 버튼 + - 우측 상단 절대 위치 (absolute positioning) + - 호버: 연한 회색 배경 + 1.1배 확대 애니메이션 - **모바일 최적화**: - 바텀시트 편집 모달 (전체 화면 X) - 터치 영역 최소 44px × 44px + - 컴팩트 카드 레이아웃으로 스크롤 최소화 #### 데이터 요구사항 - **입력**: 사용자 ID (내가 담당자인 Todo만 조회) @@ -2034,6 +2074,7 @@ graph TD | 1.4.5 | 2025-10-23 | 강지수 | 로그아웃 기능 추가 (Desktop 사이드바 + Mobile 헤더)
- **Desktop 좌측 사이드바**: 하단에 사용자 정보 영역 추가
- 사용자 정보 (아바타 + 이름 + 이메일)
- 로그아웃 버튼 (btn-ghost btn-sm)
- **Mobile 상단 헤더**: 우측에 프로필 아이콘 버튼 추가 (👤)
- 클릭 시 드롭다운 메뉴 표시 (사용자 정보 + 로그아웃 버튼)
- 드롭다운 위치: 우측 상단 기준 아래로 펼침
- 오버레이 배경으로 UX 개선
- **프로토타입 파일**: 02-대시보드.html, 09-Todo관리.html, 12-회의록목록조회.html
- **JavaScript 함수**: toggleProfileMenu(), logout() 추가
- **반응형 처리**: Desktop에서는 드롭다운 숨김, Mobile에서는 사이드바 사용자 영역 숨김
- **설계서-프로토타입 일관성**: 로그아웃 기능 완전 통일 | | 1.4.6 | 2025-10-23 | 강지수 | 검증완료 섹션 잠금해제 정책 단순화
- **정책 변경**: 검증완료 섹션은 회의 생성자만 잠금 해제 후 수정 가능 (참석자는 수정 불가)
- **제거**: 참석자용 잠금해제 요청 기능 완전 제거 (공수 절감)
- **11-회의록수정**: 검증완료 섹션에 "🔒 읽기 전용" 배지 표시 (참석자 화면)
- 잠금해제요청 버튼 제거
- unlockSection() 함수 제거
- 읽기 전용 안내 텍스트 추가: "(잠금됨 · 회의 생성자만 수정 가능)"
- **06-검증완료**: 회의 생성자용 잠금해제 버튼 유지 (변경 없음)
- **인터랙션**: "3. 섹션 잠금 해제" → "3. 검증완료 섹션 (권한별 차등 표시)"로 수정
- **유저스토리**: UFR-MEET-055, UFR-COLLAB-030 권한 제어 명확화 | | 1.4.7 | 2025-10-23 | 강지수, 도그냥 | Todo 및 회의록 관련 UI/UX 재정의
- **09-Todo관리**: "Todo수정" → "Todo관리" 기능 확장
- 통계 블록: 전체(미완료), 마감임박(3일 이내), 지연(기한 경과)
- 필터 탭 개수 표시: 전체(개수), 지연(개수), 마감임박(개수), 완료(개수)
- 편집 모달: 제목, 담당자, 마감일, 우선순위 수정
- 체크박스 확인 모달: 완료/미완료 전환 시 확인
- 프로토타입: 09-Todo관리.html (통계, 필터, 모달 구현)
- **10-회의록상세조회**: 탭 순서 및 기본 노출 변경
- 탭 순서: 대시보드 → 회의록 (기존: 회의록 → 대시보드)
- 기본 활성 탭: 대시보드 (Desktop/Mobile 공통)
- 프로토타입: 10-회의록상세조회.html (탭 순서 변경, active 클래스 이동)
- **11-회의록수정**: 진입 경로 및 권한 제어 명확화
- 진입 경로: 10-회의록상세조회 → "수정" 버튼 클릭
- 권한 제어: 검증완료 전(모든 참석자), 검증완료 후(회의 생성자만)
- 회의 일시/장소: 읽기 전용 표시 추가 "(읽기 전용)"
- UI 구성: 회의록 리스트 제거, 직접 편집 화면으로 시작
- 프로토타입: 11-회의록수정.html (권한 코멘트 추가, readonly 표시) | +| 1.4.8 | 2025-10-23 | 강지수 | Todo 관리 화면 UI/UX 개선 (컴팩트 디자인 및 시각적 계층 차별화)
- **09-Todo관리**: 통계 블록 및 Todo 카드 디자인 전면 개선
- **통계 블록**: 정보 표시 전용 디자인으로 변경
- 그라데이션 제거 → 모던한 단색 배경 + 좌측 4px 액센트 라인
- 상태별 연한 단색 배경 (블루 #F8FBFF / 오렌지 #FFFBF5 / 레드 #FFF8F8)
- 호버 효과 추가: 살짝 떠오르는 애니메이션 (translateY -2px)
- 미묘한 그림자로 깊이감 표현 (0 1px 3px rgba(0,0,0,0.05))
- 모바일에서도 3개 블록 한 줄 유지 (grid-template-columns: repeat(3, 1fr))
- 큰 숫자 + 작은 레이블로 정보 계층 명확화
- **Todo 카드**: 컴팩트 레이아웃으로 재설계
- 레이아웃: [체크박스] [배지] [배지] [✏️] / [제목] / [🔗 링크] [마감일]
- 편집 버튼: 우측 상단 절대 위치, ✏️ 이모지 아이콘 사용 (32×32px)
- 담당자 정보 제거 (간결한 디자인)
- 얇은 테두리 + 얇은 그림자로 인터랙티브 의도 명확화
- **Todo 편집 모달**: 모바일 전체화면 모드로 변경
- 모바일: 전체화면 (100vh), 헤더/바디/푸터 flexbox 구조
- 바디 영역만 스크롤 가능 (overflow-y: auto, -webkit-overflow-scrolling: touch)
- 데스크톱: 중앙 모달 (max-width: 600px, max-height: 90vh)
- 버튼 크기 확대 (40px) 및 가로 균등 배치 (flex: 1)
- **시각적 차별화**: 정보 블록 vs 인터랙티브 블록
- 통계 블록: 정보 표시 + 부드러운 호버 효과
- Todo 카드: 인터랙티브 (호버 시 테두리/그림자 변경)
- **프로토타입**: design/uiux/prototype/09-Todo관리.html 전면 개선 | ---