` 태그로 구조화
4. 성공 토스트 표시: "논의사항에 AI 제안이 추가되었습니다"
5. 자동으로 논의사항 탭(섹션 1)으로 전환 (switchSection(1))
6. 제안 카드 숨김 처리 (display: none)
- "수정" 버튼: 제안을 거부하고 카드 숨김
- **결정사항 제안 카드**: 제안 내용 + "결정사항에 적용" 버튼
- 제안 구조:
- 제목: "개발 일정 최종 확정" (strong)
- 내용: 확정된 결정사항 (bullet points)
- "결정사항에 적용" 클릭 시:
1. 결정사항 섹션(section-2)의 content-2 영역에 제안 내용 추가
2. 기존 내용 하단에 ` ` 태그로 구조화
4. 성공 토스트 표시: "결정사항에 AI 제안이 추가되었습니다"
5. 자동으로 결정사항 탭(섹션 2)으로 전환 (switchSection(2))
6. 제안 카드 숨김 처리 (display: none)
- "수정" 버튼: 제안을 거부하고 카드 숨김
- **액션아이템 제안 카드**: 제안 내용 + "3개 Todo 생성" 버튼
- 제안 구조:
- 헤더: "📋 액션 아이템(Todo) 자동 추출"
- 내용: 3개의 Todo 항목 (제목, 담당자, 마감일)
- "3개 Todo 생성" 클릭 시:
1. 액션아이템 섹션(section-3)의 content-3 영역에 Todo 항목 추가
2. **중복 체크**: 기존 Todo 목록에서 동일한 제목이 있는지 확인
3. 중복되지 않은 Todo만 추가 (Set 자료구조 활용)
4. Todo HTML 구조: checkbox + 제목 + 담당자/마감일 + 우선순위 배지
5. 성공 토스트 표시: "N개의 액션아이템이 추가되었습니다 (중복 제외)"
6. 중복된 항목이 있으면: "모든 항목이 이미 존재합니다" (info 토스트)
7. 자동으로 액션아이템 탭(섹션 3)으로 전환 (switchSection(3))
8. 제안 카드 숨김 처리 (display: none)
- "수정" 버튼: 제안을 거부하고 카드 숨김
- **용어 사전 탭**: 회의에서 언급된 전문용어 설명
- 용어 카드 (민트 그린 배경): 용어명 + 간단한 정의
- 카드 클릭 → 확장하여 상세 설명 표시
- 상세 설명: 이 회의에서의 의미, 관련 회의록 링크
- **관련 자료 탭**: AI가 찾은 관련 회의록 (32건)
- 회의록 링크 클릭 → **새 탭(target="_blank")에서 해당 회의록 열기**
- **녹음 중인 페이지 이탈 방지**: 모든 링크는 새 탭으로 열림
- 관련도 표시: 퍼센트 또는 별점으로 시각화
3. **회의 종료**
- 헤더의 "회의 종료" 버튼 클릭
- 확인 다이얼로그 표시: "회의를 종료하시겠습니까?"
- 확인 → 회의 종료 처리 및 07-회의종료.html로 이동
4. **실시간 업데이트**
- STT 음성 인식 결과 실시간 반영 (3-5초 주기)
- 모든 참석자의 편집 내용 실시간 동기화
- 수정 사항 하이라이트 표시 (3초간)
#### 데이터 요구사항
- **입력**:
- 회의 ID
- 오디오 스트림 (실시간 STT용)
- 사용자 편집 내용 (텍스트 입력)
- **출력**:
- 실시간 텍스트 변환 결과 (STT)
- 편집된 회의록 내용
- **AI 제안 목록** (회의록 개선 제안)
- **전문용어 및 설명** (용어 사전)
- **관련 회의록 목록** (32건, 관련도 포함)
- 참석자 목록 및 상태
- **연동**:
- STT 서비스 (UFR-AI-010)
- AI 서비스 (AI 제안 생성, UFR-AI-040)
- RAG 서비스 (관련 회의록 검색)
- Collaboration 서비스 (실시간 동기화)
#### 에러 처리
- **마이크 권한 거부**: "마이크 권한이 필요합니다" 토스트 + 설정 안내 링크
- **STT 실패**: "음성 인식에 실패했습니다. 수동으로 입력해주세요" 토스트
- **AI 제안 생성 실패**: "AI 제안을 불러올 수 없습니다" 토스트 (편집은 계속 가능)
- **관련 자료 검색 실패**: "관련 회의록을 찾을 수 없습니다" 메시지 표시
- **동기화 실패**: "네트워크 연결을 확인해주세요. 내용은 로컬에 저장됩니다" 토스트
- **편집 충돌**: "다른 참석자가 동일한 부분을 수정 중입니다" 다이얼로그 + 병합 옵션
- **회의 종료 실패**: "회의 종료 중 오류가 발생했습니다" 토스트 + 재시도 버튼
---
### 06-검증완료
#### 개요
- **목적**: 회의록 섹션별 내용 검증 및 완료 표시
- **관련 유저스토리**: UFR-COLLAB-030
- **비즈니스 중요도**: 중간
- **접근 경로**: 회의진행 화면 내 또는 회의종료 전
#### 주요 기능
1. 섹션별 검증 상태 표시
2. 검증 완료 체크 (참석자별)
3. 미검증 섹션 안내
4. 섹션 잠금 (회의 생성자만)
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- "검증 완료" 타이틀
- 진행률 바 (전체 섹션 대비 검증 완료 비율)
- **섹션 리스트**
- 각 섹션 카드:
- 섹션 이름
- 검증 상태 아이콘 (✓ 완료 / ○ 미완료)
- 검증자 아바타 (여러 명 가능)
- "검증 완료" 버튼
- 잠금 아이콘 (회의 생성자가 잠근 경우)
- **하단 액션**
- "모두 검증 완료" 버튼 (모든 섹션 검증 시 활성화)
- "나중에 하기" 버튼
**Tablet/Desktop (768px+)**
#### 인터랙션
1. **섹션 검증**
- "검증 완료" 버튼 클릭 → 확인 다이얼로그
- 검증 완료 시: 체크 아이콘 표시, 검증자 아바타 추가
- 실시간 동기화: 다른 참석자에게 즉시 반영
2. **섹션 잠금**
- 검증 완료된 섹션에 잠금 아이콘 표시
- 잠긴 섹션은 수정 불가
- 잠금 해제 가능(회의생성자만)
3. **진행률 표시**
- 상단 진행률 바: 실시간 업데이트
- 100% 완료 시: "모두 검증 완료" 버튼 활성화
4. **내용 수정**
- 회의 개요 : 보기 레이어 내에서 편집 가능(회의생성자만)
- 개요 외 항목: 편집시도시 회의록수정화면으로 이동
5. **나중에 하기**
- "나중에 하기" 버튼 클릭 → 확인 다이얼로그
- 확인 시:
- 회의록 상태를 '작성중'으로 임시 저장
- "회의록이 임시 저장되었습니다" 토스트 메시지 표시
- 1초 후 02-대시보드 화면으로 이동
- 이후 12-회의록목록조회에서 '작성중' 상태로 조회 가능
- 언제든지 회의록 수정 화면에서 검증 재개 가능
#### 데이터 요구사항
- **입력**: 회의 ID, 섹션 목록
- **출력**: 섹션별 검증 상태, 검증자 정보
- **연동**: Collaboration 서비스
#### 에러 처리
- **검증 실패**: "검증 처리에 실패했습니다. 다시 시도해주세요"
- **동기화 실패**: "다른 참석자의 검증 상태를 불러올 수 없습니다"
---
### 07-회의종료
#### 개요
- **목적**: 회의 통계 표시 및 최종 회의록 확정
- **관련 유저스토리**: UFR-MEET-040, UFR-MEET-050, UFR-AI-020
- **비즈니스 중요도**: 높음
- **접근 경로**: 회의진행 → "회의 종료" 버튼
#### 주요 기능
1. 회의 통계 표시 (시간, 참석자, 발언 횟수 등)
2. 주요 키워드 클라우드
3. AI 자동 추출된 Todo 항목 확인
4. 최종 회의록 확정
5. 다음 액션 선택 (공유, 수정, 대시보드 복귀)
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- "회의가 종료되었습니다" 메시지
- 회의 제목
- **통계 카드**
- 회의 총 시간
- 참석자 수
- 주요 키워드 (태그 클라우드)
- 발언 통계 (화자별 발언 횟수 및 시간 - 바 차트)
- **AI Todo 추출 결과**
- "AI가 추출한 Todo" 섹션
- Todo 항목 리스트:
- Todo 내용
- 담당자 (자동 식별 또는 수동 지정)
- 마감일 (있는 경우)
- "Todo 수정" 버튼
- **최종 확정 섹션**
- "최종 회의록 확정" 버튼 (Primary)
- 필수 항목 체크리스트:
- ✓ 회의 제목 작성
- ✓ 참석자 목록 작성
- ✓ 주요 논의 내용 작성
- ✓ 결정 사항 작성
- **하단 액션**
- "회의록 공유하기" 버튼
- "회의록 수정하기" 버튼
- "대시보드로 돌아가기" 버튼
**Tablet/Desktop (768px+)**
- 상단: 통계 카드 (Grid Layout)
- 중앙: AI Todo 추출 결과
- 하단: 최종 확정 및 액션 버튼
#### 인터랙션
1. **통계 표시**
- 애니메이션 효과로 숫자 카운트업
- 차트는 페이드인 효과
2. **Todo 확인 및 수정**
- Todo 항목 클릭: 상세 편집 모달
- 담당자 변경, 마감일 설정 가능
- "Todo 추가" 버튼으로 수동 추가
3. **최종 확정**
- "최종 회의록 확정" 클릭:
- 필수 항목 검사
- 누락 시: 해당 섹션으로 이동 안내
- 완료 시: 확정 확인 다이얼로그
- 확정 후: Todo 자동 할당, 캘린더 연동
#### 데이터 요구사항
- **입력**: 회의 ID
- **출력**:
- 회의 통계 (시간, 참석자 수, 발언 통계, 키워드)
- AI 추출 Todo 목록
- 확정 회의록 버전 ID
- **연동**: Meeting 서비스, AI 서비스, Todo 서비스
#### 에러 처리
- **통계 생성 실패**: "통계를 생성할 수 없습니다" + 건너뛰기 옵션
- **Todo 추출 실패**: "AI Todo 추출에 실패했습니다. 수동으로 추가해주세요"
- **필수 항목 누락**: "필수 항목을 작성해주세요" + 해당 섹션으로 이동
- **확정 실패**: "회의록 확정에 실패했습니다. 다시 시도해주세요"
---
### 09-Todo관리
#### 개요
- **목적**: 할당된 Todo 목록 조회 및 진행 상황 관리
- **관련 유저스토리**: UFR-TODO-010, UFR-TODO-030, **UFR-TODO-040 (Todo 수정)**
- **비즈니스 중요도**: 높음
- **접근 경로**: 대시보드 → 하단 네비게이션 "Todo" 또는 대시보드 "내 Todo" 카드 → "전체 보기"
#### 주요 기능
1. Todo 목록 표시 (상태별 필터링)
2. **Todo 수정 (UFR-TODO-040)** - 신규 추가
3. Todo 완료 처리
4. 회의록 원문으로 이동 (양방향 연결)
5. Todo 진행 상황 통계
6. 마감 임박 Todo 알림
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- "내 Todo" 타이틀
- 필터 버튼 (상태별)
- **통계 카드**
- 전체 Todo 개수
- 완료율 (원형 진행 바)
- 마감 임박 Todo 개수 (배지)
- **필터 탭**
- 전체, 진행 중, 완료, 마감 임박
- **Todo 리스트**
- 각 Todo 카드:
- 체크박스 (완료 처리)
- Todo 내용
- 마감일 (색상 코딩: 초록-여유, 노랑-임박, 빨강-지연)
- 우선순위 배지 (높음/보통/낮음)
- 관련 회의록 링크 아이콘
- **"편집" 버튼** (본인 담당 Todo만 표시) - 신규
- 스와이프 액션: 수정, 삭제
- **FAB** (Floating Action Button)
- "Todo 추가" (수동 추가)
**Tablet/Desktop (768px+)**
- 좌측: Todo 리스트
- 우측: 선택된 Todo 상세 정보
- Todo 내용
- 담당자
- 마감일
- 우선순위
- 관련 회의록 섹션 (임베디드 뷰)
- 진행 메모 (추가 가능)
#### 인터랙션
1. **Todo 수정 (UFR-TODO-040)** - 신규 추가
- **편집 버튼 클릭**:
- 인라인 편집 모드로 전환 또는 수정 모달 표시
- **수정 가능 항목** (담당자 권한):
- ✏️ Todo 제목 (문구)
- 📅 마감일 (날짜 선택기)
- 🎯 우선순위 (high/medium/low 드롭다운)
- ❌ 담당자 변경 불가 (본인 담당 Todo)
- **저장 버튼**: 수정 완료
- **취소 버튼**: 편집 모드 취소
- **수정 완료 시**:
- "Todo가 수정되었습니다" 토스트 메시지
- 회의록에 수정 내용 실시간 반영
- 마감일 변경 시 캘린더 자동 업데이트
- **권한 제어**:
- 본인에게 할당된 Todo만 편집 버튼 표시
- 다른 사람의 Todo는 조회만 가능 (편집 버튼 숨김)
2. **Todo 완료 처리**
- 체크박스 클릭:
- 확인 다이얼로그 ("완료 처리하시겠습니까?")
- 완료 시: 체크 애니메이션, 회의록에 실시간 반영
- 완료 Todo는 리스트 하단으로 이동 (취소선)
3. **회의록 연결**
- 회의록 링크 아이콘 클릭:
- 회의록상세조회 화면으로 이동
- 해당 Todo가 언급된 섹션으로 자동 스크롤
- 하이라이트 효과
4. **필터링**
- 필터 탭 클릭: 해당 상태의 Todo만 표시
- 마감 임박: 3일 이내 마감 Todo
5. **수동 추가**
- FAB 클릭: Todo 추가 모달
- 내용, 마감일, 우선순위 입력
#### 데이터 요구사항
- **입력**: 사용자 ID
- **출력**:
- Todo 목록 (상태, 내용, 담당자, 마감일, 우선순위, 회의록 링크)
- Todo 통계 (전체, 완료, 진행 중)
- **연동**: Todo 서비스, Meeting 서비스
#### 에러 처리
- **Todo 로딩 실패**: "Todo 목록을 불러올 수 없습니다" + 재시도 버튼
- **완료 처리 실패**: "완료 처리에 실패했습니다. 다시 시도해주세요"
- **빈 상태**: "할당된 Todo가 없습니다. 새 회의를 시작해보세요!"
---
### 10-회의록상세조회
#### 개요
- **목적**: 지난 회의록의 전체 내용 및 상세 정보 확인
- **관련 유저스토리**: UFR-MEET-047, UFR-AI-040
- **비즈니스 중요도**: 중간
- **접근 경로**: 대시보드 → "내 회의록" 항목 클릭 또는 Todo관리 → 회의록 링크
#### 주요 기능
1. 회의 기본 정보 표시
2. **섹션별 AI 요약 표시** (섹션 최상단)
3. 섹션별 상세 내용 표시
4. **참고자료 표시** (섹션 하단)
5. Todo 항목 및 진행 상황 표시
6. 첨부파일 다운로드
7. 회의록 수정/공유 액션
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- 뒤로가기 버튼
- 회의 제목
- 메뉴 버튼 (수정, 삭제)
- **기본 정보 카드**
- 회의 일시
- 참석자 아바타 및 이름 (역할 구분)
- 회의 장소
- 회의록 상태 배지 (작성중/확정완료)
- 작성자 및 최종 수정 시간
- **탭 네비게이션** (상단, Fixed)
- "회의록" 탭 (기본 활성)
- "대시보드" 탭
- **회의록 탭 콘텐츠** (섹션별 구조)
- 각 섹션:
- 섹션 제목
- 검증 완료 배지 (검증된 경우)
- **AI 회의 내용 요약 영역** (섹션 최상단, 강조 박스)
- 요약 아이콘 (💡)
- AI 자동 생성 요약 (2-3문장)
- 요약 생성/수정 시간
- "수정" 버튼 (권한 있는 경우)
- 섹션 내용 (마크다운 렌더링)
- **참고자료 영역** (섹션 하단, 별도 영역)
- "참고자료" 라벨
- 관련 회의록 링크 리스트 (최대 3개):
- 링크 아이콘 (📄)
- 회의 제목 (클릭 가능)
- 회의 날짜
- 관련도 표시 (퍼센트, 색상 코딩)
- 1-2줄 요약
- "더보기" 버튼 (3개 초과 시)
- 접기/펼치기 버튼 (선택)
- **대시보드 탭 콘텐츠** (11-회의록대시보드.html 구조 참조)
- **핵심내용 섹션** (💡)
- 번호 매김된 핵심 포인트 (4-5개)
- 주요 키워드 태그 클라우드
- 회의 통계 (참석자 수, 시간, 발언 횟수, 주요 의제 수)
- **결정사항 섹션** (✅)
- 결정사항 카드 리스트
- 각 카드: 결정 내용 + 결정자 + 시간 + 배경 설명
- **Todo 진행상황 섹션** (📋)
- 상태별 필터 탭 (전체/시작 전/진행 중/완료)
- 담당자별 그룹화
- 각 Todo: 제목 + 진행률 바 + 마감일 + 우선순위 배지
- **참고자료 섹션** (📚)
- 참고자료 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
- 각 참고자료 카드:
- 아이콘 + 제목 + 메타정보 (날짜, 작성자)
- 관련도 점수 배지 (92%, 88% 등)
- 2-3줄 요약
- **Todo 섹션** (강조)
- Todo 항목 리스트:
- 체크박스 (완료/미완료)
- Todo 내용
- 담당자 이름
- 마감일
- 우선순위 배지
- **첨부파일 섹션**
- 파일 아이콘 + 파일명
- 다운로드 버튼
- **하단 액션 바** (Fixed)
- "수정" 버튼 (권한 있는 경우만)
- "공유" 버튼
**Tablet/Desktop (768px+)**
- **상단**: 탭 네비게이션
- 회의록 (기본)
- 대시보드
- **메인 영역**:
- 회의록 탭: 전체 회의록 내용 (섹션별 구조)
- 대시보드 탭: 핵심내용, 결정사항, Todo 진행상황, 참고자료 (11-회의록대시보드.html 구조 참조)
#### 인터랙션
1. **탭 전환**
- "회의록" 탭: 전체 회의록 내용 표시 (섹션별 구조)
- "대시보드" 탭: 핵심내용, 결정사항, Todo, 참고자료 요약 표시
- 탭 전환 시 URL 변경 없이 클라이언트 사이드 렌더링
2. **회의록 탭 인터랙션**
- **섹션 네비게이션**: 섹션 제목 클릭 → 해당 섹션으로 스크롤
- **접기/펼치기**: 긴 내용은 초기 접힌 상태, 클릭으로 펼침
- **AI 요약 편집**:
- "수정" 버튼 클릭 (권한 있는 경우) → 인라인 편집 모드
- 수정 내용 자동 저장 (30초 간격)
- 실시간 동기화
- **참고자료 링크**:
- 회의록 링크 클릭 → 새 탭에서 해당 회의록 열기
- 관련도 색상 코딩: 90%+ (초록), 70-89% (노랑), 70% 미만 (회색)
- "더보기" 클릭 → 전체 참고자료 목록 모달
3. **대시보드 탭 인터랙션**
- **핵심내용 섹션**:
- 키워드 태그 클릭 → 해당 키워드 관련 섹션으로 스크롤
- 통계 항목 클릭 → 상세 정보 툴팁 표시
- **결정사항 섹션**:
- 결정사항 카드 클릭 → 회의록 탭의 해당 섹션으로 이동
- 배경 설명 접기/펼치기
- **Todo 진행상황**:
- 필터 탭 클릭 → 해당 상태의 Todo만 표시
- Todo 카드 클릭 → Todo관리 화면으로 이동
- 진행률 바: 실시간 업데이트
- **참고자료 섹션**:
- 탭 전환 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
- 참고자료 카드 클릭 → 해당 문서로 이동
- 관련도 점수: 배지로 표시 (92%, 88% 등)
4. **Todo 인터랙션**
- Todo 체크박스: 완료 처리 (권한 있는 경우)
- Todo 클릭: Todo관리 화면으로 이동
5. **첨부파일 다운로드**
- 파일명 클릭: 다운로드 시작
- 진행 상황 표시
6. **수정 및 공유**
- "수정" 버튼: 회의록수정 화면으로 이동
- "공유" 버튼: 회의록공유 화면으로 이동
#### 데이터 요구사항
- **입력**: 회의록 ID, 활성 탭 (회의록/대시보드/타임라인)
- **출력**:
- **회의 기본 정보**: 제목, 일시, 참석자, 장소, 상태, 작성자, 수정 시간
- **섹션별 AI 요약**: 자동 생성 요약, 수정 이력
- **섹션별 내용**: 마크다운 형식
- **참고자료 목록**:
- 관련 회의록 (제목, 날짜, 관련도, 요약)
- 프로젝트 문서 (제목, 작성자, 관련도)
- 이슈 트래커 링크
- 위키 페이지 링크
- **대시보드 데이터** (대시보드 탭 선택 시):
- 핵심내용 (4-5개 포인트)
- 주요 키워드
- 회의 통계 (참석자 수, 시간, 발언 횟수, 의제 수)
- 결정사항 리스트 (결정 내용, 결정자, 시간, 배경)
- Todo 진행상황 (담당자별 그룹, 진행률)
- **Todo 목록 및 진행 상황**
- **첨부파일 목록**
- **연동**: Meeting 서비스, AI 서비스 (UFR-AI-040), Todo 서비스
#### 에러 처리
- **회의록 로딩 실패**: "회의록을 불러올 수 없습니다" + 재시도 버튼
- **AI 요약 로딩 실패**: "요약을 불러올 수 없습니다" (섹션 내용은 정상 표시)
- **참고자료 로딩 실패**: "참고자료를 불러올 수 없습니다" (빈 상태 표시)
- **대시보드 데이터 로딩 실패**: "대시보드를 불러올 수 없습니다" + 재시도 버튼
- **권한 없음**: "수정" 버튼 비활성화, "조회 권한만 있습니다" 메시지
- **첨부파일 다운로드 실패**: "파일 다운로드에 실패했습니다"
---
### 11-회의록수정
#### 개요
- **목적**: 지난 회의록 조회 및 수정
- **관련 유저스토리**: UFR-MEET-055, UFR-AI-040, **UFR-TODO-040 (Todo 수정)**
- **비즈니스 중요도**: 중간
- **접근 경로**: 대시보드 → "내 회의록" → 회의록상세조회 → "수정"
#### 주요 기능
1. 회의록 목록 조회 (필터링, 정렬, 검색)
2. 회의록 내용 수정 (섹션별)
3. **AI 요약 수정** (섹션별)
4. **참고자료 편집** (추가/제거)
5. **Todo 수정 (UFR-TODO-040)** - 신규 추가 (회의 생성자만)
6. 자동 저장 (30초 간격)
7. 수정 이력 관리
8. 상태 변경 (확정완료 → 작성중)
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- 뒤로가기 버튼
- "회의록 수정" 타이틀
- "저장" 버튼 (Primary)
- 자동 저장 인디케이터
- **필터 및 검색** (상단)
- 상태 필터: 전체 / 작성중 / 확정완료
- 정렬: 최신순 / 회의일시순 / 제목순
- 검색창: 제목, 참석자, 키워드
- **회의록 리스트** (목록 모드)
- 각 회의록 카드:
- 회의 제목
- 회의 일시
- 상태 배지
- 마지막 수정 시간
- 검증 완료율 (작성중인 경우)
- 스와이프 액션: 수정, 삭제
- **수정 모드** (편집 화면)
- 섹션별 편집 영역
- 각 섹션:
- 섹션 제목
- **AI 요약 편집 영역**
- 요약 텍스트 편집 필드
- "AI 재생성" 버튼 (요약 다시 생성)
- 마지막 수정 시간 표시
- 편집 가능한 텍스트 영역
- **참고자료 편집 영역**
- 기존 참고자료 목록 (제거 버튼 포함)
- "참고자료 추가" 버튼
- 회의록 검색 및 선택 UI
- **Todo 섹션 편집 영역** (회의 생성자만) - 신규
- Todo 목록 표시
- 각 Todo 항목:
- 체크박스 (완료 상태)
- Todo 제목
- 담당자 (변경 가능)
- 마감일 (변경 가능)
- 우선순위 (변경 가능)
- "편집" 버튼 (인라인 편집 활성화)
- "삭제" 버튼
- "Todo 추가" 버튼
- 검증 완료 체크박스 (잠금 해제 필요)
- 자동 저장 상태 표시 ("저장됨", "저장 중...")
**Tablet/Desktop (768px+)**
- 좌측: 회의록 리스트
- 중앙: 선택된 회의록 편집 영역
- 우측: 수정 이력 패널
#### 인터랙션
1. **회의록 선택**
- 리스트에서 회의록 클릭: 편집 모드로 전환
- 편집 모드에서 다른 회의록 선택: 저장 확인 다이얼로그
2. **내용 수정**
- 텍스트 영역 클릭: 포커스 및 편집 가능
- 자동 저장: 30초 간격, 인디케이터 표시
- 수동 저장: "저장" 버튼 클릭
3. **섹션 잠금 해제**
- 잠긴 섹션: 회의 생성자에게 승인 요청
- 승인 대기 중: "승인 대기 중" 배지 표시
- 승인 완료: 편집 가능
4. **AI 요약 편집**
- 요약 텍스트 필드 클릭: 직접 수정 가능
- "AI 재생성" 버튼 클릭:
- 현재 섹션 내용 기반으로 요약 재생성
- 로딩 인디케이터 표시
- 생성 완료 시 자동 업데이트
- 자동 저장 (30초 간격)
5. **참고자료 편집**
- "참고자료 추가" 버튼 클릭:
- 회의록 검색 모달 표시
- 제목, 날짜, 키워드로 검색
- 선택된 회의록 추가
- 제거 버튼 (X): 참고자료 목록에서 제거
- 순서 변경: 드래그하여 순서 조정 (선택)
6. **Todo 섹션 편집 (UFR-TODO-040)** - 신규 추가 (회의 생성자만)
- **권한 제어**:
- 회의 생성자만 Todo 섹션 편집 가능
- 일반 참석자는 조회만 가능 (편집 버튼 숨김)
- **편집 버튼 클릭**:
- 인라인 편집 모드 활성화
- **수정 가능 항목** (회의 생성자 권한):
- ✏️ Todo 제목
- 👤 담당자 (드롭다운 선택, 참석자 목록)
- 📅 마감일 (날짜 선택기)
- 🎯 우선순위 (high/medium/low)
- "저장" 버튼: 수정 완료
- "취소" 버튼: 편집 모드 취소
- **수정 완료 시**:
- "Todo가 수정되었습니다" 토스트 메시지
- 회의록 자동 저장
- 담당자 변경 시: 이전/새 담당자에게 알림 발송
- 마감일 변경 시: 캘린더 자동 업데이트
- **Todo 추가**:
- "Todo 추가" 버튼 클릭
- Todo 정보 입력 모달 (제목, 담당자, 마감일, 우선순위)
- 저장 시 Todo 목록에 추가
- **Todo 삭제**:
- "삭제" 버튼 클릭
- 확인 다이얼로그 ("삭제하시겠습니까?")
- 삭제 시 Todo 목록에서 제거
- 담당자에게 삭제 알림 발송
7. **상태 변경**
- 확정완료 회의록 수정 시: 자동으로 "작성중" 상태로 변경
- 모든 섹션 검증 완료 시: "확정완료"로 변경 제안
#### 데이터 요구사항
- **입력**:
- 회의록 ID (조회)
- 수정 내용 (섹션 ID, 내용)
- **AI 요약 수정 (섹션 ID, 요약 내용)**
- **참고자료 변경 (추가/제거할 회의록 ID)**
- **출력**:
- 회의록 목록 (필터/정렬/검색 결과)
- 수정 결과 (성공/실패)
- **AI 요약 재생성 결과**
- 수정 이력 (누가, 언제, 무엇을)
- **연동**: Meeting 서비스, AI 서비스 (UFR-AI-040), Collaboration 서비스
#### 에러 처리
- **권한 없음**: "본인이 작성한 회의록만 수정할 수 있습니다"
- **자동 저장 실패**: "네트워크 연결을 확인해주세요. 로컬에 임시 저장됩니다"
- **AI 요약 재생성 실패**: "요약 생성에 실패했습니다. 수동으로 작성해주세요"
- **참고자료 검색 실패**: "회의록을 검색할 수 없습니다"
- **충돌 발생**: "다른 참석자가 동일한 부분을 수정했습니다" + 병합 옵션
- **삭제 실패**: "회의록 삭제에 실패했습니다"
---
### 12-회의록목록조회
#### 개요
- **목적**: 회의록 목록 조회 및 필터링/정렬/검색 기능 제공
- **관련 유저스토리**: UFR-MEET-046 (회의록목록조회)
- **비즈니스 중요도**: 높음
- **접근 경로**:
- 대시보드 → "내 회의록" 전체 보기
- 하단 네비게이션 → "회의록" 메뉴
#### 주요 기능
1. **회의록 목록 조회** (참여/생성한 회의록)
2. **필터링 기능**:
- 참여 유형: 참석한 회의, 생성한 회의
- 상태: 전체, 작성중, 확정완료
3. **정렬 기능**:
- 최신 회의순 (회의 일시 기준, 최근 순)
- 최신 업데이트순 (수정 일시 기준, 최근 순)
- 제목 가나다순 (오름차순)
4. **검색 기능**:
- 제목, 참석자, 키워드로 통합 검색
- 실시간 검색 결과 업데이트
5. 회의록 상세 조회 (항목 클릭 시)
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더** (Fixed, 상단)
- 뒤로가기 버튼
- "내 회의록" 타이틀
- 검색 아이콘 (검색창 포커스)
- **필터 및 정렬** (상단, 스크롤 가능)
- **필터 행 1** (2컬럼 그리드):
- 상태 필터 (Select)
- 옵션: 전체, 작성중, 확정완료
- 기본값: 전체
- 정렬 (Select)
- 옵션: 최신순, 회의일시순, 제목순
- 기본값: 최신순
- **참여 유형 필터** (탭 형식, 선택):
- 전체 (기본 선택)
- 참석한 회의
- 생성한 회의
- **검색 영역**
- 검색 입력 필드
- Placeholder: "회의 제목, 참석자, 키워드 검색"
- 실시간 검색 (입력 시 즉시 필터링)
- **통계 정보** (카드, 선택)
- 3컬럼 그리드:
- 전체: {count}개
- 작성중: {count}개
- 확정완료: {count}개
- 구분선으로 시각적 분리
- **회의록 목록** (스크롤 가능)
- 각 회의록 항목 (meeting-item):
- **좌측 영역**:
- 회의 제목 (H5, 볼드)
- 메타정보 (Caption, 회색):
- 회의 일시 (날짜 + 시간) · 참석자 수
- 최종 수정 시간 (Caption, 회색):
- 상대 시간 표시 ("1시간 전", "어제", "3일 전")
- **우측 영역**:
- 상태 배지:
- "확정완료" (초록색 배지)
- "작성중" (노란색 배지)
- 조회 권한 표시 (조회 전용인 경우):
- "조회 전용" (Caption, 회색)
- 빈 상태:
- 검색 결과 없음: "검색 결과가 없습니다"
- 회의록 없음: "회의록이 없습니다"
**Mobile (320px~768px)**
- **하단 네비게이션**: [Mobile 하단 네비게이션](#mobile-하단-네비게이션-320px768px) 참조 (회의록 활성)
**Tablet/Desktop (768px+)**
- **좌측 사이드바**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조 (회의록 활성)
- **메인 콘텐츠** (중앙)
- 필터 및 정렬 (상단, 가로 배치)
- 참여 유형 필터 (탭 또는 버튼 그룹)
- 검색 영역
- 통계 정보 (3컬럼 카드)
- 회의록 목록 (Grid 또는 List Layout)
- 각 카드: 호버 시 그림자 증가, 약간 상승
#### 인터랙션
1. **필터링**
- 상태 필터 변경 → 즉시 목록 재렌더링
- 참여 유형 탭 선택 → 해당 유형 회의록만 표시
- 필터 조합 가능 (상태 + 참여 유형)
2. **정렬**
- 정렬 옵션 선택 → 즉시 목록 재정렬
- 정렬 기준:
- 최신순: `updatedAt DESC`
- 회의일시순: `meetingDate DESC`
- 제목순: `title ASC` (한글 가나다순)
3. **검색**
- 검색 아이콘 클릭 → 검색 입력 필드에 포커스
- 텍스트 입력 → 실시간 검색 (debounce 300ms)
- 검색 범위:
- 회의 제목 (부분 일치)
- 참석자 이름 (부분 일치)
- 키워드 (태그, 내용에서 추출된 키워드)
- 검색어 지우기: X 버튼 (검색어 입력 시 표시)
4. **회의록 조회**
- 회의록 항목 클릭 → 회의록 상세 화면으로 이동
- 전달 데이터: 회의록 ID
- 조회 전용 회의록: 읽기 모드로 표시
5. **통계 업데이트**
- 필터/검색 적용 시 → 통계 자동 갱신
- 전체, 작성중, 확정완료 개수 실시간 반영
6. **빈 상태 처리**
- 검색 결과 없음: "검색 결과가 없습니다" 메시지
- 필터링 결과 없음: 필터 조건에 맞는 회의록 없음 안내
- 회의록 없음: "회의록이 없습니다" + 회의 시작 유도 메시지
#### 데이터 요구사항
- **입력**:
- 사용자 ID (현재 로그인 사용자)
- 필터 조건:
- 참여 유형: `all` | `shared` | `attended` | `created`
- 상태: `all` | `draft` | `confirmed`
- 정렬 기준: `recent` | `date` | `title`
- 검색어 (선택)
- **출력**:
- 회의록 목록:
- 회의 ID
- 제목
- 회의 일시
- 참석자 목록 (또는 참석자 수)
- 상태 (`draft` | `confirmed`)
- 생성자 ID
- 생성일시 (`createdAt`)
- 수정일시 (`updatedAt`)
- 조회 권한 (편집 가능 여부)
- 통계:
- 전체 개수
- 작성중 개수
- 확정완료 개수
- **연동**:
- Meeting 서비스 (회의록 목록 조회 API)
- Share 서비스 (공유 정보 조회)
#### 에러 처리
- **데이터 로딩 실패**:
- "회의록을 불러오는 중 오류가 발생했습니다." 메시지
- "다시 시도" 버튼 제공
- **검색 실패**:
- "검색 중 오류가 발생했습니다." 토스트 메시지
- 기존 목록 유지
- **네트워크 오류**:
- "네트워크 연결을 확인해주세요." 토스트 메시지
- 자동 재시도 (최대 3회, exponential backoff)
- **권한 없음**:
- 접근 권한 없는 회의록 클릭 시:
- "접근 권한이 없습니다" 토스트 메시지
- 목록으로 복귀
- **빈 상태**:
- 검색 결과 없음: "검색 결과가 없습니다"
- 필터링 결과 없음: "조건에 맞는 회의록이 없습니다"
- 전체 회의록 없음: "회의록이 없습니다. 첫 회의를 시작해보세요!" + 회의 시작 버튼
---
## 공통 UI 컴포넌트
### 네비게이션
#### Mobile 하단 네비게이션 (320px~768px)
- **위치**: Fixed, 하단 (height: 64px)
- **배경**: 흰색, 상단 테두리 (1px solid #E5E7EB)
- **그림자**: 0 -2px 8px rgba(0, 0, 0, 0.08)
- **구성**: 3개 항목 (균등 분할)
- **홈** (대시보드)
- 아이콘: 🏠 (24px)
- 텍스트: "홈" (12px)
- 활성 상태: 민트 그린 (#4DD5A7)
- 비활성 상태: 회색 (#6B7280)
- **회의록** (회의록 목록)
- 아이콘: 📋 (24px)
- 텍스트: "회의록" (12px)
- **Todo** (Todo 관리)
- 아이콘: ✅ (24px)
- 텍스트: "Todo" (12px)
- **사용 화면**: 02-대시보드, 09-Todo관리, 12-회의록목록조회
- **참고**: 프로필 메뉴는 프로토타입에서 제거됨 (Desktop 사이드바의 사용자 정보 영역으로 통합)
#### Desktop 좌측 사이드바 (768px+)
- **위치**: Fixed, 좌측 (width: 240px)
- **배경**: 흰색, 우측 테두리 (1px solid #E5E7EB)
- **구성**:
- **상단 영역**:
- 서비스 로고 (32px)
- 서비스명 (16px Bold)
- **메인 메뉴**:
- 대시보드
- 내 회의록
- Todo
- **하단 영역**:
- 사용자 정보 (아바타 + 이름)
- 로그아웃 버튼 (btn-ghost btn-sm)
- **사용 화면**: 02-대시보드, 09-Todo관리, 12-회의록목록조회
#### 상단 헤더 (공통)
- **위치**: Sticky, 상단
- **배경**: 흰색, 하단 테두리 (1px solid #E5E7EB)
- **구성**:
- 좌측: 뒤로가기 버튼 (화면별 조건부)
- 중앙: 페이지 타이틀 (18px Bold)
- 우측: 액션 버튼 (저장, 메뉴 등)
- **Mobile 전용 (768px 미만)**:
- 우측 상단에 프로필 아이콘 버튼 추가 (👤, 24px)
- 클릭 시 드롭다운 메뉴 표시:
- 사용자 이름 (14px Bold)
- 로그아웃 버튼 (btn-ghost btn-sm)
- 드롭다운 위치: 우측 상단 기준 아래로 펼침
- 배경: 흰색, 그림자: var(--shadow-md)
- **Desktop (768px+)**:
- 프로필 아이콘 숨김 (사이드바 하단 영역 사용)
---
## 공통 에러 메시지 표준
### 네트워크 오류
- **메시지**: "네트워크 연결을 확인해주세요"
- **재시도**: 자동 재시도 최대 3회 (exponential backoff: 1s, 2s, 4s)
- **UI**: 오류 토스트 (빨강) + "다시 시도" 버튼
- **적용 화면**: 전체
### 데이터 로딩 실패
- **메시지**: "일시적으로 데이터를 불러올 수 없습니다"
- **UI**: 빈 상태 화면 + "다시 시도" 버튼
- **적용 화면**: 전체
### 권한 오류
- **메시지**: "접근 권한이 없습니다"
- **액션**: 3초 후 자동으로 이전 화면 또는 대시보드로 복귀
- **UI**: 경고 토스트 (주황)
- **적용 화면**: 회의록 상세, 회의록 수정
### 인증 오류
- **메시지**: "로그인이 필요합니다"
- **액션**: 로그인 화면으로 리다이렉트
- **UI**: 정보 토스트 (파랑)
- **적용 화면**: 전체 (인증 필요 화면)
### 입력 검증 오류
- **이메일 형식 오류**: "올바른 이메일 형식이 아닙니다"
- **필수 입력 누락**: "필수 항목을 입력해주세요"
- **날짜 형식 오류**: "올바른 날짜 형식이 아닙니다 (YYYY-MM-DD)"
- **UI**: 입력 필드 하단 오류 메시지 (빨강, 14px)
### 서버 오류
- **메시지**: "서버에 일시적인 문제가 발생했습니다"
- **UI**: 오류 토스트 (빨강) + "다시 시도" 버튼
- **로깅**: 오류 상세 정보를 서버로 전송 (Sentry)
- **적용 화면**: 전체
---
## 화면 간 전환 및 네비게이션
### 네비게이션 구조
#### Mobile (320px~768px)
- **Primary Navigation**: [Mobile 하단 네비게이션](#mobile-하단-네비게이션-320px768px) 참조
- **Secondary Navigation**: [상단 헤더](#상단-헤더-공통) 참조
#### Tablet/Desktop (768px+)
- **Primary Navigation**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조
- 설정
- 프로필
- **Breadcrumbs**: 상단 (선택)
- 현재 위치 경로 표시
- 클릭하여 상위 페이지로 이동
### 전환 애니메이션
- **화면 전환**: 페이드 또는 슬라이드 (200-300ms)
- **모달 표시**: 페이드 인 + 스케일 (150ms)
- **탭 전환**: 페이드 (100ms)
- **리스트 로딩**: 스켈레톤 UI 표시 후 페이드 인
### 딥 링크 지원
- 특정 회의록 직접 접근: `/minutes/{minuteId}`
- 특정 Todo 직접 접근: `/todo/{todoId}`
- 회의록 공유 링크: `/share/{shareToken}`
---
## 반응형 설계 전략
### 브레이크포인트
- **Mobile**: 320px ~ 767px
- **Tablet**: 768px ~ 1023px
- **Desktop**: 1024px 이상
### 레이아웃 전략
#### Mobile First 접근
1. **320px (Small Mobile) 기준 설계**
- 단일 컬럼 레이아웃
- 필수 기능만 표시
- 터치 친화적 UI (최소 44px 터치 영역)
- 하단 네비게이션
2. **768px (Tablet) 확장**
- 2컬럼 레이아웃 (일부 화면)
- 추가 정보 표시 (통계, 위젯)
- 사이드바 도입 (선택)
3. **1024px (Desktop) 최적화**
- 3컬럼 레이아웃 (대시보드, 회의진행)
- 좌측 고정 사이드바
- 마우스/키보드 인터랙션 강화
- 추가 기능 노출 (단축키, 고급 필터 등)
### 컴포넌트별 반응형 전략
#### 폼 (Form)
- Mobile: 단일 컬럼, 전체 너비
- Tablet: 2컬럼 (관련 필드 그룹화)
- Desktop: 2컬럼 + 미리보기 패널
#### 리스트 (List)
- Mobile: 카드 형태, 스택 레이아웃
- Tablet: 2컬럼 그리드
- Desktop: 3컬럼 그리드 또는 마스터-디테일
#### 테이블 (Table)
- Mobile: 카드 형태로 변환, 중요 정보만 표시
- Tablet: 스크롤 가능한 테이블
- Desktop: 고정 헤더 테이블, 모든 컬럼 표시
### 이미지 및 미디어
- Responsive Images: srcset 활용
- Lazy Loading: 뷰포트 진입 시 로딩
- 최적화: WebP 포맷, 적절한 압축
---
## 접근성 보장 방안
### WCAG 2.1 Level AA 준수
#### 1. Perceivable (인식 가능)
- **텍스트 대안**: 모든 이미지에 alt 텍스트 제공
- **색상 대비**: 최소 4.5:1 대비율 (일반 텍스트), 3:1 (대형 텍스트)
- **텍스트 크기 조절**: 200%까지 확대 가능, 레이아웃 깨지지 않음
- **색상만으로 정보 전달 금지**: 아이콘, 텍스트와 함께 사용
#### 2. Operable (조작 가능)
- **키보드 접근성**: 모든 기능 키보드로 조작 가능
- Tab: 다음 요소로 포커스 이동
- Shift + Tab: 이전 요소로 포커스 이동
- Enter/Space: 버튼 활성화
- Esc: 모달 닫기
- **포커스 표시**: 명확한 포커스 인디케이터 (2px 파란색 테두리)
- **터치 영역**: 최소 44x44px (모바일)
- **시간 제한 없음**: 자동 저장으로 세션 만료 방지
#### 3. Understandable (이해 가능)
- **명확한 레이블**: 모든 입력 필드에 레이블 제공
- **오류 식별 및 안내**: 오류 발생 시 명확한 설명 및 해결 방법 제공
- **일관된 UI**: 동일한 기능은 동일한 위치, 동일한 아이콘/텍스트
#### 4. Robust (견고함)
- **시맨틱 HTML**: 적절한 HTML 태그 사용 (header, nav, main, aside, footer)
- **ARIA 레이블**: 스크린 리더를 위한 ARIA 속성
- role, aria-label, aria-describedby, aria-live
- **호환성**: 최신 브라우저 및 보조 기술 지원
### 접근성 테스트
- 자동 테스트: Lighthouse, axe DevTools
- 수동 테스트: 키보드 네비게이션, 스크린 리더 (NVDA, JAWS, VoiceOver)
---
## 성능 최적화 방안
### 1. 로딩 성능
- **Code Splitting**: 라우트별 청크 분리
- **Lazy Loading**:
- 이미지: Intersection Observer
- 컴포넌트: React.lazy, dynamic import
- **Pre-fetching**: 다음 화면 리소스 미리 로딩
- **CDN 활용**: 정적 리소스 CDN 배포
### 2. 렌더링 성능
- **Virtual Scrolling**: 긴 리스트 (회의록, Todo)
- **Debounce/Throttle**:
- 검색 입력: 300ms debounce
- 스크롤 이벤트: 100ms throttle
- **Memoization**: React.memo, useMemo, useCallback
- **CSS 애니메이션**: JavaScript 대신 CSS transition 사용
### 3. 네트워크 최적화
- **API 요청 최적화**:
- 필요한 데이터만 요청 (GraphQL 또는 필드 선택)
- 배치 요청: 여러 API를 하나로 통합
- **캐싱 전략**:
- 브라우저 캐시: Cache-Control 헤더
- Service Worker: 오프라인 지원
- 메모리 캐시: React Query, SWR
- **압축**: Gzip, Brotli
### 4. 실시간 동기화 최적화
- **WebSocket 최적화**:
- Delta 전송: 전체 데이터가 아닌 변경 부분만 전송
- 배치 업데이트: 여러 변경 사항을 묶어서 전송
- 재연결 전략: 지수 백오프
- **Conflict Resolution**: Operational Transformation 또는 CRDT
### 5. 성능 모니터링
- **Core Web Vitals**:
- LCP (Largest Contentful Paint): < 2.5s
- FID (First Input Delay): < 100ms
- CLS (Cumulative Layout Shift): < 0.1
- **실시간 모니터링**: Sentry, Google Analytics
### 성능 목표
- **First Contentful Paint**: < 1.5s
- **Time to Interactive**: < 3.5s
- **Page Load (3G)**: < 5s
- **STT 지연 시간**: < 1s
- **실시간 동기화 지연**: < 500ms
---
## 변경 이력
| 버전 | 날짜 | 작성자 | 변경 내용 |
|------|------|--------|----------|
| 1.0 | 2025-10-21 | 이미준 | 최초 작성 - 11개 화면 설계 완료 |
| 1.1 | 2025-10-21 | 이미준 | AI 요약 및 참고자료 기능 추가
` 태그로 구분하여 추가
3. 제목은 `✓` 접두어 포함, 내용은 `
- 05-회의진행: AI 회의 내용 요약 자동 생성 및 참고자료 자동 연결 추가
- 10-회의록상세조회: 섹션별 AI 요약 표시 및 참고자료 영역 추가
- 11-회의록수정: AI 요약 수정 및 참고자료 편집 기능 추가
- 관련 유저스토리: UFR-AI-040 (관련 회의록 자동 연결) |
| 1.1.1 | 2025-10-21 | 이미준 | 회의록 상세 화면 구조 개선 (프로토타입 기반)
- 10-회의록상세조회: 탭 기반 네비게이션 추가 (회의록/대시보드)
- 대시보드 탭 추가: 핵심내용, 결정사항, Todo 진행상황, 참고자료 섹션
- 참고자료 관련도 점수 표시 (백분율 + 색상 코딩)
- 참고자료 카테고리 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
- 참조: design-gappa/uiux/prototype 파일 (11-회의록대시보드.html, 05-회의진행.html) |
| 1.1.2 | 2025-10-21 | 이미준 | 대시보드 및 회의록 목록 화면 개선 (사용자 피드백 반영)
- 02-대시보드: 예정된 회의 카드 추가, Todo 우선순위 정렬 개선 (지연→진행→미진행→완료, 최대 5개), 내 회의록 상태 배지 추가
- 11-회의록목록조회: 신규 화면 추가 (필터링/정렬/검색 기능)
- 필터: 참여 유형(참석한/생성한), 상태(전체/작성중/확정완료)
- 정렬: 최신 회의순/최신 업데이트순/제목 가나다순
- 검색: 제목/참석자/키워드 통합 검색
- 통계 정보 표시 (전체/작성중/확정완료 개수)
- 참조: design/uiux/prototype_fix 및 design-gappa/uiux/prototype 파일 |
| 1.2 | 2025-10-21 | 이미준 | 대시보드 진행중 회의 표시 기능 추가
- 02-대시보드: 예정된 회의 카드에 진행중 회의 포함
- 진행중 회의 우선 표시 (최상단)
- "진행중" 배지 (빨강/주황, 깜빡임 애니메이션)
- "참여하기" 버튼으로 즉시 회의 참여 가능
- 정렬: 진행중 회의 → 예정된 회의 (일시 순)
- 데이터 요구사항: 회의 상태 (ongoing) 추가, 진행중 회의 필터 조건 정의
- 에러 처리: 진행중 회의 참여 실패 시나리오 추가 (종료됨/권한없음/네트워크오류) |
| 1.2.1 | 2025-10-21 | 이미준 | 대시보드 예정된 회의 역할 기반 접근 제어 추가
- 02-대시보드: 예정된 회의에 생성자/참석자별 차별화된 권한 적용
- **생성자 권한**: 회의 수정 가능 (크라운 아이콘 표시, "수정" 버튼)
- **참석자 권한**: 시작 10분 전부터 참여 가능 ("참여하기" 버튼 조건부 활성화)
- 실시간 타이머 표시 (참여 가능 시간 카운트다운, 1분 간격 갱신)
- UI 구성요소: 역할 표시 (크라운 아이콘), 액션 버튼 (역할 및 시간 기반 조건부 렌더링)
- 인터랙션: 생성자 수정 플로우, 참석자 시간 기반 참여 플로우, 타이머 자동 갱신
- 데이터 요구사항: 생성자 ID, 사용자 역할 (creator\|attendee), 참여 가능 시간 계산
- 에러 처리: 시간 제한 접근, 권한 제한 수정 시도, 회의 수정 실패 시나리오 추가 |
| 1.2.2 | 2025-10-21 | 최유진 | 회의진행 화면 개선 및 스타일 가이드 작성
- 05-회의진행: 사용성 개선
- **참고자료 링크**: 새 탭(target="_blank")으로 열기 기능 추가 (녹음 중 페이지 이탈 방지)
- **참석자 추가 초대**: 회의 진행 중 참석자 추가 초대 기능 추가
- 초대 모달: 이메일 입력, 조직 내 사용자 검색, 권한 선택 (편집 가능/읽기 전용)
- 실시간 참석자 목록 업데이트 및 알림 발송 (이메일/앱 푸시)
- 권한 제어: 생성자는 모든 참석자 초대 가능, 일반 참석자는 회의 설정에 따라 결정
- design/uiux/style-guide.md: 신규 작성 (reference/sampleimg 샘플 이미지 기반)
- 민트 그린(#4DD5A7) 프라이머리 컬러 적용
- Mobile First 디자인 시스템 정의
- 15개 섹션: 컬러, 타이포그래피, 간격, 카드, 버튼, 배지, 아이콘, 네비게이션, 폼, 모달, 애니메이션, 접근성, 반응형 등 |
| 1.2.3 | 2025-10-21 | 이미준 | 네비게이션 간소화 및 Todo 상세 이동 개선
- **설정 메뉴 제거**: 모든 화면에서 설정 메뉴 제거 (사이드바, 하단 네비게이션, 메뉴 모달)
- 로그아웃 기능은 프로필 영역으로 통합
- 네비게이션 단순화로 사용자 혼란 최소화
- **02-대시보드 Todo 인터랙션 개선**:
- Todo 항목 클릭 시 해당 Todo가 포함된 회의록 상세 화면으로 이동
- URL 파라미터로 회의록 ID와 Todo ID 전달
- 회의록 상세 화면에서 해당 Todo 섹션으로 자동 스크롤
- 프로토타입 파일 수정: 02-대시보드.html, 09-Todo관리.html, 05-회의진행.html, 05-회의진행-old.html, 05-회의진행 - 복사본.html |
| 1.3 | 2025-10-21 | 이미준 | 프로토타입 반응형 네비게이션 및 회의진행 화면 전면 개편
- **02-대시보드**: 반응형 네비게이션 구조 적용
- Mobile: 하단 네비게이션 (홈/회의록/Todo, 프로필 메뉴 제거)
- Desktop: 왼쪽 사이드바 (240px, 로고/메뉴/사용자 정보)
- 통계 카드 추가 (예정된 회의/진행 중 Todo/완료율)
- 모든 네비게이션 링크 정확한 화면으로 연결
- **05-회의진행**: 2열 구조로 전면 재설계
- 왼쪽 영역 (60-70%): 텍스트 에디터 (툴바 + contentEditable)
- 오른쪽 영역 (30-40%): 탭 패널 (참석자/AI 제안/용어 사전/관련 자료)
- AI 제안: 적용하기 버튼으로 왼쪽 영역에 자동 삽입
- 관련 자료: 새 탭으로 열기 (target="_blank"), 녹음 중 페이지 이탈 방지
- **10-회의록상세조회**: 타임라인 탭 제거
- 탭 구조 단순화: 회의록/대시보드 (2개 탭만 유지)
- 타임라인 관련 UI 및 인터랙션 모두 제거
- 참조: reference/sampleimg 샘플 이미지 기반 디자인 |
| 1.3.1 | 2025-10-21 | 도그냥 | 회의진행 화면 AI 제안 탭 기능 상세화 및 디자인 통일성 개선
- **05-회의진행**: AI 제안 탭 3가지 제안 유형 추가 및 상세 인터랙션 정의
- **논의사항 제안**: "논의사항에 적용" 버튼 클릭 시 논의사항 섹션(section-1)에 내용 자동 추가, 자동 탭 전환, 성공 토스트 표시
- **결정사항 제안**: "결정사항에 적용" 버튼 클릭 시 결정사항 섹션(section-2)에 내용 자동 추가, 자동 탭 전환, 성공 토스트 표시
- **액션아이템 제안**: "3개 Todo 생성" 버튼 클릭 시 액션아이템 섹션(section-3)에 중복 체크 후 추가, 자동 탭 전환, 성공 토스트 표시
- 중복 체크 로직: Set 자료구조로 기존 Todo 제목과 비교, 중복 제외한 항목만 추가
- **AI 제안 카드 디자인 통일성 개선**:
- 배경: #FAFAFA (연한 회색) - 용어사전/관련회의록 탭과 동일
- 테두리: 1px dashed #D0D0D0 (회색 점선) - 통일된 스타일
- 헤더: 16px Bold, 민트 그린 (#4DD5A7) - 일관된 타이틀 스타일
- 본문: 14px, gray-700 - 가독성 중심
- 프로토타입 파일 수정: design/uiux/prototype/05-회의진행.html |
| 1.3.2 | 2025-10-21 | 도그냥 | 회의진행 화면 참석자 탭 개선 및 UI 일관성 강화
- **05-회의진행**: 참석자 탭 참석자 추가 기능 및 UI 정리
- **참석자 추가 폼 추가**: 이메일 입력 필드(form-control) + "초대" 버튼(btn btn-primary btn-sm)
- 이메일 유효성 검증: 정규식으로 형식 체크
- 빈 값 체크: "이메일 주소를 입력해주세요" 경고 토스트
- 잘못된 형식: "올바른 이메일 형식이 아닙니다" 오류 토스트
- 성공: "{email}에게 초대 링크가 전송되었습니다" 토스트 + 입력창 초기화
- **참석자 상태 표시 제거**: 발언 중/온라인 등 상태 아이콘 및 텍스트 모두 제거
- **참석자 수 동적 업데이트**: 4명으로 업데이트 (최유진 추가)
- **참고자료 영역 제거**: 회의개요 탭의 참고자료 섹션 삭제 (우측 관련회의록 탭으로 통합)
- **버튼 스타일 통일**: 모든 버튼에 .btn 기본 클래스 추가
- 편집 버튼 (4개 섹션): btn btn-ghost btn-sm
- AI 제안 적용 버튼 (3개): btn btn-primary btn-sm
- 수정 버튼 (3개): btn btn-ghost btn-sm
- 하단 일시정지/종료 버튼: btn btn-ghost, btn btn-error
- **검색창 스타일 통일**: 용어사전 검색창을 .input → .form-control 클래스로 변경
- 프로토타입 파일 수정: design/uiux/prototype/05-회의진행.html |
| 1.3.3 | 2025-10-21 | 도그냥 | UI/UX 설계 문서 최적화 및 중복 제거
- **공통 UI 컴포넌트 섹션 신규 작성**: 반복 사용되는 UI 컴포넌트를 공통 섹션으로 분리
- **Mobile 하단 네비게이션**: 위치, 배경, 그림자, 3개 항목 (홈/회의록/Todo) 상세 스펙 정의
- **Desktop 좌측 사이드바**: 로고 영역, 메뉴 리스트, 사용자 정보 영역 상세 스펙 정의
- **상단 헤더**: Mobile/Desktop별 제목, 액션 버튼 배치 가이드
- **공통 에러 메시지 표준 섹션 신규 작성**: 반복 사용되는 에러 메시지를 표준화
- **네트워크 오류**: 자동 재시도 3회 (exponential backoff), 토스트 메시지, 재시도 버튼
- **데이터 로딩 실패**: 스켈레톤 UI 30초, 타임아웃 처리, 재시도 버튼
- **권한 오류**: 401/403 에러 처리, 명확한 안내 메시지
- **인증 오류**: 토큰 만료 자동 갱신, 로그인 리다이렉트
- **입력 검증 오류**: 실시간 인라인 검증, 포커스 이동
- **서버 오류**: 500 에러 에러 ID 제공, 고객센터 안내
- **중복 내용 참조 링크 교체**: 8개 화면에서 반복된 네비게이션/에러 메시지 설명을 공통 섹션 참조로 변경
- 01-로그인, 02-대시보드, 12-회의록목록조회 등
- 예상 파일 크기 감소: 1,500~2,200자 (약 8~10%)
- **목차 업데이트**: 공통 UI 컴포넌트, 공통 에러 메시지 표준 섹션 추가 |
| 1.4 | 2025-10-22 | 이미준 | 프로토타입 기반 네비게이션 사양 업데이트
- **Mobile 하단 네비게이션**: 4개 메뉴 항목으로 복원 (홈/회의록/Todo/프로필)
- 프로필 메뉴 추가: 👤 아이콘, 사용자 정보 및 설정 접근
- 프로토타입 구현 기준 반영 (12-회의록목록조회.html 등)
- **일관성 개선**: 프로토타입과 UI/UX 설계서 간 네비게이션 사양 통일
- **스타일 가이드 동기화**: design/uiux/style-guide.md v1.2와 정합성 확보 |
| 1.4.1 | 2025-10-23 | 강지수 | 대시보드 모바일 UI/UX 개선 (360px 최적화)
- **헤더 개선안 A 적용**: 간결한 인사 + 실질적 정보
- "안녕하세요 👋" (H3, Bold)
- "오늘 {N}건의 회의가 예정되어 있어요" (동적 업데이트)
- 2줄 구조 제거로 세로 공간 절약
- **통계 카드 개선안 A 적용**: 컴팩트 수평 배치
- 단일 카드 "📊 오늘의 현황" (H5, Semibold)
- 수평 배치: "📅 예정 {N}", "✅ 진행 {N}", "📈 완료 {N}%"
- 높이 ~80px (기존 대비 70% 감소)
- 반응형: 태블릿 이상에서 justify-content: flex-start
- **프로토타입 파일**: design/uiux/prototype/02-대시보드-개선.html 신규 생성
- **모바일 우선 반응형 설계**: 웹/태블릿 화면에서도 자연스러운 레이아웃 유지
- **참조**: design/uiux/ref_img/레이아웃 이상.png (개선 요구사항 이미지) |
| 1.4.2 | 2025-10-23 | 강지수 | 회의록 공유 기능 전면 제거
- **제거 배경**: 회의 참가자가 아니면 대상자 선정 불가능, 기능 중복 및 논리적 모순 해결
- **유저스토리**: UFR-MEET-060 (회의록공유) 제거
- **UI/UX 설계서**:
- 08-회의록공유 화면 전체 제거
- 02-대시보드: "공유받은 회의록" 섹션 제거
- 09-회의록상세조회: 공유 버튼 제거 (메뉴: 수정/삭제만 유지)
- 11-회의록목록조회: 카테고리 필터 수정 (전체/참석한 회의/생성한 회의)
- Desktop 사이드바: "공유받은 회의록" 메뉴 제거
- **화면 번호 재정렬**: 08-Todo관리, 09-회의록상세조회, 10-회의록수정, 11-회의록목록조회
- **프로토타입 파일**: 08-회의록공유.html 삭제 예정
- **검토 문서**: design/uiux/crosscheck-report.md (상세 검토 의견 및 수정 계획) |
| 1.4.3 | 2025-10-23 | 강지수 | 유저스토리-설계서-프로토타입 일관성 개선 (요구사항설계검토-report.md 반영)
- **화면번호 프로토타입 파일명 기준 통일**:
- 프로토타입 화면 목록 테이블 화면번호 수정
- 09: Todo관리 (09-Todo관리.html) - 변경 없음
- 10: 회의록상세조회 (10-회의록상세조회.html) - 변경 없음
- 11: 회의록수정 (11-회의록수정.html) - 09→11 변경
- 12: 회의록목록조회 (12-회의록목록조회.html) - 11→12 변경
- 설계서 본문 섹션 제목 화면번호 수정
- ### 09-Todo관리 (08→09 변경)
- ### 10-회의록상세조회 (변경 없음)
- ### 11-회의록수정 (10→11 변경)
- ### 12-회의록목록조회 (11→12 변경)
- **유저스토리 화면정보 추가 및 수정**:
- UFR-MEET-046 (회의록목록조회): 화면번호 "12-회의록목록조회" 추가, 카테고리 필터에서 "공유받은 회의" 제거
- UFR-MEET-047 (회의록상세조회): 화면번호 "10-회의록상세조회" 추가, 관련 유저스토리 ID 수정 (UFR-MEET-045 → UFR-MEET-047)
- **설계서 유저스토리 매핑 정확성 개선**:
- 10-회의록상세조회: UFR-MEET-045 → UFR-MEET-047 수정
- 12-회의록목록조회: UFR-MEET-030, UFR-MEET-045 → UFR-MEET-046 수정
- **일관성 달성**: 유저스토리, UI/UX 설계서, 프로토타입 간 완전한 화면번호 및 파일명 일치
- **검토 문서**: design/uiux/요구사항설계검토-report.md (상세 검토 의견 및 개선 계획) |
| 1.4.4 | 2025-10-23 | 강지수, 도그냥 | Todo 수정 기능 추가 (UFR-TODO-040)
- **유저스토리**: UFR-TODO-040 (Todo수정) 신규 추가
- 회의록 확정 전/후 Todo 수정 기능
- 권한별 수정 범위: 담당자(본인 Todo만), 회의 생성자(모든 Todo)
- 수정 항목: 제목, 담당자, 마감일, 우선순위
- **09-Todo관리**: Todo 수정 기능 추가
- "편집" 버튼 추가 (완료되지 않은 본인 Todo만 표시)
- Todo 편집 모달: 제목, 마감일, 우선순위 수정 (담당자 변경 불가)
- 수정 완료 시 회의록에 실시간 반영, 마감일 변경 시 캘린더 자동 업데이트
- 권한 제어: 본인에게 할당된 Todo만 편집 버튼 표시
- **11-회의록수정**: Todo 섹션 편집 기능 추가 (회의 생성자만)
- Todo 목록 표시 및 인라인 편집 (제목, 담당자, 마감일, 우선순위)
- Todo 추가/삭제 기능
- 담당자 변경 시 이전/새 담당자에게 알림 발송
- **프로토타입**: design/uiux/prototype/09-Todo관리.html 수정 (편집 모달 및 기능 구현) |
| 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에서는 사이드바 사용자 영역 숨김
- **설계서-프로토타입 일관성**: 로그아웃 기능 완전 통일 |
---
## 부록
### 참고 자료
- Mobile First 설계 원칙: Luke Wroblewski "Mobile First"
- 접근성 가이드라인: WCAG 2.1 Level AA
- 성능 최적화: Google Web Fundamentals
### 디자인 시스템 (추후 작성)
- 색상 팔레트
- 타이포그래피
- 컴포넌트 라이브러리
- 아이콘 세트