diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md
index 148198c..3c538a9 100644
--- a/design/uiux/uiux.md
+++ b/design/uiux/uiux.md
@@ -4,7 +4,7 @@
- **작성일**: 2025-10-21
- **최종 수정일**: 2025-10-21
- **작성자**: 이미준 (서비스 기획자)
-- **버전**: 1.2
+- **버전**: 1.3
- **설계 철학**: Mobile First Design
---
@@ -87,6 +87,7 @@
| 09 | Todo관리 | UFR-TODO-010, UFR-TODO-030 | 높음 | Todo 목록 및 진행 관리 |
| 10 | 회의록상세조회 | UFR-MEET-045 | 중간 | 회의록 상세 보기 |
| 11 | 회의록수정 | UFR-MEET-055 | 중간 | 지난 회의록 수정 |
+| 12 | 회의록목록조회 | UFR-MEET-030, UFR-MEET-045 | 높음 | 회의록 목록 필터링/정렬/검색 |
---
@@ -208,89 +209,200 @@ graph TD
#### 개요
- **목적**: 주요 기능 접근 허브, 최근 활동 및 Todo 요약 제공
-- **관련 유저스토리**: 여러 유저스토리의 진입점
+- **관련 유저스토리**: 여러 유저스토리의 진입점, UFR-MEET-030 (회의록 조회), UFR-TODO-010 (Todo 조회)
- **비즈니스 중요도**: 필수
- **접근 경로**: 로그인 후 메인 화면
#### 주요 기능
-1. 빠른 회의 시작
-2. 내 회의록 목록 (최근 5개)
-3. 내 Todo 요약 (진행 중/마감 임박)
-4. 최근 공유받은 회의록
-5. 전역 검색
+1. 빠른 회의 시작 및 예약
+2. **예정된/초대받은 회의 목록** (upcoming meetings)
+3. **내 Todo 우선순위별 표시** (지연중 → 진행중 → 미진행 → 완료, 최대 5개)
+4. **내 회의록** (참여자/생성자로 등록된 최근 3개, 상태 포함)
+5. **공유받은 회의록** (최근 공유받은 순 3개)
+6. 전역 검색
#### UI 구성요소
**Mobile (320px~768px)**
-- **헤더**
- - 서비스 로고
+- **헤더** (Fixed, 상단)
+ - 서비스 로고 및 타이틀 ("회의록 서비스")
- 검색 아이콘
- 프로필 아이콘 (메뉴)
-- **메인 콘텐츠** (스크롤)
- - **빠른 액션**
- - "새 회의 시작" 버튼 (Primary, 눈에 잘 띄는 위치)
- - "회의 예약" 버튼 (Secondary)
+- **메인 콘텐츠** (스크롤, padding-bottom: 80px)
+ - **환영 메시지**
+ - "안녕하세요, {사용자명}님!" (H3)
+ - 부제: "오늘도 효율적인 회의록 작성을 시작하세요" (Body-sm, 회색)
- - **내 Todo** 카드
- - 진행 중 Todo 개수 배지
- - 마감 임박 Todo 최대 3개 표시
- - "전체 보기" 링크
+ - **빠른 액션** (가로 배치)
+ - "새 회의 시작" 버튼 (Primary, 아이콘: play_circle, flex: 1)
+ - "회의 예약" 버튼 (Secondary, 아이콘: calendar_today)
- - **내 회의록** 카드
- - 최근 회의록 5개 리스트
- - 각 항목: 제목, 날짜, 상태 배지
- - "전체 보기" 링크
+ - **예정된 회의** 카드 (신규)
+ - 헤더: "예정된 회의" (H4) + "전체 보기 →" 링크
+ - 예정된/초대받은 회의 리스트 (최대 3개)
+ - 각 항목:
+ - 회의 제목 (H5)
+ - 회의 일시 (아이콘: calendar_today)
+ - 참석자 수 (아이콘: people)
+ - D-day 배지 (긴급도에 따라 색상 구분)
+ - 빈 상태: "예정된 회의가 없습니다"
- - **공유받은 회의록** 카드
- - 최근 공유받은 회의록 3개
- - "전체 보기" 링크
+ - **내 Todo** 카드 (개선)
+ - 헤더: "내 Todo" (H4) + "전체 보기 →" 링크 (Todo 관리 화면으로 이동)
+ - **통계 요약 영역**:
+ - 진행 중 개수 배지
+ - 마감 임박 개수 (아이콘: schedule, 경고색)
+ - **Todo 리스트** (우선순위 순, 최대 5개):
+ 1. 지연 중 (기한 지남, 빨간색)
+ 2. 진행 중 (상태: in_progress)
+ 3. 기한이 남은 미진행 (상태: not_started)
+ 4. 완료 (상태: done, 회색 처리)
+ - 각 Todo 항목:
+ - 제목 (Medium weight)
+ - 메타정보: 담당자, 마감일
+ - D-day (색상: 지남-빨강, 오늘-경고, 여유-회색)
+ - 우선순위 배지 (high-빨강, medium-노랑, low-회색)
+ - 빈 상태: "할당된 Todo가 없습니다"
-- **하단 네비게이션** (Fixed)
- - 홈, 회의록, Todo, 프로필
+ - **내 회의록** 카드 (개선)
+ - 헤더: "내 회의록" (H4) + "전체 보기 →" 링크 (회의록 목록 화면으로 이동)
+ - **최근 회의록 리스트** (최대 3개):
+ - 필터: 내가 참여자 또는 생성자로 등록된 회의록
+ - 정렬: 최근 생성 순 (createdAt 기준)
+ - 각 항목:
+ - 회의 제목 (H5)
+ - 회의 일시 (날짜 + 시간)
+ - 참석자 수
+ - **상태 배지**:
+ - "작성중" (draft, 노란색 배지)
+ - "확정완료" (confirmed, 초록색 배지)
+ - 최종 수정 시간 (상대 시간: "1시간 전", "어제" 등)
+ - 클릭 시: 회의록 상세 화면으로 이동
+ - 빈 상태: "작성한 회의록이 없습니다. 첫 회의를 시작해보세요!"
+
+ - **공유받은 회의록** 카드 (개선)
+ - 헤더: "공유받은 회의록" (H4) + "전체 보기 →" 링크 (회의록 목록 화면으로 이동)
+ - **최근 공유받은 회의록 리스트** (최대 3개):
+ - 정렬: 최근 공유받은 순
+ - 각 항목:
+ - 회의 제목 (H5)
+ - 공유자 정보 (아바타 + 이름)
+ - 공유 일시 (상대 시간)
+ - 상태 배지
+ - 클릭 시: 회의록 상세 화면으로 이동 (읽기 전용)
+ - 빈 상태: "공유받은 회의록이 없습니다"
+
+- **하단 네비게이션** (Fixed, 하단)
+ - 홈 (active), 회의록, Todo, 프로필
+ - 각 항목: Material Icon + 레이블
**Tablet/Desktop (768px+)**
-- **사이드바** (좌측, Fixed)
+- **사이드바** (좌측, Fixed, 240px)
- 서비스 로고
- - 메인 메뉴
- - 대시보드
- - 내 회의록
- - Todo
- - 공유받은 회의록
- - 프로필 정보
+ - 메인 메뉴 (세로 배치)
+ - 대시보드 (active, 강조 표시)
+ - 회의 목록
+ - Todo 관리
+ - 설정
+ - 하단: 프로필 요약
- **메인 콘텐츠** (Grid Layout)
- - 좌측 컬럼 (2/3)
+ - **상단 영역**:
+ - 환영 메시지
- 빠른 액션 (가로 배치)
- - 내 회의록 리스트
- - 우측 컬럼 (1/3)
- - 내 Todo 위젯
- - 공유받은 회의록 위젯
+
+ - **통계 그리드** (3컬럼, auto-fit):
+ - 예정된 회의 (아이콘: 📅, Primary 색상)
+ - 진행 중 Todo (아이콘: ✅, Warning 색상)
+ - Todo 완료율 (아이콘: 📈, Success 색상)
+
+ - **2컬럼 그리드**:
+ - 좌측 컬럼 (2/3 너비)
+ - 예정된 회의 섹션
+ - 내 회의록 섹션
+ - 우측 컬럼 (1/3 너비)
+ - 내 Todo 위젯
+ - 공유받은 회의록 위젯
#### 인터랙션
1. **빠른 액션**
- - "새 회의 시작": 템플릿선택 화면으로 이동 (모달 또는 전체 화면)
- - "회의 예약": 회의예약 화면으로 이동
+ - "새 회의 시작" 클릭 → 템플릿선택 화면으로 이동 (페이드 전환)
+ - "회의 예약" 클릭 → 회의예약 화면으로 이동
2. **카드 인터랙션**
- - 카드 클릭: 해당 상세 화면으로 이동
- - 스와이프(모바일): 빠른 액션 (삭제, 공유 등)
+ - 회의록 항목 클릭 → 회의록 상세 화면으로 이동
+ - Todo 항목 클릭 → Todo 관리 화면으로 이동
+ - "전체 보기" 링크 클릭 → 해당 목록 화면으로 이동
+ - 호버 효과: 카드 그림자 증가, 약간 상승 (transform: translateY(-2px))
3. **검색**
- 검색 아이콘 클릭: 전체 화면 검색 인터페이스 표시
- 실시간 자동완성 및 최근 검색어 제공
#### 데이터 요구사항
-- **입력**: 사용자 ID
+- **입력**:
+ - 사용자 ID (현재 로그인 사용자)
+ - 현재 날짜/시간 (예정된 회의 필터링용)
+
- **출력**:
- - 내 회의록 목록 (최근 5개)
- - 내 Todo 목록 (진행 중, 마감 임박)
- - 공유받은 회의록 목록 (최근 3개)
-- **연동**: Meeting 서비스, Todo 서비스
+ - **예정된 회의**:
+ - 회의 ID, 제목, 일시, 참석자 목록, D-day
+ - 필터: 회의 일시 >= 현재 시간, 사용자가 참석자 또는 생성자
+ - 정렬: 회의 일시 순 (가까운 순)
+ - 최대 3개
+
+ - **내 Todo**:
+ - Todo ID, 제목, 담당자, 마감일, 상태, 우선순위
+ - 필터: 담당자 = 현재 사용자
+ - 정렬:
+ 1. 지연중 (마감일 < 현재 날짜, 상태 != done)
+ 2. 진행중 (상태 = in_progress)
+ 3. 미진행 (상태 = not_started, 마감일 >= 현재 날짜)
+ 4. 완료 (상태 = done)
+ - 최대 5개
+
+ - **내 회의록**:
+ - 회의 ID, 제목, 일시, 참석자 수, 상태, 생성일시, 수정일시
+ - 필터: 사용자가 참여자 또는 생성자
+ - 정렬: 생성일시 (최근 순)
+ - 최대 3개
+
+ - **공유받은 회의록**:
+ - 회의 ID, 제목, 공유자 정보, 공유 일시, 상태
+ - 필터: 공유 대상 = 현재 사용자
+ - 정렬: 공유 일시 (최근 순)
+ - 최대 3개
+
+ - **통계 데이터** (Desktop):
+ - 예정된 회의 수
+ - 진행 중 Todo 수
+ - Todo 완료율 (완료 / 전체 × 100)
+
+- **연동**:
+ - Meeting 서비스 (회의 정보, 회의록 정보)
+ - Todo 서비스 (Todo 목록)
+ - Share 서비스 (공유 정보)
#### 에러 처리
-- **데이터 로딩 실패**: 해당 카드에 "일시적으로 데이터를 불러올 수 없습니다." 표시, 새로고침 버튼 제공
-- **빈 상태**: "아직 작성한 회의록이 없습니다. 첫 회의를 시작해보세요!"
+- **데이터 로딩 실패**:
+ - 해당 카드에 "일시적으로 데이터를 불러올 수 없습니다." 표시
+ - "다시 시도" 버튼 제공 (새로고침 아이콘)
+ - 로그 기록 및 에러 추적
+
+- **부분 데이터 로딩 실패**:
+ - 실패한 섹션만 에러 표시, 나머지 섹션은 정상 표시
+ - 사용자 경험 최소 방해
+
+- **빈 상태** (각 섹션별):
+ - 예정된 회의: "예정된 회의가 없습니다"
+ - Todo: "할당된 Todo가 없습니다"
+ - 내 회의록: "작성한 회의록이 없습니다. 첫 회의를 시작해보세요!"
+ - 공유받은 회의록: "공유받은 회의록이 없습니다"
+
+- **네트워크 오류**:
+ - "네트워크 연결을 확인해주세요." 토스트 메시지
+ - 자동 재시도 (최대 3회, exponential backoff)
---
@@ -1199,6 +1311,193 @@ graph TD
---
+### 12-회의록목록조회
+
+#### 개요
+- **목적**: 회의록 목록 조회 및 필터링/정렬/검색 기능 제공
+- **관련 유저스토리**: UFR-MEET-030 (회의록 조회), UFR-MEET-045 (회의록 상세 조회)
+- **비즈니스 중요도**: 높음
+- **접근 경로**:
+ - 대시보드 → "내 회의록" 전체 보기
+ - 대시보드 → "공유받은 회의록" 전체 보기
+ - 하단 네비게이션 → "회의록" 메뉴
+
+#### 주요 기능
+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, 회색)
+ - 빈 상태:
+ - 검색 결과 없음: "검색 결과가 없습니다"
+ - 회의록 없음: "회의록이 없습니다"
+
+- **하단 네비게이션** (Fixed, 하단)
+ - 홈, 회의록 (active), Todo, 프로필
+
+**Tablet/Desktop (768px+)**
+- **사이드바** (좌측, Fixed, 240px)
+ - 메인 메뉴
+ - 회의록 목록 (active)
+
+- **메인 콘텐츠** (중앙)
+ - 필터 및 정렬 (상단, 가로 배치)
+ - 참여 유형 필터 (탭 또는 버튼 그룹)
+ - 검색 영역
+ - 통계 정보 (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)
+
+- **권한 없음**:
+ - 접근 권한 없는 회의록 클릭 시:
+ - "접근 권한이 없습니다" 토스트 메시지
+ - 목록으로 복귀
+
+- **빈 상태**:
+ - 검색 결과 없음: "검색 결과가 없습니다"
+ - 필터링 결과 없음: "조건에 맞는 회의록이 없습니다"
+ - 전체 회의록 없음: "회의록이 없습니다. 첫 회의를 시작해보세요!" + 회의 시작 버튼
+
+---
+
## 화면 간 전환 및 네비게이션
### 네비게이션 구조
@@ -1388,6 +1687,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) |
+| 1.3 | 2025-10-21 | 이미준 | 대시보드 및 회의록 목록 화면 개선 (사용자 피드백 반영)
- 02-대시보드: 예정된 회의 카드 추가, Todo 우선순위 정렬 개선 (지연→진행→미진행→완료, 최대 5개), 내 회의록 상태 배지 추가, 공유받은 회의록 섹션 개선
- 12-회의록목록조회: 신규 화면 추가 (필터링/정렬/검색 기능)
- 필터: 참여 유형(공유받은/참석한/생성한), 상태(전체/작성중/확정완료)
- 정렬: 최신 회의순/최신 업데이트순/제목 가나다순
- 검색: 제목/참석자/키워드 통합 검색
- 통계 정보 표시 (전체/작성중/확정완료 개수)
- 참조: design/uiux/prototype_fix 및 design-gappa/uiux/prototype 파일 |
---