UI/UX 프로토타입 및 설계 문서 최적화 (야보팀)

- prototype_yabo 디렉토리에 9개 프로토타입 화면 추가
  - 01-로그인 ~ 12-회의록목록조회
  - common.css, common.js 공통 리소스 포함
  - TEST_RESULTS.md 테스트 결과 문서 포함

- style-guide_yabo.md 스타일 가이드 추가
  - Mobile First 디자인 시스템 정의
  - 15개 섹션 (컬러, 타이포그래피, 간격, 버튼 등)

- uiux.md 설계 문서 최적화 (버전 1.3.3)
  - 공통 UI 컴포넌트 섹션 신규 작성
  - 공통 에러 메시지 표준 섹션 신규 작성
  - 중복 내용을 참조 링크로 교체 (약 8-10% 크기 감소)

- reference/sampleimg 샘플 이미지 정리
  - 파일명 통일 (화면 suffix 추가)
  - 회의진행화면 탭별 이미지 3개 추가

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

design/uiux/uiux.md

@@ -4,7 +4,7 @@
 - **작성일**: 2025-10-21
 - **최종 수정일**: 2025-10-21
 - **작성자**: 이미준 (서비스 기획자)
-- **버전**: 1.3.2
+- **버전**: 1.5
 - **설계 철학**: Mobile First Design
 
 ---
@@ -226,21 +226,17 @@ graph TD
 #### UI 구성요소
 
 **Mobile (320px~768px)**
-- **헤더** (Fixed, 상단)
-  - 서비스 로고 및 타이틀 ("회의록 서비스")
-  - 검색 아이콘
-  - 프로필 아이콘 (메뉴)
+- **헤더** (상단)
+  - "안녕하세요, {사용자명}님!" (H2, Bold)
+  - 부제: "오늘의 일정을 확인하세요" (Body-sm, 회색)
 
-- **메인 콘텐츠** (스크롤, padding-bottom: 80px)
-  - **환영 메시지**
-    - "안녕하세요, {사용자명}님!" (H3)
-    - 부제: "오늘도 효율적인 회의록 작성을 시작하세요" (Body-sm, 회색)
+- **메인 콘텐츠** (스크롤, padding-bottom: 80px, background: gray-50)
+  - **통계 카드 그리드** (3개 카드)
+    - "예정된 회의": 개수 표시 (아이콘: 📅)
+    - "진행 중 Todo": 개수 표시 (아이콘: ✅)
+    - "Todo 완료율": 퍼센트 표시 (아이콘: 📈)
 
-  - **빠른 액션** (가로 배치)
-    - "새 회의 시작" 버튼 (Primary, 아이콘: play_circle, flex: 1)
-    - "회의 예약" 버튼 (Secondary, 아이콘: calendar_today)
-
-  - **예정된/진행중 회의** 카드 (신규)
+  - **최근 회의** 섹션
     - 헤더: "예정된 회의" (H4) + "전체 보기 →" 링크
     - 회의 리스트 (최대 3개, 우선순위 순)
       1. **진행중 회의** (우선 표시)
@@ -315,40 +311,55 @@ graph TD
     - 클릭 시: 회의록 상세 화면으로 이동 (읽기 전용)
     - 빈 상태: "공유받은 회의록이 없습니다"
 
-- **하단 네비게이션** (Fixed, 하단)
-  - 홈 (active), 회의록, Todo, 프로필
-  - 각 항목: Material Icon + 레이블
+- **하단 네비게이션** (Fixed, 하단, 모바일 전용)
+  - 홈 (active), 회의록, Todo (3개 항목)
+  - 각 항목: 이모지 아이콘 + 레이블
+  - 프로필 탭 제거됨
 
 **Tablet/Desktop (768px+)**
-- **사이드바** (좌측, Fixed, 240px)
-  - 서비스 로고
-  - 메인 메뉴 (세로 배치)
-    - 대시보드 (active, 강조 표시)
-    - 회의 목록
-    - Todo 관리
-    - 설정
-  - 하단: 프로필 요약
+- **왼쪽 사이드바** (Fixed, 240px)
+  - **로고 영역**
+    - 민트 그린 아이콘 (M)
+    - "회의록 서비스" 텍스트
 
