Todo 관리 화면 UI/UX 개선 (통계 블록 및 편집 모달)

- 통계 블록 디자인 개선
  - 그라데이션 제거 → 모던한 단색 배경 + 좌측 4px 액센트 라인
  - 상태별 연한 단색 배경 (블루/오렌지/레드)
  - 호버 효과 추가 (translateY -2px)
  - 미묘한 그림자로 깊이감 표현
  - 모바일에서도 3개 블록 한 줄 유지 (grid 3열 고정)

- Todo 편집 모달 전체화면 모드로 변경
  - 모바일: 전체화면 (100vh), 헤더/바디/푸터 flexbox 구조
  - 바디 영역만 스크롤 가능
  - 데스크톱: 중앙 모달 (max-width: 600px)
  - 버튼 크기 확대 및 가로 균등 배치

- 설계서 업데이트 (v1.4.8)
  - 변경 이력에 개선 내용 추가
  - 09-Todo관리 인터랙션 섹션 상세화

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

Co-Authored-By: Claude <noreply@anthropic.com>

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 헤더)<br>- **Desktop 좌측 사이드바**: 하단에 사용자 정보 영역 추가<br>  - 사용자 정보 (아바타 + 이름 + 이메일)<br>  - 로그아웃 버튼 (btn-ghost btn-sm)<br>- **Mobile 상단 헤더**: 우측에 프로필 아이콘 버튼 추가 (👤)<br>  - 클릭 시 드롭다운 메뉴 표시 (사용자 정보 + 로그아웃 버튼)<br>  - 드롭다운 위치: 우측 상단 기준 아래로 펼침<br>  - 오버레이 배경으로 UX 개선<br>- **프로토타입 파일**: 02-대시보드.html, 09-Todo관리.html, 12-회의록목록조회.html<br>- **JavaScript 함수**: toggleProfileMenu(), logout() 추가<br>- **반응형 처리**: Desktop에서는 드롭다운 숨김, Mobile에서는 사이드바 사용자 영역 숨김<br>- **설계서-프로토타입 일관성**: 로그아웃 기능 완전 통일 |
 | 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 전면 개선 |
 
 ---