From e37d20942a6f4fece858dfba666e943bf0881510 Mon Sep 17 00:00:00 2001 From: yabo0812 Date: Fri, 24 Oct 2025 13:11:55 +0900 Subject: [PATCH] =?UTF-8?q?11-=ED=9A=8C=EC=9D=98=EB=A1=9D=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=ED=99=94=EB=A9=B4=20=EC=95=88=EA=B1=B4=20=EA=B8=B0?= =?UTF-8?q?=EB=B0=98=20=EA=B5=AC=EC=A1=B0=EB=A1=9C=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit UI/UX 설계서 및 프로토타입 수정으로 유저스토리 v2.1.1+ 요구사항 반영 - 안건별 AI 한줄 요약 (UFR-AI-036): 읽기 전용, 30자 이내, 🔒 아이콘 표시 - 안건 기반 구조: 기존 섹션 구조를 안건 기반으로 전면 변경 - 안건별 검증 UI (UFR-COLLAB-030): 회의 생성자 잠금/해제 기능, 참석자 읽기 전용 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- design/uiux/prototype/11-회의록수정.html | 305 +++++++++++++++++------ design/uiux/uiux.md | 107 +++++--- 2 files changed, 312 insertions(+), 100 deletions(-) diff --git a/design/uiux/prototype/11-회의록수정.html b/design/uiux/prototype/11-회의록수정.html index 9410484..5bfca6b 100644 --- a/design/uiux/prototype/11-회의록수정.html +++ b/design/uiux/prototype/11-회의록수정.html @@ -7,7 +7,7 @@ @@ -258,6 +335,8 @@ - 검증완료 후: 회의 생성자만 수정 가능 (참석자는 "수정" 버튼 비활성화) - 참석자 관리: 회의 생성자만 추가/삭제 가능 - 회의 일시/장소: 읽기 전용 (회의 예약 화면에서만 변경 가능) + - 안건별 검증: 회의 생성자는 잠금 해제 후 수정 가능, 참석자는 읽기 전용 + - AI 한줄 요약: 모든 사용자에게 읽기 전용 (UFR-AI-036) --> @@ -305,19 +384,27 @@ - -
-
-

- 1. 신제품 기획 방향 - 검증완료 -

+ +
+
+
+

1. 신제품 기획 방향

+
+ 검증완료 +
+
- + +
+ 🔒 + 타겟 고객을 20-30대로 설정, UI/UX 개선 집중 +
+ +
- 💡 AI 요약 + 💡 AI 상세 요약
+
📚 관련회의록 (1개) @@ -445,28 +547,42 @@
-
+ +
- - 🔒 읽기 전용 +
+ +
+
+ +
- -
-
-

- 3. 마케팅 전략 - 검증완료 -

+ +
+
+
+

3. 마케팅 전략