-- **메인 콘텐츠** (Grid Layout)
-  - **상단 영역**:
-    - 환영 메시지
-    - 빠른 액션 (가로 배치)
+  - **메인 메뉴** (세로 배치)
+    - 📊 대시보드 (active, 민트 그린 배경)
+    - 📋 회의 목록 → 12-회의록목록조회.html
+    - ✅ Todo 관리 → 09-Todo관리.html
+    - ⚙️ 설정 (준비중)
 
-  - **통계 그리드** (3컬럼, auto-fit):
-    - 예정된/진행중 회의 (아이콘: 📅, Primary 색상)
-      - 진행중 회의 수 별도 표시 (빨강 배지)
-    - 진행 중 Todo (아이콘: ✅, Warning 색상)
-    - Todo 완료율 (아이콘: 📈, Success 색상)
+  - **하단 사용자 정보**
+    - 아바타
+    - 사용자 이름
+    - 이메일 주소
 
-  - **2컬럼 그리드**:
-    - 좌측 컬럼 (2/3 너비)
-      - 예정된/진행중 회의 섹션
-        - 진행중 회의 우선 표시 (상단)
-        - 예정된 회의 (하단)
-      - 내 회의록 섹션
-    - 우측 컬럼 (1/3 너비)
-      - 내 Todo 위젯
-      - 공유받은 회의록 위젯
+- **메인 콘텐츠** (왼쪽 여백 240px)
+  - **헤더**
+    - "안녕하세요, {사용자명}님!" (H2)
+    - "오늘의 일정을 확인하세요" (부제)
+
+  - **통계 카드 그리드** (3개, auto-fit)
+    - 예정된 회의 (📅)
+    - 진행 중 Todo (✅)
+    - Todo 완료율 (📈)
+
+  - **최근 회의 그리드** (2-3컬럼)
+    - 회의 카드들 (진행중 우선)
+    - 참여하기/수정/보기 버튼
+
+  - **할당된 Todo 리스트**
+    - 화이트 카드 배경
+    - 각 Todo 항목 구분선
+
+  - **내 회의록 리스트**
+    - 화이트 카드 배경
+    - 전체보기 → 12-회의록목록조회.html
+
+  - **공유받은 회의록 리스트**
+    - 화이트 카드 배경
+    - 전체보기 → 12-회의록목록조회.html
+
+- **하단 네비게이션**: 숨김 (데스크톱에서는 사이드바 사용)
 
 #### 인터랙션
 1. **빠른 액션**
@@ -385,7 +396,9 @@ graph TD
 
 3. **카드 인터랙션**
    - 회의록 항목 클릭 → 회의록 상세 화면으로 이동
-   - Todo 항목 클릭 → Todo 관리 화면으로 이동
+   - **Todo 항목 클릭 → 해당 Todo가 포함된 회의록 상세 화면으로 이동**
+     - URL 파라미터로 회의록 ID와 Todo ID 전달
+     - 회의록 상세 화면에서 해당 Todo 섹션으로 자동 스크롤
    - "전체 보기" 링크 클릭 → 해당 목록 화면으로 이동
    - 호버 효과: 카드 그림자 증가, 약간 상승 (transform: translateY(-2px))
 
@@ -669,124 +682,295 @@ graph TD
 
 #### 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)**
-- **헤더** (Fixed, 최소화 가능)
-  - 회의 제목
-  - 경과 시간 (00:00:00)
-  - 녹음 상태 인디케이터 (빨간 점 + 파형)
-  - 메뉴 버튼 (설정, 참석자 목록, **참석자 추가 초대**)
+- **2열 구조를 1열로 전환**
+- 왼쪽 영역: 메인 콘텐츠 (전체 너비)
+- 오른쪽 탭 패널: 하단 시트로 표시
+  - 탭 버튼 클릭 시 바텀시트 슬라이드업
+  - 오버레이 + 닫기 버튼
 
