mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 07:56:24 +00:00
06-검증완료 화면 회의개요 편집 기능 추가
- 회의개요 모달에 편집/저장 기능 구현 - 입력 필드 스타일 추가 (edit-field, edit-label) - 편집 모드 토글 기능 구현 - 섹션 데이터 관리 및 저장 기능 - 사용자 피드백 토스트 메시지 추가 - 다른 섹션은 회의록수정 화면 안내 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812
parent
36ffc467c5
commit
10ee785fdc
@ -75,6 +75,30 @@
|
||||
font-size: 20px;
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
||||
/* 편집 모드 스타일 */
|
||||
.edit-field {
|
||||
width: 100%;
|
||||
padding: var(--space-sm);
|
||||
border: 1px solid var(--gray-300);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-small);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-sm);
|
||||
transition: border-color var(--transition-normal);
|
||||
}
|
||||
|
||||
.edit-field:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.edit-label {
|
||||
display: block;
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-bottom: var(--space-xs);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -210,7 +234,8 @@
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary btn-sm" onclick="closeModal('sectionModal')">닫기</button>
|
||||
<button class="btn btn-primary btn-sm" onclick="editSection()">편집</button>
|
||||
<button class="btn btn-primary btn-sm" id="editBtn" onclick="toggleEditMode()">편집</button>
|
||||
<button class="btn btn-primary btn-sm" id="saveBtn" style="display: none;" onclick="saveSection()">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -266,6 +291,24 @@
|
||||
];
|
||||
|
||||
let currentSectionIndex = -1;
|
||||
let isEditMode = false;
|
||||
let originalContent = '';
|
||||
|
||||
// 섹션 데이터 (편집 가능한 필드)
|
||||
const sectionData = [
|
||||
{
|
||||
purpose: '2025년 1분기 신제품 개발 방향 수립',
|
||||
attendees: '김민준(PM), 박서연(AI), 이준호(Backend), 최유진(Frontend)',
|
||||
datetime: '2025년 10월 25일 14:00 - 15:30',
|
||||
location: '본사 2층 대회의실'
|
||||
},
|
||||
{
|
||||
topic1: 'AI 모델 정확도',
|
||||
detail1: '현재 STT 정확도: 92%, 목표 정확도: 95% 이상',
|
||||
topic2: '사용자 인터페이스',
|
||||
detail2: 'Mobile First 디자인 채택, 실시간 협업 기능 필수'
|
||||
}
|
||||
];
|
||||
|
||||
// 진행률 업데이트
|
||||
function updateProgress() {
|
||||
@ -289,19 +332,21 @@
|
||||
// 섹션 보기
|
||||
function viewSection(index) {
|
||||
currentSectionIndex = index;
|
||||
isEditMode = false;
|
||||
const section = sectionVerifications[index];
|
||||
|
||||
$('#sectionTitle').textContent = section.name;
|
||||
|
||||
// 샘플 컨텐츠
|
||||
const sampleContent = {
|
||||
0: `
|
||||
<p><strong>회의 목적:</strong> 2025년 1분기 신제품 개발 방향 수립</p>
|
||||
<p><strong>참석자:</strong> 김민준(PM), 박서연(AI), 이준호(Backend), 최유진(Frontend)</p>
|
||||
<p><strong>일시:</strong> 2025년 10월 25일 14:00 - 15:30</p>
|
||||
<p><strong>장소:</strong> 본사 2층 대회의실</p>
|
||||
`,
|
||||
1: `
|
||||
// 편집 모드 초기화
|
||||
$('#editBtn').style.display = 'inline-block';
|
||||
$('#saveBtn').style.display = 'none';
|
||||
|
||||
// 회의 개요만 편집 가능
|
||||
if (index === 0) {
|
||||
renderSectionContent(index, false);
|
||||
} else {
|
||||
// 다른 섹션은 읽기 전용
|
||||
const sampleContent = `
|
||||
<p><strong>1. AI 모델 정확도</strong></p>
|
||||
<p>- 현재 STT 정확도: 92%</p>
|
||||
<p>- 목표 정확도: 95% 이상</p>
|
||||
@ -309,13 +354,49 @@
|
||||
<p><strong>2. 사용자 인터페이스</strong></p>
|
||||
<p>- Mobile First 디자인 채택</p>
|
||||
<p>- 실시간 협업 기능 필수</p>
|
||||
`
|
||||
};
|
||||
`;
|
||||
$('#sectionContent').innerHTML = sampleContent;
|
||||
}
|
||||
|
||||
$('#sectionContent').innerHTML = sampleContent[index] || '<p>섹션 내용이 여기에 표시됩니다.</p>';
|
||||
openModal('sectionModal');
|
||||
}
|
||||
|
||||
// 섹션 내용 렌더링
|
||||
function renderSectionContent(index, editMode) {
|
||||
const data = sectionData[index];
|
||||
const contentDiv = $('#sectionContent');
|
||||
|
||||
if (editMode && index === 0) {
|
||||
// 회의 개요 편집 모드
|
||||
contentDiv.innerHTML = `
|
||||
<div>
|
||||
<label class="edit-label">회의 목적</label>
|
||||
<input type="text" class="edit-field" id="edit_purpose" value="${data.purpose}">
|
||||
</div>
|
||||
<div>
|
||||
<label class="edit-label">참석자</label>
|
||||
<input type="text" class="edit-field" id="edit_attendees" value="${data.attendees}">
|
||||
</div>
|
||||
<div>
|
||||
<label class="edit-label">일시</label>
|
||||
<input type="text" class="edit-field" id="edit_datetime" value="${data.datetime}">
|
||||
</div>
|
||||
<div>
|
||||
<label class="edit-label">장소</label>
|
||||
<input type="text" class="edit-field" id="edit_location" value="${data.location}">
|
||||
</div>
|
||||
`;
|
||||
} else if (index === 0) {
|
||||
// 회의 개요 보기 모드
|
||||
contentDiv.innerHTML = `
|
||||
<p><strong>회의 목적:</strong> ${data.purpose}</p>
|
||||
<p><strong>참석자:</strong> ${data.attendees}</p>
|
||||
<p><strong>일시:</strong> ${data.datetime}</p>
|
||||
<p><strong>장소:</strong> ${data.location}</p>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// 섹션 검증
|
||||
function verifySection(index) {
|
||||
currentSectionIndex = index;
|
||||
@ -363,11 +444,53 @@
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 섹션 편집
|
||||
function editSection() {
|
||||
closeModal('sectionModal');
|
||||
showToast('편집 모드로 전환되었습니다', 'info');
|
||||
// 실제로는 회의진행 화면으로 이동
|
||||
// 편집 모드 토글
|
||||
function toggleEditMode() {
|
||||
if (currentSectionIndex !== 0) {
|
||||
// 회의 개요가 아닌 경우
|
||||
closeModal('sectionModal');
|
||||
showToast('이 섹션은 회의록수정 화면에서 수정할 수 있습니다', 'info');
|
||||
return;
|
||||
}
|
||||
|
||||
isEditMode = !isEditMode;
|
||||
|
||||
if (isEditMode) {
|
||||
// 편집 모드로 전환
|
||||
renderSectionContent(currentSectionIndex, true);
|
||||
$('#editBtn').style.display = 'none';
|
||||
$('#saveBtn').style.display = 'inline-block';
|
||||
} else {
|
||||
// 보기 모드로 전환
|
||||
renderSectionContent(currentSectionIndex, false);
|
||||
$('#editBtn').style.display = 'inline-block';
|
||||
$('#saveBtn').style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// 섹션 저장
|
||||
function saveSection() {
|
||||
if (currentSectionIndex !== 0) return;
|
||||
|
||||
// 편집된 값 가져오기
|
||||
const updatedData = {
|
||||
purpose: $('#edit_purpose').value,
|
||||
attendees: $('#edit_attendees').value,
|
||||
datetime: $('#edit_datetime').value,
|
||||
location: $('#edit_location').value
|
||||
};
|
||||
|
||||
// 데이터 업데이트
|
||||
sectionData[currentSectionIndex] = updatedData;
|
||||
|
||||
// 보기 모드로 전환
|
||||
isEditMode = false;
|
||||
renderSectionContent(currentSectionIndex, false);
|
||||
$('#editBtn').style.display = 'inline-block';
|
||||
$('#saveBtn').style.display = 'none';
|
||||
|
||||
// 성공 메시지
|
||||
showToast('회의 개요가 저장되었습니다', 'success');
|
||||
}
|
||||
|
||||
// 모두 검증 완료
|
||||
|
||||
@ -991,8 +991,6 @@ graph TD
|
||||
- "나중에 하기" 버튼
|
||||
|
||||
**Tablet/Desktop (768px+)**
|
||||
- 좌측: 섹션 리스트 (모바일과 동일)
|
||||
- 우측: 선택된 섹션 내용 프리뷰
|
||||
|
||||
#### 인터랙션
|
||||
1. **섹션 검증**
|
||||
@ -1000,15 +998,19 @@ graph TD
|
||||
- 검증 완료 시: 체크 아이콘 표시, 검증자 아바타 추가
|
||||
- 실시간 동기화: 다른 참석자에게 즉시 반영
|
||||
|
||||
2. **섹션 잠금** (회의 생성자만)
|
||||
2. **섹션 잠금**
|
||||
- 검증 완료된 섹션에 잠금 아이콘 표시
|
||||
- 잠긴 섹션은 수정 불가
|
||||
- 잠금 해제 가능
|
||||
- 잠금 해제 가능(회의생성자만)
|
||||
|
||||
3. **진행률 표시**
|
||||
- 상단 진행률 바: 실시간 업데이트
|
||||
- 100% 완료 시: "모두 검증 완료" 버튼 활성화
|
||||
|
||||
4. **내용 수정**
|
||||
- 회의 개요 : 보기 레이어 내에서 편집 가능(회의생성자만)
|
||||
- 개요 외 항목: 편집시도시 회의록수정화면으로 이동
|
||||
|
||||
#### 데이터 요구사항
|
||||
- **입력**: 회의 ID, 섹션 목록
|
||||
- **출력**: 섹션별 검증 상태, 검증자 정보
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user