# 회의록 작성 및 공유 개선 서비스 - UI/UX 설계서

## 문서 정보
- **작성일**: 2025-10-21
- **최종 수정일**: 2025-10-23
- **작성자**: 이미준 (서비스 기획자)
- **버전**: 1.4.14
- **설계 철학**: 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-030 (실시간 협업)
- **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 | | 
| 06 | 검증완료 | UFR-COLLAB-030 | 중간 | 섹션별 검증 | 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 기반 회의 내용 요약 자동 생성** (섹션별)
4. 실시간 협업 (여러 참석자 동시 편집)
5. 전문용어 자동 감지 및 맥락 기반 설명
6. **참고자료 자동 연결** (이전 회의록, 관련 회의록)
7. 수동 편집 및 섹션별 작성
8. 회의 진행 시간 표시

#### UI 구성요소

**전체 레이아웃 (2열 구조)**
- **헤더** (Fixed, 상단)
  - 좌측: "회의 진행 중" 제목 + 경과시간 배지 (빨강, 01:03)
  - 우측: "회의 종료" 버튼 (민트 그린 테두리)

- **왼쪽 영역: 회의 내용 작성** (60-70% 너비)
  - **텍스트 에디터 툴바**
    - B (Bold), I (Italic), U (Underline)
    - 색상 선택, 링크 추가

  - **편집 영역** (contentEditable, 스크롤 가능)
    - 실시간 입력 텍스트: "회의 내용을 작성하거나 AI가 자동으로 작성합니다..."
    - 섹션 구조:
      ```
      # 참석자
      - 김민준
      - 박서연
      - 이준호

      # 안건
      1. 신규 기능 개발 일정 논의
      2. 예산 편성 검토
      ```
    - 자동 저장 (30초 간격)