+
+ 검증완료 +
+
+ +
+ 🔒 + 프리 런칭 캠페인, LinkedIn 및 스타트업 커뮤니티 집중 +
+ +
- 💡 AI 요약 + 💡 AI 상세 요약
+
📚 관련회의록 (0개) @@ -505,13 +623,18 @@
-
+ +
- - 🔒 읽기 전용 +
+ +
+
+ +
@@ -621,7 +744,7 @@ } // AI 요약 재생성 - function regenerateSummary(sectionId) { + function regenerateSummary(agendaId) { showToast('AI 요약을 생성 중입니다...', 'info'); setTimeout(() => { @@ -630,6 +753,46 @@ }, 2000); } + // 안건별 검증 잠금 해제 (회의 생성자만 가능) + function unlockAgendaVerification(agendaId) { + const verifyContainer = document.getElementById(`verify-agenda-${agendaId}`); + const checkbox = document.getElementById(`verify-${agendaId}`); + + // 잠금 해제 상태로 변경 + verifyContainer.classList.remove('verified'); + verifyContainer.classList.add('unlocked'); + checkbox.disabled = false; + + // 버튼을 "잠금" 버튼으로 변경 + const actionsDiv = verifyContainer.querySelector('.verification-actions'); + actionsDiv.innerHTML = ` + + `; + + showToast('안건 검증을 수정할 수 있습니다', 'success'); + markAsUnsaved(); + } + + // 안건별 검증 잠금 (회의 생성자만 가능) + function lockAgendaVerification(agendaId) { + const verifyContainer = document.getElementById(`verify-agenda-${agendaId}`); + const checkbox = document.getElementById(`verify-${agendaId}`); + + // 잠금 상태로 변경 + verifyContainer.classList.remove('unlocked'); + verifyContainer.classList.add('verified'); + checkbox.disabled = true; + + // 버튼을 "잠금 해제" 버튼으로 변경 + const actionsDiv = verifyContainer.querySelector('.verification-actions'); + actionsDiv.innerHTML = ` + + `; + + showToast('안건 검증이 잠겼습니다', 'success'); + markAsUnsaved(); + } + // 관련회의록 제거 function removeReference(btn) { const item = btn.closest('.reference-item'); diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index 55147d8..029a327 100644 --- a/design/uiux/uiux.md +++ b/design/uiux/uiux.md @@ -1427,13 +1427,20 @@ graph TD - 회의 제목: 수정 가능 - 회의 일시/장소: 읽기 전용 (회의 예약 화면에서만 변경 가능) - 참석자 관리: 회의 생성자만 추가/삭제 가능 -2. 회의록 내용 수정 (섹션별) -3. **AI 요약 수정** (섹션별) -4. **참고자료 편집** (추가/제거) -5. **Todo 수정 (UFR-TODO-040)** - 신규 추가 (회의 생성자만) -6. 자동 저장 (30초 간격) -7. 수정 이력 관리 -8. 상태 변경 (검증완료 → 작성중으로 자동 변경) +2. **회의록 내용 수정 (안건별)** - 용어 변경: 섹션 → 안건 +3. **AI 한줄 요약 표시 (안건별, UFR-AI-036)** - 신규 + - 편집 불가능한 AI 한줄 요약 (30자 이내) + - 각 안건 최상단에 표시 +4. **AI 상세 요약 수정 (안건별)** - 기존 AI 요약 기능 +5. **참고자료 편집** (추가/제거) +6. **Todo 수정 (UFR-TODO-040)** - 회의 생성자만 +7. **안건별 검증 (UFR-COLLAB-030)** - 신규 + - 안건별 검증 완료 체크박스 + - 회의 생성자: 잠금 해제 후 수정 가능 + - 참석자: 읽기 전용 +8. 자동 저장 (30초 간격) +9. 수정 이력 관리 +10. 상태 변경 (검증완료 → 작성중으로 자동 변경) #### UI 구성요소 @@ -1456,19 +1463,30 @@ graph TD - 회의록 상태 배지 (자동 관리) - **편집 화면** - - 섹션별 편집 영역 - - 각 섹션: - - 섹션 제목 - - **AI 요약 편집 영역** - - 요약 텍스트 편집 필드 + - **안건별 편집 영역** (용어 변경: 섹션 → 안건) + - 각 안건: + - **안건 헤더** + - 안건 제목 (H4, Bold) + - 검증 상태 배지 (검증완료/미검증) + - **AI 한줄 요약** (편집 불가, UFR-AI-036) - 신규 + - 🔒 아이콘 + 30자 이내 한줄 요약 + - 읽기 전용 (회색 배경, 민트 그린 좌측 액센트 라인) + - 호버 시: "이 내용은 편집할 수 없습니다" 툴팁 + - **AI 상세 요약 편집 영역** + - 💡 "AI 상세 요약" 레이블 (명칭 변경) + - 요약 텍스트 편집 필드 (textarea) - "AI 재생성" 버튼 (요약 다시 생성) - 마지막 수정 시간 표시 - 편집 가능한 텍스트 영역 + - 논의 주제 + - 발언자별 의견 + - 결정 사항 + - 보류 사항 - **참고자료 편집 영역** - 기존 참고자료 목록 (제거 버튼 포함) - "참고자료 추가" 버튼 - 회의록 검색 및 선택 UI - - **Todo 섹션 편집 영역** (회의 생성자만) - 신규 + - **Todo 섹션 편집 영역** (회의 생성자만) - Todo 목록 표시 - 각 Todo 항목: - 체크박스 (완료 상태) @@ -1479,14 +1497,20 @@ graph TD - "편집" 버튼 (인라인 편집 활성화) - "삭제" 버튼 - "Todo 추가" 버튼 - - 검증 완료 체크박스 (잠금 해제 필요) + - **안건별 검증 영역** (UFR-COLLAB-030) - 신규 + - **회의 생성자 화면**: + - 검증 완료 체크박스 (활성화) + - "잠금 해제" 버튼 (검증완료 안건만 표시) + - **참석자 화면**: + - 🔒 "읽기 전용" 배지 (검증완료 안건) + - 안내 텍스트: "(잠금됨 · 회의 생성자만 수정 가능)" - 자동 저장 상태 표시 ("저장됨", "저장 중...") **Tablet/Desktop (768px+)** - **헤더**: Mobile과 동일 (뒤로가기, 타이틀, 저장 버튼, 자동 저장 인디케이터) - **메인 영역**: - 회의 기본 정보 영역 (Mobile과 동일) - - 편집 화면 (섹션별 편집, AI 요약, 참고자료, Todo) + - 편집 화면 (안건별 편집, AI 한줄/상세 요약, 참고자료, Todo, 안건별 검증) - **우측 패널** (선택사항): - 수정 이력 (v2.0 고도화 예정) - 미리보기 @@ -1502,19 +1526,40 @@ graph TD - 자동 저장: 30초 간격, 인디케이터 표시 - 수동 저장: "저장" 버튼 클릭 -3. **검증완료 섹션 (권한별 차등 표시)** - - **회의 생성자**: 06-검증완료 화면에서 잠금 해제 가능 - - **참석자**: 읽기 전용 표시 ("🔒 읽기 전용" 배지) +3. **AI 한줄 요약 확인 (UFR-AI-036)** - 신규 + - **읽기 전용 표시**: + - 🔒 아이콘으로 편집 불가 명시 + - 회색 배경 + 민트 그린 좌측 액센트 라인 + - **호버 인터랙션**: + - 툴팁 표시: "이 내용은 편집할 수 없습니다" + - **위치**: 각 안건 최상단 (안건 제목 바로 아래) -4. **AI 요약 편집** +4. **AI 상세 요약 편집** - 요약 텍스트 필드 클릭: 직접 수정 가능 - "AI 재생성" 버튼 클릭: - - 현재 섹션 내용 기반으로 요약 재생성 + - 현재 안건 내용 기반으로 상세 요약 재생성 - 로딩 인디케이터 표시 - 생성 완료 시 자동 업데이트 - 자동 저장 (30초 간격) -5. **참고자료 편집** +5. **안건별 검증 (UFR-COLLAB-030)** - 신규 + - **회의 생성자 권한**: + - 검증 완료 체크박스 클릭: + - 체크: 안건 검증 완료 처리 (배지 "검증완료"로 변경) + - 언체크: 미검증 상태로 변경 + - "잠금 해제" 버튼 클릭 (검증완료 안건만 표시): + - 확인 다이얼로그: "이 안건의 잠금을 해제하시겠습니까?" + - 확인 시: 안건 편집 가능 상태로 변경 + - **참석자 화면**: + - 검증완료 안건: 🔒 "읽기 전용" 배지 표시 + - 안내 텍스트: "(잠금됨 · 회의 생성자만 수정 가능)" + - 모든 입력 필드 비활성화 (disabled) + - **검증률 계산 및 표시**: + - 검증률 = 검증 완료된 안건 수 / 전체 안건 수 + - 헤더에 검증률 표시 (예: "검증률: 70% (7/10)") + - 모든 안건 검증 완료 시 "최종 확정" 버튼 활성화 + +6. **참고자료 편집** - "참고자료 추가" 버튼 클릭: - 회의록 검색 모달 표시 - 제목, 날짜, 키워드로 검색 @@ -1522,7 +1567,7 @@ graph TD - 제거 버튼 (X): 참고자료 목록에서 제거 - 순서 변경: 드래그하여 순서 조정 (선택) -6. **Todo 섹션 편집 (UFR-TODO-040)** - 신규 추가 (회의 생성자만) +7. **Todo 섹션 편집 (UFR-TODO-040)** (회의 생성자만) - **권한 제어**: - 회의 생성자만 Todo 섹션 편집 가능 - 일반 참석자는 조회만 가능 (편집 버튼 숨김) @@ -1550,22 +1595,26 @@ graph TD - 삭제 시 Todo 목록에서 제거 - 담당자에게 삭제 알림 발송 -7. **상태 변경** +8. **상태 변경** - 확정완료 회의록 수정 시: 자동으로 "작성중" 상태로 변경 - - 모든 섹션 검증 완료 시: "확정완료"로 변경 제안 + - 모든 안건 검증 완료 시: "확정완료"로 변경 제안 #### 데이터 요구사항 - **입력**: - 회의록 ID (조회) - - 수정 내용 (섹션 ID, 내용) - - **AI 요약 수정 (섹션 ID, 요약 내용)** - - **참고자료 변경 (추가/제거할 회의록 ID)** + - 수정 내용 (안건 ID, 내용) - 용어 변경: 섹션 → 안건 + - **AI 한줄 요약** (읽기 전용, 입력 불가) - 신규 + - **AI 상세 요약 수정** (안건 ID, 요약 내용) + - **참고자료 변경** (추가/제거할 회의록 ID) + - **안건별 검증 상태** (안건 ID, 검증 여부) - 신규 - **출력**: - 회의록 목록 (필터/정렬/검색 결과) - 수정 결과 (성공/실패) - - **AI 요약 재생성 결과** + - **AI 한줄 요약** (회의 종료 시 생성, 편집 불가) - 신규 + - **AI 상세 요약 재생성 결과** - 수정 이력 (누가, 언제, 무엇을) -- **연동**: Meeting 서비스, AI 서비스 (UFR-AI-040), Collaboration 서비스 + - **검증률** (검증 완료된 안건 수 / 전체 안건 수) - 신규 +- **연동**: Meeting 서비스, AI 서비스 (UFR-AI-010, UFR-AI-036, UFR-AI-040), Collaboration 서비스 (UFR-COLLAB-030) #### 에러 처리 - **권한 없음**: "본인이 작성한 회의록만 수정할 수 있습니다"