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>

claude/uiux-prototype.md

@@ -0,0 +1,73 @@
+# 프로토타입작성가이드
+[요청사항]
+- <작성원칙>을 준용하여 설계
+- <작성순서>에 따라 설계
+- [결과파일] 안내에 따라 파일 작성  
+- Sequential MCP와 Playwright MCP 이용 
+
+[가이드]  
+<작성원칙>
+- **UI/UX설계서와 매칭**되어야 함. **불필요한 추가 개발 금지**
+- 스타일가이드를 준수하여 개발
+<작성순서>
+- 준비: 참고자료 분석 및 이해
+- 실행: 
+  - <병렬처리> 전략에 따라 프로토타입 개발  
+  - 예제 데이터는 화면 간 일관성 있게 개발 
+  - 각 화면간 전환이 되도록 개발 
+- 검토: 
+  - <작성원칙> 준수 검토
+  - '[체크리스트]'에 따라 검토하고 수정 
+- 테스트:
+  - 프로토타입을 웹브라우저에 실행하여 테스트 
+  - 버그 수정 및 화면 개선 
+<병렬처리>
+- 서브 에이전트 활용: Task 도구로 서비스별 동시 작업
+- 의존성 기반 그룹화: 의존 관계에 따른 순차/병렬 처리 결정
+- 통합 검증: 병렬 작업 완료 후 전체적 일관성 검증
+
+[참고자료]
+- design/uiux/style-guide.md 
+- design/uiux/uiux.md
+
+[결과파일]  
+- 프로토타입: design/uiux/prototype/{화면순서번호 2자리}-{화면명}.html
+- 화면명은 한글로 작성
+
+[체크리스트]
+1. 화면별 기능 동작 체크
+  아래 체크 템플릿을 이용하여 화면별 기능 동작 체크  
+  {화면명}
+  | 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 |
+  |-----------|-----------|-----------|------|------|
+  | [수행할 액션] | [기대하는 동작] | [실제 확인된 동작] | 성공/실패/부분성공 | [특이사항] |
+
+  예시)
+  메인/홈 화면
+  | 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 |
+  |-----------|-----------|-----------|------|------|
+  | 로고 클릭 | 메인 페이지 새로고침/유지 | | 성공 | |
+  | 메인 메뉴 클릭 | 해당 페이지로 이동 | | 부분성공 | |
+
+2. 화면간 데이터 일관성 체크
+  아래 체크 템플릿을 이용하여 데이터 일관성 체크  
+  | 데이터 | 데이터 사용 화면 | 일관성 | 비고 |
+  |-------------|-------|-------|-------|
+  | [데이터명] | [화면명] | 일치/불일치 | [차이점] |
+  
+  예시)
+  | 데이터 | 데이터 사용 화면 | 일관성 | 비고 |
+  |-------------|-------|-------|-------|
+  | 상품정보 | 메인화면, 상품상세화면 | 불일치| 메인화면에서 클릭한 상품정보와 상품 상세화면이 다름 |
+
+3. 화면간 연결성 체크
+  아래 체크 템플릿을 이용하여 화면별 연결성 체크
+  | 출발화면 | 연결방법 | 도착화면 | 예상 동작 | 실제 동작 | 상태 |
+  |-----------|-----------|-----------|-----------|-----------|------|
+  | [화면A] | [버튼/링크명] | [화면B] | [동작설명] | [확인결과] | 정상/비정상 |
+
+  예시)
+  | 출발화면 | 연결방법 | 도착화면 | 예상동작 | 실제동작 | 상태 |
+  |--------|----------|--------|------|------|
+  | 모든 화면 | 로고 클릭 | 메인 화면 | 메인화면 리프레시 | 동작안함 | 비정상 | 
+  | 모든 화면 | 메인 메뉴 | 각 주요 화면 | 각 화면 연결 | 정상 연결됨 | 정상 |

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개 섹션: 컬러, 타이포그래피, 간격, 카드, 버튼, 배지, 아이콘, 네비게이션, 폼, 모달, 애니메이션, 접근성, 반응형 등 |
 
 ---