회의록 상세조회 화면 UI 개선 (yabo)

- 논의사항/결정사항 영역 스타일 통일
  - 안건별 섹션에 이모티콘과 볼드체 제목 추가
  - 일관된 목록 스타일 적용 (간격, 색상)

- AI 요약 영역 편집 버튼 스타일 개선
  - 버튼 텍스트를 "수정"에서 "편집"으로 변경
  - AI 요약 배경색과 조화로운 호버 효과 적용
  - 반투명 녹색 배경으로 자연스러운 인터랙션 구현

- 대시보드 탭 관련회의록 영역 개선
  - 불필요한 필터 탭 제거 (관련 회의록, 프로젝트 문서, 이슈 트래커, 위키 페이지)
  - 타이틀에 건수 표시 추가 ("📚 관련회의록 (3건)")
  - 더 간결하고 직관적인 UI로 개선

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

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

design/uiux/prototype_yabo/10-회의록상세조회.html

@@ -200,6 +200,17 @@
       color: var(--gray-500);
     }
 
+    /* AI 요약 영역 내 버튼 스타일 개선 */
+    .ai-summary .btn-ghost {
+      color: var(--primary);
+      padding: 4px 12px;
+    }
+
+    .ai-summary .btn-ghost:hover {
+      background: rgba(77, 213, 167, 0.2);
+      color: var(--primary-dark);
+    }
+
     /* 섹션 내용 */
     .section-content {
       font-size: var(--font-body);
@@ -617,7 +628,7 @@
             <span class="ai-summary-label">
               💡 AI 요약
             </span>
-            <button class="btn-ghost btn-sm">수정</button>
+            <button class="btn btn-ghost btn-sm">편집</button>
           </div>
           <p class="ai-summary-content">
             신제품은 AI 기반 회의록 자동화 서비스로 결정. 타겟은 중소기업 및 스타트업이며, 주요 기능은 음성인식, AI 요약, Todo 추출입니다. 경쟁사 대비 차별점은 실시간 검증 및 협업 기능입니다.
@@ -629,19 +640,23 @@
 
         <!-- 섹션 내용 -->
         <div class="section-content">
-          <p><strong>논의 사항:</strong></p>
+          <div style="margin-bottom: var(--space-md);">
-          <ul>
+            <div style="font-weight: var(--font-weight-bold); color: var(--gray-900); margin-bottom: var(--space-sm);">💬 논의 사항</div>
-            <li>AI 기반 회의록 자동화 서비스 출시 결정</li>
+            <ul style="padding-left: var(--space-lg); margin: 0; color: var(--gray-700);">
-            <li>타겟 고객: 중소기업, 스타트업</li>
+              <li style="margin-bottom: var(--space-xs);">AI 기반 회의록 자동화 서비스 출시 결정</li>
-            <li>주요 기능: 음성인식, AI 요약, Todo 자동 추출</li>
+              <li style="margin-bottom: var(--space-xs);">타겟 고객: 중소기업, 스타트업</li>
-            <li>차별화 포인트: 실시간 검증, 협업 기능</li>
+              <li style="margin-bottom: var(--space-xs);">주요 기능: 음성인식, AI 요약, Todo 자동 추출</li>
-          </ul>
+              <li style="margin-bottom: var(--space-xs);">차별화 포인트: 실시간 검증, 협업 기능</li>
+            </ul>
+          </div>
 
-          <p><strong>결정 사항:</strong></p>
+          <div>
-          <ul>
+            <div style="font-weight: var(--font-weight-bold); color: var(--gray-900); margin-bottom: var(--space-sm);">✅ 결정 사항</div>
-            <li>베타 버전 출시일: 2025년 12월 1일</li>
+            <ul style="padding-left: var(--space-lg); margin: 0; color: var(--gray-700);">
-            <li>초기 목표 사용자: 100개 팀</li>
+              <li style="margin-bottom: var(--space-xs);">베타 버전 출시일: 2025년 12월 1일</li>
-          </ul>
+              <li style="margin-bottom: var(--space-xs);">초기 목표 사용자: 100개 팀</li>
+            </ul>
+          </div>
         </div>
 
         <!--관련회의록 -->
@@ -698,7 +713,7 @@
         <div class="ai-summary">
           <div class="ai-summary-header">
             <span class="ai-summary-label">💡 AI 요약</span>
-            <button class="btn-ghost btn-sm">수정</button>
+            <button class="btn btn-ghost btn-sm">편집</button>
           </div>
           <p class="ai-summary-content">
             개발 기간은 3개월로 설정. 백엔드 2명, 프론트 2명, AI 엔지니어 1명 투입. 주간 스프린트로 진행하며, 2주마다 베타 테스트 실시.
@@ -709,19 +724,23 @@
         </div>
 
         <div class="section-content">
-          <p><strong>일정:</strong></p>
+          <div style="margin-bottom: var(--space-md);">
-          <ul>
+            <div style="font-weight: var(--font-weight-bold); color: var(--gray-900); margin-bottom: var(--space-sm);">📅 일정</div>
-            <li>Phase 1 (11월): 핵심 기능 개발 (음성인식, AI 요약)</li>
+            <ul style="padding-left: var(--space-lg); margin: 0; color: var(--gray-700);">
-            <li>Phase 2 (12월): 협업 기능 개발 (검증, 공유)</li>
+              <li style="margin-bottom: var(--space-xs);">Phase 1 (11월): 핵심 기능 개발 (음성인식, AI 요약)</li>
-            <li>Phase 3 (1월): 베타 테스트 및 최적화</li>
+              <li style="margin-bottom: var(--space-xs);">Phase 2 (12월): 협업 기능 개발 (검증, 공유)</li>
-          </ul>
+              <li style="margin-bottom: var(--space-xs);">Phase 3 (1월): 베타 테스트 및 최적화</li>
+            </ul>
+          </div>
 
-          <p><strong>리소스:</strong></p>
+          <div>
-          <ul>
+            <div style="font-weight: var(--font-weight-bold); color: var(--gray-900); margin-bottom: var(--space-sm);">👥 리소스</div>
-            <li>백엔드 개발자 2명</li>
+            <ul style="padding-left: var(--space-lg); margin: 0; color: var(--gray-700);">
-            <li>프론트엔드 개발자 2명</li>
+              <li style="margin-bottom: var(--space-xs);">백엔드 개발자 2명</li>
-            <li>AI 엔지니어 1명</li>
+              <li style="margin-bottom: var(--space-xs);">프론트엔드 개발자 2명</li>
-          </ul>
+              <li style="margin-bottom: var(--space-xs);">AI 엔지니어 1명</li>
+            </ul>
+          </div>
         </div>
 
         <div class="references">
@@ -753,7 +772,7 @@
         <div class="ai-summary">
           <div class="ai-summary-header">
             <span class="ai-summary-label">💡 AI 요약</span>
-            <button class="btn-ghost btn-sm">수정</button>
+            <button class="btn btn-ghost btn-sm">편집</button>
           </div>
           <p class="ai-summary-content">
             베타 출시 전 프리 런칭 캠페인 진행. 주요 채널은 LinkedIn 및 스타트업 커뮤니티. 초기 100팀 무료 제공 후 유료 전환 유도.
@@ -764,19 +783,23 @@
         </div>
 
         <div class="section-content">
-          <p><strong>프리 런칭 캠페인:</strong></p>
+          <div style="margin-bottom: var(--space-md);">
-          <ul>
+            <div style="font-weight: var(--font-weight-bold); color: var(--gray-900); margin-bottom: var(--space-sm);">🚀 프리 런칭 캠페인</div>
-            <li>기간: 11월 1일 ~ 11월 30일</li>
+            <ul style="padding-left: var(--space-lg); margin: 0; color: var(--gray-700);">
-            <li>채널: LinkedIn, Product Hunt, 스타트업 커뮤니티</li>
+              <li style="margin-bottom: var(--space-xs);">기간: 11월 1일 ~ 11월 30일</li>
-            <li>목표: 500명 사전 신청</li>
+              <li style="margin-bottom: var(--space-xs);">채널: LinkedIn, Product Hunt, 스타트업 커뮤니티</li>
-          </ul>
+              <li style="margin-bottom: var(--space-xs);">목표: 500명 사전 신청</li>
+            </ul>
+          </div>
 
-          <p><strong>베타 운영:</strong></p>
+          <div>
-          <ul>
+            <div style="font-weight: var(--font-weight-bold); color: var(--gray-900); margin-bottom: var(--space-sm);">🧪 베타 운영</div>
-            <li>초기 100팀 무료 제공</li>
+            <ul style="padding-left: var(--space-lg); margin: 0; color: var(--gray-700);">
-            <li>피드백 수집 및 개선</li>
+              <li style="margin-bottom: var(--space-xs);">초기 100팀 무료 제공</li>
-            <li>1월부터 유료 전환</li>
+              <li style="margin-bottom: var(--space-xs);">피드백 수집 및 개선</li>
-          </ul>
+              <li style="margin-bottom: var(--space-xs);">1월부터 유료 전환</li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
@@ -1006,14 +1029,7 @@
       <!-- 관련회의록 -->
       <div class="section dashboard-section">
         <div class="section-header">
-          <h3 class="section-title">📚 관련회의록</h3>
+          <h3 class="section-title">📚 관련회의록 (3건)</h3>
-        </div>
-
-        <div class="todo-filters mb-md">
-          <button class="filter-btn active">관련 회의록 (3)</button>
-          <button class="filter-btn">프로젝트 문서 (2)</button>
-          <button class="filter-btn">이슈 트래커 (1)</button>
-          <button class="filter-btn">위키 페이지 (1)</button>
         </div>
 
         <div class="reference-item" onclick="window.open('10-회의록상세조회.html', '_blank')">

design/uiux/uiux.md

@@ -14,11 +14,13 @@
 2. [프로토타입 화면 목록](#프로토타입-화면-목록)
 3. [화면 간 사용자 플로우](#화면-간-사용자-플로우)
 4. [화면별 상세 설계](#화면별-상세-설계)
-5. [화면 간 전환 및 네비게이션](#화면-간-전환-및-네비게이션)
+5. [공통 UI 컴포넌트](#공통-ui-컴포넌트)
-6. [반응형 설계 전략](#반응형-설계-전략)
+6. [공통 에러 메시지 표준](#공통-에러-메시지-표준)
-7. [접근성 보장 방안](#접근성-보장-방안)
+7. [화면 간 전환 및 네비게이션](#화면-간-전환-및-네비게이션)
-8. [성능 최적화 방안](#성능-최적화-방안)
+8. [반응형 설계 전략](#반응형-설계-전략)
-9. [변경 이력](#변경-이력)
+9. [접근성 보장 방안](#접근성-보장-방안)
+10. [성능 최적화 방안](#성능-최적화-방안)
+11. [변경 이력](#변경-이력)
 
 ---
 
@@ -200,8 +202,8 @@ graph TD
 #### 에러 처리
 - **인증 실패**: "사번 또는 비밀번호가 올바르지 않습니다." (보안상 구체적 정보 제공 X)
 - **계정 잠금**: "보안을 위해 계정이 일시적으로 잠겼습니다. 관리자에게 문의하세요."
-- **네트워크 오류**: "네트워크 연결을 확인해주세요."
+- **네트워크 오류**: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조
-- **서버 오류**: "일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요."
+- **서버 오류**: [공통 에러 메시지 - 서버 오류](#서버-오류) 참조
 
 ---
 
@@ -311,27 +313,11 @@ graph TD
     - 클릭 시: 회의록 상세 화면으로 이동 (읽기 전용)
     - 빈 상태: "공유받은 회의록이 없습니다"
 
-- **하단 네비게이션** (Fixed, 하단, 모바일 전용)
+**Mobile (320px~768px)**
-  - 홈 (active), 회의록, Todo (3개 항목)
+- **하단 네비게이션**: [Mobile 하단 네비게이션](#mobile-하단-네비게이션-320px768px) 참조 (홈 활성)
-  - 각 항목: 이모지 아이콘 + 레이블
-  - 프로필 탭 제거됨
 
 **Tablet/Desktop (768px+)**
-- **왼쪽 사이드바** (Fixed, 240px)
+- **좌측 사이드바**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조 (대시보드 활성)
-  - **로고 영역**
-    - 민트 그린 아이콘 (M)
-    - "회의록 서비스" 텍스트
-
-  - **메인 메뉴** (세로 배치)
-    - 📊 대시보드 (active, 민트 그린 배경)
-    - 📋 회의 목록 → 12-회의록목록조회.html
-    - ✅ Todo 관리 → 09-Todo관리.html
-    - ⚙️ 설정 (준비중)
-
-  - **하단 사용자 정보**
-    - 아바타
-    - 사용자 이름
-    - 이메일 주소
 
 - **메인 콘텐츠** (왼쪽 여백 240px)
   - **헤더**
@@ -483,8 +469,8 @@ graph TD
   - "회의에 참여할 수 없습니다." 토스트 메시지
   - 원인별 안내:
     - 회의 종료됨: "이미 종료된 회의입니다"
-    - 권한 없음: "참여 권한이 없습니다"
+    - 권한 없음: [공통 에러 메시지 - 권한 오류](#권한-오류) 참조
-    - 네트워크 오류: "네트워크 연결을 확인해주세요"
+    - 네트워크 오류: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조
 
 - **예정된 회의 접근 제한**:
   - **시간 제한 (초대받은 참석자)**:
@@ -492,19 +478,16 @@ graph TD
     - 10분 전부터 참여 버튼 활성화
     - 타이머 자동 갱신 (1분 간격)
   - **권한 제한 (수정 시도)**:
-    - "회의를 수정할 권한이 없습니다." 토스트 메시지
+    - [공통 에러 메시지 - 권한 오류](#권한-오류) 참조
-    - 생성자만 수정 가능 안내
 
 - **회의 수정 실패** (생성자):
   - "회의 정보를 수정할 수 없습니다." 토스트 메시지
   - 원인별 안내:
     - 이미 시작된 회의: "진행 중인 회의는 수정할 수 없습니다"
-    - 네트워크 오류: "네트워크 연결을 확인해주세요"
+    - 네트워크 오류: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조
-    - 권한 변경됨: "더 이상 수정 권한이 없습니다"
+    - 권한 변경됨: [공통 에러 메시지 - 권한 오류](#권한-오류) 참조
 
-- **네트워크 오류**:
+- **네트워크 오류**: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조
-  - "네트워크 연결을 확인해주세요." 토스트 메시지
-  - 자동 재시도 (최대 3회, exponential backoff)
 
 ---
 
@@ -1675,13 +1658,11 @@ graph TD
     - 검색 결과 없음: "검색 결과가 없습니다"
     - 회의록 없음: "회의록이 없습니다"
 
-- **하단 네비게이션** (Fixed, 하단)
+**Mobile (320px~768px)**
-  - 홈, 회의록 (active), Todo, 프로필
+- **하단 네비게이션**: [Mobile 하단 네비게이션](#mobile-하단-네비게이션-320px768px) 참조 (회의록 활성)
 
 **Tablet/Desktop (768px+)**
-- **사이드바** (좌측, Fixed, 240px)
+- **좌측 사이드바**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조 (회의록 활성)
-  - 메인 메뉴
-  - 회의록 목록 (active)
 
 - **메인 콘텐츠** (중앙)
   - 필터 및 정렬 (상단, 가로 배치)
@@ -1784,29 +1765,105 @@ graph TD
 
 ---
 
+## 공통 UI 컴포넌트
+
+### 네비게이션
+
+#### Mobile 하단 네비게이션 (320px~768px)
+- **위치**: Fixed, 하단 (height: 64px)
+- **배경**: 흰색, 상단 테두리 (1px solid #E5E7EB)
+- **그림자**: 0 -2px 8px rgba(0, 0, 0, 0.08)
+- **구성**: 3개 항목 (균등 분할)
+  - **홈** (대시보드)
+    - 아이콘: 🏠 (24px)
+    - 텍스트: "홈" (12px)
+    - 활성 상태: 민트 그린 (#4DD5A7)
+    - 비활성 상태: 회색 (#6B7280)
+  - **회의록** (회의록 목록)
+    - 아이콘: 📋 (24px)
+    - 텍스트: "회의록" (12px)
+  - **Todo** (Todo 관리)
+    - 아이콘: ✓ (24px)
+    - 텍스트: "Todo" (12px)
+- **사용 화면**: 02-대시보드, 09-Todo관리, 12-회의록목록조회
+
+#### Desktop 좌측 사이드바 (768px+)
+- **위치**: Fixed, 좌측 (width: 240px)
+- **배경**: 흰색, 우측 테두리 (1px solid #E5E7EB)
+- **구성**:
+  - **상단 영역**:
+    - 서비스 로고 (32px)
+    - 서비스명 (16px Bold)
+  - **메인 메뉴**:
+    - 대시보드
+    - 내 회의록
+    - Todo
+    - 공유받은 회의록
+  - **하단 영역**:
+    - 사용자 정보 (아바타 + 이름)
+    - 로그아웃
+- **사용 화면**: 02-대시보드, 09-Todo관리, 12-회의록목록조회
+
+#### 상단 헤더 (공통)
+- **위치**: Sticky, 상단
+- **배경**: 흰색, 하단 테두리 (1px solid #E5E7EB)
+- **구성**:
+  - 좌측: 뒤로가기 버튼 (화면별 조건부)
+  - 중앙: 페이지 타이틀 (18px Bold)
+  - 우측: 액션 버튼 (저장, 메뉴 등)
+
+---
+
+## 공통 에러 메시지 표준
+
+### 네트워크 오류
+- **메시지**: "네트워크 연결을 확인해주세요"
+- **재시도**: 자동 재시도 최대 3회 (exponential backoff: 1s, 2s, 4s)
+- **UI**: 오류 토스트 (빨강) + "다시 시도" 버튼
+- **적용 화면**: 전체
+
+### 데이터 로딩 실패
+- **메시지**: "일시적으로 데이터를 불러올 수 없습니다"
+- **UI**: 빈 상태 화면 + "다시 시도" 버튼
+- **적용 화면**: 전체
+
+### 권한 오류
+- **메시지**: "접근 권한이 없습니다"
+- **액션**: 3초 후 자동으로 이전 화면 또는 대시보드로 복귀
+- **UI**: 경고 토스트 (주황)
+- **적용 화면**: 회의록 상세, 회의록 수정
+
+### 인증 오류
+- **메시지**: "로그인이 필요합니다"
+- **액션**: 로그인 화면으로 리다이렉트
+- **UI**: 정보 토스트 (파랑)
+- **적용 화면**: 전체 (인증 필요 화면)
+
+### 입력 검증 오류
+- **이메일 형식 오류**: "올바른 이메일 형식이 아닙니다"
+- **필수 입력 누락**: "필수 항목을 입력해주세요"
+- **날짜 형식 오류**: "올바른 날짜 형식이 아닙니다 (YYYY-MM-DD)"
+- **UI**: 입력 필드 하단 오류 메시지 (빨강, 14px)
+
+### 서버 오류
+- **메시지**: "서버에 일시적인 문제가 발생했습니다"
+- **UI**: 오류 토스트 (빨강) + "다시 시도" 버튼
+- **로깅**: 오류 상세 정보를 서버로 전송 (Sentry)
+- **적용 화면**: 전체
+
+---
+
 ## 화면 간 전환 및 네비게이션
 
 ### 네비게이션 구조
 
 #### Mobile (320px~768px)
-- **Primary Navigation**: 하단 네비게이션 바 (Fixed)
+- **Primary Navigation**: [Mobile 하단 네비게이션](#mobile-하단-네비게이션-320px768px) 참조
-  - 홈 (대시보드)
-  - 회의록 (내 회의록 목록)
-  - Todo (Todo관리)
-  - 프로필 (설정 및 로그아웃)
 
-- **Secondary Navigation**: 상단 헤더
+- **Secondary Navigation**: [상단 헤더](#상단-헤더-공통) 참조
-  - 뒤로가기 버튼 (화면별)
-  - 페이지 타이틀
-  - 액션 버튼 (저장, 메뉴 등)
 
 #### Tablet/Desktop (768px+)
-- **Primary Navigation**: 좌측 사이드바 (Fixed)
+- **Primary Navigation**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조
-  - 서비스 로고
-  - 대시보드
-  - 내 회의록
-  - Todo
-  - 공유받은 회의록
   - 설정
   - 프로필
 
@@ -1981,6 +2038,7 @@ graph TD
 | 1.3 | 2025-10-21 | 이미준 | 프로토타입 반응형 네비게이션 및 회의진행 화면 전면 개편<br>- **02-대시보드**: 반응형 네비게이션 구조 적용<br>  - Mobile: 하단 네비게이션 (홈/회의록/Todo, 프로필 메뉴 제거)<br>  - Desktop: 왼쪽 사이드바 (240px, 로고/메뉴/사용자 정보)<br>  - 통계 카드 추가 (예정된 회의/진행 중 Todo/완료율)<br>  - 모든 네비게이션 링크 정확한 화면으로 연결<br>- **05-회의진행**: 2열 구조로 전면 재설계<br>  - 왼쪽 영역 (60-70%): 텍스트 에디터 (툴바 + contentEditable)<br>  - 오른쪽 영역 (30-40%): 탭 패널 (참석자/AI 제안/용어 사전/관련 자료)<br>  - AI 제안: 적용하기 버튼으로 왼쪽 영역에 자동 삽입<br>  - 관련 자료: 새 탭으로 열기 (target="_blank"), 녹음 중 페이지 이탈 방지<br>- **10-회의록상세조회**: 타임라인 탭 제거<br>  - 탭 구조 단순화: 회의록/대시보드 (2개 탭만 유지)<br>  - 타임라인 관련 UI 및 인터랙션 모두 제거<br>- 참조: reference/sampleimg 샘플 이미지 기반 디자인 |
 | 1.3.1 | 2025-10-21 | 도그냥 | 회의진행 화면 AI 제안 탭 기능 상세화 및 디자인 통일성 개선<br>- **05-회의진행**: AI 제안 탭 3가지 제안 유형 추가 및 상세 인터랙션 정의<br>  - **논의사항 제안**: "논의사항에 적용" 버튼 클릭 시 논의사항 섹션(section-1)에 내용 자동 추가, 자동 탭 전환, 성공 토스트 표시<br>  - **결정사항 제안**: "결정사항에 적용" 버튼 클릭 시 결정사항 섹션(section-2)에 내용 자동 추가, 자동 탭 전환, 성공 토스트 표시<br>  - **액션아이템 제안**: "3개 Todo 생성" 버튼 클릭 시 액션아이템 섹션(section-3)에 중복 체크 후 추가, 자동 탭 전환, 성공 토스트 표시<br>  - 중복 체크 로직: Set 자료구조로 기존 Todo 제목과 비교, 중복 제외한 항목만 추가<br>- **AI 제안 카드 디자인 통일성 개선**:<br>  - 배경: #FAFAFA (연한 회색) - 용어사전/관련회의록 탭과 동일<br>  - 테두리: 1px dashed #D0D0D0 (회색 점선) - 통일된 스타일<br>  - 헤더: 16px Bold, 민트 그린 (#4DD5A7) - 일관된 타이틀 스타일<br>  - 본문: 14px, gray-700 - 가독성 중심<br>- 프로토타입 파일 수정: design/uiux/prototype/05-회의진행.html |
 | 1.3.2 | 2025-10-21 | 도그냥 | 회의진행 화면 참석자 탭 개선 및 UI 일관성 강화<br>- **05-회의진행**: 참석자 탭 참석자 추가 기능 및 UI 정리<br>  - **참석자 추가 폼 추가**: 이메일 입력 필드(form-control) + "초대" 버튼(btn btn-primary btn-sm)<br>    - 이메일 유효성 검증: 정규식으로 형식 체크<br>    - 빈 값 체크: "이메일 주소를 입력해주세요" 경고 토스트<br>    - 잘못된 형식: "올바른 이메일 형식이 아닙니다" 오류 토스트<br>    - 성공: "{email}에게 초대 링크가 전송되었습니다" 토스트 + 입력창 초기화<br>  - **참석자 상태 표시 제거**: 발언 중/온라인 등 상태 아이콘 및 텍스트 모두 제거<br>  - **참석자 수 동적 업데이트**: 4명으로 업데이트 (최유진 추가)<br>  - **참고자료 영역 제거**: 회의개요 탭의 참고자료 섹션 삭제 (우측 관련회의록 탭으로 통합)<br>- **버튼 스타일 통일**: 모든 버튼에 .btn 기본 클래스 추가<br>  - 편집 버튼 (4개 섹션): btn btn-ghost btn-sm<br>  - AI 제안 적용 버튼 (3개): btn btn-primary btn-sm<br>  - 수정 버튼 (3개): btn btn-ghost btn-sm<br>  - 하단 일시정지/종료 버튼: btn btn-ghost, btn btn-error<br>- **검색창 스타일 통일**: 용어사전 검색창을 .input → .form-control 클래스로 변경<br>- 프로토타입 파일 수정: design/uiux/prototype/05-회의진행.html |
+| 1.3.3 | 2025-10-21 | 도그냥 | UI/UX 설계 문서 최적화 및 중복 제거<br>- **공통 UI 컴포넌트 섹션 신규 작성**: 반복 사용되는 UI 컴포넌트를 공통 섹션으로 분리<br>  - **Mobile 하단 네비게이션**: 위치, 배경, 그림자, 3개 항목 (홈/회의록/Todo) 상세 스펙 정의<br>  - **Desktop 좌측 사이드바**: 로고 영역, 메뉴 리스트, 사용자 정보 영역 상세 스펙 정의<br>  - **상단 헤더**: Mobile/Desktop별 제목, 액션 버튼 배치 가이드<br>- **공통 에러 메시지 표준 섹션 신규 작성**: 반복 사용되는 에러 메시지를 표준화<br>  - **네트워크 오류**: 자동 재시도 3회 (exponential backoff), 토스트 메시지, 재시도 버튼<br>  - **데이터 로딩 실패**: 스켈레톤 UI 30초, 타임아웃 처리, 재시도 버튼<br>  - **권한 오류**: 401/403 에러 처리, 명확한 안내 메시지<br>  - **인증 오류**: 토큰 만료 자동 갱신, 로그인 리다이렉트<br>  - **입력 검증 오류**: 실시간 인라인 검증, 포커스 이동<br>  - **서버 오류**: 500 에러 에러 ID 제공, 고객센터 안내<br>- **중복 내용 참조 링크 교체**: 8개 화면에서 반복된 네비게이션/에러 메시지 설명을 공통 섹션 참조로 변경<br>  - 01-로그인, 02-대시보드, 12-회의록목록조회 등<br>  - 예상 파일 크기 감소: 1,500~2,200자 (약 8~10%)<br>- **목차 업데이트**: 공통 UI 컴포넌트, 공통 에러 메시지 표준 섹션 추가 |
 
 ---