07-회의종료 화면 UI/UX 개선 (유저스토리 v2.1.1 반영)

[주요 변경사항]
- 편집 불가 정책 적용: 확인 전용 화면으로 변경
  - Todo 수정 버튼 제거
  - 읽기 전용 안내 박스 추가
  - 체크박스 disabled 처리

- 3가지 선택 옵션 추가:
  1. 대시보드로 이동 (작성중 상태 저장)
  2. 회의록 수정 (11-회의록수정.html)
  3. 바로 최종 확정 (모든 안건 자동 검증)

- 안건별 AI 요약 구조화:
  - AI 한줄 요약 (30자, 편집 불가, 🔒 아이콘)
  - 상세 요약 정리 (논의/의견/결정/보류)
  - 안건별 Todo 자동 추출 결과 표시
  - 확장/축소 인터랙션 구현

- 공유 버튼 제거 (유저스토리 v2.0.1 반영)

[관련 유저스토리]
- UFR-MEET-040: 회의종료 (확인 전용, 3가지 옵션)
- UFR-MEET-050: 최종확정 (바로 확정 시나리오 추가)
- UFR-AI-010: 회의록자동작성 (안건별 요약)
- UFR-AI-036: AI한줄요약 (편집 불가)

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

Co-Authored-By: Claude <noreply@anthropic.com>

design/uiux/prototype/07-회의종료.html

@@ -113,13 +113,99 @@
       transition: width 1s ease;
     }
 
