diff --git a/.claude/settings.local.json b/.claude/settings.local.json deleted file mode 100644 index 49b8e00..0000000 --- a/.claude/settings.local.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "permissions": { - "allow": [ - "Bash(git commit:*)" - ], - "deny": [], - "ask": [] - } -} diff --git a/design/uiux/prototype/09-Todo관리.html b/design/uiux/prototype/09-Todo관리.html index 7a0b07a..757c592 100644 --- a/design/uiux/prototype/09-Todo관리.html +++ b/design/uiux/prototype/09-Todo관리.html @@ -88,27 +88,57 @@ margin-bottom: var(--space-md); } - /* 통계 카드 - 모바일에서 컴팩트하게 */ + /* 통계 카드 - 정보 표시용 (인터랙션 없음) */ .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; /* 호버 효과 제거 */ } - .stat-box.highlight { - background: var(--primary-light); - border: 2px solid var(--primary); + /* 상태별 컬러 코딩 */ + .stat-box.stat-incomplete { + background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%); /* 차분한 블루 그라데이션 */ + border-color: #90CAF9; + } + + .stat-box.stat-urgent { + background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%); /* 주의 오렌지 그라데이션 */ + border-color: #FFB74D; + } + + .stat-box.stat-overdue { + background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%); /* 긴급 레드 그라데이션 */ + border-color: #EF5350; } .stat-number { - font-size: var(--font-h2); + font-size: var(--font-h1); /* 더 크게 강조 */ font-weight: var(--font-weight-bold); - color: var(--primary); - margin-bottom: 2px; + line-height: 1.2; + margin-bottom: 4px; + } + + .stat-box.stat-incomplete .stat-number { + color: #1976D2; /* 진한 블루 */ + } + + .stat-box.stat-urgent .stat-number { + color: #F57C00; /* 진한 오렌지 */ + } + + .stat-box.stat-overdue .stat-number { + color: #D32F2F; /* 진한 레드 */ } .stat-text { font-size: var(--font-caption); - color: var(--gray-700); + color: var(--gray-600); /* 더 연하게 */ + font-weight: var(--font-weight-regular); /* 보통 굵기 */ + opacity: 0.85; } /* 원형 진행 바 - 모바일에서 축소 */ @@ -131,17 +161,17 @@ /* 데스크톱에서 통계 카드 크기 복원 */ @media (min-width: 768px) { .stat-box { - min-height: 100px; - padding: var(--space-md); + min-height: 110px; + padding: var(--space-lg); } .stat-number { - font-size: var(--font-h1); + font-size: 2.5rem; /* 더 큰 숫자 */ margin-bottom: var(--space-xs); } .stat-text { - font-size: var(--font-small); + font-size: var(--font-body); } .circular-progress { @@ -227,23 +257,26 @@ border-color: var(--primary); } - /* Todo 카드 */ + /* Todo 카드 - 컴팩트 디자인 */ .todo-card { position: relative; background: var(--white); padding: var(--space-md); border-radius: var(--radius-lg); - box-shadow: var(--shadow-md); - margin-bottom: var(--space-md); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); + margin-bottom: var(--space-sm); transition: all var(--transition-normal); + border: 1px solid var(--gray-200); } .todo-card:hover { - box-shadow: var(--shadow-lg); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); + border-color: var(--primary); } .todo-card.completed { - opacity: 0.6; + opacity: 0.5; + background: var(--gray-50); } .todo-card.completed .todo-title { @@ -251,20 +284,22 @@ color: var(--gray-500); } + /* 레이아웃: 체크박스 + 콘텐츠 */ .todo-top { display: flex; gap: var(--space-md); - margin-bottom: var(--space-md); + align-items: flex-start; } .todo-checkbox-wrapper { flex-shrink: 0; + padding-top: 2px; } .todo-checkbox { width: 24px; height: 24px; - border: 2px solid var(--gray-300); + border: 2px solid var(--gray-400); border-radius: 6px; cursor: pointer; transition: all var(--transition-fast); @@ -277,41 +312,41 @@ .todo-content-wrapper { flex: 1; + min-width: 0; /* 텍스트 오버플로우 방지 */ } - .todo-title { - font-size: var(--font-body); - font-weight: var(--font-weight-medium); - color: var(--gray-900); - margin-bottom: var(--space-sm); - } - + /* 배지 영역 */ .todo-badges { display: flex; - gap: var(--space-sm); + gap: var(--space-xs); flex-wrap: wrap; - margin-bottom: var(--space-sm); + margin-bottom: var(--space-xs); } + /* Todo 제목 */ + .todo-title { + font-size: var(--font-body); + font-weight: var(--font-weight-regular); + color: var(--gray-900); + margin-bottom: var(--space-xs); + line-height: 1.5; + } + + /* 하단 메타 정보 */ .todo-meta-row { display: flex; align-items: center; - gap: var(--space-md); + gap: var(--space-sm); font-size: var(--font-small); color: var(--gray-500); - } - - .todo-assignee { - display: flex; - align-items: center; - gap: var(--space-sm); + flex-wrap: wrap; } .todo-meeting-link { - display: flex; + display: inline-flex; align-items: center; - gap: var(--space-xs); - color: var(--primary); + gap: 4px; + color: #4CAF50; /* 연한 초록색 */ text-decoration: none; font-size: var(--font-small); cursor: pointer; @@ -319,19 +354,47 @@ } .todo-meeting-link:hover { - color: var(--primary-dark); + color: #388E3C; + text-decoration: underline; } - .todo-progress-section { - margin-top: var(--space-md); - padding-top: var(--space-md); - border-top: 1px solid var(--gray-300); + /* 담당자 정보 숨김 (간결한 디자인) */ + .todo-assignee { + display: none; } - .todo-progress-label { - font-size: var(--font-small); - color: var(--gray-700); - margin-bottom: var(--space-sm); + /* 액션 버튼 영역 */ + .todo-actions { + margin-top: var(--space-xs); + } + + /* 아이콘 버튼 */ + .icon-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + padding: 0; + background: none; + border: none; + border-radius: var(--radius-md); + color: var(--gray-600); + cursor: pointer; + transition: all var(--transition-fast); + } + + .icon-btn:hover { + background: var(--gray-100); + color: var(--primary); + } + + .icon-btn:active { + background: var(--gray-200); + } + + .icon-btn .material-icons { + font-size: 20px; } /* 빈 상태 */ @@ -463,44 +526,33 @@
-
+
0
-
전체
+
미완료
-
-
- - - - -
0%
-
-
완료율
-
-
-
0
-
진행 중
-
-
-
0
+
+
0
마감 임박
+
+
0
+
지연
+
- - +
@@ -623,28 +675,27 @@ // 통계 업데이트 function updateStats() { - const total = allTodos.length; + const total = allTodos.filter(t => t.status !== 'completed').length; // 미완료 전체 const completed = allTodos.filter(t => t.status === 'completed').length; - const inProgress = allTodos.filter(t => t.status === 'in_progress').length; const urgent = allTodos.filter(t => { const dday = calculateDday(t.dueDate); return dday >= 0 && dday <= 3 && t.status !== 'completed'; }).length; + const overdue = allTodos.filter(t => { + const dday = calculateDday(t.dueDate); + return dday < 0 && t.status !== 'completed'; + }).length; - // 카운터 애니메이션 + // 상단 통계 블록 카운터 애니메이션 animateCounter('totalTodos', total); - animateCounter('inProgressTodos', inProgress); animateCounter('urgentTodos', urgent); + animateCounter('overdueTodos', overdue); - // 완료율 원형 진행 바 - const completionRate = total > 0 ? Math.round((completed / total) * 100) : 0; - const circumference = 226; - const offset = circumference - (completionRate / 100 * circumference); - - setTimeout(() => { - $('#progressCircle').style.strokeDashoffset = offset; - $('#completionRate').textContent = `${completionRate}%`; - }, 100); + // 필터 탭 개수 업데이트 + $('#filterAllCount').textContent = allTodos.length; + $('#filterOverdueCount').textContent = overdue; + $('#filterUrgentCount').textContent = urgent; + $('#filterCompletedCount').textContent = completed; } // Todo 리스트 렌더링 @@ -655,8 +706,11 @@ // 필터 적용 if (currentFilter === 'completed') { filteredTodos = allTodos.filter(t => t.status === 'completed'); - } else if (currentFilter === 'in_progress') { - filteredTodos = allTodos.filter(t => t.status === 'in_progress'); + } else if (currentFilter === 'overdue') { + filteredTodos = allTodos.filter(t => { + const dday = calculateDday(t.dueDate); + return dday < 0 && t.status !== 'completed'; + }); } else if (currentFilter === 'urgent') { filteredTodos = allTodos.filter(t => { const dday = calculateDday(t.dueDate); @@ -702,7 +756,6 @@ onchange="toggleTodoComplete('${todo.id}', this.checked)">
-
${todo.title}
${createBadge(statusInfo.badgeText, statusInfo.badgeType)} ${createBadge( @@ -711,28 +764,17 @@ todo.priority )}
+
${todo.title}
-
- ${createAvatar(todo.assignee, 'sm')} - ${todo.assignee.name} -
- • + + 🔗 ${todo.meetingTitle} + ${formatDate(todo.dueDate)}
- - 🔗 ${todo.meetingTitle} - - ${!isCompleted && todo.progress > 0 ? ` -
-
진행률: ${todo.progress}%
- ${createProgressBar(todo.progress)} -
- ` : ''} ${!isCompleted ? `
-
` : ''} @@ -760,11 +802,11 @@ // Todo 완료 토글 function toggleTodoComplete(todoId, isChecked) { if (isChecked) { - if (confirm('이 Todo를 완료 처리하시겠습니까?')) { + // 완료 처리 + if (confirm('완료 처리하시겠습니까?')) { const todo = allTodos.find(t => t.id === todoId); if (todo) { todo.status = 'completed'; - todo.progress = 100; showToast('Todo가 완료되었습니다', 'success'); updateStats(); renderTodoList(); @@ -773,11 +815,17 @@ event.target.checked = false; } } else { - const todo = allTodos.find(t => t.id === todoId); - if (todo) { - todo.status = 'in_progress'; - updateStats(); - renderTodoList(); + // 미완료로 되돌리기 + if (confirm('미완료로 변경하시겠습니까?')) { + const todo = allTodos.find(t => t.id === todoId); + if (todo) { + todo.status = 'incomplete'; + showToast('미완료로 변경되었습니다', 'info'); + updateStats(); + renderTodoList(); + } + } else { + event.target.checked = true; } } } diff --git a/design/uiux/prototype/10-회의록상세조회.html b/design/uiux/prototype/10-회의록상세조회.html index 182f7db..035674d 100644 --- a/design/uiux/prototype/10-회의록상세조회.html +++ b/design/uiux/prototype/10-회의록상세조회.html @@ -591,8 +591,8 @@ @@ -642,7 +642,7 @@
-
+
@@ -826,7 +826,7 @@
-
+
diff --git a/design/uiux/prototype/11-회의록수정.html b/design/uiux/prototype/11-회의록수정.html index 0855c2c..fd3aff4 100644 --- a/design/uiux/prototype/11-회의록수정.html +++ b/design/uiux/prototype/11-회의록수정.html @@ -249,6 +249,17 @@ + +
@@ -267,6 +278,7 @@
+ +
📅 2025년 10월 25일 14:00 (90분) + (읽기 전용)
+
📍 본사 2층 대회의실 + (읽기 전용)
✅ diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index 5a67456..ddead8e 100644 --- a/design/uiux/uiux.md +++ b/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 하단 네비게이션 프로토타입 구현 기준 반영
- **Mobile 하단 네비게이션**: 4개 메뉴 → 3개 메뉴로 수정 (홈/회의록/Todo)
- 프로필 메뉴 제거 (Desktop 사이드바의 사용자 정보 영역으로 통합)
- 프로토타입 실제 구현 상태 반영 (02-대시보드.html, 09-Todo관리.html, 12-회의록목록조회.html)
- 사용 화면 번호 업데이트: 08→09, 11→12
- **참고 사항**: 프로필 메뉴가 필요한 경우 프로토타입에 추가 구현 필요
- **설계서-프로토타입 일관성**: 네비게이션 구조 완전 통일 달성 | | 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 표시) | --- diff --git a/design/userstory.md b/design/userstory.md index 37a65f5..6edbb47 100644 --- a/design/userstory.md +++ b/design/userstory.md @@ -1,6 +1,6 @@ -# AI기반 회의록 작성 및 이력 관리 개선 서비스 - 유저스토리 (v2.0.3) +# AI기반 회의록 작성 및 이력 관리 개선 서비스 - 유저스토리 (v2.0.5) -- [AI기반 회의록 작성 및 이력 관리 개선 서비스 - 유저스토리 (v2.0.3)](#ai기반-회의록-작성-및-이력-관리-개선-서비스---유저스토리-v203) +- [AI기반 회의록 작성 및 이력 관리 개선 서비스 - 유저스토리 (v2.0.5)](#ai기반-회의록-작성-및-이력-관리-개선-서비스---유저스토리-v205) - [차별화 전략](#차별화-전략) - [1. 기본 기능 (Hygiene Factors)](#1-기본-기능-hygiene-factors) - [2. 핵심 차별화 포인트 (Differentiators)](#2-핵심-차별화-포인트-differentiators) @@ -316,9 +316,22 @@ UFR-MEET-047: [회의록상세조회] 회의록 작성자로서 | 나는, 지난 - 각 회의록별 정보: 제목, 날짜, 관련도 %, 요약 내용 - 클릭 시 해당 회의록으로 이동 + [탭 네비게이션] + - **탭 구성**: 대시보드 / 회의록 (2개 탭) + - **기본 노출**: 대시보드 탭 우선 노출 + - **탭 전환**: 클릭 시 콘텐츠 전환, URL 변경 없음 + - **대시보드 탭 내용**: + - 핵심내용 (주요 포인트 요약) + - 결정사항 + - Todo 진행상황 + - 관련회의록 + - **회의록 탭 내용**: + - 섹션별 상세 내용 + - AI 요약 + - 관련회의록 + [부가 기능] - 회의록 수정 버튼 (수정 권한이 있는 경우만 활성화) - - 탭 네비게이션 (회의록/대시보드) - 뒤로가기 버튼 (회의록 목록으로 복귀) - 더보기 메뉴 (다운로드, 삭제 등) @@ -336,10 +349,15 @@ UFR-MEET-047: [회의록상세조회] 회의록 작성자로서 | 나는, 지난 --- -UFR-MEET-055: [회의록수정] 회의록 작성자로서 | 나는, 검증이 완료되지 않았거나 수정이 필요한 | 지난 회의록을 수정하고 싶다. +UFR-MEET-055: [회의록수정] 회의 참석자로서 | 나는, 검증이 완료되지 않았거나 수정이 필요한 | 지난 회의록을 수정하고 싶다. +- **화면번호**: 11-회의록수정 - 시나리오: 지난 회의록 수정 회의록 상세 화면에서 수정 버튼을 클릭하면 | 회의록 수정 화면으로 이동하고 | 내용을 수정할 수 있다. + [진입 경로] + - 10-회의록상세조회 화면 → 하단 액션 바 "수정" 버튼 클릭 + - 권한이 있는 경우에만 "수정" 버튼 활성화 + [수정 가능 항목] - ✅ **회의 제목**: 수정 가능 - ❌ **회의 일시**: 수정 불가 (readonly, 회의 예약 화면에서만 변경 가능) @@ -366,10 +384,16 @@ UFR-MEET-055: [회의록수정] 회의록 작성자로서 | 나는, 검증이 - 취소 시 이전 상태로 복원 [권한 제어] - - 본인이 작성한 회의록만 수정 가능 (회의 생성자) + **검증완료 전 (작성중/초안 상태)** + - 모든 참석자가 회의록 수정 가능 + - 모든 섹션 편집 가능 (검증완료 섹션 없음) + - 참석자 관리: 회의 생성자만 가능 + + **검증완료 후** + - 회의 생성자만 회의록 수정 가능 + - 참석자는 "수정" 버튼 비활성화 (조회만 가능) - 검증완료 섹션: 회의 생성자만 잠금 해제 후 수정 가능 - - 참석자: 검증완료 섹션은 읽기 전용으로 표시 - - 조회 전용 권한인 경우 수정 버튼 비활성화 + - 수정 시 회의록 상태는 '작성중'으로 자동 변경 (재검증 필요) - M/13 @@ -891,62 +915,87 @@ UFR-TODO-030: [Todo완료처리] Todo 담당자로서 | 나는, 완료된 Todo --- -UFR-TODO-040: [Todo수정] Todo 담당자 또는 회의 생성자로서 | 나는, Todo 내용을 변경하기 위해 | 회의록 확정 전후에 Todo를 수정하고 싶다. -- 시나리오: Todo 수정 - Todo 목록에서 수정이 필요한 상황에서 | 담당자 또는 회의 생성자가 Todo 수정 버튼을 클릭하면 | Todo 내용, 담당자, 마감일, 우선순위를 변경할 수 있다. +UFR-TODO-040: [Todo관리] Todo 담당자로서 | 나는, 나의 Todo를 효율적으로 관리하기 위해 | Todo 목록을 조회하고 상태를 변경하고 편집하고 싶다. +- 시나리오: Todo 관리 화면 조회 및 관리 + 09-Todo관리 화면에 접근하면 | 나의 Todo(내가 담당자인 Todo) 목록이 표시되고 | 필터링, 상태 변경, 편집이 가능하다. [화면 정보] - 화면번호: 09-Todo관리 - 프로토타입: design/uiux/prototype/09-Todo관리.html - [수정 가능 항목] - - Todo 제목 (문구) - - 담당자 (드롭다운 선택) - - 마감일 (날짜 선택기) - - 우선순위 (high/medium/low) + [대전제] + - Todo의 상태는 완료/미완료만 존재 + - 09-Todo관리 화면에서는 나의 Todo(내가 담당자인 Todo)만 표시 - [수정 시점] - - **회의록 확정 전**: 회의 진행 중(05-회의진행) 또는 회의 종료 전(07-회의종료)에서 수정 가능 - - **회의록 확정 후**: Todo 관리 화면(09-Todo관리) 또는 회의록 수정 화면(11-회의록수정)에서 수정 가능 + [화면 구성] + **1. 상단 통계 블록** + - 전체: 미완료 전체 개수 + - 마감임박: 기한 3일 이내 미완료 개수 + - 지연: 기한이 지난 미완료 개수 + + **2. 필터링 기준** + - 전체(개수): 완료/미완료 전체 + - 지연(개수): 기한이 지난 미완료 + - 마감임박(개수): 기한 3일 이내 미완료 + - 완료(개수): 완료된 Todo + + **3. Todo 리스트 블록** + - 정렬: 미완료 → 완료 순서, 기한일 오래된 순 (복합 정렬) + - 표시 항목: + - 체크박스 (완료/미완료 토글) + - Todo 제목 + - 상태 뱃지: D+n(지연) / D-day / D-n / 완료 + - 우선순위 뱃지: 높음 / 보통 / 낮음 + - 기한 + - 회의록 제목 + 링크 (해당 Todo가 속한 회의록 상세로 이동) + - 편집 버튼 (권한 있는 경우에만 노출) + - 페이징: 최초 10건 노출, 10건 이상일 경우 하단에 "10개 더보기" 버튼 표시 + + **4. 편집 모달** + - 제목 (input) + - 담당자 (해당 회의록 참석자 중 select) - 회의 생성자만 변경 가능 + - 마감일 (달력) + - 우선순위 (높음/보통/낮음 select) + + [UI/UX 요구사항] + - **디자인 차별화**: 액션 가능한 블록(체크박스, 편집 버튼)과 정보 표시 블록은 시각적으로 구분 + - **체크박스 동작**: + - 체크박스 클릭 시 "완료 처리하시겠습니까?" 확인 모달 표시 + - 확인 시 완료 처리, 취소 시 이전 상태 유지 + - 미완료로 되돌릴 때도 "미완료로 변경하시겠습니까?" 확인 모달 표시 + - **편집 버튼**: 담당자 본인 OR 회의 생성자인 경우에만 노출 + - **편집 모달**: 모바일에서는 바텀시트 형식으로 표시 + - **회의록 링크**: 클릭 시 10-회의록상세조회 화면으로 이동 (대시보드 탭 우선 노출) [권한 제어] - - **Todo 담당자**: 본인에게 할당된 Todo만 수정 가능 (09-Todo관리) + - **Todo 담당자**: 본인에게 할당된 Todo만 편집 가능 - 수정 가능 항목: 제목, 마감일, 우선순위 - - 담당자 변경 불가 (본인 담당 Todo) - - **회의 생성자**: 해당 회의의 모든 Todo 수정 가능 (11-회의록수정) + - 담당자 변경 불가 + - **회의 생성자**: 해당 회의의 모든 Todo 편집 가능 (11-회의록수정 화면에서) - 수정 가능 항목: 제목, 담당자, 마감일, 우선순위 - 담당자 변경 가능 - [수정 인터페이스] - - 09-Todo관리: 각 Todo 항목에 "편집" 버튼 표시 - - 클릭 시 인라인 편집 모드 또는 수정 모달 표시 - - 수정 완료 후 "저장" 버튼 클릭 - - 11-회의록수정: "액션 아이템(Todo)" 섹션에서 수정 - - 회의록 수정 시 Todo 섹션도 편집 가능 - - Todo 추가/삭제/수정 모두 가능 - [처리 결과] - - Todo 정보 업데이트 - - 수정 시간 기록 - - 수정자 정보 저장 - - 회의록에 수정 내용 실시간 반영 - - 담당자 변경 시 이전 담당자와 새 담당자에게 알림 발송 - - 마감일 변경 시 캘린더 자동 업데이트 - - [알림 발송] - - 담당자 변경 시: 이전 담당자 및 새 담당자에게 알림 - - 마감일 변경 시: 담당자에게 알림 (캘린더 업데이트) - - 제목/우선순위 변경 시: 담당자에게 알림 (변경 사항 안내) + - Todo 상태 변경 시: + - 완료/미완료 상태 즉시 업데이트 + - 통계 블록 갱신 + - 리스트 재정렬 + - Todo 편집 저장 시: + - Todo 정보 업데이트 + - 수정 시간 기록 + - 회의록에 수정 내용 실시간 반영 + - 담당자 변경 시 이전/새 담당자에게 알림 발송 + - 마감일 변경 시 캘린더 자동 업데이트 [Policy/Rule] - - 담당자는 본인 Todo만 수정 가능 (담당자 변경 불가) - - 회의 생성자는 모든 Todo 수정 가능 (담당자 변경 가능) - - 확정 전/후 모두 수정 가능 - - 수정 시 회의록에 즉시 반영 + - 필터별 개수 표시로 사용자가 전체 보기 여부 판단 가능 + - 체크박스 토글 시 확인 액션 필수 (실수 방지) + - 편집 권한 없는 Todo는 편집 버튼 미노출 [비고] - - 회의록 확정 후에도 유연한 Todo 관리 가능 - - 인사 이동, 우선순위 변경, 일정 조정 등 실무 요구사항 반영 + - 진행률 표시 제거 (상태는 완료/미완료만) + - 날짜별 그룹핑은 v2.0 고도화 시 고려 + - Todo 하이라이트 기능은 v2.0 고도화 시 고려 - M/13 @@ -1046,5 +1095,6 @@ UFR-TODO-040: [Todo수정] Todo 담당자 또는 회의 생성자로서 | 나는 | 2.0.2 | 2025-10-23 | 강지수, 도그냥 | Todo 수정 기능 추가 (UFR-TODO-040)
- 회의록 확정 전/후 Todo 수정 기능 추가
- 권한별 수정 범위: 담당자(본인 Todo만), 회의 생성자(모든 Todo)
- 수정 항목: 제목, 담당자, 마감일, 우선순위
- 09-Todo관리, 11-회의록수정 화면에서 수정 가능 | | 2.0.3 | 2025-10-23 | 강지수 (Product Designer) | 회의록 수정 항목 정책 명확화 (UFR-MEET-055)
- 회의 일시/장소: readonly 처리 (회의 예약 화면에서만 변경 가능)
- 참석자 관리: 회의 생성자만 추가/삭제 가능 (11-회의록수정 화면에서 직접 관리)
- 참석자 UI: 05-회의진행 화면과 동일한 방식으로 구현
- 프로토타입: 11-회의록수정.html에 참석자 관리 섹션 추가 | | 2.0.4 | 2025-10-23 | 강지수 (Product Designer) | 검증완료 섹션 잠금해제 정책 단순화
- **정책 변경**: 검증완료 섹션은 회의 생성자만 잠금 해제 후 수정 가능 (참석자는 수정 불가)
- **제거**: 참석자용 잠금해제 요청 기능 완전 제거 (공수 절감)
- UFR-MEET-055: 권한 제어 명확화 (생성자만 잠금 해제 가능)
- UFR-COLLAB-030: 섹션 잠금 기능 설명 업데이트
- 프로토타입 11-회의록수정.html: 잠금해제요청 버튼 제거, 검증완료 섹션 읽기 전용 표시 | +| 2.0.5 | 2025-10-23 | 강지수 (Product Designer), 도그냥 (Service Planner) | Todo 및 회의록 관련 요구사항 재정의
- **UFR-TODO-040 (09-Todo관리)**: "Todo수정" → "Todo관리" 기능 확장
- 통계 블록 재정의: 전체(미완료), 마감임박(3일 이내), 지연(기한 경과)
- 필터링: 전체, 지연, 마감임박, 완료 (각 필터에 개수 표시)
- 체크박스 확인 모달: 완료/미완료 전환 시 확인
- 권한: 담당자 본인 OR 회의록 작성자만 편집 가능
- **UFR-MEET-047 (10-회의록상세조회)**: 탭 순서 및 기본 노출 변경
- 탭 구성: 대시보드 / 회의록
- 기본 노출: 대시보드 탭 우선 노출 (기존: 회의록 우선)
- **UFR-MEET-055 (11-회의록수정)**: 진입 경로 및 권한 제어 명확화
- 진입 경로: 10-회의록상세조회 → "수정" 버튼 클릭
- 권한 제어: 검증완료 전(모든 참석자), 검증완료 후(회의 생성자만)
- 회의 일시/장소: 읽기 전용 표시 명시 | --- \ No newline at end of file