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

11-회의록수정 화면 안건 기반 구조로 개선

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
yabo0812
2025-10-24 13:11:55 +09:00
parent 45578b0f7b
commit e37d20942a
2 changed files with 312 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/uiux/prototype/11-회의록수정.html
+234 -71
View File
@@ -7,7 +7,7 @@
<link rel="stylesheet" href="common.css">
<style>
/* 페이지별 커스텀 스타일만 유지 */
/* 공통 스타일(헤더, 메인콘텐츠, 섹션, AI요약, 관련회의록, 액션바)은 common.css 사용 */
/* 공통 스타일(헤더, 메인콘텐츠, 안건, AI요약, 관련회의록, 액션바)은 common.css 사용 */
/* 저장 상태 표시 */
.save-indicator {
@@ -66,6 +66,67 @@
color: var(--primary);
}
/* 안건 카드 스타일 */
.agenda-card {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: var(--space-md);
margin-bottom: var(--space-lg);
}
.agenda-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--space-md);
gap: var(--space-sm);
}
.agenda-title-wrapper {
flex: 1;
min-width: 0;
}
.agenda-title {
font-size: var(--font-h3);
font-weight: var(--font-weight-bold);
color: var(--gray-900);
margin-bottom: var(--space-xs);
}
.agenda-status {
display: inline-flex;
align-items: center;
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 요약 편집 Footer (common.css에 없는 부분) */
.ai-summary-footer {
display: flex;
@@ -74,8 +135,8 @@
margin-top: var(--space-sm);
}
/* 섹션 내용 편집 */
.section-content-edit {
/* 안건 내용 편집 */
.agenda-content-edit {
margin-bottom: var(--space-md);
}
@@ -152,8 +213,8 @@
background: rgba(255, 86, 86, 0.1);
}
/* 검증 완료 */
.verification-lock {
/* 안건별 검증 (UFR-COLLAB-030) */
.agenda-verification {
display: flex;
align-items: center;
gap: var(--space-sm);
@@ -163,11 +224,40 @@
margin-top: var(--space-md);
}
.verification-lock.unlocked {
.agenda-verification.verified {
background: var(--primary-light);
border: 1px solid var(--primary);
}
.agenda-verification.unlocked {
background: var(--warning-light);
border: 1px solid var(--warning);
}
.verification-label {
flex: 1;
min-width: 0;
}
.verification-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
}
/* 읽기 전용 표시 */
.readonly-badge {
display: inline-flex;
align-items: center;
padding: 4px 8px;
background: var(--gray-100);
border-radius: var(--radius-sm);
color: var(--gray-600);
font-size: var(--font-caption);
font-weight: var(--font-weight-medium);
margin-left: 8px;
}
/* 관련회의록 검색 모달 */
.search-modal-content {
max-height: 60vh;
@@ -233,19 +323,6 @@
font-size: var(--font-small);
color: var(--gray-700);
}
/* 읽기 전용 표시 */
.readonly-badge {
display: inline-flex;
align-items: center;
padding: 4px 8px;
background: var(--gray-100);
border-radius: var(--radius-sm);
color: var(--gray-600);
font-size: var(--font-caption);
font-weight: var(--font-weight-medium);
margin-left: 8px;
}
</style>
</head>
<body>
@@ -258,6 +335,8 @@
- 검증완료 후: 회의 생성자만 수정 가능 (참석자는 "수정" 버튼 비활성화)
- 참석자 관리: 회의 생성자만 추가/삭제 가능
- 회의 일시/장소: 읽기 전용 (회의 예약 화면에서만 변경 가능)
- 안건별 검증: 회의 생성자는 잠금 해제 후 수정 가능, 참석자는 읽기 전용
- AI 한줄 요약: 모든 사용자에게 읽기 전용 (UFR-AI-036)
-->
<!-- 헤더 -->
@@ -305,19 +384,27 @@
</div>
</div>
<!-- 섹션 1 편집 -->
<div class="section">
<div class="section-header">
<h3 class="section-title">
1. 신제품 기획 방향
<span class="badge badge-complete">검증완료</span>
</h3>
<!-- 안건 1 편집 -->
<div class="agenda-card">
<div class="agenda-header">
<div class="agenda-title-wrapper">
<h3 class="agenda-title">1. 신제품 기획 방향</h3>
<div class="agenda-status">
<span class="badge badge-complete">검증완료</span>
</div>
</div>
</div>
<!-- AI 요약 편집 -->
<!-- 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 상세 요약 편집 -->
<div class="ai-summary-edit">
<div class="ai-summary-header">
<span class="ai-summary-label">💡 AI 요약</span>
<span class="ai-summary-label">💡 AI 상세 요약</span>
<button class="btn-secondary btn-sm" onclick="regenerateSummary(1)">AI 재생성</button>
</div>
<textarea
@@ -330,11 +417,11 @@
</div>
</div>
<!-- 섹션 내용 편집 -->
<div class="section-content-edit">
<!-- 안건 내용 편집 -->
<div class="agenda-content-edit">
<textarea
class="content-textarea"
placeholder="섹션 내용을 입력하세요"
placeholder="안건 내용을 입력하세요"
oninput="markAsUnsaved()"
>**논의 사항:**
- AI 기반 회의록 자동화 서비스 출시 결정
@@ -379,29 +466,42 @@
</div>
</div>
<!-- 검증 완료 (읽기 전용) -->
<div class="verification-lock">
<!-- 안건별 검증 (회의 생성자 권한) -->
<div class="agenda-verification verified" id="verify-agenda-1">
<input type="checkbox" class="checkbox" id="verify-1" checked disabled>
<label for="verify-1" style="flex: 1; min-width: 0;">
<span class="font-medium">검증 완료</span>
<span class="text-caption text-muted"> (잠금됨 · 회의 생성자만 수정 가능)</span>
</label>
<span class="readonly-badge">🔒 읽기 전용</span>
<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">
<button class="btn btn-secondary btn-sm" onclick="unlockAgendaVerification(1)">🔓 잠금 해제</button>
</div>
</div>
</div>
<!-- 섹션 2 편집 -->
<div class="section">
<div class="section-header">
<h3 class="section-title">
2. 개발 일정 및 리소스
<span class="badge badge-complete">검증완료</span>
</h3>
<!-- 안건 2 편집 -->
<div class="agenda-card">
<div class="agenda-header">
<div class="agenda-title-wrapper">
<h3 class="agenda-title">2. 개발 일정 및 리소스</h3>
<div class="agenda-status">
<span class="badge badge-complete">검증완료</span>
</div>
</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 상세 요약 편집 -->
<div class="ai-summary-edit">
<div class="ai-summary-header">
<span class="ai-summary-label">💡 AI 요약</span>
<span class="ai-summary-label">💡 AI 상세 요약</span>
<button class="btn-secondary btn-sm" onclick="regenerateSummary(2)">AI 재생성</button>
</div>
<textarea
@@ -414,10 +514,11 @@
</div>
</div>
<div class="section-content-edit">
<!-- 안건 내용 편집 -->
<div class="agenda-content-edit">
<textarea
class="content-textarea"
placeholder="섹션 내용을 입력하세요"
placeholder="안건 내용을 입력하세요"
oninput="markAsUnsaved()"
>**일정:**
- Phase 1 (11월): 핵심 기능 개발 (음성인식, AI 요약)
@@ -430,6 +531,7 @@
- AI 엔지니어 1명</textarea>
</div>
<!-- 관련회의록 편집 -->
<div class="references-edit">
<div class="references-header">
<span class="references-label">📚 관련회의록 (1개)</span>
@@ -445,28 +547,42 @@
</div>
</div>
<div class="verification-lock">
<!-- 안건별 검증 (회의 생성자 권한) -->
<div class="agenda-verification verified" id="verify-agenda-2">
<input type="checkbox" class="checkbox" id="verify-2" checked disabled>
<label for="verify-2" style="flex: 1; min-width: 0;">
<span class="font-medium">검증 완료</span>
<span class="text-caption text-muted"> (잠금됨 · 회의 생성자만 수정 가능)</span>
</label>
<span class="readonly-badge">🔒 읽기 전용</span>
<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">
<button class="btn btn-secondary btn-sm" onclick="unlockAgendaVerification(2)">🔓 잠금 해제</button>
</div>
</div>
</div>
<!-- 섹션 3 편집 -->
<div class="section">
<div class="section-header">
<h3 class="section-title">
3. 마케팅 전략
<span class="badge badge-complete">검증완료</span>
</h3>
<!-- 안건 3 편집 -->
<div class="agenda-card">
<div class="agenda-header">
<div class="agenda-title-wrapper">
<h3 class="agenda-title">3. 마케팅 전략</h3>
<div class="agenda-status">
<span class="badge badge-complete">검증완료</span>
</div>
</div>
</div>
<!-- AI 한줄 요약 (읽기 전용, UFR-AI-036) -->
<div class="ai-summary-oneline">
<span class="lock-icon">🔒</span>
<span class="summary-text">프리 런칭 캠페인, LinkedIn 및 스타트업 커뮤니티 집중</span>
</div>
<!-- AI 상세 요약 편집 -->
<div class="ai-summary-edit">
<div class="ai-summary-header">
<span class="ai-summary-label">💡 AI 요약</span>
<span class="ai-summary-label">💡 AI 상세 요약</span>
<button class="btn-secondary btn-sm" onclick="regenerateSummary(3)">AI 재생성</button>
</div>
<textarea
@@ -479,10 +595,11 @@
</div>
</div>
<div class="section-content-edit">
<!-- 안건 내용 편집 -->
<div class="agenda-content-edit">
<textarea
class="content-textarea"
placeholder="섹션 내용을 입력하세요"
placeholder="안건 내용을 입력하세요"
oninput="markAsUnsaved()"
>**프리 런칭 캠페인:**
- 기간: 11월 1일 ~ 11월 30일
@@ -495,6 +612,7 @@
- 1월부터 유료 전환</textarea>
</div>
<!-- 관련회의록 편집 -->
<div class="references-edit">
<div class="references-header">
<span class="references-label">📚 관련회의록 (0개)</span>
@@ -505,13 +623,18 @@
</div>
</div>
<div class="verification-lock">
<!-- 안건별 검증 (회의 생성자 권한) -->
<div class="agenda-verification verified" id="verify-agenda-3">
<input type="checkbox" class="checkbox" id="verify-3" checked disabled>
<label for="verify-3" style="flex: 1; min-width: 0;">
<span class="font-medium">검증 완료</span>
<span class="text-caption text-muted"> (잠금됨 · 회의 생성자만 수정 가능)</span>
</label>
<span class="readonly-badge">🔒 읽기 전용</span>
<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">
<button class="btn btn-secondary btn-sm" onclick="unlockAgendaVerification(3)">🔓 잠금 해제</button>
</div>
</div>
</div>
</main>
@@ -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 = `
<button class="btn btn-primary btn-sm" onclick="lockAgendaVerification(${agendaId})">🔒 잠금</button>
`;
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 = `
<button class="btn btn-secondary btn-sm" onclick="unlockAgendaVerification(${agendaId})">🔓 잠금 해제</button>
`;
showToast('안건 검증이 잠겼습니다', 'success');
markAsUnsaved();
}
// 관련회의록 제거
function removeReference(btn) {
const item = btn.closest('.reference-item');