-- **메인 콘텐츠** (스크롤)
-  - **실시간 발언 영역** (상단, 고정)
-    - 현재 발언자 이름
-    - 실시간 텍스트 변환 내용 (3-5초 지연)
-    - 화자 자동 식별 배지
-
-  - **회의록 섹션들** (탭 또는 아코디언)
-    - 각 섹션:
-      - 섹션 제목
-      - **AI 회의 내용 요약 영역** (섹션 최상단)
-        - AI 자동 생성 요약 (2-3문장)
-        - 편집 버튼 (참석자가 수정 가능)
-        - 요약 생성 시간 표시
-      - AI 자동 작성 내용 (실시간 업데이트)
-      - 수동 편집 버튼
-      - 검증 완료 체크박스
-      - **참고자료 영역** (섹션 하단)
-        - 관련 이전 회의록 링크 (최대 3개)
-        - 맥락상 관련 회의록 링크
-        - 각 링크: 회의 제목, 날짜, 관련도 표시
-    - 섹션 간 탭 또는 아코디언 전환
-
-  - **전문용어 하이라이트**
-    - 감지된 용어에 밑줄 또는 배경색
-    - 터치/클릭 시 맥락 기반 설명 툴팁
-
-- **하단 액션 바** (Fixed)
-  - 녹음 일시정지/재개 버튼
-  - 수동 메모 추가 버튼
-  - 회의 종료 버튼
-
-**Tablet/Desktop (768px+)**
-- **좌측 패널** (30%)
-  - 참석자 목록
-  - 발언 통계
-  - 주요 키워드
-
-- **중앙 패널** (50%)
-  - 회의록 섹션 (모바일과 동일)
-
-- **우측 패널** (20%)
-  - 실시간 발언
-  - AI 제안 (Todo, 결정사항 후보)
+**Desktop (768px+)**
+- 2열 고정 레이아웃
+- 왼쪽: 편집 영역
+- 오른쪽: 탭 패널 (고정)
 
 #### 인터랙션
-1. **실시간 업데이트**
-   - 발언 → STT → AI 분석 → 섹션별 자동 배치 (3-5초 주기)
-   - WebSocket 통해 모든 참석자에게 동기화
-   - 수정 사항 실시간 하이라이트 (3초간)
+1. **텍스트 편집 (왼쪽 영역)**
+   - **편집 모드**: contentEditable 영역 클릭하여 즉시 편집 시작
+   - **자동 저장**: 편집 중 30초 간격 자동 저장
+   - **툴바 사용**:
+     - B (Bold): 선택된 텍스트를 굵게
+     - I (Italic): 선택된 텍스트를 이탤릭체로
+     - U (Underline): 선택된 텍스트에 밑줄
+     - 색상 선택: 텍스트 강조 색상 변경
+     - 링크 추가: URL 입력 모달 표시
+   - **실시간 동기화**: WebSocket 통해 모든 참석자에게 편집 내용 동기화
+   - **충돌 감지**: 동시 편집 시 충돌 감지 및 병합 옵션 제공
 
-2. **수동 편집**
-   - 섹션 내 텍스트 클릭 → 편집 모드
-   - 편집 중 자동 저장 (30초 간격)
-   - 동시 편집 충돌 감지 및 해결
+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)
+     - **참석자 목록** (하단):
+       - 각 참석자: 아바타 + 이름
+       - 상태 표시 없음 (발언 중/온라인 등 제거)
+       - 참석자 수 동적 업데이트 (초대 성공 시)
 
-3. **AI 요약 편집**
-   - 요약 영역의 "편집" 버튼 클릭 → 텍스트 편집 모드
-   - 수정 내용 자동 저장 (30초 간격)
-   - 수정 시간 및 수정자 기록
-   - 실시간 동기화: 다른 참석자에게 즉시 반영
+   - **AI 제안 탭**: AI가 생성한 회의록 개선 제안 (3가지 유형)
 
