diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md
index 99d1710..148198c 100644
--- a/design/uiux/uiux.md
+++ b/design/uiux/uiux.md
@@ -4,7 +4,7 @@
- **작성일**: 2025-10-21
- **최종 수정일**: 2025-10-21
- **작성자**: 이미준 (서비스 기획자)
-- **버전**: 1.1
+- **버전**: 1.2
- **설계 철학**: Mobile First Design
---
@@ -929,12 +929,17 @@ graph TD
- 회의록 상태 배지 (작성중/확정완료)
- 작성자 및 최종 수정 시간
-- **섹션별 내용** (아코디언 또는 스크롤)
+- **탭 네비게이션** (상단, Fixed)
+ - "회의록" 탭 (기본 활성)
+ - "대시보드" 탭
+ - "타임라인" 탭 (선택)
+
+- **회의록 탭 콘텐츠** (섹션별 구조)
- 각 섹션:
- 섹션 제목
- 검증 완료 배지 (검증된 경우)
- **AI 회의 내용 요약 영역** (섹션 최상단, 강조 박스)
- - 요약 아이콘 (💡 또는 📝)
+ - 요약 아이콘 (💡)
- AI 자동 생성 요약 (2-3문장)
- 요약 생성/수정 시간
- "수정" 버튼 (권한 있는 경우)
@@ -942,13 +947,36 @@ graph TD
- **참고자료 영역** (섹션 하단, 별도 영역)
- "참고자료" 라벨
- 관련 회의록 링크 리스트 (최대 3개):
- - 링크 아이콘
+ - 링크 아이콘 (📄)
- 회의 제목 (클릭 가능)
- 회의 날짜
- - 관련도 표시 (퍼센트 또는 별점)
+ - 관련도 표시 (퍼센트, 색상 코딩)
+ - 1-2줄 요약
- "더보기" 버튼 (3개 초과 시)
- 접기/펼치기 버튼 (선택)
+- **대시보드 탭 콘텐츠** (11-회의록대시보드.html 구조 참조)
+ - **핵심내용 섹션** (💡)
+ - 번호 매김된 핵심 포인트 (4-5개)
+ - 주요 키워드 태그 클라우드
+ - 회의 통계 (참석자 수, 시간, 발언 횟수, 주요 의제 수)
+
+ - **결정사항 섹션** (✅)
+ - 결정사항 카드 리스트
+ - 각 카드: 결정 내용 + 결정자 + 시간 + 배경 설명
+
+ - **Todo 진행상황 섹션** (📋)
+ - 상태별 필터 탭 (전체/시작 전/진행 중/완료)
+ - 담당자별 그룹화
+ - 각 Todo: 제목 + 진행률 바 + 마감일 + 우선순위 배지
+
+ - **참고자료 섹션** (📚)
+ - 참고자료 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
+ - 각 참고자료 카드:
+ - 아이콘 + 제목 + 메타정보 (날짜, 작성자)
+ - 관련도 점수 배지 (92%, 88% 등)
+ - 2-3줄 요약
+
- **Todo 섹션** (강조)
- Todo 항목 리스트:
- 체크박스 (완료/미완료)
@@ -966,31 +994,48 @@ graph TD
- "공유" 버튼
**Tablet/Desktop (768px+)**
-- 좌측: 섹션 목차 (네비게이션)
-- 중앙: 회의록 내용 (모바일과 동일)
-- 우측: 관련 정보
- - 참석자 목록
- - 관련 회의록 링크
- - 통계 (발언 시간 등)
+- **상단**: 탭 네비게이션
+ - 회의록 (기본)
+ - 대시보드
+ - 타임라인
+- **메인 영역**:
+ - 회의록 탭: 전체 회의록 내용 (섹션별 구조)
+ - 대시보드 탭: 핵심내용, 결정사항, Todo 진행상황, 참고자료 (11-회의록대시보드.html 구조 참조)
#### 인터랙션
-1. **섹션 네비게이션**
- - 섹션 제목 클릭: 해당 섹션으로 스크롤
- - 접기/펼치기: 긴 내용의 경우 초기에는 접힌 상태
+1. **탭 전환**
+ - "회의록" 탭: 전체 회의록 내용 표시 (섹션별 구조)
+ - "대시보드" 탭: 핵심내용, 결정사항, Todo, 참고자료 요약 표시
+ - "타임라인" 탭: 시간 순서대로 회의 진행 과정 표시 (선택)
+ - 탭 전환 시 URL 변경 없이 클라이언트 사이드 렌더링
-2. **AI 요약 인터랙션**
- - 요약 영역 표시: 섹션 최상단에 강조 박스로 표시
- - "수정" 버튼 클릭 (권한 있는 경우):
- - 인라인 편집 모드로 전환
+2. **회의록 탭 인터랙션**
+ - **섹션 네비게이션**: 섹션 제목 클릭 → 해당 섹션으로 스크롤
+ - **접기/펼치기**: 긴 내용은 초기 접힌 상태, 클릭으로 펼침
+ - **AI 요약 편집**:
+ - "수정" 버튼 클릭 (권한 있는 경우) → 인라인 편집 모드
- 수정 내용 자동 저장 (30초 간격)
- 실시간 동기화
+ - **참고자료 링크**:
+ - 회의록 링크 클릭 → 새 탭에서 해당 회의록 열기
+ - 관련도 색상 코딩: 90%+ (초록), 70-89% (노랑), 70% 미만 (회색)
+ - "더보기" 클릭 → 전체 참고자료 목록 모달
-3. **참고자료 인터랙션**
- - 회의록 링크 클릭:
- - 새 탭에서 해당 회의록 열기
- - 또는 현재 화면에서 전환 (사용자 설정)
- - 관련도 표시: 시각적으로 중요도 표시 (높음/중간/낮음 색상 구분)
- - "더보기" 클릭: 전체 참고자료 목록 모달 표시
+3. **대시보드 탭 인터랙션**
+ - **핵심내용 섹션**:
+ - 키워드 태그 클릭 → 해당 키워드 관련 섹션으로 스크롤
+ - 통계 항목 클릭 → 상세 정보 툴팁 표시
+ - **결정사항 섹션**:
+ - 결정사항 카드 클릭 → 회의록 탭의 해당 섹션으로 이동
+ - 배경 설명 접기/펼치기
+ - **Todo 진행상황**:
+ - 필터 탭 클릭 → 해당 상태의 Todo만 표시
+ - Todo 카드 클릭 → Todo관리 화면으로 이동
+ - 진행률 바: 실시간 업데이트
+ - **참고자료 섹션**:
+ - 탭 전환 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
+ - 참고자료 카드 클릭 → 해당 문서로 이동
+ - 관련도 점수: 배지로 표시 (92%, 88% 등)
4. **Todo 인터랙션**
- Todo 체크박스: 완료 처리 (권한 있는 경우)
@@ -1005,20 +1050,31 @@ graph TD
- "공유" 버튼: 회의록공유 화면으로 이동
#### 데이터 요구사항
-- **입력**: 회의록 ID
+- **입력**: 회의록 ID, 활성 탭 (회의록/대시보드/타임라인)
- **출력**:
- - 회의 기본 정보 (제목, 일시, 참석자, 장소, 상태, 작성자, 수정 시간)
- - **섹션별 AI 요약 (자동 생성 요약 및 수정 이력)**
- - 섹션별 내용
- - **참고자료 목록 (관련 회의록 링크, 관련도)**
- - Todo 목록 및 진행 상황
- - 첨부파일 목록
+ - **회의 기본 정보**: 제목, 일시, 참석자, 장소, 상태, 작성자, 수정 시간
+ - **섹션별 AI 요약**: 자동 생성 요약, 수정 이력
+ - **섹션별 내용**: 마크다운 형식
+ - **참고자료 목록**:
+ - 관련 회의록 (제목, 날짜, 관련도, 요약)
+ - 프로젝트 문서 (제목, 작성자, 관련도)
+ - 이슈 트래커 링크
+ - 위키 페이지 링크
+ - **대시보드 데이터** (대시보드 탭 선택 시):
+ - 핵심내용 (4-5개 포인트)
+ - 주요 키워드
+ - 회의 통계 (참석자 수, 시간, 발언 횟수, 의제 수)
+ - 결정사항 리스트 (결정 내용, 결정자, 시간, 배경)
+ - Todo 진행상황 (담당자별 그룹, 진행률)
+ - **Todo 목록 및 진행 상황**
+ - **첨부파일 목록**
- **연동**: Meeting 서비스, AI 서비스 (UFR-AI-040), Todo 서비스
#### 에러 처리
- **회의록 로딩 실패**: "회의록을 불러올 수 없습니다" + 재시도 버튼
- **AI 요약 로딩 실패**: "요약을 불러올 수 없습니다" (섹션 내용은 정상 표시)
-- **참고자료 로딩 실패**: "참고자료를 불러올 수 없습니다"
+- **참고자료 로딩 실패**: "참고자료를 불러올 수 없습니다" (빈 상태 표시)
+- **대시보드 데이터 로딩 실패**: "대시보드를 불러올 수 없습니다" + 재시도 버튼
- **권한 없음**: "수정" 버튼 비활성화, "조회 권한만 있습니다" 메시지
- **첨부파일 다운로드 실패**: "파일 다운로드에 실패했습니다"
@@ -1331,6 +1387,7 @@ graph TD
|------|------|--------|----------|
| 1.0 | 2025-10-21 | 이미준 | 최초 작성 - 11개 화면 설계 완료 |
| 1.1 | 2025-10-21 | 이미준 | AI 요약 및 참고자료 기능 추가
- 05-회의진행: AI 회의 내용 요약 자동 생성 및 참고자료 자동 연결 추가
- 10-회의록상세조회: 섹션별 AI 요약 표시 및 참고자료 영역 추가
- 11-회의록수정: AI 요약 수정 및 참고자료 편집 기능 추가
- 관련 유저스토리: UFR-AI-040 (관련 회의록 자동 연결) |
+| 1.2 | 2025-10-21 | 이미준 | 회의록 상세 화면 구조 개선 (프로토타입 기반)
- 10-회의록상세조회: 탭 기반 네비게이션 추가 (회의록/대시보드/타임라인)
- 대시보드 탭 추가: 핵심내용, 결정사항, Todo 진행상황, 참고자료 섹션
- 참고자료 관련도 점수 표시 (백분율 + 색상 코딩)
- 참고자료 카테고리 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
- 참조: design-gappa/uiux/prototype 파일 (11-회의록대시보드.html, 05-회의진행.html) |
---