- **오른쪽 영역: 정보 패널** (30-40% 너비, 탭 구조)
  - **탭 네비게이션** (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
      - 구조: 헤더 + 본문 텍스트 + 액션 버튼

    - **논의사항 제안 카드**
      - 헤더: "💬 논의사항 제안" (아이콘 + 제목, 16px bold, 민트 그린)
      - 내용: "AI 모델 정확도 향상 방안" (strong 태그, 14px)
        - 현재 STT 정확도: 92% (14px 일반, gray-700)
        - 목표 정확도: 95% 이상
        - 도메인 특화 학습 데이터 확보 필요
      - 액션 버튼: "논의사항에 적용" (btn-primary btn-sm) + "수정" (btn-ghost btn-sm)

    - **결정사항 제안 카드**
      - 헤더: "✅ 결정사항 제안" (아이콘 + 제목, 16px bold, 민트 그린)
      - 내용: "개발 일정 최종 확정" (strong 태그, 14px)
        - 설계: 2주 (11/1~11/14) (14px 일반, gray-700)
        - 개발: 10주 (11/15~1/23)
        - 테스트 및 배포: 2주 (1/24~2/6)
      - 액션 버튼: "결정사항에 적용" (btn-primary btn-sm) + "수정" (btn-ghost btn-sm)

    - **액션아이템 제안 카드**
      - 헤더: "📋 액션 아이템(Todo) 자동 추출" (아이콘 + 제목, 16px bold, 민트 그린)
      - 추출된 Todo 목록 (14px 일반, gray-700):
        1. API 명세서 작성 (이준호, 10/23까지)
        2. UI 프로토타입 디자인 (최유진, 10/28까지)
        3. AI 모델 성능 테스트 (박서연, 10/25까지)
      - 액션 버튼: "3개 Todo 생성" (btn-primary btn-sm) + "수정" (btn-ghost btn-sm)

  - **용어 사전 탭**
    - 제목: "용어 사전"
    - 용어 검색 입력 필드 (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)**
- **2열 구조를 1열로 전환**
- 왼쪽 영역: 메인 콘텐츠 (전체 너비)
- 오른쪽 탭 패널: 하단 시트로 표시
  - 탭 버튼 클릭 시 바텀시트 슬라이드업
  - 오버레이 + 닫기 버튼

**Desktop (768px+)**
- 2열 고정 레이아웃
- 왼쪽: 편집 영역
- 오른쪽: 탭 패널 (고정)

#### 인터랙션
1. **텍스트 편집 (왼쪽 영역)**
   - **편집 모드**: contentEditable 영역 클릭하여 즉시 편집 시작
   - **자동 저장**: 편집 중 30초 간격 자동 저장
   - **툴바 사용**:
     - B (Bold): 선택된 텍스트를 굵게
     - I (Italic): 선택된 텍스트를 이탤릭체로
     - U (Underline): 선택된 텍스트에 밑줄
     - 색상 선택: 텍스트 강조 색상 변경
     - 링크 추가: URL 입력 모달 표시
   - **실시간 동기화**: WebSocket 통해 모든 참석자에게 편집 내용 동기화
   - **충돌 감지**: 동시 편집 시 충돌 감지 및 병합 옵션 제공

2. **탭 전환 (오른쪽 영역)**
   - **참석자 탭**: 현재 회의 참석자 목록 표시 (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가 생성한 회의록 개선 제안 (3가지 유형)

     - **논의사항 제안 카드**: 제안 내용 + "논의사항에 적용" 버튼
       - 제안 구조:
         - 제목: "AI 모델 정확도 향상 방안" (strong)
         - 내용: 3-5개의 구체적인 논의 포인트 (bullet points)
       - "논의사항에 적용" 클릭 시:
         1. 논의사항 섹션(section-1)의 content-1 영역에 제안 내용 추가
         2. 기존 내용 하단에 `<br>` 태그로 구분하여 추가
         3. 제목은 `<strong>` 태그, 내용은 `<p>` 태그로 구조화
         4. 성공 토스트 표시: "논의사항에 AI 제안이 추가되었습니다"
         5. 자동으로 논의사항 탭(섹션 1)으로 전환 (switchSection(1))
         6. 제안 카드 숨김 처리 (display: none)
       - "수정" 버튼: 제안을 거부하고 카드 숨김

     - **결정사항 제안 카드**: 제안 내용 + "결정사항에 적용" 버튼
       - 제안 구조:
         - 제목: "개발 일정 최종 확정" (strong)
         - 내용: 확정된 결정사항 (bullet points)
       - "결정사항에 적용" 클릭 시:
         1. 결정사항 섹션(section-2)의 content-2 영역에 제안 내용 추가
         2. 기존 내용 하단에 `<br>` 태그로 구분하여 추가
         3. 제목은 `<strong>✓` 접두어 포함, 내용은 `<p>` 태그로 구조화
         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(내가 담당자인 Todo) 조회 및 관리
- **관련 유저스토리**: UFR-TODO-040 (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 요약 수정** (섹션별)
4. **참고자료 편집** (추가/제거)
5. **Todo 수정 (UFR-TODO-040)** - 신규 추가 (회의 생성자만)
6. 자동 저장 (30초 간격)
7. 수정 이력 관리
8. 상태 변경 (검증완료 → 작성중으로 자동 변경)

#### UI 구성요소

**Mobile (320px~768px)**
- **헤더**
  - 뒤로가기 버튼 (10-회의록상세조회로 이동)
  - "회의록 수정" 타이틀
  - "저장" 버튼 (Primary)
  - 자동 저장 인디케이터 ("저장됨", "저장 중...")

- **회의 기본 정보 영역**
  - 회의 제목: 편집 가능 (텍스트 필드)
  - 회의 일시: 읽기 전용 (📅 아이콘 + 날짜/시간 표시)
  - 회의 장소: 읽기 전용 (📍 아이콘 + 장소명)
  - 참석자 목록:
    - 회의 생성자: 추가/삭제 가능 (05-회의진행 화면과 동일한 UI)
    - 참석자: 읽기 전용 표시
    - 각 참석자: 아바타 + 이름, 삭제(×) 버튼 (생성자는 삭제 불가)
    - "참석자 추가" 버튼 (이메일 입력 + 초대)
  - 회의록 상태 배지 (자동 관리)

- **편집 화면**
  - 섹션별 편집 영역
  - 각 섹션:
    - 섹션 제목
    - **AI 요약 편집 영역**
      - 요약 텍스트 편집 필드
      - "AI 재생성" 버튼 (요약 다시 생성)
      - 마지막 수정 시간 표시
    - 편집 가능한 텍스트 영역
    - **참고자료 편집 영역**
      - 기존 참고자료 목록 (제거 버튼 포함)
      - "참고자료 추가" 버튼
      - 회의록 검색 및 선택 UI
    - **Todo 섹션 편집 영역** (회의 생성자만) - 신규
      - Todo 목록 표시
      - 각 Todo 항목:
        - 체크박스 (완료 상태)
        - Todo 제목
        - 담당자 (변경 가능)
        - 마감일 (변경 가능)
        - 우선순위 (변경 가능)
        - "편집" 버튼 (인라인 편집 활성화)
        - "삭제" 버튼
      - "Todo 추가" 버튼
    - 검증 완료 체크박스 (잠금 해제 필요)
  - 자동 저장 상태 표시 ("저장됨", "저장 중...")

**Tablet/Desktop (768px+)**
- **헤더**: Mobile과 동일 (뒤로가기, 타이틀, 저장 버튼, 자동 저장 인디케이터)
- **메인 영역**:
  - 회의 기본 정보 영역 (Mobile과 동일)
  - 편집 화면 (섹션별 편집, AI 요약, 참고자료, Todo)
- **우측 패널** (선택사항):
  - 수정 이력 (v2.0 고도화 예정)
  - 미리보기

#### 인터랙션
1. **화면 진입**
   - 10-회의록상세조회 → "수정" 버튼 클릭
   - 권한 확인: 검증완료 후에는 회의 생성자만 접근 가능
   - 바로 편집 모드로 시작

2. **내용 수정**
   - 텍스트 영역 클릭: 포커스 및 편집 가능
   - 자동 저장: 30초 간격, 인디케이터 표시
   - 수동 저장: "저장" 버튼 클릭

3. **검증완료 섹션 (권한별 차등 표시)**
   - **회의 생성자**: 06-검증완료 화면에서 잠금 해제 가능
   - **참석자**: 읽기 전용 표시 ("🔒 읽기 전용" 배지)

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 (회의록목록조회)
- **비즈니스 중요도**: 높음
- **프로토타입**: 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, 볼드)
      - 메타정보 (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 요약 및 참고자료 기능 추가<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 |

---

## 부록

### 참고 자료
- Mobile First 설계 원칙: Luke Wroblewski "Mobile First"
- 접근성 가이드라인: WCAG 2.1 Level AA
- 성능 최적화: Google Web Fundamentals

### 디자인 시스템 (추후 작성)
- 색상 팔레트
- 타이포그래피
- 컴포넌트 라이브러리
- 아이콘 세트