-4. **참고자료 링크**
-   - 참고자료 영역의 회의록 링크 클릭 → **새 탭(target="_blank")에서 해당 회의록 열기**
-   - **녹음 중인 페이지 이탈 방지**: 링크는 항상 새 탭으로 열림
-   - 관련도 표시: 퍼센트 또는 별점으로 시각화
-   - AI가 자동으로 관련 회의록 검색 및 연결 (UFR-AI-040)
+     - **논의사항 제안 카드**: 제안 내용 + "논의사항에 적용" 버튼
+       - 제안 구조:
+         - 제목: "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)
+       - "수정" 버튼: 제안을 거부하고 카드 숨김
 
-5. **전문용어 설명**
-   - 하이라이트된 용어 클릭 → 바텀시트(모바일) 또는 사이드 패널(데스크톱)
-   - 설명 내용:
-     - 간단한 정의
-     - 이 회의에서의 의미
-     - 관련 과거 회의록 링크
-     - 참조 문서 링크
+     - **결정사항 제안 카드**: 제안 내용 + "결정사항에 적용" 버튼
+       - 제안 구조:
+         - 제목: "개발 일정 최종 확정" (strong)
+         - 내용: 확정된 결정사항 (bullet points)
+       - "결정사항에 적용" 클릭 시:
+         1. 결정사항 섹션(section-2)의 content-2 영역에 제안 내용 추가
+         2. 기존 내용 하단에 `<br>` 태그로 구분하여 추가
+         3. 제목은 `<strong>✓` 접두어 포함, 내용은 `<p>` 태그로 구조화
+         4. 성공 토스트 표시: "결정사항에 AI 제안이 추가되었습니다"
+         5. 자동으로 결정사항 탭(섹션 2)으로 전환 (switchSection(2))
+         6. 제안 카드 숨김 처리 (display: none)
+       - "수정" 버튼: 제안을 거부하고 카드 숨김
 
-6. **녹음 제어**
-   - 일시정지: 회의록 작성 중단, 재개 가능
-   - 종료: 확인 다이얼로그 → 회의종료 화면으로 이동
+     - **액션아이템 제안 카드**: 제안 내용 + "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)
+       - "수정" 버튼: 제안을 거부하고 카드 숨김
 
-7. **참석자 추가 초대** (회의 진행 중)
-   - 헤더 메뉴 또는 참석자 목록에서 "+ 참석자 초대" 버튼 클릭
-   - 초대 모달 표시:
-     - 이메일 입력 필드 (여러 명 입력 가능, 쉼표/엔터로 구분)
-     - 검색 기능: 조직 내 사용자 검색 및 선택
-     - 권한 선택: 편집 가능/읽기 전용
-     - "초대 발송" 버튼
-   - 초대 발송 후:
-     - 실시간으로 참석자 목록에 "초대됨" 상태로 추가
-     - 초대받은 사람에게 알림 발송 (이메일/앱 푸시)
-     - 초대받은 사람이 수락 시 "참여 중"으로 상태 변경
-   - 권한:
-     - **회의 생성자**: 모든 참석자 초대 가능
-     - **일반 참석자**: 회의 설정에 따라 초대 가능 여부 결정
+   - **용어 사전 탭**: 회의에서 언급된 전문용어 설명
+     - 용어 카드 (민트 그린 배경): 용어명 + 간단한 정의
+     - 카드 클릭 → 확장하여 상세 설명 표시
+     - 상세 설명: 이 회의에서의 의미, 관련 회의록 링크
+
+   - **관련 자료 탭**: AI가 찾은 관련 회의록 (32건)
+     - 회의록 링크 클릭 → **새 탭(target="_blank")에서 해당 회의록 열기**
+     - **녹음 중인 페이지 이탈 방지**: 모든 링크는 새 탭으로 열림
+     - 관련도 표시: 퍼센트 또는 별점으로 시각화
+
+3. **회의 종료**
+   - 헤더의 "회의 종료" 버튼 클릭
+   - 확인 다이얼로그 표시: "회의를 종료하시겠습니까?"
+   - 확인 → 회의 종료 처리 및 07-회의종료.html로 이동
+
+4. **실시간 업데이트**
+   - STT 음성 인식 결과 실시간 반영 (3-5초 주기)
+   - 모든 참석자의 편집 내용 실시간 동기화
+   - 수정 사항 하이라이트 표시 (3초간)
 
 #### 데이터 요구사항
