shared-dg05-coffeeQuokka/hgzero
1
0
Fork 0
mirror of https://github.com/hwanny1128/HGZero.git synced 2026-06-13 05:59:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

프로토타입 UI 개선 및 문서 업데이트

Browse Source 
회의록 수정 화면 UI/UX 개선 (유저스토리 v2.4.0 반영)
- AI 재생성 버튼 스타일 통일 (btn-secondary → btn-primary)
- 안건별 검증완료 UI 단순화
  - 참석자: 체크박스만 표시
  - 생성자: 검증완료 시 잠금해제 버튼 표시
- .creator-only CSS 클래스 추가 (역할 기반 UI 제어)

관련 파일:
- design/uiux/prototype/11-회의록수정.html
- design/uiux/uiux.md (v1.5.2 변경 이력 업데이트)
- design/userstory.md (v2.4.0 문서 이력 업데이트)

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812
2025-10-27 15:31:18 +09:00
parent 0e700d5b88
commit 5c9a4c9fbd
3 changed files with 121 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/uiux/prototype/11-회의록수정.html
+49 -71
View File
@@ -7,12 +7,14 @@
<link rel="stylesheet" href="common.css">
<style>
/*
MVP 스코프 축소 v1.5.1 적용됨:
MVP 스코프 축소 v1.5.2 적용됨:
- ❌ 실시간 협업 표시 ("편집 중" 표시 제거)
- ❌ Todo 편집 기능 제거 (단순 조회만 가능)
- ❌ 검증률 표시 및 최종 확정 버튼 제거
- ✅ 안건별 검증 완료 체크박스 사용
- ✅ Last Write Wins (LWW) 정책 적용
- ✅ AI 요약 기능 통합: "AI 상세 요약" → "AI 요약"으로 명칭 변경
- ✅ AI 재생성 버튼: 텍스트 편집 영역 내용 기반으로 한줄 요약 재생성
*/
/* 페이지별 커스텀 스타일만 유지 */
@@ -110,32 +112,8 @@
gap: var(--space-xs);
}
/* AI 한줄 요약 (읽기 전용, UFR-AI-036) */
.ai-summary-oneline {
background: var(--gray-50);
border-left: 4px solid var(--primary);
border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-md);
margin-bottom: var(--space-md);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.ai-summary-oneline .lock-icon {
font-size: 18px;
color: var(--gray-500);
flex-shrink: 0;
}
.ai-summary-oneline .summary-text {
font-size: var(--font-small);
color: var(--gray-700);
font-weight: var(--font-weight-medium);
flex: 1;
min-width: 0;
}
/* AI 요약 편집 영역 (UFR-AI-036) */
/* 헤더, textarea, footer 스타일은 common.css 사용 */
/* AI 요약 편집 Footer (common.css에 없는 부분) */
.ai-summary-footer {
display: flex;
@@ -254,6 +232,19 @@
gap: var(--space-sm);
}
/* 회의 생성자 전용 UI 표시 제어 */
.creator-only {
display: flex; /* 기본: 회의 생성자 환경 */
}
.agenda-verification:not([data-is-creator="true"]) .creator-only {
display: none; /* 참석자 환경에서는 숨김 */
}
.agenda-verification:not(.verified) .creator-only {
display: none; /* 검증 안 된 경우 버튼 숨김 */
}
/* 읽기 전용 표시 */
.readonly-badge {
display: inline-flex;
@@ -404,23 +395,17 @@
</div>
</div>
<!-- AI 한줄 요약 (읽기 전용, UFR-AI-036) -->
<div class="ai-summary-oneline">
<span class="lock-icon">🔒</span>
<span class="summary-text">타겟 고객을 20-30대로 설정, UI/UX 개선 집중</span>
</div>
<!-- AI 상세 요약 편집 -->
<!-- AI 요약 편집 (UFR-AI-036) -->
<div class="ai-summary-edit">
<div class="ai-summary-header">
<span class="ai-summary-label">💡 AI 상세 요약</span>
<button class="btn-secondary btn-sm" onclick="regenerateSummary(1)">AI 재생성</button>
<span class="ai-summary-label">💡 AI 요약</span>
<button class="btn-primary btn-sm" onclick="regenerateSummary(1)">AI 재생성</button>
</div>
<textarea
class="ai-summary-textarea"
placeholder="AI 요약을 입력하거나 수정하세요"
readonly
>신제품은 AI 기반 회의록 자동화 서비스로 결정. 타겟은 중소기업 및 스타트업이며, 주요 기능은 음성인식, AI 요약, Todo 추출입니다. 경쟁사 대비 차별점은 실시간 검증 및 협업 기능입니다.</textarea>
>타겟 고객을 20-30대로 설정, UI/UX 개선 집중</textarea>
<div class="ai-summary-footer">
<span class="ai-summary-time">마지막 수정: 1시간 전</span>
</div>
@@ -475,16 +460,18 @@
</div>
</div>
<!-- 안건별 검증 (회의 생성자 권한) -->
<div class="agenda-verification verified" id="verify-agenda-1">
<!-- 안건별 검증 (UFR-COLLAB-030) -->
<!-- 참석자: 체크박스만 표시 (검증완료 시 읽기 전용) -->
<!-- 생성자: 검증완료 시 "잠금 해제" 버튼 표시 -->
<div class="agenda-verification verified" id="verify-agenda-1" data-is-creator="true">
<input type="checkbox" class="checkbox" id="verify-1" checked disabled>
<div class="verification-label">
<label for="verify-1">
<span class="font-medium">검증 완료</span>
<span class="text-caption text-muted"> (잠금됨 · 회의 생성자만 수정 가능)</span>
</label>
</div>
<div class="verification-actions">
<!-- 회의 생성자만 보이는 잠금 해제 버튼 (검증완료 시에만 표시) -->
<div class="verification-actions creator-only">
<button class="btn btn-secondary btn-sm" onclick="unlockAgendaVerification(1)">🔓 잠금 해제</button>
</div>
</div>
@@ -501,23 +488,17 @@
</div>
</div>
<!-- AI 한줄 요약 (읽기 전용, UFR-AI-036) -->
<div class="ai-summary-oneline">
<span class="lock-icon">🔒</span>
<span class="summary-text">개발 기간 3개월, 백엔드 2명/프론트 2명/AI 1명 투입</span>
</div>
<!-- AI 상세 요약 편집 -->
<!-- AI 요약 편집 (UFR-AI-036) -->
<div class="ai-summary-edit">
<div class="ai-summary-header">
<span class="ai-summary-label">💡 AI 상세 요약</span>
<button class="btn-secondary btn-sm" onclick="regenerateSummary(2)">AI 재생성</button>
<span class="ai-summary-label">💡 AI 요약</span>
<button class="btn-primary btn-sm" onclick="regenerateSummary(2)">AI 재생성</button>
</div>
<textarea
class="ai-summary-textarea"
placeholder="AI 요약을 입력하거나 수정하세요"
readonly
>개발 기간은 3개월로 설정. 백엔드 2명, 프론트 2명, AI 엔지니어 1명 투입. 주간 스프린트로 진행하며, 2주마다 베타 테스트 실시.</textarea>
>개발 기간 3개월, 백엔드 2명/프론트 2명/AI 1명 투입</textarea>
<div class="ai-summary-footer">
<span class="ai-summary-time">생성: 2025-10-25 16:32</span>
</div>
@@ -556,16 +537,18 @@
</div>
</div>
<!-- 안건별 검증 (회의 생성자 권한) -->
<div class="agenda-verification verified" id="verify-agenda-2">
<!-- 안건별 검증 (UFR-COLLAB-030) -->
<!-- 참석자: 체크박스만 표시 (검증완료 시 읽기 전용) -->
<!-- 생성자: 검증완료 시 "잠금 해제" 버튼 표시 -->
<div class="agenda-verification verified" id="verify-agenda-2" data-is-creator="true">
<input type="checkbox" class="checkbox" id="verify-2" checked disabled>
<div class="verification-label">
<label for="verify-2">
<span class="font-medium">검증 완료</span>
<span class="text-caption text-muted"> (잠금됨 · 회의 생성자만 수정 가능)</span>
</label>
</div>
<div class="verification-actions">
<!-- 회의 생성자만 보이는 잠금 해제 버튼 (검증완료 시에만 표시) -->
<div class="verification-actions creator-only">
<button class="btn btn-secondary btn-sm" onclick="unlockAgendaVerification(2)">🔓 잠금 해제</button>
</div>
</div>
@@ -582,23 +565,17 @@
</div>
</div>
<!-- AI 한줄 요약 (읽기 전용, UFR-AI-036) -->
<div class="ai-summary-oneline">
<span class="lock-icon">🔒</span>
<span class="summary-text">프리 런칭 캠페인, LinkedIn 및 스타트업 커뮤니티 집중</span>
</div>
<!-- AI 상세 요약 편집 -->
<!-- AI 요약 편집 (UFR-AI-036) -->
<div class="ai-summary-edit">
<div class="ai-summary-header">
<span class="ai-summary-label">💡 AI 상세 요약</span>
<button class="btn-secondary btn-sm" onclick="regenerateSummary(3)">AI 재생성</button>
<span class="ai-summary-label">💡 AI 요약</span>
<button class="btn-primary btn-sm" onclick="regenerateSummary(3)">AI 재생성</button>
</div>
<textarea
class="ai-summary-textarea"
placeholder="AI 요약을 입력하거나 수정하세요"
readonly
>베타 출시 전 프리 런칭 캠페인 진행. 주요 채널은 LinkedIn 및 스타트업 커뮤니티. 초기 100팀 무료 제공 후 유료 전환 유도.</textarea>
>프리 런칭 캠페인, LinkedIn 및 스타트업 커뮤니티 집중</textarea>
<div class="ai-summary-footer">
<span class="ai-summary-time">생성: 2025-10-25 16:35</span>
</div>
@@ -633,15 +610,15 @@
</div>
<!-- 안건별 검증 (회의 생성자 권한) -->
<div class="agenda-verification verified" id="verify-agenda-3">
<div class="agenda-verification verified" id="verify-agenda-3" data-is-creator="true">
<input type="checkbox" class="checkbox" id="verify-3" checked disabled>
<div class="verification-label">
<label for="verify-3">
<span class="font-medium">검증 완료</span>
<span class="text-caption text-muted"> (잠금됨 · 회의 생성자만 수정 가능)</span>
</label>
</div>
<div class="verification-actions">
<!-- 회의 생성자만 보이는 잠금 해제 버튼 (검증완료 시에만 표시) -->
<div class="verification-actions creator-only">
<button class="btn btn-secondary btn-sm" onclick="unlockAgendaVerification(3)">🔓 잠금 해제</button>
</div>
</div>
@@ -752,12 +729,13 @@
}, 1000);
}
// AI 요약 재생성
// AI 한줄 요약 재생성 (텍스트 편집 영역 내용 기반, UFR-AI-036)
function regenerateSummary(agendaId) {
showToast('AI 요약을 생성 중입니다...', 'info');
showToast('AI 요약을 재생성 중입니다...', 'info');
setTimeout(() => {
showToast('AI 요약이 생성되었습니다', 'success');
showToast('재생성되었습니다', 'success');
// 재생성된 한줄 요약은 회의록 상세조회 화면의 대시보드 및 회의록 탭에 즉시 반영됨
markAsUnsaved();
}, 2000);
}