Todo 및 회의록 관련 요구사항 재정의 (v2.0.5 / v1.4.7)

[유저스토리 v2.0.5]
- UFR-TODO-040 (09-Todo관리): "Todo수정" → "Todo관리" 기능 확장
  - 통계 블록 재정의: 전체(미완료), 마감임박(3일 이내), 지연(기한 경과)
  - 필터링: 전체, 지연, 마감임박, 완료 (각 필터에 개수 표시)
  - 체크박스 확인 모달: 완료/미완료 전환 시 확인
  - 권한: 담당자 본인 OR 회의록 작성자만 편집 가능

- UFR-MEET-047 (10-회의록상세조회): 탭 순서 및 기본 노출 변경
  - 탭 구성: 대시보드 / 회의록
  - 기본 노출: 대시보드 탭 우선 노출

- UFR-MEET-055 (11-회의록수정): 진입 경로 및 권한 제어 명확화
  - 진입 경로: 10-회의록상세조회 → "수정" 버튼 클릭
  - 권한 제어: 검증완료 전(모든 참석자), 검증완료 후(회의 생성자만)
  - 회의 일시/장소: 읽기 전용 표시 명시

[화면설계서 v1.4.7]
- 09-Todo관리: 통계, 필터, 모달 UI/UX 재정의
- 10-회의록상세조회: 탭 순서 변경, 대시보드 탭 기본 활성
- 11-회의록수정: 진입 경로, 권한 제어, UI 구성 명확화

[프로토타입]
- 09-Todo관리.html: 통계 블록, 필터 개수, 체크박스 확인 모달 구현
- 10-회의록상세조회.html: 탭 순서 및 active 클래스 변경
- 11-회의록수정.html: 권한 코멘트, 읽기 전용 표시 추가

🤖 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.4
+- **버전**: 1.4.7
 - **설계 철학**: Mobile First Design
 
 ---
@@ -1099,106 +1099,116 @@ graph TD
 ### 09-Todo관리
 
 #### 개요
-- **목적**: 할당된 Todo 목록 조회 및 진행 상황 관리
-- **관련 유저스토리**: UFR-TODO-010, UFR-TODO-030, **UFR-TODO-040 (Todo 수정)**
+- **목적**: 나의 Todo(내가 담당자인 Todo) 조회 및 관리
+- **관련 유저스토리**: UFR-TODO-040 (Todo 관리)
 - **비즈니스 중요도**: 높음
 - **접근 경로**: 대시보드 → 하단 네비게이션 "Todo" 또는 대시보드 "내 Todo" 카드 → "전체 보기"
+- **대전제**:
+  - Todo의 상태는 완료/미완료만 존재
+  - 09-Todo관리 화면에서는 나의 Todo(내가 담당자인 Todo)만 표시
 
 #### 주요 기능
-1. Todo 목록 표시 (상태별 필터링)
-2. **Todo 수정 (UFR-TODO-040)** - 신규 추가
-3. Todo 완료 처리
-4. 회의록 원문으로 이동 (양방향 연결)
-5. Todo 진행 상황 통계
-6. 마감 임박 Todo 알림
+1. 나의 Todo 목록 표시 (필터링)
+2. Todo 완료/미완료 상태 변경
+3. Todo 편집 (모달)
+4. 회의록 상세로 이동 (양방향 연결)
+5. Todo 통계 (전체, 마감임박, 지연)
 
 #### UI 구성요소
 
 **Mobile (320px~768px)**
 - **헤더**
-  - "내 Todo" 타이틀
-  - 필터 버튼 (상태별)
+  - "Todo 관리" 타이틀
+  - 프로필 아이콘 (모바일)
 
-- **통계 카드**
-  - 전체 Todo 개수
-  - 완료율 (원형 진행 바)
-  - 마감 임박 Todo 개수 (배지)
+- **상단 통계 블록** (4개 블록)
+  - **전체**: 미완료 전체 개수
+  - **마감임박**: 기한 3일 이내 미완료 개수 (강조 스타일)
+  - **지연**: 기한이 지난 미완료 개수
 
 - **필터 탭**
-  - 전체, 진행 중, 완료, 마감 임박
+  - **전체 (개수)**: 완료/미완료 전체
+  - **지연 (개수)**: 기한이 지난 미완료
+  - **마감임박 (개수)**: 기한 3일 이내 미완료
+  - **완료 (개수)**: 완료된 Todo
 