-    /* Todo 리스트 */
-    .todo-list-item {
-      padding: var(--space-md);
+    /* 안건 카드 */
+    .agenda-card {
       background: var(--white);
       border-radius: var(--radius-md);
       box-shadow: var(--shadow-sm);
+      margin-bottom: var(--space-md);
+      overflow: hidden;
+      border: 1px solid var(--gray-200);
+    }
+
+    .agenda-header {
+      padding: var(--space-md);
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: var(--gray-50);
+    }
+
+    .agenda-header:hover {
+      background: var(--gray-100);
+    }
+
+    .agenda-title {
+      font-size: var(--font-h4);
+      font-weight: var(--font-weight-bold);
+      color: var(--gray-900);
+      margin-bottom: var(--space-xs);
+    }
+
+    .ai-summary-short {
+      background: var(--gray-100);
+      border-left: 4px solid var(--primary);
+      padding: var(--space-sm) var(--space-md);
+      margin-top: var(--space-sm);
+      border-radius: var(--radius-sm);
+      font-size: var(--font-small);
+      color: var(--gray-700);
+      display: flex;
+      align-items: center;
+      gap: var(--space-sm);
+    }
+
+    .ai-summary-short .lock-icon {
+      color: var(--gray-500);
+      font-size: 16px;
+    }
+
+    .expand-icon {
+      font-size: 20px;
+      color: var(--gray-500);
+      transition: transform 0.3s ease;
+    }
+
+    .agenda-card.expanded .expand-icon {
+      transform: rotate(180deg);
+    }
+
+    .agenda-content {
+      display: none;
+      padding: var(--space-md);
+      border-top: 1px solid var(--gray-200);
+    }
+
+    .agenda-card.expanded .agenda-content {
+      display: block;
+    }
+
+    .agenda-section {
+      margin-bottom: var(--space-md);
+    }
+
+    .agenda-section-title {
+      font-size: var(--font-small);
+      font-weight: var(--font-weight-bold);
+      color: var(--gray-500);
+      margin-bottom: var(--space-xs);
+      text-transform: uppercase;
+    }
+
+    .agenda-section-content {
+      font-size: var(--font-body);
+      color: var(--gray-700);
+      line-height: 1.6;
+    }
+
+    /* Todo 리스트 (읽기 전용) */
+    .todo-list-item {
+      padding: var(--space-md);
+      background: var(--gray-50);
+      border-radius: var(--radius-md);
       margin-bottom: var(--space-sm);
+      opacity: 0.8;
     }
 
     .todo-header {
@@ -129,10 +215,15 @@
       margin-bottom: var(--space-sm);
     }
 
+    .todo-checkbox {
+      margin-right: var(--space-sm);
+      cursor: not-allowed;
+    }
+
     .todo-content {
       flex: 1;
       font-weight: var(--font-weight-medium);
-      color: var(--gray-900);
+      color: var(--gray-700);
     }
 
     .todo-meta {
@@ -143,83 +234,58 @@
       color: var(--gray-500);
     }
 
-    /* 체크리스트 */
-    .checklist {
-      background: var(--gray-100);
+    /* 하단 액션 바 - 3개 버튼 배치 */
+    .action-bar {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: var(--white);
       padding: var(--space-md);
-      border-radius: var(--radius-md);
-      margin-bottom: var(--space-md);
-    }
-
-    .checklist-item {
+      box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
       display: flex;
-      align-items: center;
       gap: var(--space-sm);
-      padding: var(--space-sm) 0;
-      color: var(--success);
-      font-size: var(--font-small);
+      z-index: 100;
     }
 
-    .checklist-item::before {
-      content: '✓';
-      font-weight: var(--font-weight-bold);
-    }
-
-    /* 하단 액션 바 - common.css에서 기본 스타일 적용됨 */
-    /* 이 화면만 버튼 크기 비율 조정: 공유(1) : 수정(1) : 대시보드(4) */
-    .action-bar .btn-secondary {
+    .action-bar .btn {
       flex: 1;
     }
 
     .action-bar .btn-primary {
-      flex: 4;
+      flex: 2; /* 바로 최종 확정 버튼 강조 */
     }
 
     @media (min-width: 768px) {
       .stats-grid {
         grid-template-columns: repeat(4, 1fr);
       }
+
+      .action-bar {
+        position: static;
+        box-shadow: none;
+        justify-content: center;
+        gap: var(--space-md);
+      }
+
+      .action-bar .btn {
+        flex: 0 1 200px;
+      }
+
+      .action-bar .btn-primary {
+        flex: 0 1 250px;
+      }
     }
 
-    /* 날짜 입력 필드 래퍼 - 달력 아이콘 보호 */
-    .date-input-wrapper {
-      position: relative;
-    }
-
-    .date-input-wrapper input[type="date"] {
-      position: relative;
-      z-index: 1;
-    }
-
-    /* 달력 아이콘을 별도 요소로 표시 */
-    .date-input-wrapper::after {
-      content: '📅';
-      position: absolute;
-      right: 12px;
-      top: 50%;
-      transform: translateY(-50%);
-      pointer-events: none;
-      font-size: 18px;
-      z-index: 3;
-    }
-
-    /* 네이티브 달력 아이콘 숨김 */
-    .date-input-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
-      position: absolute;
-      right: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0;
-      cursor: pointer;
-      z-index: 2;
-      /* Edge 브라우저 캘린더 팝업에 그림자 추가 */
-      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
-    }
-
-    /* Edge 브라우저용 포커스 시 하단 테두리 강조 */
-    .date-input-wrapper input[type="date"]:focus {
-      box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.15),
-                  0 4px 0 0 var(--primary);
+    .readonly-notice {
+      background: var(--warning-light);
+      border: 1px solid var(--warning);
+      border-radius: var(--radius-md);
+      padding: var(--space-md);
+      margin-bottom: var(--space-lg);
+      font-size: var(--font-small);
+      color: var(--warning-dark);
+      text-align: center;
     }
   </style>
 </head>
@@ -232,6 +298,11 @@
         <p class="meeting-title">2025년 1분기 제품 기획 회의</p>
       </div>
 
+      <!-- 읽기 전용 안내 -->
+      <div class="readonly-notice">
+        🔒 이 화면은 <strong>확인 전용</strong>입니다. 내용을 수정하려면 "회의록 수정" 버튼을 클릭하세요.
+      </div>
+
       <!-- 통계 카드 그리드 -->
       <div class="stats-grid">
         <div class="stat-card">
@@ -243,8 +314,8 @@
           <div class="stat-label">참석자</div>
         </div>
         <div class="stat-card">
-          <div class="stat-value" id="sectionsValue">0</div>
-          <div class="stat-label">섹션</div>
+          <div class="stat-value" id="agendasValue">0</div>
+          <div class="stat-label">안건</div>
         </div>
         <div class="stat-card">
           <div class="stat-value" id="todosValue">0</div>
@@ -271,97 +342,128 @@
         <div class="speaker-stats" id="speakerStats"></div>
       </div>
 
-      <!-- AI Todo 추출 결과 -->
+      <!-- 안건별 AI 요약 -->
       <div class="card mb-md">
-        <div class="card-header">
-          <h3 class="card-title">AI가 추출한 Todo</h3>
-          <button class="btn btn-ghost btn-sm" onclick="openModal('todoEditModal')">수정</button>
-        </div>
-        <div id="todoList"></div>
+        <h3 class="card-title">안건별 AI 요약</h3>
+        <div id="agendaList"></div>
       </div>
 
-      <!-- 최종 확정 섹션 -->
-      <div class="card card-highlight mb-md">
-        <h3 class="card-title mb-md">최종 회의록 확정</h3>
-        <div class="checklist mb-md">
-          <div class="checklist-item">회의 제목 작성</div>
-          <div class="checklist-item">참석자 목록 작성</div>
-          <div class="checklist-item">주요 논의 내용 작성</div>
-          <div class="checklist-item">결정 사항 작성</div>
-        </div>
-        <button class="btn btn-primary" style="width: 100%;" onclick="confirmMeeting()">
-          최종 회의록 확정
-        </button>
-      </div>
-
-    <!-- 하단 액션 바 -->
-    <div class="action-bar">
-      <button class="btn btn-secondary" onclick="navigateTo('11-회의록수정.html')">
-        수정
-      </button>
-      <button class="btn btn-primary" onclick="navigateTo('02-대시보드.html')">
-        대시보드로 이동
-      </button>
     </div>
-  </div>
 
-  <!-- Todo 편집 모달 -->
-  <div class="modal-overlay" id="todoEditModal">
-    <div class="modal">
-      <div class="modal-header">
-        <h3 class="modal-title">Todo 편집</h3>
-        <button class="modal-close">×</button>
-      </div>
-      <div class="modal-body">
-        <div class="form-group">
-          <label class="form-label">Todo 내용</label>
-          <input type="text" class="form-control" value="API 명세서 작성">
-        </div>
-        <div class="form-group">
-          <label class="form-label">담당자</label>
-          <select class="form-control">
-            <option>이준호</option>
-            <option>박서연</option>
-            <option>김민준</option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label class="form-label">마감일</label>
-          <div class="date-input-wrapper">
-            <input type="date" class="form-control" value="2025-10-23">
-          </div>
-        </div>
-        <div class="form-group">
-          <label class="form-label">우선순위</label>
-          <select class="form-control">
-            <option value="high">높음</option>
-            <option value="medium">보통</option>
-            <option value="low">낮음</option>
-          </select>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button class="btn btn-ghost" onclick="closeModal('todoEditModal')">취소</button>
-        <button class="btn btn-primary" onclick="saveTodoEdit()">저장</button>
-      </div>
+    <!-- 하단 액션 바 (3가지 선택 옵션) -->
+    <div class="action-bar">
+      <button class="btn btn-ghost" onclick="navigateTo('02-대시보드.html')">
+        대시보드
+      </button>
+      <button class="btn btn-secondary" onclick="navigateTo('11-회의록수정.html')">
+        회의록 수정
+      </button>
+      <button class="btn btn-primary" onclick="confirmMeetingDirectly()">
+        바로 최종 확정
+      </button>
     </div>
   </div>
 
   <script src="common.js"></script>
   <script>
+    // 샘플 안건 데이터
+    const SAMPLE_AGENDAS = [
+      {
+        id: 'agenda-1',
+        title: '1. 신제품 기획 방향성',
+        aiSummaryShort: '타겟 고객을 20-30대로 설정, UI/UX 개선 집중',
+        details: {
+          discussion: '신제품의 주요 타겟 고객층을 20-30대 직장인으로 설정하고, 기존 제품 대비 UI/UX를 대폭 개선하기로 함',
+          opinions: [
+            { speaker: '김민준', opinion: '타겟 고객층을 명확히 설정하여 마케팅 전략 수립 필요' },
+            { speaker: '박서연', opinion: 'UI/UX 개선에 AI 기술 적용 검토' }
+          ],
+          decisions: ['타겟 고객: 20-30대 직장인', 'UI/UX 개선을 최우선 과제로 설정'],
+          pending: []
+        },
+        todos: [
+          {
+            title: '시장 조사 보고서 작성',
+            assignee: SAMPLE_MEETINGS[0].participants[0],
+            dueDate: '2025-11-01',
+            priority: 'high'
+          },
+          {
+            title: 'UI/UX 개선안 초안 작성',
+            assignee: SAMPLE_MEETINGS[0].participants[1],
+            dueDate: '2025-11-05',
+            priority: 'medium'
+          }
+        ]
+      },
+      {
+        id: 'agenda-2',
+        title: '2. 예산 편성 및 일정',
+        aiSummaryShort: '총 예산 5억, 개발 기간 6개월 확정',
+        details: {
+          discussion: '신제품 개발을 위한 총 예산을 5억원으로 책정하고, 개발 기간은 6개월로 확정함',
+          opinions: [
+            { speaker: '이준호', opinion: '개발 기간 6개월은 타이트하므로 우선순위 명확화 필요' },
+            { speaker: '최유진', opinion: '예산 배분은 개발 60%, 마케팅 40%로 제안' }
+          ],
+          decisions: ['총 예산: 5억원', '개발 기간: 6개월', '예산 배분: 개발 60%, 마케팅 40%'],
+          pending: ['세부 일정 확정은 다음 회의에서 논의']
+        },
+        todos: [
+          {
+            title: '세부 개발 일정 수립',
+            assignee: SAMPLE_MEETINGS[0].participants[2],
+            dueDate: '2025-10-28',
+            priority: 'high'
+          }
+        ]
+      },
+      {
+        id: 'agenda-3',
+        title: '3. 기술 스택 및 개발 방향',
+        aiSummaryShort: 'React 기반 프론트엔드, AI 챗봇 기능 추가',
+        details: {
+          discussion: '프론트엔드는 React 기반으로 개발하고, 고객 지원을 위한 AI 챗봇 기능을 추가하기로 함',
+          opinions: [
+            { speaker: '박서연', opinion: 'AI 챗봇은 GPT-4 기반으로 개발 제안' },
+            { speaker: '이준호', opinion: 'React 외에 Next.js 도입 검토 필요' }
+          ],
+          decisions: ['프론트엔드: React 기반', 'AI 챗봇 기능 추가', 'Next.js 도입 검토'],
+          pending: ['AI 챗봇 학습 데이터 확보 방안']
+        },
+        todos: [
+          {
+            title: 'AI 챗봇 프로토타입 개발',
+            assignee: SAMPLE_MEETINGS[0].participants[1],
+            dueDate: '2025-11-10',
+            priority: 'medium'
+          },
+          {
+            title: 'Next.js 도입 검토 보고서',
+            assignee: SAMPLE_MEETINGS[0].participants[3],
+            dueDate: '2025-11-03',
+            priority: 'low'
+          }
+        ]
+      }
+    ];
+
     // 페이지 초기화
     function initPage() {
       // 통계 카운트 애니메이션
       animateCounter('durationValue', 90);
       animateCounter('participantsValue', 4);
-      animateCounter('sectionsValue', 3);
-      animateCounter('todosValue', 5);
+      animateCounter('agendasValue', SAMPLE_AGENDAS.length);
+
+      // Todo 전체 개수 계산
+      const totalTodos = SAMPLE_AGENDAS.reduce((sum, agenda) => sum + (agenda.todos?.length || 0), 0);
+      animateCounter('todosValue', totalTodos);
 
       // 발언 통계 렌더링
       renderSpeakerStats();
 
-      // Todo 리스트 렌더링
-      renderTodoList();
+      // 안건 리스트 렌더링
+      renderAgendaList();
     }
 
     // 카운터 애니메이션
@@ -416,42 +518,117 @@
       }, 100);
     }
 
