UI/UX 설계 및 프로토타입 가이드 추가

- 프로토타입 작성 가이드 문서 추가 (claude/uiux-prototype.md)
- 스타일 가이드 업데이트 및 백업 파일 추가
- UI/UX 설계서 수정
- 참조용 샘플 이미지 추가 (대시보드, 회의록, Todo 목록)

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

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

design/uiux/uiux.md

@@ -674,7 +674,7 @@ graph TD
   - 회의 제목
   - 경과 시간 (00:00:00)
   - 녹음 상태 인디케이터 (빨간 점 + 파형)
-  - 메뉴 버튼 (설정, 참석자 목록)
+  - 메뉴 버튼 (설정, 참석자 목록, **참석자 추가 초대**)
 
 - **메인 콘텐츠** (스크롤)
   - **실시간 발언 영역** (상단, 고정)
@@ -738,7 +738,8 @@ graph TD
    - 실시간 동기화: 다른 참석자에게 즉시 반영
 
 4. **참고자료 링크**
-   - 참고자료 영역의 회의록 링크 클릭 → 새 탭에서 해당 회의록 열기
+   - 참고자료 영역의 회의록 링크 클릭 → **새 탭(target="_blank")에서 해당 회의록 열기**
+   - **녹음 중인 페이지 이탈 방지**: 링크는 항상 새 탭으로 열림
    - 관련도 표시: 퍼센트 또는 별점으로 시각화
    - AI가 자동으로 관련 회의록 검색 및 연결 (UFR-AI-040)
 
@@ -754,6 +755,21 @@ graph TD
    - 일시정지: 회의록 작성 중단, 재개 가능
    - 종료: 확인 다이얼로그 → 회의종료 화면으로 이동
 
+7. **참석자 추가 초대** (회의 진행 중)
+   - 헤더 메뉴 또는 참석자 목록에서 "+ 참석자 초대" 버튼 클릭
+   - 초대 모달 표시:
+     - 이메일 입력 필드 (여러 명 입력 가능, 쉼표/엔터로 구분)
+     - 검색 기능: 조직 내 사용자 검색 및 선택
+     - 권한 선택: 편집 가능/읽기 전용
+     - "초대 발송" 버튼
+   - 초대 발송 후:
+     - 실시간으로 참석자 목록에 "초대됨" 상태로 추가
+     - 초대받은 사람에게 알림 발송 (이메일/앱 푸시)
+     - 초대받은 사람이 수락 시 "참여 중"으로 상태 변경
+   - 권한:
+     - **회의 생성자**: 모든 참석자 초대 가능
+     - **일반 참석자**: 회의 설정에 따라 초대 가능 여부 결정
+
 #### 데이터 요구사항
 - **입력**: 회의 ID, 오디오 스트림
 - **출력**:
@@ -1779,6 +1795,7 @@ graph TD
 | 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개 섹션: 컬러, 타이포그래피, 간격, 카드, 버튼, 배지, 아이콘, 네비게이션, 폼, 모달, 애니메이션, 접근성, 반응형 등 |
 
 ---