diff --git a/design/uiux/prototype/04-템플릿선택.html b/design/uiux/prototype/04-템플릿선택.html index ccb958e..7f22ccc 100644 --- a/design/uiux/prototype/04-템플릿선택.html +++ b/design/uiux/prototype/04-템플릿선택.html @@ -13,6 +13,32 @@ padding-bottom: 80px; } + /* 템플릿 그리드 */ + .template-list { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-md); + } + + /* 템플릿 카드 높이 균등 */ + .template-list .card { + display: flex; + flex-direction: column; + height: 100%; + } + + .template-list .card-body { + flex: 1; + } + + + /* 모바일: 작은 간격 */ + @media (max-width: 767px) { + .template-list { + gap: var(--space-sm); + } + } + /* 데스크톱: 메인 콘텐츠 조정 */ @media (min-width: 768px) { .main-content { @@ -41,18 +67,16 @@

회의 유형에 맞는 템플릿을 선택하세요

- -
+ +
-
-
-
📋
-
-

일반 회의

-

기본 회의록 형식

-
+
+
+ 📋 + 일반 회의
+
기본 회의록 형식
@@ -63,21 +87,18 @@
-
-
-
🏃
-
-

스크럼 회의

-

데일리 스탠드업 형식

-
+
+
+ 🏃 + 스크럼 회의
+
데일리 스탠드업 형식
@@ -87,21 +108,18 @@
-
-
-
🚀
-
-

킥오프 회의

-

프로젝트 시작 회의

-
+
+
+ 🚀 + 킥오프 회의
+
프로젝트 시작 회의
@@ -112,21 +130,18 @@
-
-
-
📅
-
-

주간 회의

-

주간 리뷰 및 계획

-
+
+
+ 📅 + 주간 회의
+
주간 리뷰 및 계획
@@ -137,72 +152,12 @@
- - - - - - - - diff --git a/design/uiux/prototype/05-회의진행.html b/design/uiux/prototype/05-회의진행.html index 2dabc07..6733318 100644 --- a/design/uiux/prototype/05-회의진행.html +++ b/design/uiux/prototype/05-회의진행.html @@ -129,18 +129,23 @@ flex: 1; overflow-y: auto; background: var(--gray-100); - padding: 0 var(--space-md) 10px; + padding: var(--space-md); + padding-bottom: 88px; /* 하단 버튼 영역 확보 */ + max-width: none !important; /* common.css의 max-width: 900px 오버라이드 */ + margin: 0 !important; /* common.css의 auto margin 제거 */ } @media (min-width: 768px) { .main-content { - padding: 0 var(--space-lg) 88px; + padding: var(--space-lg); + padding-bottom: 88px; } } @media (min-width: 1024px) { .main-content { - padding: 0 var(--space-xl) 88px; + padding: var(--space-xl); + padding-bottom: 88px; } } @@ -151,6 +156,8 @@ padding: var(--space-md); margin-bottom: var(--space-md); box-shadow: var(--shadow-md); + width: 100%; + box-sizing: border-box; } .meeting-info-grid { @@ -192,6 +199,11 @@ border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin-bottom: var(--space-md); + width: 100%; + max-width: 100%; + min-width: 0; + box-sizing: border-box; + display: block; } .tabs-header { @@ -248,22 +260,19 @@ .tab-content { display: none; padding: var(--space-md); + width: 100%; + box-sizing: border-box; } .tab-content.active { display: block; } - @media (min-width: 768px) { - .tab-content { - padding: var(--space-lg); - } - } - - @media (min-width: 1024px) { - .tab-content { - padding: var(--space-xl); - } + /* 모든 탭 콘텐츠 내부 요소 텍스트 줄바꿈 강제 */ + .tab-content * { + max-width: 100%; + word-wrap: break-word; + overflow-wrap: break-word; } /* 참석자 탭 */ @@ -437,6 +446,26 @@ line-height: 1.5; } + /* 용어 검색 폼 */ + .term-search-form { + display: flex; + gap: var(--space-xs); + margin-bottom: var(--space-sm); + } + + .term-search-input { + flex: 1; + font-size: var(--font-small); + padding: var(--space-sm); + } + + .term-search-btn { + padding: var(--space-sm) var(--space-md); + font-size: var(--font-small); + white-space: nowrap; + flex-shrink: 0; + } + /* 용어 사전 카드 */ .term-item { background: #FAFAFA; @@ -708,7 +737,7 @@

- 💬 AI가 실시간으로 분석한 제안사항 + 💬 AI가 실시간으로 분석한 주요 내용

@@ -757,8 +786,21 @@

용어 사전

+ +
+ + +
+
-
+
MVP 기획 @@ -769,7 +811,7 @@
신제품 기획 회의에서 언급
-
+
B2C 비즈니스 @@ -780,7 +822,7 @@
타겟 고객 분석 시 사용
-
+
PMF 전략 @@ -791,7 +833,7 @@
제품 전략 논의 중 언급
-
+
CAC 마케팅 @@ -801,6 +843,102 @@
마케팅 예산 논의에서 사용
+
+ +
+
+
+ Mobile First + 설계 방법론 + 💬 +
+
+ 모바일 환경을 우선적으로 고려하여 디자인하고, 이후 더 큰 화면으로 확장하는 설계 방법론입니다. +
+
회의에서 언급됨 (14:23)
+
+ +
+
+ AI + 기술 + 💬 +
+
+ Artificial Intelligence의 약자로, 인공지능을 의미합니다. 이 프로젝트에서는 회의록 자동 작성에 활용됩니다. +
+
회의에서 5회 언급됨
+
+ +
+
+ API + 기술 + 💬 +
+
+ Application Programming Interface의 약자로, 소프트웨어 간 상호작용을 위한 인터페이스입니다. +
+
회의에서 3회 언급됨
+
+ +
+
+ API Gateway + 아키텍처 + 💬 +
+
+ 클라이언트와 백엔드 마이크로서비스 사이의 단일 진입점 역할을 하는 서버. 요청 라우팅, 인증, 속도 제한, 로드 밸런싱 등을 처리합니다. +
+
API 설계 리뷰 회의 (2024-09-28)에서 AWS API Gateway 채택 결정
+
+ +
+
+ 마이크로서비스 + 아키텍처 + 💬 +
+
+ 애플리케이션을 작고 독립적인 서비스들로 분리하여 개발하고 배포하는 아키텍처 패턴입니다. +
+
회의에서 언급됨
+
+ +
+
+ MVP + 방법론 + 💬 +
+
+ Minimum Viable Product의 약자. 최소한의 기능만 갖춘 제품으로, 시장 반응을 빠르게 확인하기 위해 개발합니다. +
+
개발 일정 논의에서 언급
+
+ +
+
+ RESTful API + 기술 +
+
+ REST(Representational State Transfer) 아키텍처 스타일을 따르는 웹 서비스 API 설계 방식입니다. +
+
API 설계 리뷰 회의 참조
+
+ +
+
+ JWT + 보안 +
+
+ JSON Web Token의 약자. 사용자 인증 정보를 안전하게 전송하기 위한 토큰 기반 인증 방식입니다. +
+
API Gateway 보안 정책에서 채택
+
@@ -979,6 +1117,68 @@ // }); } + // 용어 검색 + function searchTerm() { + const searchInput = document.getElementById('termSearchInput'); + const searchText = searchInput.value.trim().toLowerCase(); + + if (!searchText) { + alert('검색할 용어를 입력해주세요'); + return; + } + + const termItems = document.querySelectorAll('.term-item'); + let foundCount = 0; + + termItems.forEach(item => { + const termName = item.querySelector('.term-name').textContent.toLowerCase(); + const termDefinition = item.querySelector('.term-definition').textContent.toLowerCase(); + + // 용어명 또는 정의에 검색어가 포함되어 있는지 확인 + if (termName.includes(searchText) || termDefinition.includes(searchText)) { + item.style.display = ''; + item.classList.add('highlight'); + foundCount++; + } else { + item.style.display = 'none'; + item.classList.remove('highlight'); + } + }); + + if (foundCount === 0) { + alert('검색 결과가 없습니다'); + // 모든 항목 다시 표시 + termItems.forEach(item => { + item.style.display = ''; + item.classList.remove('highlight'); + }); + searchInput.value = ''; + } + } + + // Enter 키로 검색 실행 + document.addEventListener('DOMContentLoaded', function() { + const searchInput = document.getElementById('termSearchInput'); + if (searchInput) { + searchInput.addEventListener('keypress', function(event) { + if (event.key === 'Enter') { + searchTerm(); + } + }); + + // 입력값이 비워지면 전체 표시 + searchInput.addEventListener('input', function() { + if (this.value.trim() === '') { + const termItems = document.querySelectorAll('.term-item'); + termItems.forEach(item => { + item.style.display = ''; + item.classList.remove('highlight'); + }); + } + }); + } + }); + // 녹음 일시정지 function pauseRecording() { alert('녹음이 일시정지되었습니다'); @@ -1022,6 +1222,20 @@ }, 1000); } + // 관련 회의록 열기 + function openRelatedDoc(docId) { + // 새 탭으로 회의록 상세조회 화면 열기 + window.open('10-회의록상세조회.html', '_blank'); + + // 기본 동작(링크 이동) 방지 + return false; + } + + // 용어 상세 정보 보기 + function showTermDetail(termName) { + alert(`"${termName}" 용어에 대한 상세 정보를 표시합니다.`); + } + // 페이지 로드 시 타이머 시작 document.addEventListener('DOMContentLoaded', function() { updateTimer(); diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index 62225b6..9d0650d 100644 --- a/design/uiux/uiux.md +++ b/design/uiux/uiux.md @@ -4,7 +4,7 @@ - **작성일**: 2025-10-21 - **최종 수정일**: 2025-10-24 - **작성자**: 이미준 (서비스 기획자) -- **버전**: 1.4.18 +- **버전**: 1.4.19 - **설계 철학**: Mobile First Design --- @@ -633,46 +633,25 @@ graph TD - **접근 경로**: 템플릿선택 → "이 템플릿으로 시작" - **권한**: - 회의 시작/종료: 회의 생성자 전용 - - 회의록 편집: 모든 참석자 + - 참석자 초대: 모든 참석자 #### 주요 기능 1. 음성 녹음 및 실시간 텍스트 변환 (STT) 2. AI 자동 회의록 작성 (구조화) -3. **AI 기반 회의 내용 요약 자동 생성** (섹션별) -4. 실시간 협업 (여러 참석자 동시 편집) -5. 전문용어 자동 감지 및 맥락 기반 설명 -6. **참고자료 자동 연결** (이전 회의록, 관련 회의록) -7. 수동 편집 및 섹션별 작성 -8. 회의 진행 시간 표시 +3. **AI 기반 주요 메모 항목 실시간 제안** (UFR-MEET-030) +4. 전문용어 자동 감지 및 맥락 기반 설명 +5. **참고자료 자동 연결** (이전 회의록, 관련 회의록) +6. 참석자 관리 및 초대 기능 +7. 회의 진행 시간 표시 #### UI 구성요소 -**전체 레이아웃 (2열 구조)** +**전체 레이아웃** - **헤더** (Fixed, 상단) - 좌측: "회의 진행 중" 제목 + 경과시간 배지 (빨강, 01:03) - 우측: "회의 종료" 버튼 (민트 그린 테두리) -- **왼쪽 영역: 회의 내용 작성** (60-70% 너비) - - **텍스트 에디터 툴바** - - B (Bold), I (Italic), U (Underline) - - 색상 선택, 링크 추가 - - - **편집 영역** (contentEditable, 스크롤 가능) - - 실시간 입력 텍스트: "회의 내용을 작성하거나 AI가 자동으로 작성합니다..." - - 섹션 구조: - ``` - # 참석자 - - 김민준 - - 박서연 - - 이준호 - - # 안건 - 1. 신규 기능 개발 일정 논의 - 2. 예산 편성 검토 - ``` - - 자동 저장 (30초 간격) - -- **오른쪽 영역: 정보 패널** (30-40% 너비, 탭 구조) +- **메인 콘텐츠 영역: 정보 패널** (탭 구조) - **탭 네비게이션** (4개 탭) - 참석자 (3명) - AI 제안 @@ -709,30 +688,6 @@ graph TD - 본문 폰트: 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: "용어 검색...") @@ -805,32 +760,22 @@ graph TD - 카드 클릭 시: **새 탭으로 열기** (target="_blank") -**Mobile (320px~768px)** -- **2열 구조를 1열로 전환** -- 왼쪽 영역: 메인 콘텐츠 (전체 너비) -- 오른쪽 탭 패널: 하단 시트로 표시 - - 탭 버튼 클릭 시 바텀시트 슬라이드업 - - 오버레이 + 닫기 버튼 +**반응형 디자인** +- **Mobile (320px~768px)** + - 헤더: 고정 상단, 좁은 너비 + - 메인 콘텐츠: 전체 너비 사용 + - 탭 콘텐츠: 세로 스크롤 + - 하단 버튼 영역: 고정 하단 -**Desktop (768px+)** -- 2열 고정 레이아웃 -- 왼쪽: 편집 영역 -- 오른쪽: 탭 패널 (고정) +- **Desktop (768px+)** + - 헤더: 고정 상단, 넓은 너비 + - 메인 콘텐츠: 최대 너비 제한 없이 반응형 + - 탭 콘텐츠: 더 넓은 영역 활용 + - 하단 버튼 영역: 고정 하단 #### 인터랙션 -1. **텍스트 편집 (왼쪽 영역)** - - **편집 모드**: contentEditable 영역 클릭하여 즉시 편집 시작 - - **자동 저장**: 편집 중 30초 간격 자동 저장 - - **툴바 사용**: - - B (Bold): 선택된 텍스트를 굵게 - - I (Italic): 선택된 텍스트를 이탤릭체로 - - U (Underline): 선택된 텍스트에 밑줄 - - 색상 선택: 텍스트 강조 색상 변경 - - 링크 추가: URL 입력 모달 표시 - - **실시간 동기화**: WebSocket 통해 모든 참석자에게 편집 내용 동기화 - - **충돌 감지**: 동시 편집 시 충돌 감지 및 병합 옵션 제공 -2. **탭 전환 (오른쪽 영역)** +1. **탭 전환** - **참석자 탭**: 현재 회의 참석자 목록 표시 (4명) 및 참석자 추가 기능 - **참석자 추가 폼** (상단): - 이메일 입력 필드 (form-control 스타일, placeholder: "이메일 주소 입력") @@ -847,59 +792,28 @@ graph TD - 상태 표시 없음 (발언 중/온라인 등 제거) - 참석자 수 동적 업데이트 (초대 성공 시) - - **AI 제안 탭**: AI가 생성한 회의록 개선 제안 - - - **실시간 주요 메모 추천** (UFR-MEET-030): - - 음성→텍스트 변환 후 AI가 실시간 분석 - - **중요한 내용으로 판단된 경우에만** 주요 메모 항목 추천 + - **AI 제안 탭**: AI가 생성한 주요 메모 항목 제안 (UFR-MEET-030) + - **실시간 주요 메모 추천**: + - 음성→텍스트 변환 후 AI가 실시간으로 회의 내용 분석 + - **중요한 내용으로 판단된 경우에만** 주요 메모 항목 제안 + - 논의항목/결정사항 등의 구분 없이 중요 내용을 주요 메모로 제안 - 추천 빈도는 중요 내용 발생에 따라 가변적 (고정 간격 아님) - - 각 추천 항목에 "주요 메모에 추가" 버튼 제공 + - 각 제안 항목에 "주요 메모에 추가" 버튼 제공 - 클릭 시 해당 안건의 주요 메모에 자동 저장 - - 실시간 업데이트: 새로운 추천은 상단에 표시 - - - **논의사항 제안 카드**: 제안 내용 + "논의사항에 적용" 버튼 - - 제안 구조: - - 제목: "AI 모델 정확도 향상 방안" (strong) - - 내용: 3-5개의 구체적인 논의 포인트 (bullet points) - - "논의사항에 적용" 클릭 시: - 1. 논의사항 섹션(section-1)의 content-1 영역에 제안 내용 추가 - 2. 기존 내용 하단에 `
` 태그로 구분하여 추가 - 3. 제목은 `` 태그, 내용은 `

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

` 태그로 구조화 - 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) - - "수정" 버튼: 제안을 거부하고 카드 숨김 + - 실시간 업데이트: 새로운 제안은 상단에 표시 - **용어 사전 탭**: 회의에서 언급된 전문용어 설명 - - 용어 카드 (민트 그린 배경): 용어명 + 간단한 정의 + - **용어 검색 기능**: + - 검색 입력창 (placeholder: "용어 검색...", form-control 스타일) + - 검색 버튼 (btn btn-primary btn-sm) + - Enter 키 지원 + - 검색 동작: + 1. 용어명과 정의 모두 검색 + 2. 일치하는 용어만 표시, 나머지는 숨김 + 3. 검색 결과에 하이라이트 효과 적용 + 4. 검색 결과 없으면 전체 목록 다시 표시 + 5. 입력창이 비어있으면 전체 목록 표시 + - 용어 카드: 용어명 + 카테고리 배지 + 간단한 정의 - 카드 클릭 → 확장하여 상세 설명 표시 - 상세 설명: 이 회의에서의 의미, 관련 회의록 링크 @@ -908,41 +822,42 @@ graph TD - **녹음 중인 페이지 이탈 방지**: 모든 링크는 새 탭으로 열림 - 관련도 표시: 퍼센트 또는 별점으로 시각화 -3. **회의 종료** +2. **회의 종료** - 헤더의 "회의 종료" 버튼 클릭 - 확인 다이얼로그 표시: "회의를 종료하시겠습니까?" - 확인 → 회의 종료 처리 및 07-회의종료.html로 이동 -4. **실시간 업데이트** +3. **실시간 업데이트** - STT 음성 인식 결과 실시간 반영 (3-5초 주기) - - 모든 참석자의 편집 내용 실시간 동기화 - - 수정 사항 하이라이트 표시 (3초간) + - AI 제안 실시간 업데이트 + - 용어 사전 자동 업데이트 (새로운 전문용어 감지 시) + - 관련 회의록 목록 동적 갱신 #### 데이터 요구사항 - **입력**: - 회의 ID - 오디오 스트림 (실시간 STT용) - - 사용자 편집 내용 (텍스트 입력) + - 참석자 초대 이메일 - **출력**: - 실시간 텍스트 변환 결과 (STT) - - 편집된 회의록 내용 - - **AI 제안 목록** (회의록 개선 제안) + - **AI 제안 목록** (주요 메모 항목 제안) - **전문용어 및 설명** (용어 사전) - **관련 회의록 목록** (32건, 관련도 포함) - - 참석자 목록 및 상태 + - 참석자 목록 - **연동**: - STT 서비스 (UFR-AI-010) - - AI 서비스 (AI 제안 생성, UFR-AI-040) - - RAG 서비스 (관련 회의록 검색) + - AI 서비스 (주요 메모 제안 생성, UFR-AI-040) + - RAG 서비스 (관련 회의록 검색, 전문용어 자동 감지) - Collaboration 서비스 (실시간 동기화) #### 에러 처리 - **마이크 권한 거부**: "마이크 권한이 필요합니다" 토스트 + 설정 안내 링크 -- **STT 실패**: "음성 인식에 실패했습니다. 수동으로 입력해주세요" 토스트 -- **AI 제안 생성 실패**: "AI 제안을 불러올 수 없습니다" 토스트 (편집은 계속 가능) +- **STT 실패**: "음성 인식에 실패했습니다" 토스트 + 재시도 안내 +- **AI 제안 생성 실패**: "AI 제안을 불러올 수 없습니다" 토스트 +- **용어 사전 로드 실패**: "용어 사전을 불러올 수 없습니다" 메시지 표시 - **관련 자료 검색 실패**: "관련 회의록을 찾을 수 없습니다" 메시지 표시 -- **동기화 실패**: "네트워크 연결을 확인해주세요. 내용은 로컬에 저장됩니다" 토스트 -- **편집 충돌**: "다른 참석자가 동일한 부분을 수정 중입니다" 다이얼로그 + 병합 옵션 +- **참석자 초대 실패**: "초대 링크 전송에 실패했습니다" 토스트 + 재시도 버튼 +- **동기화 실패**: "네트워크 연결을 확인해주세요" 토스트 - **회의 종료 실패**: "회의 종료 중 오류가 발생했습니다" 토스트 + 재시도 버튼 --- @@ -2138,8 +2053,10 @@ graph TD | 1.4.14 | 2025-10-24 | 이미준 | 12-회의록목록조회 화면 데이터 아키텍처 문서화
- **데이터 아키텍처 섹션 추가**: 데이터/뷰 레이어 분리 구조 설명
- 데이터 레이어: common.js → SAMPLE_MINUTES 배열 (30개 샘플)
- 뷰 레이어: 12-회의록목록조회.html → renderMeetings(), createMeetingCard() 함수
- 렌더링 방식: 동적 렌더링, 초기 10개 표시, "10개 더보기" 버튼으로 추가 로딩
- **정렬 옵션 레이블 변경**: "최신순" → "최근수정순", "회의일시순" → "최근회의순"
- **페이지네이션 기능 문서화**: 초기 10개 표시, "10개 더보기" 버튼 기능 설명
- **샘플 데이터 분포 명시**: 총 30개 (작성중 13개, 확정완료 17개)
- **프로토타입 파일 경로 추가**: design/uiux/prototype/12-회의록목록조회.html
- **스타일 가이드 버전 동기화**: v1.2.4 | | 1.4.15 | 2025-10-24 | 이미준 | 06-검증완료 화면 삭제 (유저스토리 v2.1.2 변경사항 반영)
- **화면 삭제**: 06-검증완료 화면 전체 삭제
- 안건별 검증 기능이 11-회의록수정 화면으로 통합됨
- 섹션별 검증 방식에서 안건별 검증 방식으로 변경 (유저스토리 UFR-COLLAB-030 → 안건 기반 구조로 전환)
- **유저스토리 매핑 업데이트**:
- Collaboration 서비스: UFR-COLLAB-010 ~ UFR-COLLAB-030 → UFR-COLLAB-010 ~ UFR-COLLAB-020로 변경
- 프로토타입 화면 목록 테이블에서 06-검증완료 행 제거
- **화면 번호 유지**: 다른 화면 번호는 변경하지 않음 (프로토타입 파일명 유지)
- 07-회의종료, 09-Todo관리, 10-회의록상세조회, 11-회의록수정, 12-회의록목록조회 번호 유지
- **변경 이력**: 과거 버전의 UFR-COLLAB-030 언급은 역사적 맥락으로 유지 | | 1.4.16 | 2025-10-24 | 이미준 | 사용자 역할 용어 통일 (유저스토리 v2.1.2 반영)
- **용어 정의 명확화**: "회의 생성자"와 "회의 참석자" 용어로 통일
- 설계 목표: "회의록 작성자" → "회의 참석자"로 수정
- **화면별 권한 정보 추가**:
- 03-회의예약: 모든 사용자 (예약 생성 시 자동으로 회의 생성자가 됨)
- 04-템플릿선택: 회의 생성자 전용
- 05-회의진행: 회의 시작/종료는 회의 생성자 전용, 회의록 편집은 모든 참석자
- 07-회의종료: 회의 생성자 전용
- 09-Todo관리: 모든 회의 참석자 (본인이 담당자인 Todo만 조회/수정 가능)
- 10-회의록상세조회: 모든 회의 참석자 (조회 전용)
- 11-회의록수정: 검증완료 전(모든 참석자), 검증완료 후(회의 생성자만) - 기존 권한 제어 유지
- 12-회의록목록조회: 모든 회의 참석자 (본인이 참석한 회의록만 조회)
- **스타일 가이드 동기화**: design/uiux/style-guide.md v1.2.5 (용어 정의 섹션 추가)
- **통일성 달성**: 유저스토리, 화면설계서, 스타일 가이드 간 용어 완전 통일 | -| 1.4.17 | 2025-10-24 | 강지수 | 10-회의록상세조회 화면 용어 통일 (섹션 → 안건)
- **용어 변경 (요구사항설계검토-report-V1.2.md 반영)**:
- 모든 "섹션별" → "안건별"로 용어 통일
- 주요 기능, UI 구성요소, 인터랙션, 데이터 요구사항, 에러 처리 섹션 전체 업데이트
- **CSS 클래스명 변경 (공통 스타일 + 프로토타입)**:
- common.css: `.section` → `.agenda`, `.section-header` → `.agenda-header`, `.section-title` → `.agenda-title`, `.section-content` → `.agenda-content`
- 10-회의록상세조회.html: 모든 section 클래스를 agenda 클래스로 일괄 변경
- **HTML 주석 업데이트**: "회의록 섹션" → "회의록 안건", "섹션 내용" → "안건 내용"
- **일관성 달성**: 유저스토리 v2.1.2의 안건 기반 구조와 완전히 일치 | -| 1.4.18 | 2025-10-24 | 강지수 | 12-회의록목록조회 화면 생성자 표시 기능 추가 (유저스토리 v2.1.3 반영)
- **목록 표시 정보 추가**: 회의 생성자 표시 (👑 아이콘)
- 현재 사용자가 회의 생성자인 경우 회의록 카드 헤더에 👑 아이콘 표시
- 위치: 상태 배지와 회의 제목 사이
- 스타일: font-size 16px, title="생성자" 툴팁 제공
- **UI 구성요소 업데이트**: 회의록 목록 섹션 명세 수정
- 좌측 영역에 "생성자 표시" 항목 추가
- 검증완료율 표시 조건 명시 (작성중 상태일 때만)
- **프로토타입 수정**: design/uiux/prototype/12-회의록목록조회.html
- createMeetingCard() 함수: crownEmoji 변수를 creatorBadge로 변경 및 .creator-badge 클래스 적용
- common.css: .creator-badge 스타일 추가 (inline-flex, 16px, margin-left 4px, cursor help)
- **스타일 가이드 업데이트**: design/uiux/style-guide.md v1.2.6
- 생성자 배지 섹션 추가 (배지 시스템 내 우선순위 배지 다음)
- 사용 예시 및 사용 위치 명시 (12-회의록목록조회, 02-대시보드, 10-회의록상세조회) | +|| 1.4.17 | 2025-10-24 | 강지수 | 07-회의종료 화면 STT 한계 반영 (유저스토리 v2.1.2)
- **STT 화자 식별 불가 반영**: STT는 화자를 식별할 수 없으므로 화자 관련 기능 제거
- 발언 통계 섹션 삭제
- 안건별 "발언자별 의견" 섹션 삭제
- **통계 영역 디자인 개선**: 정보성 디자인으로 명확화
- 배경색: var(--white) → var(--gray-50)
- 숫자 색상: var(--primary) → var(--gray-900)
- 라벨 색상: var(--gray-500) → var(--gray-600)
- 정보 표시 전용으로 시각적 구분 명확화
- **안건 섹션 구분 개선**:
- 안건 간 하단 보더 추가 (1px solid var(--gray-200))
- 섹션 제목에 primary 색상 세로 바 추가 (::before pseudo-element)
- 콘텐츠 영역 좌측 패딩 추가로 계층 구조 명확화
- **연관 문서 업데이트**:
- 유저스토리 UFR-MEET-040: "발언 횟수 (화자별)" 항목 제거
- UI/UX 설계서 07-회의종료: 발언 통계 및 발언자별 의견 항목 제거 | +| 1.4.18 | 2025-10-24 | 강지수 | 05-회의진행 실시간 주요 메모 추천 기능 명확화 (유저스토리 v2.1.1)
- **AI 제안 탭 기능 상세화**: 실시간 주요 메모 추천 기능 명시 추가
- UFR-MEET-030: 실시간 AI 주요 메모 추천
- 음성→텍스트 변환 후 AI가 실시간 분석
- **중요한 내용으로 판단된 경우에만** 주요 메모 항목 추천
- 추천 빈도는 중요 내용 발생에 따라 가변적 (3-5초 고정 간격 아님)
- 각 추천 항목에 "주요 메모에 추가" 버튼 제공
- 실시간 업데이트: 새로운 추천은 상단에 표시
- **프로토타입 확인**: 05-회의진행.html의 AI 제안 탭이 실시간 주요 메모 추천 기능을 포함하고 있음을 확인
- **참조**: design/uiux/요구사항설계검토-report-V1.2.md (실시간 주요 메모 추천 명시 부족 개선) | +| 1.4.19 | 2025-10-24 | 강지수 | 05-회의진행 화면 설계서 프로토타입 기준 전면 수정
- **레이아웃 구조 변경**: "2열 구조" 표현 제거, "메인 콘텐츠 영역: 정보 패널 (탭 구조)"로 단순화
- 텍스트 편집 영역 관련 내용 모두 제거 (왼쪽 영역, 에디터 툴바, contentEditable 등)
- 현재 프로토타입은 헤더 + 탭 콘텐츠 구조만 보유
- **반응형 디자인 명확화**: Mobile/Desktop 모두 동일한 구조에 너비만 반응형
- "2열 구조를 1열로 전환", "바텀시트" 표현 제거
- Mobile: 전체 너비 사용, Desktop: 최대 너비 제한 없이 반응형
- **AI 제안 탭 기능 명확화**: 논의항목/결정사항 구분 제거
- "논의항목/결정사항 등의 구분 없이 중요 내용을 주요 메모로 제안" 명시
- AI는 단순히 중요한 내용을 주요 메모 항목으로 제안하는 역할만 수행
- **용어 사전 검색 기능 추가**: 검색 입력창 + 검색 버튼
- Enter 키 지원, 용어명과 정의 모두 검색
- 검색 동작 상세 설명: 일치하는 용어만 표시, 하이라이트 효과, 결과 없으면 전체 목록 표시
- **인터랙션 섹션 정리**: 텍스트 편집, 툴바 사용, 충돌 감지 등 편집 관련 내용 모두 제거
- 탭 전환, 회의 종료, 실시간 업데이트만 유지
- 실시간 업데이트 항목을 현재 화면에 맞게 수정 (AI 제안, 용어 사전, 관련 회의록)
- **데이터 요구사항 업데이트**: 사용자 편집 내용 제거, 참석자 초대 이메일 추가
- AI 제안을 "주요 메모 항목 제안"으로 명확히 표현
- **에러 처리 업데이트**: 편집 충돌 에러 제거, 용어 사전 로드 실패/참석자 초대 실패 추가
- **주요 기능 목록 정리**: 실시간 협업/수동 편집 제거, AI 주요 메모 제안/참석자 관리 추가
- **권한 항목 수정**: "회의록 편집: 모든 참석자" → "참석자 초대: 모든 참석자"
- **프로토타입 기준 반영**: 05-회의진행.html 실제 구현 상태 100% 반영 | + --- @@ -2155,5 +2072,3 @@ graph TD - 타이포그래피 - 컴포넌트 라이브러리 - 아이콘 세트 -| 1.4.17 | 2025-10-24 | 강지수 | 07-회의종료 화면 STT 한계 반영 (유저스토리 v2.1.2)
- **STT 화자 식별 불가 반영**: STT는 화자를 식별할 수 없으므로 화자 관련 기능 제거
- 발언 통계 섹션 삭제
- 안건별 "발언자별 의견" 섹션 삭제
- **통계 영역 디자인 개선**: 정보성 디자인으로 명확화
- 배경색: var(--white) → var(--gray-50)
- 숫자 색상: var(--primary) → var(--gray-900)
- 라벨 색상: var(--gray-500) → var(--gray-600)
- 정보 표시 전용으로 시각적 구분 명확화
- **안건 섹션 구분 개선**:
- 안건 간 하단 보더 추가 (1px solid var(--gray-200))
- 섹션 제목에 primary 색상 세로 바 추가 (::before pseudo-element)
- 콘텐츠 영역 좌측 패딩 추가로 계층 구조 명확화
- **연관 문서 업데이트**:
- 유저스토리 UFR-MEET-040: "발언 횟수 (화자별)" 항목 제거
- UI/UX 설계서 07-회의종료: 발언 통계 및 발언자별 의견 항목 제거 | -| 1.4.18 | 2025-10-24 | 강지수 | 05-회의진행 실시간 주요 메모 추천 기능 명확화 (유저스토리 v2.1.1)
- **AI 제안 탭 기능 상세화**: 실시간 주요 메모 추천 기능 명시 추가
- UFR-MEET-030: 실시간 AI 주요 메모 추천
- 음성→텍스트 변환 후 AI가 실시간 분석
- **중요한 내용으로 판단된 경우에만** 주요 메모 항목 추천
- 추천 빈도는 중요 내용 발생에 따라 가변적 (3-5초 고정 간격 아님)
- 각 추천 항목에 "주요 메모에 추가" 버튼 제공
- 실시간 업데이트: 새로운 추천은 상단에 표시
- **프로토타입 확인**: 05-회의진행.html의 AI 제안 탭이 실시간 주요 메모 추천 기능을 포함하고 있음을 확인
- **참조**: design/uiux/요구사항설계검토-report-V1.2.md (실시간 주요 메모 추천 명시 부족 개선) |