-- **Todo 리스트**
-  - 각 Todo 카드:
-    - 체크박스 (완료 처리)
-    - Todo 내용
-    - 마감일 (색상 코딩: 초록-여유, 노랑-임박, 빨강-지연)
-    - 우선순위 배지 (높음/보통/낮음)
-    - 관련 회의록 링크 아이콘
-    - **"편집" 버튼** (본인 담당 Todo만 표시) - 신규
-    - 스와이프 액션: 수정, 삭제
-
-- **FAB** (Floating Action Button)
-  - "Todo 추가" (수동 추가)
+- **Todo 리스트 블록**
+  - **정렬**: 미완료 → 완료 순서, 기한일 오래된 순 (복합 정렬)
+  - **각 Todo 카드** (블록 형태):
+    - **체크박스** (완료/미완료 토글, 액션 가능 표시)
+    - **Todo 제목**
+    - **상태 뱃지**: D+n(지연) / D-day / D-n / 완료
+    - **우선순위 뱃지**: 높음(빨강) / 보통(노랑) / 낮음(회색)
+    - **기한**
+    - **회의록 제목 + 링크** (클릭 시 10-회의록상세조회 대시보드 탭으로 이동)
+    - **편집 버튼** (권한 있는 경우에만 노출, 액션 가능 표시)
+  - **페이징**: 최초 10건 노출, 10건 이상일 경우 하단에 "10개 더보기" 버튼
 
 **Tablet/Desktop (768px+)**
-- 좌측: Todo 리스트
-- 우측: 선택된 Todo 상세 정보
-  - Todo 내용
-  - 담당자
-  - 마감일
-  - 우선순위
-  - 관련 회의록 섹션 (임베디드 뷰)
-  - 진행 메모 (추가 가능)
+- 좌측 사이드바 + 메인 콘텐츠 영역
+- 통계 블록 4개 가로 배치
+- Todo 리스트 그리드 레이아웃 (2열)
 
 #### 인터랙션
-1. **Todo 수정 (UFR-TODO-040)** - 신규 추가
-   - **편집 버튼 클릭**:
-     - 인라인 편집 모드로 전환 또는 수정 모달 표시
-     - **수정 가능 항목** (담당자 권한):
-       - ✏️ Todo 제목 (문구)
-       - 📅 마감일 (날짜 선택기)
-       - 🎯 우선순위 (high/medium/low 드롭다운)
-       - ❌ 담당자 변경 불가 (본인 담당 Todo)
-     - **저장 버튼**: 수정 완료
-     - **취소 버튼**: 편집 모드 취소
-   - **수정 완료 시**:
+1. **Todo 완료/미완료 상태 변경**
+   - **체크박스 클릭**:
+     - 완료 처리 시: "완료 처리하시겠습니까?" 확인 모달
+     - 미완료로 되돌릴 때: "미완료로 변경하시겠습니까?" 확인 모달
+     - 확인 시: 상태 업데이트, 통계 갱신, 리스트 재정렬
+     - 취소 시: 이전 상태 유지
+
+2. **Todo 편집 (UFR-TODO-040)**
+   - **편집 버튼 클릭** (권한: 담당자 본인 OR 회의 생성자):
+     - 편집 모달 표시
+       - **모바일**: 바텀시트 형식
+       - **데스크톱**: 중앙 모달
+     - **수정 가능 항목**:
+       - ✏️ Todo 제목 (input, 필수)
+       - 👤 담당자 (select, 회의록 참석자 중 선택) - **회의 생성자만 변경 가능**
+       - 📅 마감일 (날짜 선택기, 필수)
+       - 🎯 우선순위 (높음/보통/낮음 select, 필수)
+     - **권한 표시**:
+       - 담당자 본인: "본인에게 할당된 Todo만 수정할 수 있습니다. 담당자는 변경할 수 없습니다."
+       - 회의 생성자: "회의 생성자로서 모든 항목을 수정할 수 있습니다. 담당자 변경 시 알림이 전송됩니다."
+   - **저장 버튼 클릭**:
+     - 유효성 검사 (제목, 마감일 필수)
      - "Todo가 수정되었습니다" 토스트 메시지
      - 회의록에 수정 내용 실시간 반영
-     - 마감일 변경 시 캘린더 자동 업데이트
-   - **권한 제어**:
-     - 본인에게 할당된 Todo만 편집 버튼 표시
-     - 다른 사람의 Todo는 조회만 가능 (편집 버튼 숨김)
+     - 담당자 변경 시: 이전/새 담당자에게 알림 발송
+     - 마감일 변경 시: 캘린더 자동 업데이트
+   - **취소 버튼**: 모달 닫기, 변경 사항 취소
 
-2. **Todo 완료 처리**
-   - 체크박스 클릭:
-     - 확인 다이얼로그 ("완료 처리하시겠습니까?")
-     - 완료 시: 체크 애니메이션, 회의록에 실시간 반영
-     - 완료 Todo는 리스트 하단으로 이동 (취소선)
+3. **회의록 링크 클릭**
+   - 10-회의록상세조회 화면으로 이동
+   - **대시보드 탭이 우선 노출**
 