-    // Todo 리스트 렌더링
-    function renderTodoList() {
-      const todos = SAMPLE_TODOS.filter(todo => todo.meetingId === 'meeting-001');
-      const container = $('#todoList');
+    // 안건 리스트 렌더링
+    function renderAgendaList() {
+      const container = $('#agendaList');
 
-      todos.forEach(todo => {
-        const statusInfo = getTodoStatusInfo(todo);
-        const item = createElement('div', { className: 'todo-list-item' }, `
-          <div class="todo-header">
-            <div class="todo-content">${todo.title}</div>
-            ${createBadge(todo.priority === 'high' ? '높음' : todo.priority === 'medium' ? '보통' : '낮음',
-                          `priority-${todo.priority}`)}
-          </div>
-          <div class="todo-meta">
-            ${createAvatar(todo.assignee, 'sm')}
-            <span>${todo.assignee.name}</span>
-            <span>•</span>
-            <span>${formatDate(todo.dueDate)}</span>
+      SAMPLE_AGENDAS.forEach(agenda => {
+        // 안건 카드
+        const card = createElement('div', {
+          className: 'agenda-card',
+          id: `agenda-${agenda.id}`,
+          onclick: `toggleAgenda('${agenda.id}')`
+        });
+
+        // 헤더
+        const header = createElement('div', { className: 'agenda-header' }, `
+          <div>
+            <div class="agenda-title">${agenda.title}</div>
+            <div class="ai-summary-short">
+              <span class="lock-icon">🔒</span>
+              <span>${agenda.aiSummaryShort}</span>
+            </div>
           </div>
+          <div class="expand-icon">▼</div>
         `);
-        container.appendChild(item);
+        card.appendChild(header);
+
+        // 상세 내용
+        const content = createElement('div', { className: 'agenda-content' });
+
+        // 논의 주제
+        if (agenda.details.discussion) {
+          content.appendChild(createElement('div', { className: 'agenda-section' }, `
+            <div class="agenda-section-title">논의 주제</div>
+            <div class="agenda-section-content">${agenda.details.discussion}</div>
+          `));
+        }
+
+        // 발언자별 의견
+        if (agenda.details.opinions && agenda.details.opinions.length > 0) {
+          const opinionsHtml = agenda.details.opinions.map(op =>
+            `<li><strong>${op.speaker}:</strong> ${op.opinion}</li>`
+          ).join('');
+          content.appendChild(createElement('div', { className: 'agenda-section' }, `
+            <div class="agenda-section-title">발언자별 의견</div>
+            <div class="agenda-section-content"><ul>${opinionsHtml}</ul></div>
+          `));
+        }
+
+        // 결정 사항
+        if (agenda.details.decisions && agenda.details.decisions.length > 0) {
+          const decisionsHtml = agenda.details.decisions.map(d => `<li>✓ ${d}</li>`).join('');
+          content.appendChild(createElement('div', { className: 'agenda-section' }, `
+            <div class="agenda-section-title">결정 사항</div>
+            <div class="agenda-section-content"><ul>${decisionsHtml}</ul></div>
+          `));
+        }
+
+        // 보류 사항
+        if (agenda.details.pending && agenda.details.pending.length > 0) {
+          const pendingHtml = agenda.details.pending.map(p => `<li>⏸ ${p}</li>`).join('');
+          content.appendChild(createElement('div', { className: 'agenda-section' }, `
+            <div class="agenda-section-title">보류 사항</div>
+            <div class="agenda-section-content"><ul>${pendingHtml}</ul></div>
+          `));
+        }
+
+        // Todo 목록
+        if (agenda.todos && agenda.todos.length > 0) {
+          const todosSection = createElement('div', { className: 'agenda-section' }, `
+            <div class="agenda-section-title">Todo 자동 추출 결과</div>
+          `);
+
+          agenda.todos.forEach(todo => {
+            const todoItem = createElement('div', { className: 'todo-list-item' }, `
+              <div class="todo-header">
+                <input type="checkbox" class="todo-checkbox" disabled>
+                <div class="todo-content">${todo.title}</div>
+                ${createBadge(todo.priority === 'high' ? '높음' : todo.priority === 'medium' ? '보통' : '낮음',
+                              `priority-${todo.priority}`)}
+              </div>
+              <div class="todo-meta">
+                ${createAvatar(todo.assignee, 'sm')}
+                <span>${todo.assignee.name}</span>
+                <span>•</span>
+                <span>${formatDate(todo.dueDate)}</span>
+              </div>
+            `);
+            todosSection.appendChild(todoItem);
+          });
+
+          content.appendChild(todosSection);
+        }
+
+        card.appendChild(content);
+        container.appendChild(card);
       });
     }
 
-    // 회의록 확정
-    function confirmMeeting() {
-      if (confirm('회의록을 최종 확정하시겠습니까?\n확정 후에는 Todo가 자동 할당됩니다.')) {
-        showToast('회의록이 확정되었습니다', 'success');
-        navigateTo('02-대시보드.html');
-      }
+    // 안건 카드 확장/축소
+    function toggleAgenda(agendaId) {
+      const card = $(`#agenda-${agendaId}`);
+      card.classList.toggle('expanded');
     }
 
-    // Todo 편집 저장
-    function saveTodoEdit() {
-      showToast('Todo가 수정되었습니다', 'success');
-      closeModal('todoEditModal');
+    // 바로 최종 확정
+    function confirmMeetingDirectly() {
+      if (confirm('AI가 정리한 내용 그대로 최종 확정하시겠습니까?\n\n모든 안건이 자동으로 검증 완료 처리되며, 참석자에게 확정 알림이 발송됩니다.')) {
+        showToast('회의록이 최종 확정되었습니다', 'success');
+        setTimeout(() => {
+          navigateTo('02-대시보드.html');
+        }, 1000);
+      }
     }
 
     // 페이지 로드 시 초기화