-- **입력**: 회의 ID, 오디오 스트림
+- **입력**:
+  - 회의 ID
+  - 오디오 스트림 (실시간 STT용)
+  - 사용자 편집 내용 (텍스트 입력)
 - **출력**:
-  - 실시간 텍스트 변환 결과
-  - 구조화된 회의록 데이터
-  - **섹션별 AI 요약 (자동 생성)**
-  - 전문용어 및 설명
-  - **참고자료 목록 (관련 회의록 링크)**
-- **연동**: STT 서비스, AI 서비스 (UFR-AI-010, UFR-AI-040), RAG 서비스, Collaboration 서비스
+  - 실시간 텍스트 변환 결과 (STT)
+  - 편집된 회의록 내용
+  - **AI 제안 목록** (회의록 개선 제안)
+  - **전문용어 및 설명** (용어 사전)
+  - **관련 회의록 목록** (32건, 관련도 포함)
+  - 참석자 목록 및 상태
+- **연동**:
+  - STT 서비스 (UFR-AI-010)
+  - AI 서비스 (AI 제안 생성, UFR-AI-040)
+  - RAG 서비스 (관련 회의록 검색)
+  - Collaboration 서비스 (실시간 동기화)
 
 #### 에러 처리
-- **녹음 권한 거부**: "마이크 권한이 필요합니다" + 설정 안내
-- **STT 실패**: "음성 인식에 실패했습니다. 수동으로 입력해주세요"
-- **AI 요약 생성 실패**: "요약 생성에 실패했습니다. 수동으로 작성해주세요"
-- **참고자료 검색 실패**: "관련 회의록을 찾을 수 없습니다"
-- **동기화 실패**: "네트워크 연결을 확인해주세요. 내용은 로컬에 저장됩니다"
-- **충돌 발생**: "다른 참석자가 동일한 부분을 수정 중입니다" + 병합 옵션
+- **마이크 권한 거부**: "마이크 권한이 필요합니다" 토스트 + 설정 안내 링크
+- **STT 실패**: "음성 인식에 실패했습니다. 수동으로 입력해주세요" 토스트
+- **AI 제안 생성 실패**: "AI 제안을 불러올 수 없습니다" 토스트 (편집은 계속 가능)
+- **관련 자료 검색 실패**: "관련 회의록을 찾을 수 없습니다" 메시지 표시
+- **동기화 실패**: "네트워크 연결을 확인해주세요. 내용은 로컬에 저장됩니다" 토스트
+- **편집 충돌**: "다른 참석자가 동일한 부분을 수정 중입니다" 다이얼로그 + 병합 옵션
+- **회의 종료 실패**: "회의 종료 중 오류가 발생했습니다" 토스트 + 재시도 버튼
 
 ---
 
@@ -1149,7 +1333,6 @@ graph TD
 - **탭 네비게이션** (상단, Fixed)
   - "회의록" 탭 (기본 활성)
   - "대시보드" 탭
-  - "타임라인" 탭 (선택)
 
 - **회의록 탭 콘텐츠** (섹션별 구조)
   - 각 섹션:
@@ -1214,7 +1397,6 @@ graph TD
 - **상단**: 탭 네비게이션
   - 회의록 (기본)
   - 대시보드
-  - 타임라인
 - **메인 영역**:
   - 회의록 탭: 전체 회의록 내용 (섹션별 구조)
   - 대시보드 탭: 핵심내용, 결정사항, Todo 진행상황, 참고자료 (11-회의록대시보드.html 구조 참조)
@@ -1223,7 +1405,6 @@ graph TD
 1. **탭 전환**
    - "회의록" 탭: 전체 회의록 내용 표시 (섹션별 구조)
    - "대시보드" 탭: 핵심내용, 결정사항, Todo, 참고자료 요약 표시
