shared-dg05-coffeeQuokka/hgzero
1
0
Fork 0
mirror of https://github.com/hwanny1128/HGZero.git synced 2025-12-06 07:56:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

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

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

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812 2025-10-21 19:45:37 +09:00
parent 3a1fc59b00
commit 225729d1ab
2 changed files with 176 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
<ul>
<li>AI 기반 회의록 자동화 서비스 출시 결정</li>
<li>타겟 고객: 중소기업, 스타트업</li>
<li>주요 기능: 음성인식, AI 요약, Todo 자동 추출</li>
<li>차별화 포인트: 실시간 검증, 협업 기능</li>
</ul>
<div style="margin-bottom: var(--space-md);">
<div style="font-weight: var(--font-weight-bold); color: var(--gray-900); margin-bottom: var(--space-sm);">💬 논의 사항</div>
<ul style="padding-left: var(--space-lg); margin: 0; color: var(--gray-700);">
<li style="margin-bottom: var(--space-xs);">AI 기반 회의록 자동화 서비스 출시 결정</li>
<li style="margin-bottom: var(--space-xs);">타겟 고객: 중소기업, 스타트업</li>
<li style="margin-bottom: var(--space-xs);">주요 기능: 음성인식, AI 요약, Todo 자동 추출</li>
<li style="margin-bottom: var(--space-xs);">차별화 포인트: 실시간 검증, 협업 기능</li>
</ul>
</div>
<p><strong>결정 사항:</strong></p>
<ul>
<li>베타 버전 출시일: 2025년 12월 1일</li>
<li>초기 목표 사용자: 100개 팀</li>
</ul>
<div>
<div style="font-weight: var(--font-weight-bold); color: var(--gray-900); margin-bottom: var(--space-sm);">✅ 결정 사항</div>
<ul style="padding-left: var(--space-lg); margin: 0; color: var(--gray-700);">
<li style="margin-bottom: var(--space-xs);">베타 버전 출시일: 2025년 12월 1일</li>
<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>
<ul>
<li>Phase 1 (11월): 핵심 기능 개발 (음성인식, AI 요약)</li>
<li>Phase 2 (12월): 협업 기능 개발 (검증, 공유)</li>
<li>Phase 3 (1월): 베타 테스트 및 최적화</li>
</ul>
<div style="margin-bottom: var(--space-md);">
<div style="font-weight: var(--font-weight-bold); color: var(--gray-900); margin-bottom: var(--space-sm);">📅 일정</div>
<ul style="padding-left: var(--space-lg); margin: 0; color: var(--gray-700);">
<li style="margin-bottom: var(--space-xs);">Phase 1 (11월): 핵심 기능 개발 (음성인식, AI 요약)</li>
<li style="margin-bottom: var(--space-xs);">Phase 2 (12월): 협업 기능 개발 (검증, 공유)</li>
<li style="margin-bottom: var(--space-xs);">Phase 3 (1월): 베타 테스트 및 최적화</li>
</ul>
</div>
<p><strong>리소스:</strong></p>
<ul>
<li>백엔드 개발자 2명</li>
<li>프론트엔드 개발자 2명</li>
<li>AI 엔지니어 1명</li>
</ul>
<div>
<div style="font-weight: var(--font-weight-bold); color: var(--gray-900); margin-bottom: var(--space-sm);">👥 리소스</div>
<ul style="padding-left: var(--space-lg); margin: 0; color: var(--gray-700);">
<li style="margin-bottom: var(--space-xs);">백엔드 개발자 2명</li>
<li style="margin-bottom: var(--space-xs);">프론트엔드 개발자 2명</li>
<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>
<ul>
<li>기간: 11월 1일 ~ 11월 30일</li>
<li>채널: LinkedIn, Product Hunt, 스타트업 커뮤니티</li>
<li>목표: 500명 사전 신청</li>
</ul>
<div style="margin-bottom: var(--space-md);">
<div style="font-weight: var(--font-weight-bold); color: var(--gray-900); margin-bottom: var(--space-sm);">🚀 프리 런칭 캠페인</div>
<ul style="padding-left: var(--space-lg); margin: 0; color: var(--gray-700);">
<li style="margin-bottom: var(--space-xs);">기간: 11월 1일 ~ 11월 30일</li>
<li style="margin-bottom: var(--space-xs);">채널: LinkedIn, Product Hunt, 스타트업 커뮤니티</li>
<li style="margin-bottom: var(--space-xs);">목표: 500명 사전 신청</li>
</ul>
</div>
<p><strong>베타 운영:</strong></p>
<ul>
<li>초기 100팀 무료 제공</li>
<li>피드백 수집 및 개선</li>
<li>1월부터 유료 전환</li>
</ul>
<div>
<div style="font-weight: var(--font-weight-bold); color: var(--gray-900); margin-bottom: var(--space-sm);">🧪 베타 운영</div>
<ul style="padding-left: var(--space-lg); margin: 0; color: var(--gray-700);">
<li style="margin-bottom: var(--space-xs);">초기 100팀 무료 제공</li>
<li style="margin-bottom: var(--space-xs);">피드백 수집 및 개선</li>
<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>
</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>
<h3 class="section-title">📚 관련회의록 (3건)</h3>
</div>
<div class="reference-item" onclick="window.open('10-회의록상세조회.html', '_blank')">

