shared-dg05-coffeeQuokka/hgzero
1
0
Fork 0
mirror of https://github.com/hwanny1128/HGZero.git synced 2025-12-06 16:06:23 +00:00
Code Issues Packages Projects Releases Wiki Activity
hgzero/design/uiux/uiux.md
yabo0812 fb98ee9522 UI/UX v1.4.19 업데이트 
회의진행화면  인터렉션 등 변경된 유저스토리 내용 반영
2025-10-24 16:38:35 +09:00

2075 lines
116 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 회의록 작성 및 공유 개선 서비스 - UI/UX 설계서
## 문서 정보
- **작성일**: 2025-10-21
- **최종 수정일**: 2025-10-24
- **작성자**: 이미준 (서비스 기획자)
- **버전**: 1.4.19
- **설계 철학**: Mobile First Design
---
## 목차
1. [설계 개요](#설계-개요)
2. [프로토타입 화면 목록](#프로토타입-화면-목록)
3. [화면 간 사용자 플로우](#화면-간-사용자-플로우)
4. [화면별 상세 설계](#화면별-상세-설계)
5. [공통 UI 컴포넌트](#공통-ui-컴포넌트)
6. [공통 에러 메시지 표준](#공통-에러-메시지-표준)
7. [화면 간 전환 및 네비게이션](#화면-간-전환-및-네비게이션)
8. [반응형 설계 전략](#반응형-설계-전략)
9. [접근성 보장 방안](#접근성-보장-방안)
10. [성능 최적화 방안](#성능-최적화-방안)
11. [변경 이력](#변경-이력)
---
## 설계 개요
### 설계 목표
업무 지식이 없는 회의 참석자 누구라도 누락 없이 정확한 회의록을 작성하고 공유할 수 있는 직관적이고 효율적인 사용자 경험 제공
### 설계 원칙
#### 1. Mobile First 철학
- **우선순위 중심**: 작은 화면에서 가장 중요한 콘텐츠와 기능에 집중
- **점진적 향상**: 모바일 기본 경험 우선 구축 후, 화면 크기에 따라 기능 확장
- **성능 최적화**: 모바일 환경의 제약사항(네트워크, 처리 능력) 우선 고려
#### 2. 사용자 중심 설계
- **직관적 인터페이스**: 최소한의 학습으로 사용 가능한 UI
- **명확한 피드백**: 모든 사용자 액션에 대한 즉각적이고 명확한 피드백
- **오류 방지**: 실수를 사전에 방지하는 안전장치 제공
#### 3. 일관성과 예측 가능성
- **일관된 UI 패턴**: 동일한 기능은 항상 동일한 방식으로 표현
- **예측 가능한 동작**: 사용자가 기대하는 대로 동작
- **표준 준수**: 플랫폼별 디자인 가이드라인 준수
### 유저스토리 매핑
본 설계는 다음 유저스토리를 기반으로 작성됨:
- **User 서비스**: UFR-USER-010 (사용자 인증)
- **Meeting 서비스**: UFR-MEET-010 ~ UFR-MEET-060 (회의 관리, 회의록 작성/공유)
- **STT 서비스**: UFR-STT-010, UFR-STT-020 (음성 인식 및 변환)
- **AI 서비스**:
- UFR-AI-010 (AI 회의록 자동 작성)
- UFR-AI-020 (Todo 자동 추출)
- UFR-AI-030 (프롬프팅 기반 회의록 개선)
- **UFR-AI-040 (관련 회의록 자동 연결)** ← 신규 반영
- **RAG 서비스**: UFR-RAG-010, UFR-RAG-020 (맥락 기반 용어 설명)
- **Collaboration 서비스**: UFR-COLLAB-010 ~ UFR-COLLAB-020 (실시간 협업)
- **Todo 서비스**: UFR-TODO-010, UFR-TODO-030 (Todo 관리)
### 주요 추가 기능 (v1.1)
1. **AI 기반 회의 내용 요약 자동 생성**
- 각 섹션 최상단에 AI가 자동으로 생성한 2-3문장 요약 표시
- 참석자가 요약 내용 확인 후 수정 가능
- 실시간 동기화 및 자동 저장
2. **참고자료 자동 연결 (UFR-AI-040)**
- 각 섹션 하단에 관련 회의록 자동 연결
- 이전 회의록 및 맥락상 관련 회의록 링크 제공
- 관련도 표시 (퍼센트 또는 별점)
- 최대 3개 자동 표시, 더보기로 전체 목록 확인 가능
---
## 프로토타입 화면 목록
| 번호 | 화면명 | 관련 유저스토리 | 비즈니스 중요도 | 사이드바 유무 | 이전화면 이동버튼 유무 | 비고 |
|------|--------|----------------|-------------------|-----------|------------------------|-------|
| 01 | 로그인 | UFR-USER-010 | 필수 | 사용자 인증 | X | X | |
| 02 | 대시보드 | - | 필수 | 메인 랜딩 페이지 | O | X | |
| 03 | 회의예약 | UFR-MEET-010 | 높음 | 회의 생성 | X | O | |
| 04 | 템플릿선택 | UFR-MEET-020 | 중간 | 회의록 템플릿 선택 | X | O | |
| 05 | 회의진행 | UFR-MEET-030, UFR-STT-010/020, UFR-AI-010, UFR-COLLAB-010 | 높음 | 실시간 회의 진행 및 회의록 작성 | X | X | |
| 07 | 회의종료 | UFR-MEET-040, UFR-MEET-050 | 높음 | 회의 통계 및 최종 확정 | X | X | |
| 09 | Todo관리 | UFR-TODO-010, UFR-TODO-030 | 높음 | Todo 목록 및 진행 관리 | O | X | |
| 10 | 회의록상세조회 | UFR-MEET-047 | 중간 | 회의록 상세 보기 | X | O | |
| 11 | 회의록수정 | UFR-MEET-055 | 중간 | 지난 회의록 수정 | X | O | |
| 12 | 회의록목록조회 | UFR-MEET-046 | 높음 | 회의록 목록 필터링/정렬/검색 | O | X | |
---
## 화면 간 사용자 플로우
### 주요 사용자 시나리오별 플로우
#### 시나리오 1: 새 회의 진행 (Full Flow)
```
로그인 → 대시보드 → 회의예약 → 템플릿선택 → 회의진행
→ 검증완료 → 회의종료 → 대시보드
```
#### 시나리오 2: 지난 회의록 조회 및 수정
```
로그인 → 대시보드 → 회의록상세조회 → 회의록수정 → 대시보드
```
#### 시나리오 3: Todo 관리
```
로그인 → 대시보드 → Todo관리 → 회의록상세조회 (Todo 출처 확인) → 대시보드
```
#### 시나리오 4: 빠른 회의 시작 (템플릿 스킵)
```
로그인 → 대시보드 → 회의진행 (기본 템플릿) → 회의종료 → 대시보드
```
### 플로우 다이어그램
```mermaid
graph TD
A[로그인] --> B[대시보드]
B --> C[회의예약]
C --> D[템플릿선택]
D --> E[회의진행]
E --> F{검증 완료?}
F -->|Yes| G[회의종료]
F -->|No| E
G --> B
B --> I[회의록상세조회]
I --> J{수정 필요?}
J -->|Yes| K[회의록수정]
K --> I
J -->|No| B
B --> L[Todo관리]
L --> M{Todo 출처 확인?}
M -->|Yes| I
M -->|No| B
E -.실시간 연동.-> L
```
---
## 화면별 상세 설계
### 01-로그인
#### 개요
- **목적**: 사용자 인증 및 시스템 접근 권한 부여
- **관련 유저스토리**: UFR-USER-010
- **비즈니스 중요도**: 필수
- **접근 경로**: 애플리케이션 최초 진입
#### 주요 기능
1. 사번과 비밀번호를 이용한 LDAP 인증
2. 로그인 상태 유지 옵션
3. 비밀번호 찾기/재설정
4. 오류 처리 및 피드백
#### UI 구성요소
**Mobile (320px~768px)**
- 상단: 서비스 로고 및 타이틀
- 중앙: 로그인 폼
- 사번 입력 필드 (필수)
- 비밀번호 입력 필드 (필수, 마스킹)
- "로그인 상태 유지" 체크박스
- 로그인 버튼 (Primary CTA)
- 하단: "비밀번호 찾기" 링크
- 오류 메시지 영역
**Tablet/Desktop (768px+)**
- 좌측: 서비스 소개 및 주요 기능 설명 (선택)
- 우측: 로그인 폼 (모바일과 동일 구조)
#### 인터랙션
1. **입력 검증**
- 실시간 필드 유효성 검사 (형식 오류 즉시 표시)
- 빈 필드 제출 시 해당 필드로 포커스 이동
2. **로그인 처리**
- 로그인 버튼 클릭 → 로딩 인디케이터 표시
- 성공: 대시보드로 자동 이동 (페이드 전환)
- 실패: 오류 메시지 표시 (사번/비밀번호 불일치, 계정 잠금 등)
3. **키보드 인터랙션**
- Enter 키로 다음 필드 이동 또는 로그인 실행
- Tab 키로 포커스 이동
#### 데이터 요구사항
- **입력**: 사번(문자열), 비밀번호(문자열, 최소 8자)
- **출력**: 인증 토큰, 사용자 정보(이름, 권한)
- **연동**: User 서비스 - LDAP 인증 API
#### 에러 처리
- **인증 실패**: "사번 또는 비밀번호가 올바르지 않습니다." (보안상 구체적 정보 제공 X)
- **계정 잠금**: "보안을 위해 계정이 일시적으로 잠겼습니다. 관리자에게 문의하세요."
- **네트워크 오류**: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조
- **서버 오류**: [공통 에러 메시지 - 서버 오류](#서버-오류) 참조
---
### 02-대시보드
#### 개요
- **목적**: 주요 기능 접근 허브, 최근 활동 및 Todo 요약 제공
- **관련 유저스토리**: 여러 유저스토리의 진입점, UFR-MEET-030 (회의록 조회), UFR-TODO-010 (Todo 조회)
- **비즈니스 중요도**: 필수
- **접근 경로**: 로그인 후 메인 화면
#### 주요 기능
1. 빠른 회의 시작 및 예약
2. **예정된/진행중 회의 목록** (upcoming & ongoing meetings)
- 예정된 회의 (아직 시작 전)
- 진행중 회의 (참여 가능한 회의)
3. **내 Todo 우선순위별 표시** (지연중 → 진행중 → 미진행 → 완료, 최대 5개)
4. **내 회의록** (참여자/생성자로 등록된 최근 3개, 상태 포함)
5. 전역 검색
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더** (상단) - **개선안 A 적용 (v1.5)**
- "안녕하세요 👋" (H3, Bold)
- 부제: "오늘 {N}건의 회의가 예정되어 있어요" (Body, 회색)
- N = 예정된 회의 개수 (동적 업데이트)
- 예정된 회의가 없을 경우: "예정된 회의가 없습니다"
- **메인 콘텐츠** (스크롤, padding-bottom: 80px, background: gray-50)
- **통계 카드 컴팩트 배치** (단일 카드) - **개선안 A 적용 (v1.5)**
- 제목: "📊 오늘의 현황" (H5, Semibold)
- 수평 배치 (flex, space-around):
- "📅 예정 {N}" (Icon + Label + Value)
- "✅진행 {N}" (Icon + Label + Value)
- "📈 완료 {N}%" (Icon + Label + Value)
- 높이: ~80px (기존 대비 70% 감소)
- 반응형: 태블릿 이상에서 justify-content: flex-start, gap 증가
- **최근 회의** 섹션
- 헤더: "예정된 회의" (H4) + "전체 보기 →" 링크
- 회의 리스트 (최대 3개, 우선순위 순)
1. **진행중 회의** (우선 표시)
- 상태: 회의 시작됨, 아직 종료 안 됨, 참여 가능
- 긴급 표시: "진행중" 배지 (빨강/주황색, 애니메이션)
2. **예정된 회의** (시작 전)
- 상태: 회의 일시 >= 현재 시간
- D-day 표시 (긴급도에 따라 색상 구분)
- 각 항목:
- **상태 배지** (최우선 표시):
- "진행중" (빨강/주황, 깜빡임 애니메이션) - 진행중 회의
- "D-1", "D-day", "3시간 후" 등 - 예정된 회의
- 회의 제목 (H5)
- 회의 일시 (아이콘: calendar_today)
- 참석자 수 (아이콘: people)
- **역할 표시** (예정된 회의만):
- "생성자" 아이콘 (작은 크라운 아이콘) - 내가 생성한 회의
- "참석자" 아이콘 표시 안 함 - 초대받은 회의
- **액션 버튼** (권한 및 시간 기반):
- **진행중 회의**: "참여하기" 버튼 (Primary, 모든 참석자)
- **예정된 회의 - 생성자**:
- "수정" 버튼 (Secondary, 작은 크기)
- 클릭 시 회의 예약 수정 화면으로 이동
- **예정된 회의 - 초대받은 참석자**:
- 시작 10분 이내: "참여하기" 버튼 활성화 (Primary)
- 시작 10분 초과: 버튼 없음 또는 비활성화
- 타이머 표시: "10분 후 참여 가능" (시작 시간까지 남은 시간)
- 빈 상태: "예정된 회의가 없습니다"
- **내 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가 없습니다"
- **내 회의록** 카드 (개선)
- 헤더: "내 회의록" (H4) + "전체 보기 →" 링크 (회의록 목록 화면으로 이동)
- **최근 회의록 리스트** (최대 3개):
- 필터: 내가 참여자 또는 생성자로 등록된 회의록
- 정렬: 최근 생성 순 (createdAt 기준)
- 각 항목:
- 회의 제목 (H5)
- 회의 일시 (날짜 + 시간)
- 참석자 수
- **상태 배지**:
- "작성중" (draft, 노란색 배지)
- "확정완료" (confirmed, 초록색 배지)
- 최종 수정 시간 (상대 시간: "1시간 전", "어제" 등)
- 클릭 시: 회의록 상세 화면으로 이동
- 빈 상태: "작성한 회의록이 없습니다. 첫 회의를 시작해보세요!"
**Mobile (320px~768px)**
- **하단 네비게이션**: [Mobile 하단 네비게이션](#mobile-하단-네비게이션-320px768px) 참조 (홈 활성)
**Tablet/Desktop (768px+)**
- **좌측 사이드바**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조 (대시보드 활성)
- **메인 콘텐츠** (왼쪽 여백 240px)
- **헤더**
- "안녕하세요, {사용자명}님!" (H2)
- "오늘의 일정을 확인하세요" (부제)
- **통계 카드 그리드** (3개, auto-fit)
- 예정된 회의 (📅)
- 진행 중 Todo (✅)
- Todo 완료율 (📈)
- **최근 회의 그리드** (2-3컬럼)
- 회의 카드들 (진행중 우선)
- 참여하기/수정/보기 버튼
- **할당된 Todo 리스트**
- 화이트 카드 배경
- 각 Todo 항목 구분선
- **내 회의록 리스트**
- 화이트 카드 배경
- 전체보기 → 11-회의록목록조회.html
- **하단 네비게이션**: 숨김 (데스크톱에서는 사이드바 사용)
#### 인터랙션
1. **빠른 액션**
- "새 회의 시작" 클릭 → 템플릿선택 화면으로 이동 (페이드 전환)
- "회의 예약" 클릭 → 회의예약 화면으로 이동
2. **예정된/진행중 회의 인터랙션**
- **진행중 회의** (모든 참석자):
- "참여하기" 버튼 클릭 → 회의 진행 화면으로 즉시 이동
- 회의 항목 클릭 → 회의 상세 정보 표시 (모달 또는 화면 이동)
- 애니메이션: "진행중" 배지 깜빡임 효과 (1초 간격)
- **예정된 회의 - 생성자 (내가 생성한 회의)**:
- "수정" 버튼 클릭 → 회의 예약 수정 화면으로 이동
- 회의 제목, 일시, 참석자, 안건 등 수정 가능
- 저장 시 참석자에게 변경 알림 발송
- 회의 항목 클릭 → 회의 상세 정보 표시
- 크라운 아이콘 표시 (생성자 구분)
- **예정된 회의 - 초대받은 참석자**:
- **시작 10분 이내** (현재 시간 >= 회의 시작 시간 - 10분):
- "참여하기" 버튼 활성화 (Primary)
- 버튼 클릭 → 회의 진행 화면으로 이동
- 실시간 타이머 표시: "5분 후 시작", "곧 시작" 등
- **시작 10분 초과** (현재 시간 < 회의 시작 시간 - 10분):
- "참여하기" 버튼 비활성화 또는 숨김
- 타이머 표시: "25분 후 참여 가능" (회색 텍스트)
- 회의 항목 클릭 → 회의 상세 정보만 표시 (참여 불가 안내)
- 타이머 자동 갱신 (1분 간격)
- **공통**:
- 회의 항목 호버: 카드 그림자 증가
- "전체 보기" 링크 클릭 → 회의 목록 화면으로 이동
3. **카드 인터랙션**
- 회의록 항목 클릭 → 회의록 상세 화면으로 이동
- **Todo 항목 클릭 → 해당 Todo가 포함된 회의록 상세 화면으로 이동**
- URL 파라미터로 회의록 ID와 Todo ID 전달
- 회의록 상세 화면에서 해당 Todo 섹션으로 자동 스크롤
- "전체 보기" 링크 클릭 → 해당 목록 화면으로 이동
- 호버 효과: 카드 그림자 증가, 약간 상승 (transform: translateY(-2px))
4. **검색**
- 검색 아이콘 클릭: 전체 화면 검색 인터페이스 표시
- 실시간 자동완성 및 최근 검색어 제공
#### 데이터 요구사항
- **입력**:
- 사용자 ID (현재 로그인 사용자)
- 현재 날짜/시간 (예정된 회의 필터링용)
- **출력**:
- **예정된/진행중 회의**:
- 회의 ID, 제목, 일시, 참석자 목록, 상태 (예정/진행중), D-day
- **생성자 ID** (권한 판별용)
- **현재 사용자 역할** (creator | attendee)
- **참여 가능 시간** (시작 시간 - 10분)
- 필터 조건:
- **진행중 회의**: 회의 시작 시간 <= 현재 시간 AND 회의 종료 안 됨, 사용자가 참석자 또는 생성자
- **예정된 회의**: 회의 일시 >= 현재 시간, 사용자가 참석자 또는 생성자
- 정렬 우선순위:
1. 진행중 회의 우선 (상태 = ongoing)
2. 예정된 회의 (회의 일시 순, 가까운 순)
- 최대 3개 (진행중 회의 우선)
- **버튼 표시 조건**:
- 진행중 회의: "참여하기" 버튼 (항상 표시)
- 예정된 회의 (생성자): "수정" 버튼 (항상 표시)
- 예정된 회의 (참석자):
- 현재 시간 >= 시작 시간 - 10분: "참여하기" 버튼 활성화
- 현재 시간 < 시작 시간 - 10분: 버튼 비활성화 또는 타이머 표시
- **내 Todo**:
- Todo ID, 제목, 담당자, 마감일, 상태, 우선순위
- 필터: 담당자 = 현재 사용자
- 정렬:
1. 지연중 (마감일 < 현재 날짜, 상태 != done)
2. 진행중 (상태 = in_progress)
3. 미진행 (상태 = not_started, 마감일 >= 현재 날짜)
4. 완료 (상태 = done)
- 최대 5개
- **내 회의록**:
- 회의 ID, 제목, 일시, 참석자 수, 상태, 생성일시, 수정일시
- 필터: 사용자가 참여자 또는 생성자
- 정렬: 생성일시 (최근 순)
- 최대 3개
- **통계 데이터** (Desktop):
- 예정된/진행중 회의 수 (진행중 회의 수 별도 배지)
- 진행 중 Todo 수
- Todo 완료율 (완료 / 전체 × 100)
- **연동**:
- Meeting 서비스 (회의 정보, 회의록 정보)
- Todo 서비스 (Todo 목록)
#### 에러 처리
- **데이터 로딩 실패**:
- 해당 카드에 "일시적으로 데이터를 불러올 수 없습니다." 표시
- "다시 시도" 버튼 제공 (새로고침 아이콘)
- 로그 기록 및 에러 추적
- **부분 데이터 로딩 실패**:
- 실패한 섹션만 에러 표시, 나머지 섹션은 정상 표시
- 사용자 경험 최소 방해
- **빈 상태** (각 섹션별):
- 예정된/진행중 회의: "예정된 회의가 없습니다"
- Todo: "할당된 Todo가 없습니다"
- 내 회의록: "작성한 회의록이 없습니다. 첫 회의를 시작해보세요!"
- **진행중 회의 참여 실패**:
- "회의에 참여할 수 없습니다." 토스트 메시지
- 원인별 안내:
- 회의 종료됨: "이미 종료된 회의입니다"
- 권한 없음: [공통 에러 메시지 - 권한 오류](#권한-오류) 참조
- 네트워크 오류: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조
- **예정된 회의 접근 제한**:
- **시간 제한 (초대받은 참석자)**:
- "아직 참여할 수 없습니다. N분 후 참여 가능합니다." 토스트 메시지
- 10분 전부터 참여 버튼 활성화
- 타이머 자동 갱신 (1분 간격)
- **권한 제한 (수정 시도)**:
- [공통 에러 메시지 - 권한 오류](#권한-오류) 참조
- **회의 수정 실패** (생성자):
- "회의 정보를 수정할 수 없습니다." 토스트 메시지
- 원인별 안내:
- 이미 시작된 회의: "진행 중인 회의는 수정할 수 없습니다"
- 네트워크 오류: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조
- 권한 변경됨: [공통 에러 메시지 - 권한 오류](#권한-오류) 참조
- **네트워크 오류**: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조
---
### 03-회의예약
#### 개요
- **목적**: 예정된 회의 일정 등록 및 참석자 초대
- **관련 유저스토리**: UFR-MEET-010
- **비즈니스 중요도**: 높음
- **접근 경로**: 대시보드 → "회의 예약" 버튼
- **권한**: 모든 사용자 (예약 생성 시 자동으로 회의 생성자가 됨)
#### 주요 기능
1. 회의 기본 정보 입력 (제목, 날짜/시간, 장소)
2. 참석자 추가 (이메일 또는 조직도 검색)
3. 회의 안건 사전 입력 (선택)
4. 참석자 초대 이메일 자동 발송
5. 캘린더 연동
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- 뒤로가기 버튼
- "회의 예약" 타이틀
- "저장" 버튼 (Primary)
- **폼 섹션** (스크롤)
- **회의 제목** (필수)
- 텍스트 입력 필드
- 최대 100자 카운터
- **날짜 및 시간** (필수)
- 날짜 선택기 (달력 UI)
- 시작 시간 선택기
- 종료 시간 선택기
- 종일 토글 (선택)
- **장소** (선택)
- 텍스트 입력 필드
- 온라인/오프라인 토글
- 온라인 선택 시: 회의 링크 자동 생성 옵션
- **참석자** (필수, 최소 1명)
- 참석자 칩 (제거 가능)
- "참석자 추가" 버튼
- 참석자 검색 (이메일 또는 이름)
- **안건** (선택)
- 다중 라인 텍스트 입력
**Tablet/Desktop (768px+)**
- 좌측: 폼 (모바일과 동일)
- 우측: 미리보기 패널 (입력 내용 실시간 프리뷰)
#### 인터랙션
1. **날짜/시간 선택**
- 달력 UI: 과거 날짜 비활성화
- 시간 선택: 30분 단위 드롭다운
- 충돌 감지: 동일 시간대 다른 회의 있을 경우 경고
2. **참석자 추가**
- "참석자 추가" 클릭 → 검색 모달 표시
- 실시간 검색 (이름, 이메일, 부서)
- 선택된 참석자는 칩 형태로 표시
- 칩의 X 버튼으로 제거 가능
3. **저장 처리**
- 필수 필드 검증
- 저장 성공: "회의가 예약되었습니다" 토스트 메시지, 대시보드로 이동
- 초대 이메일 발송 확인 다이얼로그
#### 데이터 요구사항
- **입력**:
- 제목(문자열, 최대 100자)
- 날짜(Date)
- 시작 시간(Time)
- 종료 시간(Time)
- 장소(문자열, 최대 200자, 선택)
- 참석자 목록(이메일 배열)
- 안건(문자열, 선택)
- **출력**: 회의 ID, 초대 이메일 발송 결과
- **연동**: Meeting 서비스, Notification 서비스
#### 에러 처리
- **필수 필드 누락**: 해당 필드에 빨간색 테두리 및 오류 메시지
- **참석자 0명**: "최소 1명의 참석자를 추가해주세요"
- **과거 날짜 선택**: "과거 날짜는 선택할 수 없습니다"
- **저장 실패**: "회의 예약에 실패했습니다. 다시 시도해주세요"
---
### 04-템플릿선택
#### 개요
- **목적**: 회의 유형에 맞는 회의록 템플릿 선택 및 커스터마이징
- **관련 유저스토리**: UFR-MEET-020
- **비즈니스 중요도**: 중간
- **접근 경로**: 대시보드 → "새 회의 시작" 또는 회의예약 → "회의 시작"
- **권한**: 회의 생성자 전용
#### 주요 기능
1. 사전 정의된 템플릿 선택 (일반, 스크럼, 킥오프, 주간)
2. 템플릿 미리보기
3. 섹션 추가/삭제/순서 변경
4. 커스텀 템플릿 저장
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- 뒤로가기 버튼
- "템플릿 선택" 타이틀
- "건너뛰기" 텍스트 버튼 (기본 템플릿 사용)
- **템플릿 카드 리스트**
- 각 템플릿 카드:
- 템플릿 이름 및 아이콘
- 간단한 설명
- "선택" 버튼
- "미리보기" 버튼
- **선택된 템플릿 상세** (모달 또는 전체 화면)
- 섹션 목록 (드래그하여 순서 변경 가능)
- 각 섹션: 이름, 삭제 버튼
- "섹션 추가" 버튼
- "이 템플릿으로 시작" 버튼 (Primary)
**Tablet/Desktop (768px+)**
- 좌측: 템플릿 목록
- 중앙: 선택된 템플릿 미리보기
- 우측: 커스터마이징 패널
#### 인터랙션
1. **템플릿 선택**
- 템플릿 카드 클릭: 해당 템플릿 상세 보기
- "선택" 버튼: 즉시 회의진행 화면으로 이동
2. **커스터마이징**
- 섹션 드래그: 순서 변경 (터치/마우스)
- 섹션 삭제: 스와이프 또는 삭제 아이콘
- 섹션 추가: "섹션 추가" → 섹션 이름 입력 모달
3. **저장 및 시작**
- "이 템플릿으로 시작": 회의진행 화면으로 전환
- 커스텀 템플릿 저장 옵션 (선택)
#### 데이터 요구사항
- **입력**: 없음 (또는 회의 ID - 예약된 회의인 경우)
- **출력**: 선택된 템플릿 구조 (섹션 배열)
- **연동**: Meeting 서비스
#### 에러 처리
- **템플릿 로딩 실패**: "템플릿을 불러올 수 없습니다" + 재시도 버튼
- **빈 템플릿**: "최소 1개의 섹션이 필요합니다"
---
### 05-회의진행
#### 개요
- **목적**: 실시간 회의 진행 및 AI 기반 회의록 자동 작성
- **관련 유저스토리**: UFR-MEET-030, UFR-STT-010/020, UFR-AI-010, UFR-AI-040, UFR-COLLAB-010, UFR-RAG-010/020
- **비즈니스 중요도**: 높음 (핵심 화면)
- **접근 경로**: 템플릿선택 → "이 템플릿으로 시작"
- **권한**:
- 회의 시작/종료: 회의 생성자 전용
- 참석자 초대: 모든 참석자
#### 주요 기능
1. 음성 녹음 및 실시간 텍스트 변환 (STT)
2. AI 자동 회의록 작성 (구조화)
3. **AI 기반 주요 메모 항목 실시간 제안** (UFR-MEET-030)
4. 전문용어 자동 감지 및 맥락 기반 설명
5. **참고자료 자동 연결** (이전 회의록, 관련 회의록)
6. 참석자 관리 및 초대 기능
7. 회의 진행 시간 표시
#### UI 구성요소
**전체 레이아웃**
- **헤더** (Fixed, 상단)
- 좌측: "회의 진행 중" 제목 + 경과시간 배지 (빨강, 01:03)
- 우측: "회의 종료" 버튼 (민트 그린 테두리)
- **메인 콘텐츠 영역: 정보 패널** (탭 구조)
- **탭 네비게이션** (4개 탭)
- 참석자 (3명)
- AI 제안
- 용어 사전
- 관련 자료 (32건)
- **참석자 탭** (4명)
- 제목: "참석자 (4명)" (동적으로 인원수 업데이트)
- **참석자 추가 폼**:
- 이메일 입력 필드: placeholder "이메일 주소 입력", form-control 스타일
- "초대" 버튼: btn btn-primary btn-sm
- 레이아웃: Flex (gap: 8px), 입력창(flex: 1) + 버튼
- 하단 여백: 16px (margin-bottom: var(--space-md))
- **참석자 목록** (아바타 + 이름)
- 김민준 (초록 아바타)
- 박서연 (파랑 아바타)
- 이준호 (노랑 아바타)
- 최유진 (핑크 아바타)
- **각 참석자 아이템**:
- 컬러 아바타 (avatar-sm: 32x32)
- 이름 (text-small font-medium, 14px)
- flex layout, 하단 구분선 (마지막 제외)
- 상태 표시 제거됨 (발언 중/온라인 등 표시 안 함)
- **AI 제안 탭**
- 제목: "AI 제안"
- **카드 디자인** (통일된 스타일):
- 배경: 연한 회색 (#FAFAFA)
- 테두리: 회색 점선 (1px dashed #D0D0D0)
- 테두리 둥글기: 8px
- 내부 패딩: 16px
- 카드 간 여백: 16px
- 헤더 폰트: 16px Bold, 민트 그린 (#4DD5A7)
- 본문 폰트: 14px, gray-700
- 구조: 헤더 + 본문 텍스트 + 액션 버튼
- **용어 사전 탭**
- 제목: "용어 사전"
- 용어 검색 입력 필드 (placeholder: "용어 검색...")
- **카드 디자인** (gappa 스타일):
- 기본 상태:
- 배경: 화이트 (#FFFFFF)
- 테두리: 회색 실선 (1px solid #E5E7EB)
- 테두리 둥글기: 8px
- 내부 패딩: 16px
- 카드 간 여백: 12px
- 하이라이트 상태 (현재 회의에서 언급된 용어):
- 배경: 민트 그린 연한 배경 (#E8F9F3)
- 테두리: 민트 그린 실선 (1px solid #4DD5A7)
- 호버 시: 회색 배경 (#F9FAFB)
- **용어 카드 구조**:
- 용어명 (16px bold) + 카테고리 배지 (민트 그린 연한 배경) + 언급 아이콘 (💬, 언급된 경우만)
- 정의: 14px 일반 텍스트 (gray-600)
- 컨텍스트 (11px, gray-500, 상단 회색 구분선):
- "회의에서 N회 언급됨" (현재 회의에서 언급)
- "관련 회의록에서 언급됨" (관련 회의록에만 언급)
- "회의에서 언급됨 (HH:MM)" (시간 정보 포함)
- "{관련 회의록명} (날짜)에서 {컨텍스트 정보}" (특정 관련 회의록 정보)
- **용어 카드 예시**:
- AI + 기술 배지 + 💬
- 정의: Artificial Intelligence의 약자로, 인공지능을 의미합니다. 이 프로젝트에서는 회의록 자동 작성에 활용됩니다.
- 컨텍스트: "회의에서 5회 언급됨"
- API Gateway + 아키텍처 배지 + 💬
- 정의: 클라이언트와 백엔드 마이크로서비스 사이의 단일 진입점 역할을 하는 서버
- 컨텍스트: "API 설계 리뷰 회의 (2024-09-28)에서 AWS API Gateway 채택 결정"
- 마이크로서비스 + 아키텍처 배지 (하이라이트 없음)
- 정의: 애플리케이션을 작고 독립적인 서비스로 분할하는 소프트웨어 아키텍처 스타일
- 컨텍스트: "관련 회의록에서 언급됨"
- MVP + 방법론 배지 + 💬
- 정의: Minimum Viable Product의 약자
- 컨텍스트: "회의에서 언급됨 (14:23)"
- RESTful API + 기술 배지 + 💬
- 정의: REST 아키텍처 스타일로 작성한 웹 서비스 API 설계 방식
- 컨텍스트: "회의에서 3회 언급됨"
- 카드 클릭 시: 상세 설명 모달 표시
- **관련 자료 탭** (32건)
- 제목: "관련 회의록 (32건)"
- **카드 디자인** (gappa 스타일):
- 배경: 회색 (#F5F5F5)
- 테두리: 회색 점선 (1px dashed #9CA3AF)
- 테두리 둥글기: 8px
- 내부 패딩: 16px
- 카드 간 여백: 12px
- 호버 시: 회색 배경 (#F3F4F6)
- 구조: 헤더 + 메타정보 + 요약 텍스트
- **관련 회의록 카드 구조**:
- 헤더: 회의록 제목 (16px bold)
- 메타정보: 날짜 + 관련도 (12px, gray-500)
- 요약: 회의록 핵심 내용 또는 관련 컨텍스트 (14px 일반, gray-600)
- **관련 회의록 예시**:
- "2024년 4분기 제품 기획 회의"
- 메타정보: 2024-10-15 | 관련도 92%
- 요약: 신규 회의록 서비스의 MVP 범위와 일정을 논의. AI 기반 회의 요약 기능의 우선순위를 높게 설정.
- "API 설계 리뷰 회의"
- 메타정보: 2024-09-28 | 관련도 78%
- 요약: RESTful API 설계 패턴과 API Gateway 채택. 마이크로서비스 간 통신 방식 결정.
- "스프린트 회고 회의"
- 메타정보: 2024-10-01 | 관련도 65%
- 요약: 협업 도구 사용성 개선과 MVP 개발 프로세스 최적화 논의.
- 카드 클릭 시: **새 탭으로 열기** (target="_blank")
**반응형 디자인**
- **Mobile (320px~768px)**
- 헤더: 고정 상단, 좁은 너비
- 메인 콘텐츠: 전체 너비 사용
- 탭 콘텐츠: 세로 스크롤
- 하단 버튼 영역: 고정 하단
- **Desktop (768px+)**
- 헤더: 고정 상단, 넓은 너비
- 메인 콘텐츠: 최대 너비 제한 없이 반응형
- 탭 콘텐츠: 더 넓은 영역 활용
- 하단 버튼 영역: 고정 하단
#### 인터랙션
1. **탭 전환**
- **참석자 탭**: 현재 회의 참석자 목록 표시 (4명) 및 참석자 추가 기능
- **참석자 추가 폼** (상단):
- 이메일 입력 필드 (form-control 스타일, placeholder: "이메일 주소 입력")
- "초대" 버튼 (btn btn-primary btn-sm)
- 이메일 입력 후 "초대" 클릭 시:
1. 이메일 유효성 검증 (정규식: /^[^\s@]+@[^\s@]+\.[^\s@]+$/)
2. 빈 값 체크: 빈 값이면 "이메일 주소를 입력해주세요" 경고 토스트
3. 잘못된 형식: "올바른 이메일 형식이 아닙니다" 오류 토스트
4. 유효한 이메일: "{email}에게 초대 링크가 전송되었습니다" 성공 토스트
5. 입력창 초기화 (value = '')
6. 실제 구현 시 서버 API 호출 (/api/meetings/invite)
- **참석자 목록** (하단):
- 각 참석자: 아바타 + 이름
- 상태 표시 없음 (발언 중/온라인 등 제거)
- 참석자 수 동적 업데이트 (초대 성공 시)
- **AI 제안 탭**: AI가 생성한 주요 메모 항목 제안 (UFR-MEET-030)
- **실시간 주요 메모 추천**:
- 음성→텍스트 변환 후 AI가 실시간으로 회의 내용 분석
- **중요한 내용으로 판단된 경우에만** 주요 메모 항목 제안
- 논의항목/결정사항 등의 구분 없이 중요 내용을 주요 메모로 제안
- 추천 빈도는 중요 내용 발생에 따라 가변적 (고정 간격 아님)
- 각 제안 항목에 "주요 메모에 추가" 버튼 제공
- 클릭 시 해당 안건의 주요 메모에 자동 저장
- 실시간 업데이트: 새로운 제안은 상단에 표시
- **용어 사전 탭**: 회의에서 언급된 전문용어 설명
- **용어 검색 기능**:
- 검색 입력창 (placeholder: "용어 검색...", form-control 스타일)
- 검색 버튼 (btn btn-primary btn-sm)
- Enter 키 지원
- 검색 동작:
1. 용어명과 정의 모두 검색
2. 일치하는 용어만 표시, 나머지는 숨김
3. 검색 결과에 하이라이트 효과 적용
4. 검색 결과 없으면 전체 목록 다시 표시
5. 입력창이 비어있으면 전체 목록 표시
- 용어 카드: 용어명 + 카테고리 배지 + 간단한 정의
- 카드 클릭 → 확장하여 상세 설명 표시
- 상세 설명: 이 회의에서의 의미, 관련 회의록 링크
- **관련 자료 탭**: AI가 찾은 관련 회의록 (32건)
- 회의록 링크 클릭 → **새 탭(target="_blank")에서 해당 회의록 열기**
- **녹음 중인 페이지 이탈 방지**: 모든 링크는 새 탭으로 열림
- 관련도 표시: 퍼센트 또는 별점으로 시각화
2. **회의 종료**
- 헤더의 "회의 종료" 버튼 클릭
- 확인 다이얼로그 표시: "회의를 종료하시겠습니까?"
- 확인 → 회의 종료 처리 및 07-회의종료.html로 이동
3. **실시간 업데이트**
- STT 음성 인식 결과 실시간 반영 (3-5초 주기)
- AI 제안 실시간 업데이트
- 용어 사전 자동 업데이트 (새로운 전문용어 감지 시)
- 관련 회의록 목록 동적 갱신
#### 데이터 요구사항
- **입력**:
- 회의 ID
- 오디오 스트림 (실시간 STT용)
- 참석자 초대 이메일
- **출력**:
- 실시간 텍스트 변환 결과 (STT)
- **AI 제안 목록** (주요 메모 항목 제안)
- **전문용어 및 설명** (용어 사전)
- **관련 회의록 목록** (32건, 관련도 포함)
- 참석자 목록
- **연동**:
- STT 서비스 (UFR-AI-010)
- AI 서비스 (주요 메모 제안 생성, UFR-AI-040)
- RAG 서비스 (관련 회의록 검색, 전문용어 자동 감지)
- Collaboration 서비스 (실시간 동기화)
#### 에러 처리
- **마이크 권한 거부**: "마이크 권한이 필요합니다" 토스트 + 설정 안내 링크
- **STT 실패**: "음성 인식에 실패했습니다" 토스트 + 재시도 안내
- **AI 제안 생성 실패**: "AI 제안을 불러올 수 없습니다" 토스트
- **용어 사전 로드 실패**: "용어 사전을 불러올 수 없습니다" 메시지 표시
- **관련 자료 검색 실패**: "관련 회의록을 찾을 수 없습니다" 메시지 표시
- **참석자 초대 실패**: "초대 링크 전송에 실패했습니다" 토스트 + 재시도 버튼
- **동기화 실패**: "네트워크 연결을 확인해주세요" 토스트
- **회의 종료 실패**: "회의 종료 중 오류가 발생했습니다" 토스트 + 재시도 버튼
---
### 07-회의종료
#### 개요
- **목적**: 회의 종료 후 AI 요약 내용 확인 및 다음 단계 선택
- **관련 유저스토리**: UFR-MEET-040, UFR-MEET-050, UFR-AI-010, UFR-AI-020, UFR-AI-036
- **비즈니스 중요도**: 높음
- **접근 경로**: 회의진행 → "회의 종료" 버튼
- **권한**: 회의 생성자 전용
- **화면 정책**: **확인 전용 화면 (편집 불가)**
- 모든 내용은 읽기 전용
- 안건 내용 수정 불가
- Todo 수정 불가
- 확인 후 다음 단계 선택만 가능
#### 주요 기능
1. 회의 통계 표시 (시간, 참석자, 발언 횟수 등)
2. 주요 키워드 클라우드
3. **안건별 AI 요약 전체 표시** (신규)
- 안건별 AI 한줄 요약 (30자 이내, 편집 불가)
- 안건별 상세 요약 정리
- 안건별 Todo 자동 추출 결과
4. **3가지 선택 옵션 제공** (신규)
- 옵션 1: 회의록 수정 화면으로 이동
- 옵션 2: 바로 최종 확정
- 옵션 3: 대시보드로 이동
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- "회의가 종료되었습니다" 메시지
- 회의 제목
- **통계 카드**
- 회의 총 시간
- 참석자 수
- 주요 키워드 (태그 클라우드)
- **안건별 AI 요약 섹션** (신규)
- **안건 카드** (안건 개수만큼 반복):
- **안건 제목** (H4, Bold)
- **AI 한줄 요약** (읽기 전용, 회색 배경 박스)
- 30자 이내 간결한 표현
- 🔒 "편집 불가" 아이콘 표시
- 민트 그린 좌측 액센트 라인
- **상세 요약 정리** (읽기 전용)
- 발언자별 의견
- 결정 사항
- 보류 사항
- **Todo 자동 추출 결과** (있는 경우)
- Todo 항목 리스트
- 담당자, 마감일, 우선순위 표시
- 읽기 전용 (체크박스 비활성화)
- **3가지 선택 옵션** (하단 액션 바)
- **옵션 1**: "회의록 수정" 버튼 (Secondary)
- 회의록 수정 화면(11-회의록수정)으로 이동
- 회의록 상태: 작성중
- **옵션 2**: "바로 최종 확정" 버튼 (Primary, 강조)
- 확인 다이얼로그: "AI가 정리한 내용 그대로 최종 확정하시겠습니까?"
- 모든 안건 자동 검증 완료 처리
- 회의록 상태: 확정완료
- 참석자에게 확정 알림 발송
- **옵션 3**: "대시보드로 이동" 버튼 (Ghost)
- 회의록 상태: 작성중 (추후 편집 가능)
- 대시보드로 이동
**Tablet/Desktop (768px+)**
- 상단: 통계 카드 (Grid Layout)
- 중앙: 안건별 AI 요약 섹션 (2열 그리드)
- 하단: 3가지 선택 옵션 버튼 (가로 배치)
#### 인터랙션
1. **통계 표시**
- 애니메이션 효과로 숫자 카운트업
- 차트는 페이드인 효과
2. **안건별 AI 요약 확인** (읽기 전용)
- **안건 카드 확장/축소**:
- 초기: 안건 제목 + AI 한줄 요약만 표시
- 클릭 시: 상세 요약 + Todo 전체 펼침
- **편집 불가 안내**:
- AI 한줄 요약 영역에 🔒 아이콘 표시
- 호버 시: "이 내용은 편집할 수 없습니다" 툴팁
- **Todo 확인**:
- 체크박스 비활성화 (disabled)
- 읽기 전용 표시
3. **다음 단계 선택**
- **옵션 1: 회의록 수정**
- 11-회의록수정.html로 이동
- URL 파라미터: meetingId
- 회의록 상태: 작성중
- **옵션 2: 바로 최종 확정**
- 확인 다이얼로그 표시
- 확인 시:
- 모든 안건 검증률 100% 자동 설정
- 회의록 상태: 확정완료
- 확정 시간 기록
- 참석자에게 확정 알림 발송
- 성공 토스트: "회의록이 최종 확정되었습니다"
- 02-대시보드.html로 이동
- **옵션 3: 대시보드로 이동**
- 회의록 상태: 작성중
- 02-대시보드.html로 이동
- 추후 회의록 목록에서 편집 가능
#### 데이터 요구사항
- **입력**: 회의 ID
- **출력**:
- 회의 통계 (시간, 참석자 수, 발언 통계, 키워드)
- **안건별 AI 요약 데이터**:
- 안건 제목
- AI 한줄 요약 (30자 이내)
- 상세 요약 정리 (논의 주제, 발언자별 의견, 결정 사항, 보류 사항)
- 안건별 Todo 목록 (제목, 담당자, 마감일, 우선순위)
- 회의록 상태 (작성중/확정완료)
- **연동**: Meeting 서비스, AI 서비스, Todo 서비스
#### 에러 처리
- **통계 생성 실패**: "통계를 생성할 수 없습니다" + 건너뛰기 옵션
- **AI 요약 생성 실패**: "AI 요약을 생성할 수 없습니다. 회의록 수정 화면에서 직접 작성해주세요"
- **바로 확정 실패**: "회의록 확정에 실패했습니다. 다시 시도해주세요"
- **네트워크 오류**: 자동 재시도 3회, 실패 시 재시도 버튼 제공
---
### 09-Todo관리
#### 개요
- **목적**: 나의 Todo(내가 담당자인 Todo) 조회 및 관리
- **관련 유저스토리**: UFR-TODO-040 (Todo 관리)
- **비즈니스 중요도**: 높음
- **접근 경로**: 대시보드 → 하단 네비게이션 "Todo" 또는 대시보드 "내 Todo" 카드 → "전체 보기"
- **권한**: 모든 회의 참석자 (본인이 담당자인 Todo만 조회/수정 가능)
- **대전제**:
- Todo의 상태는 완료/미완료만 존재
- 09-Todo관리 화면에서는 나의 Todo(내가 담당자인 Todo)만 표시
#### 주요 기능
1. 나의 Todo 목록 표시 (필터링)
2. Todo 완료/미완료 상태 변경
3. Todo 편집 (모달)
4. 회의록 상세로 이동 (양방향 연결)
5. Todo 통계 (전체, 마감임박, 지연)
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- "Todo 관리" 타이틀
- 프로필 아이콘 (모바일)
- **상단 통계 블록** (3개 블록, 정보 표시 전용)
- **디자인 특징**:
- 플랫한 디자인 (그림자 제거, 호버 효과 없음)
- 상태별 컬러 배경
- 큰 숫자 + 작은 레이블로 정보 계층 명확화
- **미완료**: 미완료 전체 개수 (블루)
- **마감임박**: 기한 3일 이내 미완료 개수 (오렌지)
- **지연**: 기한이 지난 미완료 개수 (레드)
- **필터 탭**
- **전체 (개수)**: 완료/미완료 전체
- **지연 (개수)**: 기한이 지난 미완료
- **마감임박 (개수)**: 기한 3일 이내 미완료
- **완료 (개수)**: 완료된 Todo
- **Todo 리스트 블록**
- **정렬**: 미완료 → 완료 순서, 기한일 오래된 순 (복합 정렬)
- **각 Todo 카드** (컴팩트 디자인):
- **레이아웃 구조**:
```
[체크박스] [배지] [배지] [✏️]
[Todo 제목]
[🔗 회의록 링크] [마감일]
```
- **좌측**: **체크박스** (완료/미완료 토글, 24×24px)
- **우측 상단**: **✏️ 편집 버튼** (absolute position, 32×32px 아이콘 버튼)
- 호버: 연한 회색 배경 + 1.1배 확대
- 권한 있는 경우에만 노출 (미완료 Todo)
- **콘텐츠 영역** (상단→하단 순서):
- **배지 영역**: 상태 뱃지 + 우선순위 뱃지 (가로 배치)
- 상태 뱃지: D+n(지연) / D-day / D-n / 완료
- 우선순위 뱃지: 높음(빨강) / 보통(노랑) / 낮음(회색)
- **Todo 제목** (일반 폰트)
- **하단 메타 정보**: 회의록 링크 + 마감일 (연한 회색)
- 🔗 회의록 제목 (연한 초록색 링크, 클릭 시 10-회의록상세조회 대시보드 탭으로 이동)
- 마감일 (회색 텍스트)
- **담당자 정보**: 표시 안 함 (간결한 디자인)
- **카드 스타일**:
- 얇은 테두리 (1px solid #gray-200)
- 얇은 그림자 (0 1px 3px rgba(0,0,0,0.08))
- 호버: 테두리 Primary 컬러로 변경 + 그림자 증가
- **페이징**: 최초 10건 노출, 10건 이상일 경우 하단에 "10개 더보기" 버튼
**Tablet/Desktop (768px+)**
- 좌측 사이드바 + 메인 콘텐츠 영역
- 통계 블록 3개 가로 배치
- Todo 리스트 그리드 레이아웃 (2열)
- 편집 버튼: 32×32px 아이콘 버튼 (우측 상단 고정)
#### 인터랙션
1. **Todo 완료/미완료 상태 변경**
- **체크박스 클릭**:
- 완료 처리 시: "완료 처리하시겠습니까?" 확인 모달
- 미완료로 되돌릴 때: "미완료로 변경하시겠습니까?" 확인 모달
- 확인 시: 상태 업데이트, 통계 갱신, 리스트 재정렬
- 취소 시: 이전 상태 유지
2. **Todo 편집 (UFR-TODO-040)**
- **편집 버튼 클릭** (권한: 담당자 본인 OR 회의 생성자):
- 편집 모달 표시
- **모바일**: 전체화면 모드
- `position: fixed`, 화면 전체 크기 (100vh)
- Flexbox 구조: 헤더(고정) + 바디(스크롤) + 푸터(고정)
- 바디 영역만 스크롤 가능 (`overflow-y: auto`, `-webkit-overflow-scrolling: touch`)
- 닫기 버튼 크기 확대 (40×40px)
- **데스크톱**: 중앙 모달 (max-width: 600px, max-height: 90vh)
- **수정 가능 항목**:
- ✏️ Todo 제목 (input, 필수)
- 👤 담당자 (select, 회의록 참석자 중 선택) - **회의 생성자만 변경 가능**
- 📅 마감일 (날짜 선택기, 필수)
- 🎯 우선순위 (높음/보통/낮음 select, 필수)
- **권한 표시**:
- 담당자 본인: "본인에게 할당된 Todo만 수정할 수 있습니다. 담당자는 변경할 수 없습니다."
- 회의 생성자: "회의 생성자로서 모든 항목을 수정할 수 있습니다. 담당자 변경 시 알림이 전송됩니다."
- **버튼 배치**:
- 모바일: 하단 고정, 가로로 균등 배치 (`flex: 1`)
- 데스크톱: 모달 하단, 우측 정렬
- **저장 버튼 클릭**:
- 유효성 검사 (제목, 마감일 필수)
- "Todo가 수정되었습니다" 토스트 메시지
- 회의록에 수정 내용 실시간 반영
- 담당자 변경 시: 이전/새 담당자에게 알림 발송
- 마감일 변경 시: 캘린더 자동 업데이트
- **취소 버튼**: 모달 닫기, 변경 사항 취소
3. **회의록 링크 클릭**
- 10-회의록상세조회 화면으로 이동
- **대시보드 탭이 우선 노출**
4. **필터 탭 클릭**
- 선택한 필터 기준으로 Todo 목록 갱신
- 활성 탭 강조 표시
5. **10개 더보기 버튼**
- 클릭 시 하단에 10건씩 추가 로드
- 페이지 새로고침 없이 무한 스크롤 방식
#### 디자인 요구사항
- **정보 블록 vs 인터랙티브 블록 시각적 차별화**:
- **통계 블록** (정보 표시):
- 플랫한 디자인, 그림자 제거
- 상태별 색상 배경
- 호버 효과 없음 (읽기 전용 의도 명확화)
- **Todo 카드** (인터랙티브):
- 얇은 테두리 + 얇은 그림자
- 호버: 테두리 색상 변경 + 그림자 증가
- 체크박스, 편집 버튼, 회의록 링크 액션 가능
- **편집 버튼 디자인**:
- ✏️ 이모지 아이콘 사용 (Material Icons 대신)
- 32×32px 정사각형 아이콘 버튼
- 우측 상단 절대 위치 (absolute positioning)
- 호버: 연한 회색 배경 + 1.1배 확대 애니메이션
- **모바일 최적화**:
- 바텀시트 편집 모달 (전체 화면 X)
- 터치 영역 최소 44px × 44px
- 컴팩트 카드 레이아웃으로 스크롤 최소화
#### 데이터 요구사항
- **입력**: 사용자 ID (내가 담당자인 Todo만 조회)
- **출력**:
- Todo 목록 (제목, 상태, 담당자, 마감일, 우선순위, 회의록 제목, 회의록 ID)
- Todo 통계 (전체, 마감임박, 지연, 완료)
- **연동**: Meeting 서비스 (Todo 관리 통합)
#### 에러 처리
- **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 개수 / 전체 Todo 개수)
- 진행률 퍼센트 중앙 표시 (예: "60%")
- 색상: Primary 색상 (#4DD5A7)
- 크기: 80px (Desktop), 60px (Mobile)
- 상태별 필터 탭 (전체/시작 전/진행 중/완료)
- 담당자별 그룹화
- 각 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 수정)**
- **비즈니스 중요도**: 중간
- **접근 경로**: 10-회의록상세조회 → 하단 액션 바 "수정" 버튼 클릭
- **권한 제어**:
- **검증완료 전**: 모든 참석자가 수정 가능
- **검증완료 후**: 회의 생성자만 수정 가능 (참석자는 "수정" 버튼 비활성화)
#### 주요 기능
1. 회의 기본 정보 표시 및 수정
- 회의 제목: 수정 가능
- 회의 일시/장소: 읽기 전용 (회의 예약 화면에서만 변경 가능)
- 참석자 관리: 회의 생성자만 추가/삭제 가능
2. **회의록 내용 수정 (안건별)** - 용어 변경: 섹션 → 안건
3. **AI 한줄 요약 표시 (안건별, UFR-AI-036)** - 신규
- 편집 불가능한 AI 한줄 요약 (30자 이내)
- 각 안건 최상단에 표시
4. **AI 상세 요약 수정 (안건별)** - 기존 AI 요약 기능
5. **참고자료 편집** (추가/제거)
6. **Todo 수정 (UFR-TODO-040)** - 회의 생성자만
7. **안건별 검증 (UFR-COLLAB-030)** - 신규
- 안건별 검증 완료 체크박스
- 회의 생성자: 잠금 해제 후 수정 가능
- 참석자: 읽기 전용
8. 자동 저장 (30초 간격)
9. 수정 이력 관리
10. 상태 변경 (검증완료 → 작성중으로 자동 변경)
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- 뒤로가기 버튼 (10-회의록상세조회로 이동)
- "회의록 수정" 타이틀
- "저장" 버튼 (Primary)
- 자동 저장 인디케이터 ("저장됨", "저장 중...")
- **회의 기본 정보 영역**
- 회의 제목: 편집 가능 (텍스트 필드)
- 회의 일시: 읽기 전용 (📅 아이콘 + 날짜/시간 표시)
- 회의 장소: 읽기 전용 (📍 아이콘 + 장소명)
- 참석자 목록:
- 회의 생성자: 추가/삭제 가능 (05-회의진행 화면과 동일한 UI)
- 참석자: 읽기 전용 표시
- 각 참석자: 아바타 + 이름, 삭제(×) 버튼 (생성자는 삭제 불가)
- "참석자 추가" 버튼 (이메일 입력 + 초대)
- 회의록 상태 배지 (자동 관리)
- **편집 화면**
- **안건별 편집 영역** (용어 변경: 섹션 → 안건)
- 각 안건:
- **안건 헤더**
- 안건 제목 (H4, Bold)
- 검증 상태 배지 (검증완료/미검증)
- **AI 한줄 요약** (편집 불가, UFR-AI-036) - 신규
- 🔒 아이콘 + 30자 이내 한줄 요약
- 읽기 전용 (회색 배경, 민트 그린 좌측 액센트 라인)
- 호버 시: "이 내용은 편집할 수 없습니다" 툴팁
- **AI 상세 요약 편집 영역**
- 💡 "AI 상세 요약" 레이블 (명칭 변경)
- 요약 텍스트 편집 필드 (textarea)
- "AI 재생성" 버튼 (요약 다시 생성)
- 마지막 수정 시간 표시
- 편집 가능한 텍스트 영역
- 논의 주제
- 발언자별 의견
- 결정 사항
- 보류 사항
- **참고자료 편집 영역**
- 기존 참고자료 목록 (제거 버튼 포함)
- "참고자료 추가" 버튼
- 회의록 검색 및 선택 UI
- **Todo 섹션 편집 영역** (회의 생성자만)
- Todo 목록 표시
- 각 Todo 항목:
- 체크박스 (완료 상태)
- Todo 제목
- 담당자 (변경 가능)
- 마감일 (변경 가능)
- 우선순위 (변경 가능)
- "편집" 버튼 (인라인 편집 활성화)
- "삭제" 버튼
- "Todo 추가" 버튼
- **안건별 검증 영역** (UFR-COLLAB-030) - 신규
- **회의 생성자 화면**:
- 검증 완료 체크박스 (활성화)
- "잠금 해제" 버튼 (검증완료 안건만 표시)
- **참석자 화면**:
- 🔒 "읽기 전용" 배지 (검증완료 안건)
- 안내 텍스트: "(잠금됨 · 회의 생성자만 수정 가능)"
- 자동 저장 상태 표시 ("저장됨", "저장 중...")
**Tablet/Desktop (768px+)**
- **헤더**: Mobile과 동일 (뒤로가기, 타이틀, 저장 버튼, 자동 저장 인디케이터)
- **메인 영역**:
- 회의 기본 정보 영역 (Mobile과 동일)
- 편집 화면 (안건별 편집, AI 한줄/상세 요약, 참고자료, Todo, 안건별 검증)
- **우측 패널** (선택사항):
- 수정 이력 (v2.0 고도화 예정)
- 미리보기
#### 인터랙션
1. **화면 진입**
- 10-회의록상세조회 → "수정" 버튼 클릭
- 권한 확인: 검증완료 후에는 회의 생성자만 접근 가능
- 바로 편집 모드로 시작
2. **내용 수정**
- 텍스트 영역 클릭: 포커스 및 편집 가능
- 자동 저장: 30초 간격, 인디케이터 표시
- 수동 저장: "저장" 버튼 클릭
3. **AI 한줄 요약 확인 (UFR-AI-036)** - 신규
- **읽기 전용 표시**:
- 🔒 아이콘으로 편집 불가 명시
- 회색 배경 + 민트 그린 좌측 액센트 라인
- **호버 인터랙션**:
- 툴팁 표시: "이 내용은 편집할 수 없습니다"
- **위치**: 각 안건 최상단 (안건 제목 바로 아래)
4. **AI 상세 요약 편집**
- 요약 텍스트 필드 클릭: 직접 수정 가능
- "AI 재생성" 버튼 클릭:
- 현재 안건 내용 기반으로 상세 요약 재생성
- 로딩 인디케이터 표시
- 생성 완료 시 자동 업데이트
- 자동 저장 (30초 간격)
5. **안건별 검증 (UFR-COLLAB-030)** - 신규
- **회의 생성자 권한**:
- 검증 완료 체크박스 클릭:
- 체크: 안건 검증 완료 처리 (배지 "검증완료"로 변경)
- 언체크: 미검증 상태로 변경
- "잠금 해제" 버튼 클릭 (검증완료 안건만 표시):
- 확인 다이얼로그: "이 안건의 잠금을 해제하시겠습니까?"
- 확인 시: 안건 편집 가능 상태로 변경
- **참석자 화면**:
- 검증완료 안건: 🔒 "읽기 전용" 배지 표시
- 안내 텍스트: "(잠금됨 · 회의 생성자만 수정 가능)"
- 모든 입력 필드 비활성화 (disabled)
- **검증률 계산 및 표시**:
- 검증률 = 검증 완료된 안건 수 / 전체 안건 수
- 헤더에 검증률 표시 (예: "검증률: 70% (7/10)")
- 모든 안건 검증 완료 시 "최종 확정" 버튼 활성화
6. **참고자료 편집**
- "참고자료 추가" 버튼 클릭:
- 회의록 검색 모달 표시
- 제목, 날짜, 키워드로 검색
- 선택된 회의록 추가
- 제거 버튼 (X): 참고자료 목록에서 제거
- 순서 변경: 드래그하여 순서 조정 (선택)
7. **Todo 섹션 편집 (UFR-TODO-040)** (회의 생성자만)
- **권한 제어**:
- 회의 생성자만 Todo 섹션 편집 가능
- 일반 참석자는 조회만 가능 (편집 버튼 숨김)
- **편집 버튼 클릭**:
- 인라인 편집 모드 활성화
- **수정 가능 항목** (회의 생성자 권한):
- ✏️ Todo 제목
- 👤 담당자 (드롭다운 선택, 참석자 목록)
- 📅 마감일 (날짜 선택기)
- 🎯 우선순위 (high/medium/low)
- "저장" 버튼: 수정 완료
- "취소" 버튼: 편집 모드 취소
- **수정 완료 시**:
- "Todo가 수정되었습니다" 토스트 메시지
- 회의록 자동 저장
- 담당자 변경 시: 이전/새 담당자에게 알림 발송
- 마감일 변경 시: 캘린더 자동 업데이트
- **Todo 추가**:
- "Todo 추가" 버튼 클릭
- Todo 정보 입력 모달 (제목, 담당자, 마감일, 우선순위)
- 저장 시 Todo 목록에 추가
- **Todo 삭제**:
- "삭제" 버튼 클릭
- 확인 다이얼로그 ("삭제하시겠습니까?")
- 삭제 시 Todo 목록에서 제거
- 담당자에게 삭제 알림 발송
8. **상태 변경**
- 확정완료 회의록 수정 시: 자동으로 "작성중" 상태로 변경
- 모든 안건 검증 완료 시: "확정완료"로 변경 제안
#### 데이터 요구사항
- **입력**:
- 회의록 ID (조회)
- 수정 내용 (안건 ID, 내용) - 용어 변경: 섹션 → 안건
- **AI 한줄 요약** (읽기 전용, 입력 불가) - 신규
- **AI 상세 요약 수정** (안건 ID, 요약 내용)
- **참고자료 변경** (추가/제거할 회의록 ID)
- **안건별 검증 상태** (안건 ID, 검증 여부) - 신규
- **출력**:
- 회의록 목록 (필터/정렬/검색 결과)
- 수정 결과 (성공/실패)
- **AI 한줄 요약** (회의 종료 시 생성, 편집 불가) - 신규
- **AI 상세 요약 재생성 결과**
- 수정 이력 (누가, 언제, 무엇을)
- **검증률** (검증 완료된 안건 수 / 전체 안건 수) - 신규
- **연동**: Meeting 서비스, AI 서비스 (UFR-AI-010, UFR-AI-036, UFR-AI-040), Collaboration 서비스 (UFR-COLLAB-030)
#### 에러 처리
- **권한 없음**: "본인이 작성한 회의록만 수정할 수 있습니다"
- **자동 저장 실패**: "네트워크 연결을 확인해주세요. 로컬에 임시 저장됩니다"
- **AI 요약 재생성 실패**: "요약 생성에 실패했습니다. 수동으로 작성해주세요"
- **참고자료 검색 실패**: "회의록을 검색할 수 없습니다"
- **충돌 발생**: "다른 참석자가 동일한 부분을 수정했습니다" + 병합 옵션
- **삭제 실패**: "회의록 삭제에 실패했습니다"
---
### 12-회의록목록조회
#### 개요
- **목적**: 회의록 목록 조회 및 필터링/정렬/검색 기능 제공
- **관련 유저스토리**: UFR-MEET-046 (회의록목록조회)
- **비즈니스 중요도**: 높음
- **프로토타입**: design/uiux/prototype/12-회의록목록조회.html
- **데이터 소스**: common.js → SAMPLE_MINUTES 배열 (30개 샘플 데이터)
- **접근 경로**:
- 대시보드 → "내 회의록" 전체 보기
- 하단 네비게이션 → "회의록" 메뉴
- **권한**: 모든 회의 참석자 (본인이 참석한 회의록만 조회)
#### 데이터 아키텍처
- **데이터 레이어**: common.js의 SAMPLE_MINUTES 배열
- 총 30개 샘플 데이터 (작성중 13개, 확정완료 17개)
- 각 회의록 객체 구조: id, meetingId, title, date, time, status, participants, participantCount, lastUpdated, sections, todos, completionRate
- **뷰 레이어**: 12-회의록목록조회.html
- JavaScript 기반 동적 렌더링
- renderMeetings() 함수: 필터링/정렬/검색 로직 처리 후 목록 생성
- createMeetingCard() 함수: 개별 회의록 카드 HTML 생성
- **렌더링 방식**:
- 페이지 로드 시: DOMContentLoaded 이벤트에서 renderMeetings() 호출
- 초기 표시: 10개 회의록 (displayedCount 변수로 관리)
- 추가 로딩: "10개 더보기" 버튼 클릭 시 10개씩 증가
- 필터/정렬/검색 시: 즉시 renderMeetings() 재호출하여 목록 갱신
#### 주요 기능
1. **회의록 목록 조회** (참여/생성한 회의록)
2. **필터링 기능**:
- 참여 유형: 참석한 회의, 생성한 회의
- 상태: 전체, 작성중, 확정완료
3. **정렬 기능**:
- 최근수정순 (수정 일시 기준, 최근 순) - 기본값
- 최근회의순 (회의 일시 기준, 최근 순)
- 제목순 (가나다순)
4. **검색 기능**:
- 제목, 참석자, 키워드로 통합 검색
- 실시간 검색 결과 업데이트
5. **페이지네이션**:
- 초기 10개 회의록 표시
- "10개 더보기" 버튼으로 추가 로딩
6. 회의록 상세 조회 (항목 클릭 시)
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더** (Fixed, 상단)
- 뒤로가기 버튼
- "내 회의록" 타이틀
- 검색 아이콘 (검색창 포커스)
- **필터 및 정렬** (상단, 스크롤 가능)
- **필터 행 1** (2컬럼 그리드):
- 상태 필터 (Select)
- 옵션: 전체, 작성중, 확정완료
- 기본값: 전체
- 정렬 (Select)
- 옵션: 최신순, 회의일시순, 제목순
- 기본값: 최신순
- **참여 유형 필터** (탭 형식, 선택):
- 전체 (기본 선택)
- 참석한 회의
- 생성한 회의
- **검색 영역**
- 검색 입력 필드
- Placeholder: "회의 제목, 참석자, 키워드 검색"
- 실시간 검색 (입력 시 즉시 필터링)
- **통계 정보** (카드, 선택)
- 3컬럼 그리드:
- 전체: {count}개
- 작성중: {count}개
- 확정완료: {count}개
- 구분선으로 시각적 분리
- **회의록 목록** (스크롤 가능)
- 각 회의록 항목 (meeting-item):
- **좌측 영역**:
- 회의 제목 (H5, 볼드)
- **생성자 표시**: 현재 사용자가 회의 생성자인 경우 👑 아이콘 표시 (16px, title="생성자")
- 메타정보 (Caption, 회색):
- 회의 일시 (날짜 + 시간) · 참석자 수
- 검증완료율 (작성중 상태일 때만): "✓ {completionRate}% 검증완료" 배지
- 최종 수정 시간 (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 요약 및 참고자료 기능 추가<br>- 05-회의진행: AI 회의 내용 요약 자동 생성 및 참고자료 자동 연결 추가<br>- 10-회의록상세조회: 섹션별 AI 요약 표시 및 참고자료 영역 추가<br>- 11-회의록수정: AI 요약 수정 및 참고자료 편집 기능 추가<br>- 관련 유저스토리: UFR-AI-040 (관련 회의록 자동 연결) |
| 1.1.1 | 2025-10-21 | 이미준 | 회의록 상세 화면 구조 개선 (프로토타입 기반)<br>- 10-회의록상세조회: 탭 기반 네비게이션 추가 (회의록/대시보드)<br>- 대시보드 탭 추가: 핵심내용, 결정사항, Todo 진행상황, 참고자료 섹션<br>- 참고자료 관련도 점수 표시 (백분율 + 색상 코딩)<br>- 참고자료 카테고리 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)<br>- 참조: design-gappa/uiux/prototype 파일 (11-회의록대시보드.html, 05-회의진행.html) |
| 1.1.2 | 2025-10-21 | 이미준 | 대시보드 및 회의록 목록 화면 개선 (사용자 피드백 반영)<br>- 02-대시보드: 예정된 회의 카드 추가, Todo 우선순위 정렬 개선 (지연→진행→미진행→완료, 최대 5개), 내 회의록 상태 배지 추가<br>- 11-회의록목록조회: 신규 화면 추가 (필터링/정렬/검색 기능)<br> - 필터: 참여 유형(참석한/생성한), 상태(전체/작성중/확정완료)<br> - 정렬: 최신 회의순/최신 업데이트순/제목 가나다순<br> - 검색: 제목/참석자/키워드 통합 검색<br> - 통계 정보 표시 (전체/작성중/확정완료 개수)<br>- 참조: design/uiux/prototype_fix 및 design-gappa/uiux/prototype 파일 |
| 1.2 | 2025-10-21 | 이미준 | 대시보드 진행중 회의 표시 기능 추가<br>- 02-대시보드: 예정된 회의 카드에 진행중 회의 포함<br> - 진행중 회의 우선 표시 (최상단)<br> - "진행중" 배지 (빨강/주황, 깜빡임 애니메이션)<br> - "참여하기" 버튼으로 즉시 회의 참여 가능<br> - 정렬: 진행중 회의 → 예정된 회의 (일시 순)<br>- 데이터 요구사항: 회의 상태 (ongoing) 추가, 진행중 회의 필터 조건 정의<br>- 에러 처리: 진행중 회의 참여 실패 시나리오 추가 (종료됨/권한없음/네트워크오류) |
| 1.2.1 | 2025-10-21 | 이미준 | 대시보드 예정된 회의 역할 기반 접근 제어 추가<br>- 02-대시보드: 예정된 회의에 생성자/참석자별 차별화된 권한 적용<br> - **생성자 권한**: 회의 수정 가능 (크라운 아이콘 표시, "수정" 버튼)<br> - **참석자 권한**: 시작 10분 전부터 참여 가능 ("참여하기" 버튼 조건부 활성화)<br> - 실시간 타이머 표시 (참여 가능 시간 카운트다운, 1분 간격 갱신)<br>- UI 구성요소: 역할 표시 (크라운 아이콘), 액션 버튼 (역할 및 시간 기반 조건부 렌더링)<br>- 인터랙션: 생성자 수정 플로우, 참석자 시간 기반 참여 플로우, 타이머 자동 갱신<br>- 데이터 요구사항: 생성자 ID, 사용자 역할 (creator\|attendee), 참여 가능 시간 계산<br>- 에러 처리: 시간 제한 접근, 권한 제한 수정 시도, 회의 수정 실패 시나리오 추가 |
| 1.2.2 | 2025-10-21 | 최유진 | 회의진행 화면 개선 및 스타일 가이드 작성<br>- 05-회의진행: 사용성 개선<br> - **참고자료 링크**: 새 탭(target="_blank")으로 열기 기능 추가 (녹음 중 페이지 이탈 방지)<br> - **참석자 추가 초대**: 회의 진행 중 참석자 추가 초대 기능 추가<br> - 초대 모달: 이메일 입력, 조직 내 사용자 검색, 권한 선택 (편집 가능/읽기 전용)<br> - 실시간 참석자 목록 업데이트 및 알림 발송 (이메일/앱 푸시)<br> - 권한 제어: 생성자는 모든 참석자 초대 가능, 일반 참석자는 회의 설정에 따라 결정<br>- design/uiux/style-guide.md: 신규 작성 (reference/sampleimg 샘플 이미지 기반)<br> - 민트 그린(#4DD5A7) 프라이머리 컬러 적용<br> - Mobile First 디자인 시스템 정의<br> - 15개 섹션: 컬러, 타이포그래피, 간격, 카드, 버튼, 배지, 아이콘, 네비게이션, 폼, 모달, 애니메이션, 접근성, 반응형 등 |
| 1.2.3 | 2025-10-21 | 이미준 | 네비게이션 간소화 및 Todo 상세 이동 개선<br>- **설정 메뉴 제거**: 모든 화면에서 설정 메뉴 제거 (사이드바, 하단 네비게이션, 메뉴 모달)<br> - 로그아웃 기능은 프로필 영역으로 통합<br> - 네비게이션 단순화로 사용자 혼란 최소화<br>- **02-대시보드 Todo 인터랙션 개선**:<br> - Todo 항목 클릭 시 해당 Todo가 포함된 회의록 상세 화면으로 이동<br> - URL 파라미터로 회의록 ID와 Todo ID 전달<br> - 회의록 상세 화면에서 해당 Todo 섹션으로 자동 스크롤<br>- 프로토타입 파일 수정: 02-대시보드.html, 09-Todo관리.html, 05-회의진행.html, 05-회의진행-old.html, 05-회의진행 - 복사본.html |
| 1.3 | 2025-10-21 | 이미준 | 프로토타입 반응형 네비게이션 및 회의진행 화면 전면 개편<br>- **02-대시보드**: 반응형 네비게이션 구조 적용<br> - Mobile: 하단 네비게이션 (홈/회의록/Todo, 프로필 메뉴 제거)<br> - Desktop: 왼쪽 사이드바 (240px, 로고/메뉴/사용자 정보)<br> - 통계 카드 추가 (예정된 회의/진행 중 Todo/완료율)<br> - 모든 네비게이션 링크 정확한 화면으로 연결<br>- **05-회의진행**: 2열 구조로 전면 재설계<br> - 왼쪽 영역 (60-70%): 텍스트 에디터 (툴바 + contentEditable)<br> - 오른쪽 영역 (30-40%): 탭 패널 (참석자/AI 제안/용어 사전/관련 자료)<br> - AI 제안: 적용하기 버튼으로 왼쪽 영역에 자동 삽입<br> - 관련 자료: 새 탭으로 열기 (target="_blank"), 녹음 중 페이지 이탈 방지<br>- **10-회의록상세조회**: 타임라인 탭 제거<br> - 탭 구조 단순화: 회의록/대시보드 (2개 탭만 유지)<br> - 타임라인 관련 UI 및 인터랙션 모두 제거<br>- 참조: reference/sampleimg 샘플 이미지 기반 디자인 |
| 1.3.1 | 2025-10-21 | 도그냥 | 회의진행 화면 AI 제안 탭 기능 상세화 및 디자인 통일성 개선<br>- **05-회의진행**: AI 제안 탭 3가지 제안 유형 추가 및 상세 인터랙션 정의<br> - **논의사항 제안**: "논의사항에 적용" 버튼 클릭 시 논의사항 섹션(section-1)에 내용 자동 추가, 자동 탭 전환, 성공 토스트 표시<br> - **결정사항 제안**: "결정사항에 적용" 버튼 클릭 시 결정사항 섹션(section-2)에 내용 자동 추가, 자동 탭 전환, 성공 토스트 표시<br> - **액션아이템 제안**: "3개 Todo 생성" 버튼 클릭 시 액션아이템 섹션(section-3)에 중복 체크 후 추가, 자동 탭 전환, 성공 토스트 표시<br> - 중복 체크 로직: Set 자료구조로 기존 Todo 제목과 비교, 중복 제외한 항목만 추가<br>- **AI 제안 카드 디자인 통일성 개선**:<br> - 배경: #FAFAFA (연한 회색) - 용어사전/관련회의록 탭과 동일<br> - 테두리: 1px dashed #D0D0D0 (회색 점선) - 통일된 스타일<br> - 헤더: 16px Bold, 민트 그린 (#4DD5A7) - 일관된 타이틀 스타일<br> - 본문: 14px, gray-700 - 가독성 중심<br>- 프로토타입 파일 수정: design/uiux/prototype/05-회의진행.html |
| 1.3.2 | 2025-10-21 | 도그냥 | 회의진행 화면 참석자 탭 개선 및 UI 일관성 강화<br>- **05-회의진행**: 참석자 탭 참석자 추가 기능 및 UI 정리<br> - **참석자 추가 폼 추가**: 이메일 입력 필드(form-control) + "초대" 버튼(btn btn-primary btn-sm)<br> - 이메일 유효성 검증: 정규식으로 형식 체크<br> - 빈 값 체크: "이메일 주소를 입력해주세요" 경고 토스트<br> - 잘못된 형식: "올바른 이메일 형식이 아닙니다" 오류 토스트<br> - 성공: "{email}에게 초대 링크가 전송되었습니다" 토스트 + 입력창 초기화<br> - **참석자 상태 표시 제거**: 발언 중/온라인 등 상태 아이콘 및 텍스트 모두 제거<br> - **참석자 수 동적 업데이트**: 4명으로 업데이트 (최유진 추가)<br> - **참고자료 영역 제거**: 회의개요 탭의 참고자료 섹션 삭제 (우측 관련회의록 탭으로 통합)<br>- **버튼 스타일 통일**: 모든 버튼에 .btn 기본 클래스 추가<br> - 편집 버튼 (4개 섹션): btn btn-ghost btn-sm<br> - AI 제안 적용 버튼 (3개): btn btn-primary btn-sm<br> - 수정 버튼 (3개): btn btn-ghost btn-sm<br> - 하단 일시정지/종료 버튼: btn btn-ghost, btn btn-error<br>- **검색창 스타일 통일**: 용어사전 검색창을 .input → .form-control 클래스로 변경<br>- 프로토타입 파일 수정: design/uiux/prototype/05-회의진행.html |
| 1.3.3 | 2025-10-21 | 도그냥 | UI/UX 설계 문서 최적화 및 중복 제거<br>- **공통 UI 컴포넌트 섹션 신규 작성**: 반복 사용되는 UI 컴포넌트를 공통 섹션으로 분리<br> - **Mobile 하단 네비게이션**: 위치, 배경, 그림자, 3개 항목 (홈/회의록/Todo) 상세 스펙 정의<br> - **Desktop 좌측 사이드바**: 로고 영역, 메뉴 리스트, 사용자 정보 영역 상세 스펙 정의<br> - **상단 헤더**: Mobile/Desktop별 제목, 액션 버튼 배치 가이드<br>- **공통 에러 메시지 표준 섹션 신규 작성**: 반복 사용되는 에러 메시지를 표준화<br> - **네트워크 오류**: 자동 재시도 3회 (exponential backoff), 토스트 메시지, 재시도 버튼<br> - **데이터 로딩 실패**: 스켈레톤 UI 30초, 타임아웃 처리, 재시도 버튼<br> - **권한 오류**: 401/403 에러 처리, 명확한 안내 메시지<br> - **인증 오류**: 토큰 만료 자동 갱신, 로그인 리다이렉트<br> - **입력 검증 오류**: 실시간 인라인 검증, 포커스 이동<br> - **서버 오류**: 500 에러 에러 ID 제공, 고객센터 안내<br>- **중복 내용 참조 링크 교체**: 8개 화면에서 반복된 네비게이션/에러 메시지 설명을 공통 섹션 참조로 변경<br> - 01-로그인, 02-대시보드, 12-회의록목록조회 등<br> - 예상 파일 크기 감소: 1,500~2,200자 (약 8~10%)<br>- **목차 업데이트**: 공통 UI 컴포넌트, 공통 에러 메시지 표준 섹션 추가 |
| 1.4 | 2025-10-22 | 이미준 | 프로토타입 기반 네비게이션 사양 업데이트<br>- **Mobile 하단 네비게이션**: 4개 메뉴 항목으로 복원 (홈/회의록/Todo/프로필)<br> - 프로필 메뉴 추가: 👤 아이콘, 사용자 정보 및 설정 접근<br> - 프로토타입 구현 기준 반영 (12-회의록목록조회.html 등)<br>- **일관성 개선**: 프로토타입과 UI/UX 설계서 간 네비게이션 사양 통일<br>- **스타일 가이드 동기화**: design/uiux/style-guide.md v1.2와 정합성 확보 |
| 1.4.1 | 2025-10-23 | 강지수 | 대시보드 모바일 UI/UX 개선 (360px 최적화)<br>- **헤더 개선안 A 적용**: 간결한 인사 + 실질적 정보<br> - "안녕하세요 👋" (H3, Bold)<br> - "오늘 {N}건의 회의가 예정되어 있어요" (동적 업데이트)<br> - 2줄 구조 제거로 세로 공간 절약<br>- **통계 카드 개선안 A 적용**: 컴팩트 수평 배치<br> - 단일 카드 "📊 오늘의 현황" (H5, Semibold)<br> - 수평 배치: "📅 예정 {N}", "✅ 진행 {N}", "📈 완료 {N}%"<br> - 높이 ~80px (기존 대비 70% 감소)<br> - 반응형: 태블릿 이상에서 justify-content: flex-start<br>- **프로토타입 파일**: design/uiux/prototype/02-대시보드-개선.html 신규 생성<br>- **모바일 우선 반응형 설계**: 웹/태블릿 화면에서도 자연스러운 레이아웃 유지<br>- **참조**: design/uiux/ref_img/레이아웃 이상.png (개선 요구사항 이미지) |
| 1.4.2 | 2025-10-23 | 강지수 | 회의록 공유 기능 전면 제거<br>- **제거 배경**: 회의 참가자가 아니면 대상자 선정 불가능, 기능 중복 및 논리적 모순 해결<br>- **유저스토리**: UFR-MEET-060 (회의록공유) 제거<br>- **UI/UX 설계서**:<br> - 08-회의록공유 화면 전체 제거<br> - 02-대시보드: "공유받은 회의록" 섹션 제거<br> - 09-회의록상세조회: 공유 버튼 제거 (메뉴: 수정/삭제만 유지)<br> - 11-회의록목록조회: 카테고리 필터 수정 (전체/참석한 회의/생성한 회의)<br> - Desktop 사이드바: "공유받은 회의록" 메뉴 제거<br>- **화면 번호 재정렬**: 08-Todo관리, 09-회의록상세조회, 10-회의록수정, 11-회의록목록조회<br>- **프로토타입 파일**: 08-회의록공유.html 삭제 예정<br>- **검토 문서**: design/uiux/crosscheck-report.md (상세 검토 의견 및 수정 계획) |
| 1.4.3 | 2025-10-23 | 강지수 | 유저스토리-설계서-프로토타입 일관성 개선 (요구사항설계검토-report.md 반영)<br>- **화면번호 프로토타입 파일명 기준 통일**:<br> - 프로토타입 화면 목록 테이블 화면번호 수정<br> - 09: Todo관리 (09-Todo관리.html) - 변경 없음<br> - 10: 회의록상세조회 (10-회의록상세조회.html) - 변경 없음<br> - 11: 회의록수정 (11-회의록수정.html) - 09→11 변경<br> - 12: 회의록목록조회 (12-회의록목록조회.html) - 11→12 변경<br> - 설계서 본문 섹션 제목 화면번호 수정<br> - ### 09-Todo관리 (08→09 변경)<br> - ### 10-회의록상세조회 (변경 없음)<br> - ### 11-회의록수정 (10→11 변경)<br> - ### 12-회의록목록조회 (11→12 변경)<br>- **유저스토리 화면정보 추가 및 수정**:<br> - UFR-MEET-046 (회의록목록조회): 화면번호 "12-회의록목록조회" 추가, 카테고리 필터에서 "공유받은 회의" 제거<br> - UFR-MEET-047 (회의록상세조회): 화면번호 "10-회의록상세조회" 추가, 관련 유저스토리 ID 수정 (UFR-MEET-045 → UFR-MEET-047)<br>- **설계서 유저스토리 매핑 정확성 개선**:<br> - 10-회의록상세조회: UFR-MEET-045 → UFR-MEET-047 수정<br> - 12-회의록목록조회: UFR-MEET-030, UFR-MEET-045 → UFR-MEET-046 수정<br>- **일관성 달성**: 유저스토리, UI/UX 설계서, 프로토타입 간 완전한 화면번호 및 파일명 일치<br>- **검토 문서**: design/uiux/요구사항설계검토-report.md (상세 검토 의견 및 개선 계획) |
| 1.4.4 | 2025-10-23 | 강지수, 도그냥 | Todo 수정 기능 추가 (UFR-TODO-040)<br>- **유저스토리**: UFR-TODO-040 (Todo수정) 신규 추가<br> - 회의록 확정 전/후 Todo 수정 기능<br> - 권한별 수정 범위: 담당자(본인 Todo만), 회의 생성자(모든 Todo)<br> - 수정 항목: 제목, 담당자, 마감일, 우선순위<br>- **09-Todo관리**: Todo 수정 기능 추가<br> - "편집" 버튼 추가 (완료되지 않은 본인 Todo만 표시)<br> - Todo 편집 모달: 제목, 마감일, 우선순위 수정 (담당자 변경 불가)<br> - 수정 완료 시 회의록에 실시간 반영, 마감일 변경 시 캘린더 자동 업데이트<br> - 권한 제어: 본인에게 할당된 Todo만 편집 버튼 표시<br>- **11-회의록수정**: Todo 섹션 편집 기능 추가 (회의 생성자만)<br> - Todo 목록 표시 및 인라인 편집 (제목, 담당자, 마감일, 우선순위)<br> - Todo 추가/삭제 기능<br> - 담당자 변경 시 이전/새 담당자에게 알림 발송<br>- **프로토타입**: design/uiux/prototype/09-Todo관리.html 수정 (편집 모달 및 기능 구현) |
| 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 표시) |
| 1.4.8 | 2025-10-23 | 강지수 | Todo 관리 화면 UI/UX 개선 (컴팩트 디자인 및 시각적 계층 차별화)<br>- **09-Todo관리**: 통계 블록 및 Todo 카드 디자인 전면 개선<br> - **통계 블록**: 정보 표시 전용 디자인으로 변경<br> - 그라데이션 제거 → 모던한 단색 배경 + 좌측 4px 액센트 라인<br> - 상태별 연한 단색 배경 (블루 #F8FBFF / 오렌지 #FFFBF5 / 레드 #FFF8F8)<br> - 호버 효과 추가: 살짝 떠오르는 애니메이션 (translateY -2px)<br> - 미묘한 그림자로 깊이감 표현 (0 1px 3px rgba(0,0,0,0.05))<br> - 모바일에서도 3개 블록 한 줄 유지 (grid-template-columns: repeat(3, 1fr))<br> - 큰 숫자 + 작은 레이블로 정보 계층 명확화<br> - **Todo 카드**: 컴팩트 레이아웃으로 재설계<br> - 레이아웃: [체크박스] [배지] [배지] [✏️] / [제목] / [🔗 링크] [마감일]<br> - 편집 버튼: 우측 상단 절대 위치, ✏️ 이모지 아이콘 사용 (32×32px)<br> - 담당자 정보 제거 (간결한 디자인)<br> - 얇은 테두리 + 얇은 그림자로 인터랙티브 의도 명확화<br> - **Todo 편집 모달**: 모바일 전체화면 모드로 변경<br> - 모바일: 전체화면 (100vh), 헤더/바디/푸터 flexbox 구조<br> - 바디 영역만 스크롤 가능 (overflow-y: auto, -webkit-overflow-scrolling: touch)<br> - 데스크톱: 중앙 모달 (max-width: 600px, max-height: 90vh)<br> - 버튼 크기 확대 (40px) 및 가로 균등 배치 (flex: 1)<br> - **시각적 차별화**: 정보 블록 vs 인터랙티브 블록<br> - 통계 블록: 정보 표시 + 부드러운 호버 효과<br> - Todo 카드: 인터랙티브 (호버 시 테두리/그림자 변경)<br>- **프로토타입**: design/uiux/prototype/09-Todo관리.html 전면 개선 |
| 1.4.9 | 2025-10-23 | 강지수 | 회의록 상세조회 화면 Todo 진행상황 섹션 정책 추가<br>- **10-회의록상세조회**: Todo 진행상황 섹션에 전체 진행률 표시 추가<br> - **전체 진행률**: 원형 진행 바로 완료 Todo / 전체 Todo 비율 표시<br> - 진행률 퍼센트 중앙 표시 (예: "60%")<br> - 색상: Primary 색상 (#4DD5A7)<br> - 크기: 80px (Desktop), 60px (Mobile)<br> - **개별 Todo 진행률 바 제거**: Todo는 완료/미완료 상태만 존재하므로 개별 진행률 표시 불필요<br> - Todo 카드 구성: 제목 + 마감일 + 우선순위 배지만 표시<br>- **이유**: 회의록에 포함된 Todo의 전체 완료 상황을 한눈에 파악하기 위함 |
| 1.4.10 | 2025-10-23 | 강지수 | 대시보드 카드 디자인 통일 및 Todo 카드 스타일 공통화<br>- **02-대시보드**: 모든 카드 레이아웃 일관성 개선 (배지 우선 배치)<br> - **나의 Todo 카드**: 담당자 정보 제거 → 회의록 링크로 변경<br> - 메타 정보: 🔗 회의 제목 + 마감일 (담당자 정보 제거, 나의 Todo이므로 불필요)<br> - 09-Todo관리.html과 동일한 구조 적용<br> - **나의 회의록 카드**: 배지 + 제목 + 👑 레이아웃 통일<br> - 1줄: [상태배지] 제목 👑<br> - 2줄: 📅 날짜/시간 👥 인원수 완료율%<br> - **최근 회의 카드**: 배지 + 제목👑 + 메타정보 3줄 구조<br> - 1줄: [상태배지] 제목👑<br> - 2줄: 📅 날짜/시간 👥 인원수<br> - 3줄: 📍 장소<br>- **공통 스타일 관리**: Todo 카드 스타일 common.css로 이동<br> - common.css 1767-1890 라인에 Todo 카드 공통 스타일 추가<br> - 02-대시보드.html, 09-Todo관리.html에서 중복 스타일 제거 (~240줄 절감)<br> - 페이지별 전용 스타일만 개별 파일에 유지<br>- **샘플 데이터 개선**: common.js 샘플 데이터 정책 명확화<br> - SAMPLE_TODOS: status는 not_started/completed만 사용, progress 항목 제거<br> - SAMPLE_MINUTES: lastUpdated를 날짜 형식으로 변경, participantCount 의미 주석 추가, draft 상태 최소 1개 보장<br>- **유지보수성 향상**: 모든 화면에서 동일한 Todo 카드 디자인, 중앙 관리로 일관성 보장<br>- **프로토타입**: 02-대시보드.html, 09-Todo관리.html, common.css, common.js 수정 |
| 1.4.11 | 2025-10-23 | 강지수 | 회의 진행 화면 액션아이템 탭 UI/UX 개선<br>- **05-회의진행**: 액션아이템 섹션 사용성 개선<br> - **"편집" 버튼 제거**: 전체 영역 편집 버튼 삭제, "추가" 버튼으로 변경<br> - **Todo 카드별 편집 버튼 추가**: 10-회의록상세조회 화면과 동일한 구조<br> - 각 Todo 카드 우측에 ✏️ 편집 버튼 배치<br> - common.css의 .todo-card 스타일 재사용으로 일관성 유지<br> - **Todo 편집 모달 구현**: 추가/편집 공통 모달<br> - 모달 제목: "Todo 추가" 또는 "Todo 편집" (동적 변경)<br> - 입력 필드: Todo 제목(필수), 담당자 선택(필수), 마감일(필수), 우선순위(필수)<br> - 유효성 검사: 각 필드별 필수 검증<br> - 모바일: 전체화면 모달 (100vh), 데스크톱: 중앙 모달 (600px)<br> - **인터랙션 정의**:<br> - "추가" 버튼: 빈 모달 표시, 모든 필드 초기화<br> - "편집" 버튼: 기존 Todo 데이터 로드 및 모달 표시<br> - "저장" 버튼: 유효성 검사 후 저장, 성공 토스트 표시<br>- **JavaScript 함수 추가**: addTodoItem(), editTodoItem(todoId), saveTodoItem()<br>- **프로토타입**: design/uiux/prototype/05-회의진행.html 수정 (~100줄 추가)<br>- **스타일 가이드**: design/uiux/style-guide.md v1.2.1 (변경 이력 추가)<br>- **일관성**: 10-회의록상세조회, 09-Todo관리 화면과 Todo 카드 편집 방식 통일 |
| 1.4.12 | 2025-10-23 | 강지수 | 05-회의진행 화면 Todo 카드 스타일 10-회의록상세조회와 완전 통일<br>- **Todo 카드 HTML 구조 통일**:<br> - 기존: inline-flex 기반 간소화 구조<br> - 변경: `.todo-card` > `.todo-top` > (`.todo-checkbox-wrapper` + `.todo-content-wrapper` + `.todo-actions`) 구조<br> - 10-회의록상세조회.html과 100% 동일한 HTML 구조 적용<br>- **CSS 스타일 추가**: 페이지 하단 `<style>` 블록에 완전한 Todo 카드 스타일 추가<br> - `.todo-card`: 카드 기본 스타일 (padding, border, shadow, hover 효과)<br> - `.todo-checkbox`: 24px 체크박스 (border-radius 6px, checked 시 success 색상)<br> - `.todo-badges`: D-day 배지 + 우선순위 배지 컨테이너<br> - `.todo-title`: font-body, regular 스타일 제목<br> - `.todo-meta-row`: 담당자 + 마감일 메타 정보<br> - `.todo-actions`: 절대 위치 (top-right) 편집 버튼<br> - `.icon-btn`: 32px 아이콘 버튼, 호버 시 scale(1.1) 효과<br> - `.completed` 상태: opacity 0.5, 취소선, gray 배경<br>- **JavaScript 함수 추가**: `toggleTodoComplete(todoId, isChecked)` 구현<br> - 완료 처리: 확인 다이얼로그 → .completed 클래스 추가 → 성공 토스트<br> - 미완료 처리: 확인 다이얼로그 → .completed 클래스 제거 → 정보 토스트<br> - 사용자 취소 시: 체크박스 상태 원복<br>- **샘플 데이터 업데이트**: 3개 Todo 카드에 D-day 배지 추가<br> - Todo 1: D-2 (badge-warning) + 높음<br> - Todo 2: D-7 (badge-primary) + 보통<br> - Todo 3: D-day (badge-error) + 높음<br>- **프로토타입**: design/uiux/prototype/05-회의진행.html 수정 (~120줄 추가)<br>- **스타일 가이드**: design/uiux/style-guide.md v1.2.2 (변경 이력 추가)<br>- **완전한 일관성**: 05-회의진행 ≡ 10-회의록상세조회 ≡ 09-Todo관리 (3개 화면 Todo 카드 100% 통일) |
| 1.4.13 | 2025-10-23 | 강지수 | 05-회의진행 화면 D-day 배지 제거 (회의 중 Todo는 마감일 미확정)<br>- **정책 변경**: 회의 진행 중 Todo는 마감일이 확정되지 않았으므로 D-day 배지 숨김<br> - 회의 중 작성되는 Todo의 마감일은 임시 값<br> - 회의 종료 후 회의록 확정 시 마감일도 함께 확정<br>- **Todo 카드 배지 수정**: 우선순위 배지만 표시<br> - Todo 1: 높음 (D-day 배지 제거)<br> - Todo 2: 보통 (D-day 배지 제거)<br> - Todo 3: 높음 (D-day 배지 제거)<br>- **마감일 표시 간소화**: "2025-10-23 마감" → "마감: 10/23"<br> - 연도 제거로 가독성 향상<br> - 짧은 형식으로 카드 공간 효율 개선<br>- **다른 화면 비교**:<br> - 09-Todo관리: D-day 배지 표시 (확정된 회의록의 Todo)<br> - 10-회의록상세조회: D-day 배지 표시 (확정 완료된 회의록)<br> - 05-회의진행: D-day 배지 숨김 (진행 중, 마감일 미확정)<br>- **프로토타입**: design/uiux/prototype/05-회의진행.html 수정<br>- **스타일 가이드**: design/uiux/style-guide.md v1.2.3 (변경 이력 추가) |
| 1.4.14 | 2025-10-24 | 이미준 | 12-회의록목록조회 화면 데이터 아키텍처 문서화<br>- **데이터 아키텍처 섹션 추가**: 데이터/뷰 레이어 분리 구조 설명<br> - 데이터 레이어: common.js → SAMPLE_MINUTES 배열 (30개 샘플)<br> - 뷰 레이어: 12-회의록목록조회.html → renderMeetings(), createMeetingCard() 함수<br> - 렌더링 방식: 동적 렌더링, 초기 10개 표시, "10개 더보기" 버튼으로 추가 로딩<br>- **정렬 옵션 레이블 변경**: "최신순" → "최근수정순", "회의일시순" → "최근회의순"<br>- **페이지네이션 기능 문서화**: 초기 10개 표시, "10개 더보기" 버튼 기능 설명<br>- **샘플 데이터 분포 명시**: 총 30개 (작성중 13개, 확정완료 17개)<br>- **프로토타입 파일 경로 추가**: design/uiux/prototype/12-회의록목록조회.html<br>- **스타일 가이드 버전 동기화**: v1.2.4 |
| 1.4.15 | 2025-10-24 | 이미준 | 06-검증완료 화면 삭제 (유저스토리 v2.1.2 변경사항 반영)<br>- **화면 삭제**: 06-검증완료 화면 전체 삭제<br> - 안건별 검증 기능이 11-회의록수정 화면으로 통합됨<br> - 섹션별 검증 방식에서 안건별 검증 방식으로 변경 (유저스토리 UFR-COLLAB-030 → 안건 기반 구조로 전환)<br>- **유저스토리 매핑 업데이트**:<br> - Collaboration 서비스: UFR-COLLAB-010 ~ UFR-COLLAB-030 → UFR-COLLAB-010 ~ UFR-COLLAB-020로 변경<br> - 프로토타입 화면 목록 테이블에서 06-검증완료 행 제거<br>- **화면 번호 유지**: 다른 화면 번호는 변경하지 않음 (프로토타입 파일명 유지)<br> - 07-회의종료, 09-Todo관리, 10-회의록상세조회, 11-회의록수정, 12-회의록목록조회 번호 유지<br>- **변경 이력**: 과거 버전의 UFR-COLLAB-030 언급은 역사적 맥락으로 유지 |
| 1.4.16 | 2025-10-24 | 이미준 | 사용자 역할 용어 통일 (유저스토리 v2.1.2 반영)<br>- **용어 정의 명확화**: "회의 생성자"와 "회의 참석자" 용어로 통일<br> - 설계 목표: "회의록 작성자" → "회의 참석자"로 수정<br>- **화면별 권한 정보 추가**:<br> - 03-회의예약: 모든 사용자 (예약 생성 시 자동으로 회의 생성자가 됨)<br> - 04-템플릿선택: 회의 생성자 전용<br> - 05-회의진행: 회의 시작/종료는 회의 생성자 전용, 회의록 편집은 모든 참석자<br> - 07-회의종료: 회의 생성자 전용<br> - 09-Todo관리: 모든 회의 참석자 (본인이 담당자인 Todo만 조회/수정 가능)<br> - 10-회의록상세조회: 모든 회의 참석자 (조회 전용)<br> - 11-회의록수정: 검증완료 전(모든 참석자), 검증완료 후(회의 생성자만) - 기존 권한 제어 유지<br> - 12-회의록목록조회: 모든 회의 참석자 (본인이 참석한 회의록만 조회)<br>- **스타일 가이드 동기화**: design/uiux/style-guide.md v1.2.5 (용어 정의 섹션 추가)<br>- **통일성 달성**: 유저스토리, 화면설계서, 스타일 가이드 간 용어 완전 통일 |
|| 1.4.17 | 2025-10-24 | 강지수 | 07-회의종료 화면 STT 한계 반영 (유저스토리 v2.1.2)<br>- **STT 화자 식별 불가 반영**: STT는 화자를 식별할 수 없으므로 화자 관련 기능 제거<br> - 발언 통계 섹션 삭제<br> - 안건별 "발언자별 의견" 섹션 삭제<br>- **통계 영역 디자인 개선**: 정보성 디자인으로 명확화<br> - 배경색: var(--white) → var(--gray-50)<br> - 숫자 색상: var(--primary) → var(--gray-900)<br> - 라벨 색상: var(--gray-500) → var(--gray-600)<br> - 정보 표시 전용으로 시각적 구분 명확화<br>- **안건 섹션 구분 개선**:<br> - 안건 간 하단 보더 추가 (1px solid var(--gray-200))<br> - 섹션 제목에 primary 색상 세로 바 추가 (::before pseudo-element)<br> - 콘텐츠 영역 좌측 패딩 추가로 계층 구조 명확화<br>- **연관 문서 업데이트**:<br> - 유저스토리 UFR-MEET-040: "발언 횟수 (화자별)" 항목 제거<br> - UI/UX 설계서 07-회의종료: 발언 통계 및 발언자별 의견 항목 제거 |
| 1.4.18 | 2025-10-24 | 강지수 | 05-회의진행 실시간 주요 메모 추천 기능 명확화 (유저스토리 v2.1.1)<br>- **AI 제안 탭 기능 상세화**: 실시간 주요 메모 추천 기능 명시 추가<br> - UFR-MEET-030: 실시간 AI 주요 메모 추천<br> - 음성→텍스트 변환 후 AI가 실시간 분석<br> - **중요한 내용으로 판단된 경우에만** 주요 메모 항목 추천<br> - 추천 빈도는 중요 내용 발생에 따라 가변적 (3-5초 고정 간격 아님)<br> - 각 추천 항목에 "주요 메모에 추가" 버튼 제공<br> - 실시간 업데이트: 새로운 추천은 상단에 표시<br>- **프로토타입 확인**: 05-회의진행.html의 AI 제안 탭이 실시간 주요 메모 추천 기능을 포함하고 있음을 확인<br>- **참조**: design/uiux/요구사항설계검토-report-V1.2.md (실시간 주요 메모 추천 명시 부족 개선) |
| 1.4.19 | 2025-10-24 | 강지수 | 05-회의진행 화면 설계서 프로토타입 기준 전면 수정<br>- **레이아웃 구조 변경**: "2열 구조" 표현 제거, "메인 콘텐츠 영역: 정보 패널 (탭 구조)"로 단순화<br> - 텍스트 편집 영역 관련 내용 모두 제거 (왼쪽 영역, 에디터 툴바, contentEditable 등)<br> - 현재 프로토타입은 헤더 + 탭 콘텐츠 구조만 보유<br>- **반응형 디자인 명확화**: Mobile/Desktop 모두 동일한 구조에 너비만 반응형<br> - "2열 구조를 1열로 전환", "바텀시트" 표현 제거<br> - Mobile: 전체 너비 사용, Desktop: 최대 너비 제한 없이 반응형<br>- **AI 제안 탭 기능 명확화**: 논의항목/결정사항 구분 제거<br> - "논의항목/결정사항 등의 구분 없이 중요 내용을 주요 메모로 제안" 명시<br> - AI는 단순히 중요한 내용을 주요 메모 항목으로 제안하는 역할만 수행<br>- **용어 사전 검색 기능 추가**: 검색 입력창 + 검색 버튼<br> - Enter 키 지원, 용어명과 정의 모두 검색<br> - 검색 동작 상세 설명: 일치하는 용어만 표시, 하이라이트 효과, 결과 없으면 전체 목록 표시<br>- **인터랙션 섹션 정리**: 텍스트 편집, 툴바 사용, 충돌 감지 등 편집 관련 내용 모두 제거<br> - 탭 전환, 회의 종료, 실시간 업데이트만 유지<br> - 실시간 업데이트 항목을 현재 화면에 맞게 수정 (AI 제안, 용어 사전, 관련 회의록)<br>- **데이터 요구사항 업데이트**: 사용자 편집 내용 제거, 참석자 초대 이메일 추가<br> - AI 제안을 "주요 메모 항목 제안"으로 명확히 표현<br>- **에러 처리 업데이트**: 편집 충돌 에러 제거, 용어 사전 로드 실패/참석자 초대 실패 추가<br>- **주요 기능 목록 정리**: 실시간 협업/수동 편집 제거, AI 주요 메모 제안/참석자 관리 추가<br>- **권한 항목 수정**: "회의록 편집: 모든 참석자" → "참석자 초대: 모든 참석자"<br>- **프로토타입 기준 반영**: 05-회의진행.html 실제 구현 상태 100% 반영 |
---
## 부록
### 참고 자료
- Mobile First 설계 원칙: Luke Wroblewski "Mobile First"
- 접근성 가이드라인: WCAG 2.1 Level AA
- 성능 최적화: Google Web Fundamentals
### 디자인 시스템 (추후 작성)
- 색상 팔레트
- 타이포그래피
- 컴포넌트 라이브러리
- 아이콘 세트
Reference in New Issue View Git Blame Copy Permalink