-   - "타임라인" 탭: 시간 순서대로 회의 진행 과정 표시 (선택)
    - 탭 전환 시 URL 변경 없이 클라이언트 사이드 렌더링
 
 2. **회의록 탭 인터랙션**
@@ -1791,11 +1972,15 @@ graph TD
 |------|------|--------|----------|
 | 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.2 | 2025-10-21 | 이미준 | 회의록 상세 화면 구조 개선 (프로토타입 기반)<br>- 10-회의록상세조회: 탭 기반 네비게이션 추가 (회의록/대시보드/타임라인)<br>- 대시보드 탭 추가: 핵심내용, 결정사항, Todo 진행상황, 참고자료 섹션<br>- 참고자료 관련도 점수 표시 (백분율 + 색상 코딩)<br>- 참고자료 카테고리 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)<br>- 참조: design-gappa/uiux/prototype 파일 (11-회의록대시보드.html, 05-회의진행.html) |
-| 1.3 | 2025-10-21 | 이미준 | 대시보드 및 회의록 목록 화면 개선 (사용자 피드백 반영)<br>- 02-대시보드: 예정된 회의 카드 추가, Todo 우선순위 정렬 개선 (지연→진행→미진행→완료, 최대 5개), 내 회의록 상태 배지 추가, 공유받은 회의록 섹션 개선<br>- 12-회의록목록조회: 신규 화면 추가 (필터링/정렬/검색 기능)<br>  - 필터: 참여 유형(공유받은/참석한/생성한), 상태(전체/작성중/확정완료)<br>  - 정렬: 최신 회의순/최신 업데이트순/제목 가나다순<br>  - 검색: 제목/참석자/키워드 통합 검색<br>  - 통계 정보 표시 (전체/작성중/확정완료 개수)<br>- 참조: design/uiux/prototype_fix 및 design-gappa/uiux/prototype 파일 |
-| 1.3.1 | 2025-10-21 | 이미준 | 대시보드 진행중 회의 표시 기능 추가<br>- 02-대시보드: 예정된 회의 카드에 진행중 회의 포함<br>  - 진행중 회의 우선 표시 (최상단)<br>  - "진행중" 배지 (빨강/주황, 깜빡임 애니메이션)<br>  - "참여하기" 버튼으로 즉시 회의 참여 가능<br>  - 정렬: 진행중 회의 → 예정된 회의 (일시 순)<br>- 데이터 요구사항: 회의 상태 (ongoing) 추가, 진행중 회의 필터 조건 정의<br>- 에러 처리: 진행중 회의 참여 실패 시나리오 추가 (종료됨/권한없음/네트워크오류) |
-| 1.3.2 | 2025-10-21 | 이미준 | 대시보드 예정된 회의 역할 기반 접근 제어 추가<br>- 02-대시보드: 예정된 회의에 생성자/참석자별 차별화된 권한 적용<br>  - **생성자 권한**: 회의 수정 가능 (크라운 아이콘 표시, "수정" 버튼)<br>  - **참석자 권한**: 시작 10분 전부터 참여 가능 ("참여하기" 버튼 조건부 활성화)<br>  - 실시간 타이머 표시 (참여 가능 시간 카운트다운, 1분 간격 갱신)<br>- UI 구성요소: 역할 표시 (크라운 아이콘), 액션 버튼 (역할 및 시간 기반 조건부 렌더링)<br>- 인터랙션: 생성자 수정 플로우, 참석자 시간 기반 참여 플로우, 타이머 자동 갱신<br>- 데이터 요구사항: 생성자 ID, 사용자 역할 (creator\|attendee), 참여 가능 시간 계산<br>- 에러 처리: 시간 제한 접근, 권한 제한 수정 시도, 회의 수정 실패 시나리오 추가 |
-| 1.4 | 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.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>- 12-회의록목록조회: 신규 화면 추가 (필터링/정렬/검색 기능)<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 |
 
 ---