프로토타입 기반 네비게이션 사양 통일

- Mobile 하단 네비게이션: 4개 메뉴 항목으로 복원 (홈/회의록/Todo/프로필)
- 프로필 메뉴 추가: 사용자 정보, 개인 설정, 로그아웃 접근
- 프로토타입과 UI/UX 설계서 간 일관성 개선
- style-guide.md v1.2, uiux.md v1.4 업데이트

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
djeon
2025-10-22 09:53:43 +09:00
parent f3c382dfe0
commit 93ff4ddaca
2 changed files with 14 additions and 8 deletions
+6 -4
View File
@@ -412,9 +412,10 @@
```
**메뉴 항목**:
- 홈 (📊) → 대시보드
- 회의록 (📋) → 회의록목록
- 홈 (🏠) → 대시보드
- 회의록 (📋) → 회의록목록조회
- Todo (✅) → Todo관리
- 프로필 (👤) → 사용자 프로필 및 설정
### 사이드바 네비게이션 (Desktop)
```css
@@ -1181,9 +1182,10 @@
| 버전 | 날짜 | 작성자 | 변경 내용 |
|------|------|--------|----------|
| 1.0 | 2025-10-21 | 최유진 | 최초 작성 - reference/sampleimg 샘플 이미지 기반 스타일 가이드 작성 |
| 1.0.1 | 2025-10-21 | 이미준 | 네비게이션 간소화 및 인터랙션 개선<br>- 설정 메뉴 제거 (사이드바, 하단 네비게이션, 메뉴 모달)<br>- 로그아웃 기능은 프로필 영역으로 통합<br>- Todo 항목 클릭 시 회의록 상세 화면으로 이동하는 인터랙션 추가<br>- 네비게이션 메뉴 항목 간소화: 대시보드, 회의 목록, Todo 관리 (3개 항목으로 축소) |
| 1.1 | 2025-10-21 | 이미준 | 반응형 네비게이션 및 2열 레이아웃 패턴 추가<br>- **반응형 네비게이션 전략**: Mobile (하단 네비게이션), Desktop (왼쪽 사이드바 240px)<br>- **사이드바 네비게이션 (Desktop)**: 로고 영역, 메뉴 항목 (대시보드/회의 목록/Todo 관리), 사용자 정보 영역<br>- **하단 네비게이션 (Mobile)**: 홈/회의록/Todo (3개 메뉴, 프로필 제거)<br>- **2열 레이아웃 패턴**: 회의 진행 화면용 (왼쪽 65% 에디터, 오른쪽 35% 탭 패널)<br>- **탭 네비게이션 사용 예시**: 회의록 상세 (2개 탭), 회의 진행 (4개 탭) |
| 1.0.1 | 2025-10-21 | 이미준 | 네비게이션 간소화 및 인터랙션 개선<br>- 설정 메뉴를 프로필 메뉴로 통합 (사이드바, 하단 네비게이션)<br>- 로그아웃 및 개인 설정 기능은 프로필 영역에서 접근<br>- Todo 항목 클릭 시 회의록 상세 화면으로 이동하는 인터랙션 추가<br>- 네비게이션 메뉴 항목: 대시보드, 회의 목록, Todo 관리, 프로필 (4개 항목) |
| 1.1 | 2025-10-21 | 이미준 | 반응형 네비게이션 및 2열 레이아웃 패턴 추가<br>- **반응형 네비게이션 전략**: Mobile (하단 네비게이션), Desktop (왼쪽 사이드바 240px)<br>- **사이드바 네비게이션 (Desktop)**: 로고 영역, 메뉴 항목 (대시보드/회의 목록/Todo 관리), 사용자 정보 영역<br>- **하단 네비게이션 (Mobile)**: 홈/회의록/Todo/프로필 (4개 메뉴)<br>- **2열 레이아웃 패턴**: 회의 진행 화면용 (왼쪽 65% 에디터, 오른쪽 35% 탭 패널)<br>- **탭 네비게이션 사용 예시**: 회의록 상세 (2개 탭), 회의 진행 (4개 탭) |
| 1.1.1 | 2025-10-21 | 도그냥 | 회의 진행 화면 개선<br>- **메모 기능 제거**: 하단 액션바에서 메모 버튼 제거 (일시정지, 회의종료만 유지)<br>- **AI 제안 적용 기능 개선**:<br> - 논의사항 제안: "논의사항에 적용" 버튼으로 논의사항 섹션에 직접 추가<br> - 결정사항 제안: "결정사항에 적용" 버튼으로 결정사항 섹션에 직접 추가<br> - 액션아이템 제안: "액션아이템에 적용" 버튼으로 중복 제거 후 액션아이템 섹션에 추가<br> - 적용 시 해당 섹션 탭으로 자동 이동 및 성공 토스트 표시 |
| 1.1.2 | 2025-10-21 | 도그냥 | 우측 사이드바 탭 디자인 개선 (gappa 프로토타입 기반)<br>- **AI 제안 카드**: 회색 배경(#F5F5F5), 민트 그린 점선 테두리, 헤더 (✨/📋 아이콘 + 제목), 본문, 액션 버튼<br>- **용어 사전 카드**:<br> - 흰색 배경, 회색 실선 테두리<br> - 하이라이트 카드: 민트 그린 연한 배경(#E8F9F3), 민트 그린 테두리 (현재 회의에서 언급된 용어)<br> - 용어명 + 카테고리 배지 + 언급 아이콘 (💬)<br> - 하단 컨텍스트: "회의에서 N회 언급됨" 또는 "관련 회의록에서 언급됨"<br> - 호버 시: 민트 그린 테두리 + 그림자<br>- **관련 회의록 카드**: 회색 배경(#F5F5F5), 회색 점선 테두리, 제목 + 메타정보 (날짜, 관련도) + 요약 텍스트 |
| 1.1.3 | 2025-10-21 | 도그냥 | 용어 사전 및 관련 회의록 탭 디자인 통일성 개선<br>- **용어 사전 카드 디자인 개선**:<br> - 기본 상태: 민트 배경에서 화이트 배경 + 회색 테두리로 변경<br> - 하이라이트 상태: 민트 연한 배경 + 민트 테두리 (현재 회의 언급 용어만)<br> - 용어명: 16px Semibold<br> - 배지: 민트 연한 배경, 테두리 제거<br> - 언급 아이콘: 14px<br> - 컨텍스트: 상단 회색 구분선, 11px<br> - 호버: 민트 테두리 + 그림자<br>- **관련 회의록 카드 타이틀 강조**:<br> - 제목 폰트: Semibold → Bold (16px)<br> - 호버 시: 더 진한 회색 배경<br>- **사이드바 패널 타이틀 통일**:<br> - h3: 14px Bold (섹션 타이틀)<br> - h4: 14px Semibold (서브 타이틀) |
| 1.1.4 | 2025-10-21 | 도그냥 | 우측 사이드바 3개 탭 (AI제안, 용어사전, 관련회의록) 디자인 통일성 개선<br>- **공통 디자인 원칙 수립**: 모든 카드가 일관된 디자인 시스템을 따르도록 개선<br> - 배경: `#FAFAFA` (연한 회색)<br> - 테두리: `1px dashed #D0D0D0` (회색 점선)<br> - 타이틀: 16px Bold, 민트 그린 (`var(--primary)`)<br> - 본문: 14px, gray-700<br> - 호버 상태: 진한 회색 배경 (#F0F0F0) + 민트 그린 테두리<br>- **AI 제안 카드**: 헤더 폰트 Bold (16px)<br>- **용어 사전 카드**: 배경 회색(#FAFAFA), 점선 테두리, 타이틀 민트 그린, 컨텍스트 구분선 점선으로 변경<br>- **관련 회의록 카드**: 타이틀 민트 그린으로 변경, 호버 시 민트 테두리 추가<br>- **통일성 체크리스트** 추가: 9가지 디자인 규칙 명시 |
| 1.2 | 2025-10-22 | 이미준 | 프로토타입 기반 스타일 가이드 업데이트<br>- **하단 네비게이션 복원**: 4개 메뉴 (홈/회의록/Todo/프로필) - 프로토타입 구현 기준 반영<br>- **프로필 메뉴 기능**: 사용자 정보, 개인 설정, 로그아웃 접근<br>- **일관성 개선**: 프로토타입과 스타일 가이드 통일 |