168
design/uiux/uiux.md
View File

@ -14,11 +14,13 @@
2. [프로토타입 화면 목록](#프로토타입-화면-목록)
3. [화면 간 사용자 플로우](#화면-간-사용자-플로우)
4. [화면별 상세 설계](#화면별-상세-설계)
5. [화면 간 전환 및 네비게이션](#화면-간-전환-및-네비게이션)
6. [반응형 설계 전략](#반응형-설계-전략)
7. [접근성 보장 방안](#접근성-보장-방안)
8. [성능 최적화 방안](#성능-최적화-방안)
9. [변경 이력](#변경-이력)
5. [공통 UI 컴포넌트](#공통-ui-컴포넌트)
6. [공통 에러 메시지 표준](#공통-에러-메시지-표준)
7. [화면 간 전환 및 네비게이션](#화면-간-전환-및-네비게이션)
8. [반응형 설계 전략](#반응형-설계-전략)
9. [접근성 보장 방안](#접근성-보장-방안)
10. [성능 최적화 방안](#성능-최적화-방안)
11. [변경 이력](#변경-이력)
---
@ -200,8 +202,8 @@ graph TD
#### 에러 처리
- **인증 실패**: "사번 또는 비밀번호가 올바르지 않습니다." (보안상 구체적 정보 제공 X)
- **계정 잠금**: "보안을 위해 계정이 일시적으로 잠겼습니다. 관리자에게 문의하세요."
- **네트워크 오류**: "네트워크 연결을 확인해주세요."
- **서버 오류**: "일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요."
- **네트워크 오류**: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조
- **서버 오류**: [공통 에러 메시지 - 서버 오류](#서버-오류) 참조
---
@ -311,27 +313,11 @@ graph TD
- 클릭 시: 회의록 상세 화면으로 이동 (읽기 전용)
- 빈 상태: "공유받은 회의록이 없습니다"
- **하단 네비게이션** (Fixed, 하단, 모바일 전용)
- 홈 (active), 회의록, Todo (3개 항목)
- 각 항목: 이모지 아이콘 + 레이블
- 프로필 탭 제거됨
**Mobile (320px~768px)**
- **하단 네비게이션**: [Mobile 하단 네비게이션](#mobile-하단-네비게이션-320px768px) 참조 (홈 활성)
**Tablet/Desktop (768px+)**
- **왼쪽 사이드바** (Fixed, 240px)
- **로고 영역**
- 민트 그린 아이콘 (M)
- "회의록 서비스" 텍스트
- **메인 메뉴** (세로 배치)
- 📊 대시보드 (active, 민트 그린 배경)
- 📋 회의 목록 → 12-회의록목록조회.html
- ✅ Todo 관리 → 09-Todo관리.html
- ⚙️ 설정 (준비중)
- **하단 사용자 정보**
- 아바타
- 사용자 이름
- 이메일 주소
- **좌측 사이드바**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조 (대시보드 활성)
- **메인 콘텐츠** (왼쪽 여백 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, 하단)
- 홈, 회의록 (active), Todo, 프로필
**Mobile (320px~768px)**
- **하단 네비게이션**: [Mobile 하단 네비게이션](#mobile-하단-네비게이션-320px768px) 참조 (회의록 활성)
**Tablet/Desktop (768px+)**
- **사이드바** (좌측, Fixed, 240px)
- 메인 메뉴
- 회의록 목록 (active)
- **좌측 사이드바**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조 (회의록 활성)
- **메인 콘텐츠** (중앙)
- 필터 및 정렬 (상단, 가로 배치)
@ -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)
- 홈 (대시보드)
- 회의록 (내 회의록 목록)
- Todo (Todo관리)
- 프로필 (설정 및 로그아웃)
- **Primary Navigation**: [Mobile 하단 네비게이션](#mobile-하단-네비게이션-320px768px) 참조
- **Secondary Navigation**: 상단 헤더
- 뒤로가기 버튼 (화면별)
- 페이지 타이틀
- 액션 버튼 (저장, 메뉴 등)
- **Secondary Navigation**: [상단 헤더](#상단-헤더-공통) 참조
#### Tablet/Desktop (768px+)
- **Primary Navigation**: 좌측 사이드바 (Fixed)
- 서비스 로고
- 대시보드
- 내 회의록
- Todo
- 공유받은 회의록
- **Primary Navigation**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조
- 설정
- 프로필
@ -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 컴포넌트, 공통 에러 메시지 표준 섹션 추가 |
---