-3. **회의록 연결**
-   - 회의록 링크 아이콘 클릭:
-     - 회의록상세조회 화면으로 이동
-     - 해당 Todo가 언급된 섹션으로 자동 스크롤
-     - 하이라이트 효과
+4. **필터 탭 클릭**
+   - 선택한 필터 기준으로 Todo 목록 갱신
+   - 활성 탭 강조 표시
 
-4. **필터링**
-   - 필터 탭 클릭: 해당 상태의 Todo만 표시
-   - 마감 임박: 3일 이내 마감 Todo
+5. **10개 더보기 버튼**
+   - 클릭 시 하단에 10건씩 추가 로드
+   - 페이지 새로고침 없이 무한 스크롤 방식
 
-5. **수동 추가**
-   - FAB 클릭: Todo 추가 모달
-   - 내용, 마감일, 우선순위 입력
+#### 디자인 요구사항
+- **액션 블록 vs 정보 블록 차별화**:
+  - 액션 가능 (체크박스, 편집 버튼): 호버 시 배경색 변경, 그림자 효과
+  - 정보 표시 (상태 뱃지, 우선순위, 기한): 정적 표시, 호버 효과 없음
+- **모바일 최적화**:
+  - 바텀시트 편집 모달 (전체 화면 X)
+  - 터치 영역 최소 44px × 44px
 
 #### 데이터 요구사항
-- **입력**: 사용자 ID
+- **입력**: 사용자 ID (내가 담당자인 Todo만 조회)
 - **출력**:
-  - Todo 목록 (상태, 내용, 담당자, 마감일, 우선순위, 회의록 링크)
-  - Todo 통계 (전체, 완료, 진행 중)
-- **연동**: Todo 서비스, Meeting 서비스
+  - Todo 목록 (제목, 상태, 담당자, 마감일, 우선순위, 회의록 제목, 회의록 ID)
+  - Todo 통계 (전체, 마감임박, 지연, 완료)
+- **연동**: Meeting 서비스 (Todo 관리 통합)
 
 #### 에러 처리
 - **Todo 로딩 실패**: "Todo 목록을 불러올 수 없습니다" + 재시도 버튼
-- **완료 처리 실패**: "완료 처리에 실패했습니다. 다시 시도해주세요"
+- **상태 변경 실패**: "상태 변경에 실패했습니다. 다시 시도해주세요"
+- **편집 저장 실패**: "저장에 실패했습니다. 다시 시도해주세요"
 - **빈 상태**: "할당된 Todo가 없습니다. 새 회의를 시작해보세요!"
 
 ---
@@ -1236,8 +1246,8 @@ graph TD
   - 작성자 및 최종 수정 시간
 
 - **탭 네비게이션** (상단, Fixed)
-  - "회의록" 탭 (기본 활성)
-  - "대시보드" 탭
+  - "대시보드" 탭 (기본 활성)
+  - "회의록" 탭
 
 - **회의록 탭 콘텐츠** (섹션별 구조)
   - 각 섹션:
@@ -1300,8 +1310,8 @@ graph TD
 
 **Tablet/Desktop (768px+)**
 - **상단**: 탭 네비게이션
-  - 회의록 (기본)
-  - 대시보드
+  - 대시보드 (기본 활성)
+  - 회의록
 - **메인 영역**:
   - 회의록 탭: 전체 회의록 내용 (섹션별 구조)
   - 대시보드 탭: 핵심내용, 결정사항, Todo 진행상황, 참고자료 (11-회의록대시보드.html 구조 참조)
@@ -1389,42 +1399,45 @@ graph TD
 - **목적**: 지난 회의록 조회 및 수정
 - **관련 유저스토리**: UFR-MEET-055, UFR-AI-040, **UFR-TODO-040 (Todo 수정)**
 - **비즈니스 중요도**: 중간
-- **접근 경로**: 대시보드 → "내 회의록" → 회의록상세조회 → "수정"
+- **접근 경로**: 10-회의록상세조회 → 하단 액션 바 "수정" 버튼 클릭
+- **권한 제어**:
+  - **검증완료 전**: 모든 참석자가 수정 가능
+  - **검증완료 후**: 회의 생성자만 수정 가능 (참석자는 "수정" 버튼 비활성화)
 
 #### 주요 기능
