From 10ee785fdc87b16d4f799d689ea34768307e9dcf Mon Sep 17 00:00:00 2001 From: yabo0812 Date: Wed, 22 Oct 2025 17:56:24 +0900 Subject: [PATCH] =?UTF-8?q?06-=EA=B2=80=EC=A6=9D=EC=99=84=EB=A3=8C=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20=ED=9A=8C=EC=9D=98=EA=B0=9C=EC=9A=94=20?= =?UTF-8?q?=ED=8E=B8=EC=A7=91=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 회의개요 모달에 편집/저장 기능 구현 - 입력 필드 스타일 추가 (edit-field, edit-label) - 편집 모드 토글 기능 구현 - 섹션 데이터 관리 및 저장 기능 - 사용자 피드백 토스트 메시지 추가 - 다른 섹션은 회의록수정 화면 안내 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- design/uiux/prototype/06-검증완료.html | 159 ++++++++++++++++++++++--- design/uiux/uiux.md | 10 +- 2 files changed, 147 insertions(+), 22 deletions(-) diff --git a/design/uiux/prototype/06-검증완료.html b/design/uiux/prototype/06-검증완료.html index 0946877..753ba2a 100644 --- a/design/uiux/prototype/06-검증완료.html +++ b/design/uiux/prototype/06-검증완료.html @@ -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); + } @@ -210,7 +234,8 @@
- + +
@@ -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: ` -

회의 목적: 2025년 1분기 신제품 개발 방향 수립

-

참석자: 김민준(PM), 박서연(AI), 이준호(Backend), 최유진(Frontend)

-

일시: 2025년 10월 25일 14:00 - 15:30

-

장소: 본사 2층 대회의실

- `, - 1: ` + // 편집 모드 초기화 + $('#editBtn').style.display = 'inline-block'; + $('#saveBtn').style.display = 'none'; + + // 회의 개요만 편집 가능 + if (index === 0) { + renderSectionContent(index, false); + } else { + // 다른 섹션은 읽기 전용 + const sampleContent = `

1. AI 모델 정확도

- 현재 STT 정확도: 92%

- 목표 정확도: 95% 이상

@@ -309,13 +354,49 @@

2. 사용자 인터페이스

- Mobile First 디자인 채택

- 실시간 협업 기능 필수

- ` - }; + `; + $('#sectionContent').innerHTML = sampleContent; + } - $('#sectionContent').innerHTML = sampleContent[index] || '

섹션 내용이 여기에 표시됩니다.

'; openModal('sectionModal'); } + // 섹션 내용 렌더링 + function renderSectionContent(index, editMode) { + const data = sectionData[index]; + const contentDiv = $('#sectionContent'); + + if (editMode && index === 0) { + // 회의 개요 편집 모드 + contentDiv.innerHTML = ` +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ `; + } else if (index === 0) { + // 회의 개요 보기 모드 + contentDiv.innerHTML = ` +

회의 목적: ${data.purpose}

+

참석자: ${data.attendees}

+

일시: ${data.datetime}

+

장소: ${data.location}

+ `; + } + } + // 섹션 검증 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'); } // 모두 검증 완료 diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index 613f3c3..b6a35e5 100644 --- a/design/uiux/uiux.md +++ b/design/uiux/uiux.md @@ -991,8 +991,6 @@ graph TD - "나중에 하기" 버튼 **Tablet/Desktop (768px+)** -- 좌측: 섹션 리스트 (모바일과 동일) -- 우측: 선택된 섹션 내용 프리뷰 #### 인터랙션 1. **섹션 검증** @@ -1000,15 +998,19 @@ graph TD - 검증 완료 시: 체크 아이콘 표시, 검증자 아바타 추가 - 실시간 동기화: 다른 참석자에게 즉시 반영 -2. **섹션 잠금** (회의 생성자만) +2. **섹션 잠금** - 검증 완료된 섹션에 잠금 아이콘 표시 - 잠긴 섹션은 수정 불가 - - 잠금 해제 가능 + - 잠금 해제 가능(회의생성자만) 3. **진행률 표시** - 상단 진행률 바: 실시간 업데이트 - 100% 완료 시: "모두 검증 완료" 버튼 활성화 +4. **내용 수정** + - 회의 개요 : 보기 레이어 내에서 편집 가능(회의생성자만) + - 개요 외 항목: 편집시도시 회의록수정화면으로 이동 + #### 데이터 요구사항 - **입력**: 회의 ID, 섹션 목록 - **출력**: 섹션별 검증 상태, 검증자 정보