-1. 회의록 목록 조회 (필터링, 정렬, 검색)
+1. 회의 기본 정보 표시 및 수정
+   - 회의 제목: 수정 가능
+   - 회의 일시/장소: 읽기 전용 (회의 예약 화면에서만 변경 가능)
+   - 참석자 관리: 회의 생성자만 추가/삭제 가능
 2. 회의록 내용 수정 (섹션별)
 3. **AI 요약 수정** (섹션별)
 4. **참고자료 편집** (추가/제거)
 5. **Todo 수정 (UFR-TODO-040)** - 신규 추가 (회의 생성자만)
 6. 자동 저장 (30초 간격)
 7. 수정 이력 관리
-8. 상태 변경 (확정완료 → 작성중)
+8. 상태 변경 (검증완료 → 작성중으로 자동 변경)
 
 #### UI 구성요소
 
 **Mobile (320px~768px)**
 - **헤더**
-  - 뒤로가기 버튼
+  - 뒤로가기 버튼 (10-회의록상세조회로 이동)
   - "회의록 수정" 타이틀
   - "저장" 버튼 (Primary)
-  - 자동 저장 인디케이터
+  - 자동 저장 인디케이터 ("저장됨", "저장 중...")
 
-- **필터 및 검색** (상단)
-  - 상태 필터: 전체 / 작성중 / 확정완료
-  - 정렬: 최신순 / 회의일시순 / 제목순
-  - 검색창: 제목, 참석자, 키워드
+- **회의 기본 정보 영역**
+  - 회의 제목: 편집 가능 (텍스트 필드)
+  - 회의 일시: 읽기 전용 (📅 아이콘 + 날짜/시간 표시)
+  - 회의 장소: 읽기 전용 (📍 아이콘 + 장소명)
+  - 참석자 목록:
+    - 회의 생성자: 추가/삭제 가능 (05-회의진행 화면과 동일한 UI)
+    - 참석자: 읽기 전용 표시
+    - 각 참석자: 아바타 + 이름, 삭제(×) 버튼 (생성자는 삭제 불가)
+    - "참석자 추가" 버튼 (이메일 입력 + 초대)
+  - 회의록 상태 배지 (자동 관리)
 
-- **회의록 리스트** (목록 모드)
-  - 각 회의록 카드:
-    - 회의 제목
-    - 회의 일시
-    - 상태 배지
-    - 마지막 수정 시간
-    - 검증 완료율 (작성중인 경우)
-    - 스와이프 액션: 수정, 삭제
-
-- **수정 모드** (편집 화면)
+- **편집 화면**
   - 섹션별 편집 영역
   - 각 섹션:
     - 섹션 제목
@@ -1452,14 +1465,19 @@ graph TD
   - 자동 저장 상태 표시 ("저장됨", "저장 중...")
 
 **Tablet/Desktop (768px+)**
-- 좌측: 회의록 리스트
-- 중앙: 선택된 회의록 편집 영역
-- 우측: 수정 이력 패널
+- **헤더**: Mobile과 동일 (뒤로가기, 타이틀, 저장 버튼, 자동 저장 인디케이터)
+- **메인 영역**:
+  - 회의 기본 정보 영역 (Mobile과 동일)
+  - 편집 화면 (섹션별 편집, AI 요약, 참고자료, Todo)
+- **우측 패널** (선택사항):
+  - 수정 이력 (v2.0 고도화 예정)
+  - 미리보기
 
 #### 인터랙션
-1. **회의록 선택**
-   - 리스트에서 회의록 클릭: 편집 모드로 전환
-   - 편집 모드에서 다른 회의록 선택: 저장 확인 다이얼로그
+1. **화면 진입**
+   - 10-회의록상세조회 → "수정" 버튼 클릭
+   - 권한 확인: 검증완료 후에는 회의 생성자만 접근 가능
+   - 바로 편집 모드로 시작
 
 2. **내용 수정**
    - 텍스트 영역 클릭: 포커스 및 편집 가능
@@ -2015,6 +2033,7 @@ graph TD
 | 1.4.4 | 2025-10-23 | 강지수 | Mobile 하단 네비게이션 프로토타입 구현 기준 반영<br>- **Mobile 하단 네비게이션**: 4개 메뉴 → 3개 메뉴로 수정 (홈/회의록/Todo)<br>  - 프로필 메뉴 제거 (Desktop 사이드바의 사용자 정보 영역으로 통합)<br>  - 프로토타입 실제 구현 상태 반영 (02-대시보드.html, 09-Todo관리.html, 12-회의록목록조회.html)<br>  - 사용 화면 번호 업데이트: 08→09, 11→12<br>- **참고 사항**: 프로필 메뉴가 필요한 경우 프로토타입에 추가 구현 필요<br>- **설계서-프로토타입 일관성**: 네비게이션 구조 완전 통일 달성 |
 | 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 표시) |
 
 ---