mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 17:16:25 +00:00
회의록별 대시보드 기능 추가
- 유저스토리 추가: UFR-MEET-070 [회의록대시보드]
- 핵심내용, 결정사항, Todo 진행상황, 참고자료 4개 섹션 정의
- AI, RAG, Todo 서비스 연동 명시
- 복잡도: M/21
- UI/UX 설계서 작성 (design/uiux/uiux.md)
- 회의록별 대시보드 화면 구조 상세 설계
- 5개 주요 영역: Header, 핵심내용, 결정사항, Todo 진행상황, 참고자료
- 스타일 시스템 정의 (색상, 타이포그래피, 간격, 반응형)
- WCAG 2.1 Level AA 접근성 가이드라인
- 인터랙션 및 데이터 요구사항 명세
- 에러 처리 및 성능 최적화 방안
- API 설계서 작성 (design/backend/api/meeting-dashboard-api.md)
- 5개 주요 엔드포인트 정의
- 대시보드 전체 조회
- 핵심내용 조회
- 결정사항 조회 (페이지네이션)
- Todo 진행상황 조회 (필터링)
- 참고자료 조회 (타입별 필터, 페이지네이션)
- 데이터 모델 정의 (TypeScript Interface)
- Redis 캐싱 전략 (섹션별 TTL 설정)
- 성능 최적화 (병렬 처리, 선택적 로딩, 인덱싱)
- 보안 (JWT 인증, Rate Limiting)
- 에러 코드 및 테스트 시나리오
차별화 포인트:
- 회의 결과를 한눈에 파악할 수 있는 통합 뷰
- Todo 진행상황 실시간 업데이트 (WebSocket)
- 관련 회의록 및 업무 이력 자동 연결 (RAG)
- Mobile First 반응형 설계
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
hiondal
parent
d3c8b57116
commit
27e8c12eaf
715
design/backend/api/meeting-dashboard-api.md
Normal file
715
design/backend/api/meeting-dashboard-api.md
Normal file
@ -0,0 +1,715 @@
|
|||||||
|
# 회의록별 대시보드 API 설계서
|
||||||
|
|
||||||
|
## 개요
|
||||||
|
|
||||||
|
### 목적
|
||||||
|
회의록이 확정된 후 회의 결과를 한눈에 파악할 수 있는 대시보드 데이터를 제공하는 API
|
||||||
|
|
||||||
|
### 버전
|
||||||
|
- API Version: v1.0
|
||||||
|
- 작성일: 2024-01-15
|
||||||
|
- 작성자: 이준호 (Backend Developer)
|
||||||
|
|
||||||
|
### 관련 유저스토리
|
||||||
|
- **UFR-MEET-070**: [회의록대시보드] 회의록 작성자로서 | 나는, 회의 결과를 한눈에 파악하기 위해 | 회의록별 대시보드를 통해 핵심 정보를 조회하고 싶다.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## API 엔드포인트
|
||||||
|
|
||||||
|
### 1. 대시보드 전체 데이터 조회
|
||||||
|
|
||||||
|
#### 요청
|
||||||
|
|
||||||
|
```http
|
||||||
|
GET /api/v1/meetings/{meeting_id}/dashboard
|
||||||
|
```
|
||||||
|
|
||||||
|
**Path Parameters**
|
||||||
|
|
||||||
|
| 이름 | 타입 | 필수 | 설명 |
|
||||||
|
|------|------|------|------|
|
||||||
|
| meeting_id | string (UUID) | Y | 회의 ID |
|
||||||
|
|
||||||
|
**Query Parameters**
|
||||||
|
|
||||||
|
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|
||||||
|
|------|------|------|--------|------|
|
||||||
|
| include | string[] | N | all | 포함할 섹션 (key_points, decisions, todos, references) |
|
||||||
|
| todo_status | string | N | all | Todo 필터 (all, not_started, in_progress, completed) |
|
||||||
|
|
||||||
|
**Headers**
|
||||||
|
|
||||||
|
```http
|
||||||
|
Authorization: Bearer {access_token}
|
||||||
|
Content-Type: application/json
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 응답
|
||||||
|
|
||||||
|
**Success (200 OK)**
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"meeting_id": "uuid-1234",
|
||||||
|
"meeting_title": "2024 Q4 마케팅 전략 회의",
|
||||||
|
"meeting_date": "2024-01-15T14:00:00Z",
|
||||||
|
"location": "본사 대회의실",
|
||||||
|
"participants_count": 5,
|
||||||
|
"key_points": {
|
||||||
|
"points": [
|
||||||
|
{
|
||||||
|
"id": "kp-001",
|
||||||
|
"order": 1,
|
||||||
|
"content": "Q4 마케팅 예산을 전년 대비 30% 증액하여 디지털 채널 확대에 집중하기로 결정",
|
||||||
|
"meeting_section_id": "section-123",
|
||||||
|
"timestamp": "2024-01-15T14:25:00Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "kp-002",
|
||||||
|
"order": 2,
|
||||||
|
"content": "신규 인플루언서 마케팅 캠페인을 2월부터 시작하며, 타겟 연령층을 20-30대로 설정",
|
||||||
|
"meeting_section_id": "section-124",
|
||||||
|
"timestamp": "2024-01-15T14:35:00Z"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
{
|
||||||
|
"tag": "#디지털마케팅",
|
||||||
|
"count": 15
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tag": "#예산증액",
|
||||||
|
"count": 8
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"statistics": {
|
||||||
|
"participants_count": 5,
|
||||||
|
"duration_minutes": 90,
|
||||||
|
"speech_count": 32,
|
||||||
|
"agenda_count": 8
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"decisions": {
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"id": "decision-001",
|
||||||
|
"content": "Q4 마케팅 예산 30% 증액 승인 (총 3억 → 3.9억)",
|
||||||
|
"decider": {
|
||||||
|
"user_id": "user-001",
|
||||||
|
"name": "김민준",
|
||||||
|
"position": "마케팅 본부장"
|
||||||
|
},
|
||||||
|
"decided_at": "2024-01-15T14:25:00Z",
|
||||||
|
"background": "디지털 채널 성과가 예상을 상회하며, 경쟁사 대비 투자 비중이 낮아 시장 점유율 확대를 위해 예산 증액 필요",
|
||||||
|
"meeting_section_id": "section-123",
|
||||||
|
"related_todo_ids": ["todo-001", "todo-002"]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"total_count": 3
|
||||||
|
},
|
||||||
|
"todos": {
|
||||||
|
"summary": {
|
||||||
|
"total": 12,
|
||||||
|
"not_started": 3,
|
||||||
|
"in_progress": 6,
|
||||||
|
"completed": 3
|
||||||
|
},
|
||||||
|
"groups": [
|
||||||
|
{
|
||||||
|
"assignee": {
|
||||||
|
"user_id": "user-002",
|
||||||
|
"name": "박서연",
|
||||||
|
"position": "디지털 마케팅 팀장"
|
||||||
|
},
|
||||||
|
"todos": [
|
||||||
|
{
|
||||||
|
"todo_id": "todo-001",
|
||||||
|
"title": "인플루언서 후보 리스트 작성 및 제안서 준비",
|
||||||
|
"progress": 75,
|
||||||
|
"status": "in_progress",
|
||||||
|
"due_date": "2024-01-20T23:59:59Z",
|
||||||
|
"priority": "high",
|
||||||
|
"meeting_section_id": "section-124",
|
||||||
|
"last_updated_at": "2024-01-16T10:30:00Z"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"total_count": 4
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"references": {
|
||||||
|
"related_meetings": {
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"meeting_id": "meeting-456",
|
||||||
|
"title": "2024 Q3 마케팅 전략 회의",
|
||||||
|
"date": "2023-12-20T14:00:00Z",
|
||||||
|
"author": {
|
||||||
|
"user_id": "user-001",
|
||||||
|
"name": "김민준"
|
||||||
|
},
|
||||||
|
"relevance_score": 92,
|
||||||
|
"summary": "이전 분기 마케팅 전략 회의로, 디지털 채널 투자 확대 방향성이 처음 논의되었으며, 예산 증액 근거 자료로 활용 가능"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"total_count": 3
|
||||||
|
},
|
||||||
|
"project_documents": {
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"document_id": "doc-789",
|
||||||
|
"type": "project",
|
||||||
|
"title": "Q4 디지털 마케팅 프로젝트 기획서",
|
||||||
|
"created_at": "2024-01-10T09:00:00Z",
|
||||||
|
"author": {
|
||||||
|
"user_id": "user-002",
|
||||||
|
"name": "박서연"
|
||||||
|
},
|
||||||
|
"relevance_score": 88,
|
||||||
|
"summary": "Q4 디지털 채널 확대 계획 및 예산 배분 전략이 상세히 기술되어 있음"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"total_count": 5
|
||||||
|
},
|
||||||
|
"issues": {
|
||||||
|
"items": [],
|
||||||
|
"total_count": 0
|
||||||
|
},
|
||||||
|
"wiki_pages": {
|
||||||
|
"items": [],
|
||||||
|
"total_count": 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"generated_at": "2024-01-16T10:00:00Z"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Error Responses**
|
||||||
|
|
||||||
|
```json
|
||||||
|
// 401 Unauthorized
|
||||||
|
{
|
||||||
|
"error": {
|
||||||
|
"code": "UNAUTHORIZED",
|
||||||
|
"message": "인증이 필요합니다."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 403 Forbidden
|
||||||
|
{
|
||||||
|
"error": {
|
||||||
|
"code": "FORBIDDEN",
|
||||||
|
"message": "이 회의록에 접근 권한이 없습니다."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 404 Not Found
|
||||||
|
{
|
||||||
|
"error": {
|
||||||
|
"code": "MEETING_NOT_FOUND",
|
||||||
|
"message": "회의를 찾을 수 없습니다."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 500 Internal Server Error
|
||||||
|
{
|
||||||
|
"error": {
|
||||||
|
"code": "INTERNAL_SERVER_ERROR",
|
||||||
|
"message": "서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. 핵심내용 조회
|
||||||
|
|
||||||
|
#### 요청
|
||||||
|
|
||||||
|
```http
|
||||||
|
GET /api/v1/meetings/{meeting_id}/dashboard/key-points
|
||||||
|
```
|
||||||
|
|
||||||
|
**Path Parameters**
|
||||||
|
|
||||||
|
| 이름 | 타입 | 필수 | 설명 |
|
||||||
|
|------|------|------|------|
|
||||||
|
| meeting_id | string (UUID) | Y | 회의 ID |
|
||||||
|
|
||||||
|
#### 응답
|
||||||
|
|
||||||
|
**Success (200 OK)**
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"meeting_id": "uuid-1234",
|
||||||
|
"points": [
|
||||||
|
{
|
||||||
|
"id": "kp-001",
|
||||||
|
"order": 1,
|
||||||
|
"content": "Q4 마케팅 예산을 전년 대비 30% 증액하여 디지털 채널 확대에 집중하기로 결정",
|
||||||
|
"meeting_section_id": "section-123",
|
||||||
|
"timestamp": "2024-01-15T14:25:00Z"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
{
|
||||||
|
"tag": "#디지털마케팅",
|
||||||
|
"count": 15
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"statistics": {
|
||||||
|
"participants_count": 5,
|
||||||
|
"duration_minutes": 90,
|
||||||
|
"speech_count": 32,
|
||||||
|
"agenda_count": 8
|
||||||
|
},
|
||||||
|
"generated_at": "2024-01-16T10:00:00Z"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. 결정사항 조회
|
||||||
|
|
||||||
|
#### 요청
|
||||||
|
|
||||||
|
```http
|
||||||
|
GET /api/v1/meetings/{meeting_id}/dashboard/decisions
|
||||||
|
```
|
||||||
|
|
||||||
|
**Path Parameters**
|
||||||
|
|
||||||
|
| 이름 | 타입 | 필수 | 설명 |
|
||||||
|
|------|------|------|------|
|
||||||
|
| meeting_id | string (UUID) | Y | 회의 ID |
|
||||||
|
|
||||||
|
**Query Parameters**
|
||||||
|
|
||||||
|
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|
||||||
|
|------|------|------|--------|------|
|
||||||
|
| page | integer | N | 1 | 페이지 번호 |
|
||||||
|
| size | integer | N | 10 | 페이지 크기 (최대 50) |
|
||||||
|
|
||||||
|
#### 응답
|
||||||
|
|
||||||
|
**Success (200 OK)**
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"meeting_id": "uuid-1234",
|
||||||
|
"decisions": {
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"id": "decision-001",
|
||||||
|
"content": "Q4 마케팅 예산 30% 증액 승인 (총 3억 → 3.9억)",
|
||||||
|
"decider": {
|
||||||
|
"user_id": "user-001",
|
||||||
|
"name": "김민준",
|
||||||
|
"position": "마케팅 본부장"
|
||||||
|
},
|
||||||
|
"decided_at": "2024-01-15T14:25:00Z",
|
||||||
|
"background": "디지털 채널 성과가 예상을 상회하며...",
|
||||||
|
"meeting_section_id": "section-123",
|
||||||
|
"related_todo_ids": ["todo-001", "todo-002"]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"pagination": {
|
||||||
|
"current_page": 1,
|
||||||
|
"total_pages": 1,
|
||||||
|
"total_items": 3,
|
||||||
|
"page_size": 10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"generated_at": "2024-01-16T10:00:00Z"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. Todo 진행상황 조회
|
||||||
|
|
||||||
|
#### 요청
|
||||||
|
|
||||||
|
```http
|
||||||
|
GET /api/v1/meetings/{meeting_id}/dashboard/todos
|
||||||
|
```
|
||||||
|
|
||||||
|
**Path Parameters**
|
||||||
|
|
||||||
|
| 이름 | 타입 | 필수 | 설명 |
|
||||||
|
|------|------|------|------|
|
||||||
|
| meeting_id | string (UUID) | Y | 회의 ID |
|
||||||
|
|
||||||
|
**Query Parameters**
|
||||||
|
|
||||||
|
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|
||||||
|
|------|------|------|--------|------|
|
||||||
|
| status | string | N | all | Todo 상태 필터 (all, not_started, in_progress, completed) |
|
||||||
|
| assignee_id | string (UUID) | N | - | 담당자 ID 필터 |
|
||||||
|
|
||||||
|
#### 응답
|
||||||
|
|
||||||
|
**Success (200 OK)**
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"meeting_id": "uuid-1234",
|
||||||
|
"summary": {
|
||||||
|
"total": 12,
|
||||||
|
"not_started": 3,
|
||||||
|
"in_progress": 6,
|
||||||
|
"completed": 3
|
||||||
|
},
|
||||||
|
"groups": [
|
||||||
|
{
|
||||||
|
"assignee": {
|
||||||
|
"user_id": "user-002",
|
||||||
|
"name": "박서연",
|
||||||
|
"position": "디지털 마케팅 팀장"
|
||||||
|
},
|
||||||
|
"todos": [
|
||||||
|
{
|
||||||
|
"todo_id": "todo-001",
|
||||||
|
"title": "인플루언서 후보 리스트 작성 및 제안서 준비",
|
||||||
|
"progress": 75,
|
||||||
|
"status": "in_progress",
|
||||||
|
"due_date": "2024-01-20T23:59:59Z",
|
||||||
|
"priority": "high",
|
||||||
|
"meeting_section_id": "section-124",
|
||||||
|
"last_updated_at": "2024-01-16T10:30:00Z"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"total_count": 4
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"generated_at": "2024-01-16T10:00:00Z"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 5. 참고자료 조회
|
||||||
|
|
||||||
|
#### 요청
|
||||||
|
|
||||||
|
```http
|
||||||
|
GET /api/v1/meetings/{meeting_id}/dashboard/references
|
||||||
|
```
|
||||||
|
|
||||||
|
**Path Parameters**
|
||||||
|
|
||||||
|
| 이름 | 타입 | 필수 | 설명 |
|
||||||
|
|------|------|------|------|
|
||||||
|
| meeting_id | string (UUID) | Y | 회의 ID |
|
||||||
|
|
||||||
|
**Query Parameters**
|
||||||
|
|
||||||
|
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|
||||||
|
|------|------|------|--------|------|
|
||||||
|
| type | string | N | all | 참고자료 타입 (all, meetings, documents, issues, wiki) |
|
||||||
|
| page | integer | N | 1 | 페이지 번호 |
|
||||||
|
| size | integer | N | 5 | 페이지 크기 (최대 20) |
|
||||||
|
|
||||||
|
#### 응답
|
||||||
|
|
||||||
|
**Success (200 OK)**
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"meeting_id": "uuid-1234",
|
||||||
|
"type": "all",
|
||||||
|
"related_meetings": {
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"meeting_id": "meeting-456",
|
||||||
|
"title": "2024 Q3 마케팅 전략 회의",
|
||||||
|
"date": "2023-12-20T14:00:00Z",
|
||||||
|
"author": {
|
||||||
|
"user_id": "user-001",
|
||||||
|
"name": "김민준"
|
||||||
|
},
|
||||||
|
"relevance_score": 92,
|
||||||
|
"summary": "이전 분기 마케팅 전략 회의로..."
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"pagination": {
|
||||||
|
"current_page": 1,
|
||||||
|
"total_pages": 1,
|
||||||
|
"total_items": 3,
|
||||||
|
"page_size": 5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"project_documents": {
|
||||||
|
"items": [],
|
||||||
|
"pagination": {
|
||||||
|
"current_page": 1,
|
||||||
|
"total_pages": 0,
|
||||||
|
"total_items": 0,
|
||||||
|
"page_size": 5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"issues": {
|
||||||
|
"items": [],
|
||||||
|
"pagination": {
|
||||||
|
"current_page": 1,
|
||||||
|
"total_pages": 0,
|
||||||
|
"total_items": 0,
|
||||||
|
"page_size": 5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"wiki_pages": {
|
||||||
|
"items": [],
|
||||||
|
"pagination": {
|
||||||
|
"current_page": 1,
|
||||||
|
"total_pages": 0,
|
||||||
|
"total_items": 0,
|
||||||
|
"page_size": 5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"generated_at": "2024-01-16T10:00:00Z"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 데이터 모델
|
||||||
|
|
||||||
|
### KeyPoint
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface KeyPoint {
|
||||||
|
id: string; // 핵심 포인트 ID
|
||||||
|
order: number; // 순서 (1, 2, 3...)
|
||||||
|
content: string; // 핵심 내용 텍스트
|
||||||
|
meeting_section_id: string; // 회의록 섹션 ID (링크용)
|
||||||
|
timestamp: string; // ISO 8601 형식 (언급 시간)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Keyword
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface Keyword {
|
||||||
|
tag: string; // 키워드 태그 (#디지털마케팅)
|
||||||
|
count: number; // 언급 횟수
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Statistics
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface Statistics {
|
||||||
|
participants_count: number; // 참석자 수
|
||||||
|
duration_minutes: number; // 회의 시간 (분)
|
||||||
|
speech_count: number; // 발언 횟수
|
||||||
|
agenda_count: number; // 주요 의제 수
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Decision
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface Decision {
|
||||||
|
id: string; // 결정사항 ID
|
||||||
|
content: string; // 결정 내용
|
||||||
|
decider: User; // 결정자 정보
|
||||||
|
decided_at: string; // ISO 8601 형식 (결정 시간)
|
||||||
|
background: string; // 결정 근거/배경
|
||||||
|
meeting_section_id: string; // 회의록 섹션 ID
|
||||||
|
related_todo_ids: string[]; // 관련 Todo ID 배열
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### User
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface User {
|
||||||
|
user_id: string; // 사용자 ID
|
||||||
|
name: string; // 이름
|
||||||
|
position?: string; // 직책 (선택)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### TodoSummary
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface TodoSummary {
|
||||||
|
total: number; // 전체 Todo 수
|
||||||
|
not_started: number; // 시작 전 수
|
||||||
|
in_progress: number; // 진행 중 수
|
||||||
|
completed: number; // 완료 수
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### TodoGroup
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface TodoGroup {
|
||||||
|
assignee: User; // 담당자 정보
|
||||||
|
todos: Todo[]; // Todo 배열
|
||||||
|
total_count: number; // 담당자의 전체 Todo 수
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Todo
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface Todo {
|
||||||
|
todo_id: string; // Todo ID
|
||||||
|
title: string; // Todo 제목
|
||||||
|
progress: number; // 진행률 (0-100)
|
||||||
|
status: string; // 상태 (not_started, in_progress, completed)
|
||||||
|
due_date: string; // ISO 8601 형식 (마감일)
|
||||||
|
priority: string; // 우선순위 (low, medium, high, urgent)
|
||||||
|
meeting_section_id: string; // 회의록 섹션 ID
|
||||||
|
last_updated_at: string; // ISO 8601 형식 (최종 업데이트 시간)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Reference
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface Reference {
|
||||||
|
id: string; // 참고자료 ID
|
||||||
|
type: string; // 타입 (meeting, document, issue, wiki)
|
||||||
|
title: string; // 제목
|
||||||
|
date?: string; // ISO 8601 형식 (날짜)
|
||||||
|
created_at?: string; // ISO 8601 형식 (생성일)
|
||||||
|
author: User; // 작성자
|
||||||
|
relevance_score: number; // 관련도 점수 (0-100)
|
||||||
|
summary: string; // 요약 (100자 이내)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 캐싱 전략
|
||||||
|
|
||||||
|
### Redis 캐싱
|
||||||
|
|
||||||
|
**대시보드 전체 데이터**
|
||||||
|
- Key: `dashboard:meeting:{meeting_id}`
|
||||||
|
- TTL: 30분
|
||||||
|
- 캐시 무효화: 회의록 수정, Todo 업데이트 시
|
||||||
|
|
||||||
|
**핵심내용**
|
||||||
|
- Key: `dashboard:keypoints:{meeting_id}`
|
||||||
|
- TTL: 1시간
|
||||||
|
- 캐시 무효화: 회의록 수정 시
|
||||||
|
|
||||||
|
**Todo 진행상황**
|
||||||
|
- Key: `dashboard:todos:{meeting_id}`
|
||||||
|
- TTL: 5분 (실시간 업데이트)
|
||||||
|
- 캐시 무효화: Todo 상태 변경 시
|
||||||
|
|
||||||
|
**참고자료**
|
||||||
|
- Key: `dashboard:references:{meeting_id}:{type}`
|
||||||
|
- TTL: 24시간
|
||||||
|
- 캐시 무효화: 매일 자동 업데이트
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 성능 최적화
|
||||||
|
|
||||||
|
### 응답 시간 목표
|
||||||
|
|
||||||
|
- 대시보드 전체 조회: < 500ms
|
||||||
|
- 개별 섹션 조회: < 200ms
|
||||||
|
|
||||||
|
### 최적화 전략
|
||||||
|
|
||||||
|
1. **병렬 처리**
|
||||||
|
- 각 섹션(핵심내용, 결정사항, Todo, 참고자료)을 병렬로 조회
|
||||||
|
- Promise.all 활용
|
||||||
|
|
||||||
|
2. **데이터 선택적 로딩**
|
||||||
|
- `include` 파라미터로 필요한 섹션만 조회
|
||||||
|
- 프론트엔드에서 탭 전환 시 필요한 데이터만 요청
|
||||||
|
|
||||||
|
3. **페이지네이션**
|
||||||
|
- 결정사항, 참고자료에 페이지네이션 적용
|
||||||
|
- 대량 데이터 조회 시 성능 저하 방지
|
||||||
|
|
||||||
|
4. **인덱싱**
|
||||||
|
- meeting_id, user_id, status 등 주요 필드에 인덱스 생성
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 보안
|
||||||
|
|
||||||
|
### 인증 및 권한
|
||||||
|
|
||||||
|
**인증 방식**
|
||||||
|
- JWT Bearer Token 인증
|
||||||
|
|
||||||
|
**권한 검증**
|
||||||
|
- 회의 참석자 또는 조직 멤버만 조회 가능
|
||||||
|
- 회의록 공유 권한 설정 준수
|
||||||
|
|
||||||
|
### Rate Limiting
|
||||||
|
|
||||||
|
```
|
||||||
|
- 사용자당: 100 requests/minute
|
||||||
|
- IP당: 200 requests/minute
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 에러 코드
|
||||||
|
|
||||||
|
| HTTP Status | Error Code | 설명 |
|
||||||
|
|-------------|-----------|------|
|
||||||
|
| 400 | INVALID_PARAMETER | 잘못된 파라미터 |
|
||||||
|
| 401 | UNAUTHORIZED | 인증 필요 |
|
||||||
|
| 403 | FORBIDDEN | 권한 없음 |
|
||||||
|
| 404 | MEETING_NOT_FOUND | 회의를 찾을 수 없음 |
|
||||||
|
| 404 | DASHBOARD_NOT_GENERATED | 대시보드 미생성 (회의록 미확정) |
|
||||||
|
| 429 | RATE_LIMIT_EXCEEDED | 요청 한도 초과 |
|
||||||
|
| 500 | INTERNAL_SERVER_ERROR | 서버 오류 |
|
||||||
|
| 503 | SERVICE_UNAVAILABLE | 서비스 일시 중단 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 테스트 시나리오
|
||||||
|
|
||||||
|
### 1. 정상 케이스
|
||||||
|
|
||||||
|
**시나리오**: 회의록 확정 후 대시보드 조회
|
||||||
|
1. 회의록 확정
|
||||||
|
2. AI가 대시보드 데이터 생성 (핵심내용, 결정사항 추출)
|
||||||
|
3. `GET /api/v1/meetings/{meeting_id}/dashboard` 호출
|
||||||
|
4. 200 OK 응답 확인
|
||||||
|
5. 모든 섹션 데이터 포함 확인
|
||||||
|
|
||||||
|
### 2. 캐싱 테스트
|
||||||
|
|
||||||
|
**시나리오**: 동일 대시보드 연속 조회
|
||||||
|
1. 첫 번째 조회 (DB 조회)
|
||||||
|
2. 두 번째 조회 (캐시 조회)
|
||||||
|
3. 응답 시간 비교 (캐시 조회가 50% 이상 빠름)
|
||||||
|
|
||||||
|
### 3. 실시간 업데이트 테스트
|
||||||
|
|
||||||
|
**시나리오**: Todo 진행상황 실시간 반영
|
||||||
|
1. 대시보드 조회
|
||||||
|
2. Todo 진행률 업데이트 (75% → 100%)
|
||||||
|
3. 대시보드 재조회
|
||||||
|
4. 변경된 진행률 확인
|
||||||
|
|
||||||
|
### 4. 에러 케이스
|
||||||
|
|
||||||
|
**시나리오**: 권한 없는 사용자 접근
|
||||||
|
1. 다른 사용자 계정으로 로그인
|
||||||
|
2. 회의 ID로 대시보드 조회
|
||||||
|
3. 403 Forbidden 응답 확인
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 변경 이력
|
||||||
|
|
||||||
|
| 버전 | 날짜 | 작성자 | 변경 내용 |
|
||||||
|
|------|------|--------|-----------|
|
||||||
|
| 1.0 | 2024-01-15 | 이준호 | 회의록별 대시보드 API 초안 작성 |
|
||||||
|
|
||||||
662
design/uiux/uiux.md
Normal file
662
design/uiux/uiux.md
Normal file
@ -0,0 +1,662 @@
|
|||||||
|
# 회의록 서비스 UI/UX 설계서
|
||||||
|
|
||||||
|
## 목차
|
||||||
|
1. [개요](#개요)
|
||||||
|
2. [설계 원칙](#설계-원칙)
|
||||||
|
3. [회의록별 대시보드](#회의록별-대시보드)
|
||||||
|
4. [반응형 디자인 전략](#반응형-디자인-전략)
|
||||||
|
5. [접근성 가이드라인](#접근성-가이드라인)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 개요
|
||||||
|
|
||||||
|
### 프로젝트 정보
|
||||||
|
- **프로젝트명**: 회의록 작성 및 공유 개선 서비스
|
||||||
|
- **버전**: v1.0
|
||||||
|
- **작성일**: 2024-01-15
|
||||||
|
- **작성자**: 이미준 (서비스 기획자)
|
||||||
|
|
||||||
|
### 설계 목적
|
||||||
|
- 업무 지식이 없어도 누구나 쉽게 회의록을 작성하고 공유할 수 있는 서비스
|
||||||
|
- AI 기반 자동 회의록 작성 및 Todo 추출 기능 제공
|
||||||
|
- 관련 회의록 및 업무 이력과의 연결을 통한 맥락 기반 정보 제공
|
||||||
|
|
||||||
|
### 주요 차별화 포인트
|
||||||
|
1. **맥락 기반 용어 설명**: 관련 회의록과 업무이력을 바탕으로 실용적인 정보 제공
|
||||||
|
2. **강화된 Todo 연결**: Action item이 담당자의 Todo와 실시간으로 연결
|
||||||
|
3. **프롬프팅 기반 회의록 개선**: AI를 활용한 다양한 형식의 회의록 생성
|
||||||
|
4. **회의록별 대시보드**: 회의 결과를 한눈에 파악할 수 있는 통합 뷰
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 설계 원칙
|
||||||
|
|
||||||
|
### 1. Mobile First
|
||||||
|
- 모바일 화면을 우선 설계하고 태블릿/데스크톱으로 확장
|
||||||
|
- 모바일에서 핵심 기능이 모두 동작해야 함
|
||||||
|
- 터치 인터랙션 최적화
|
||||||
|
|
||||||
|
### 2. 사용자 중심 설계
|
||||||
|
- 업무 지식이 없어도 직관적으로 사용 가능
|
||||||
|
- 최소한의 클릭으로 주요 작업 완료
|
||||||
|
- 명확한 피드백 제공
|
||||||
|
|
||||||
|
### 3. 일관성
|
||||||
|
- 동일한 기능은 동일한 방식으로 동작
|
||||||
|
- 일관된 색상, 타이포그래피, 간격 시스템
|
||||||
|
- 플랫폼별 네이티브 패턴 준수
|
||||||
|
|
||||||
|
### 4. 접근성
|
||||||
|
- WCAG 2.1 Level AA 준수
|
||||||
|
- 키보드 네비게이션 지원
|
||||||
|
- 스크린 리더 호환성
|
||||||
|
|
||||||
|
### 5. 성능
|
||||||
|
- 초기 로딩 시간 3초 이내
|
||||||
|
- 인터랙션 반응 시간 100ms 이내
|
||||||
|
- 점진적 로딩을 통한 사용자 경험 개선
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 회의록별 대시보드
|
||||||
|
|
||||||
|
### 화면 개요
|
||||||
|
|
||||||
|
#### 목적
|
||||||
|
- 회의록이 확정된 후 회의 결과를 한눈에 파악할 수 있는 통합 뷰 제공
|
||||||
|
- 핵심 정보를 빠르게 확인하고 관련 자료로 이동할 수 있는 허브 역할
|
||||||
|
|
||||||
|
#### 진입 경로
|
||||||
|
1. 회의록 공유 화면에서 "대시보드" 탭 클릭
|
||||||
|
2. 전체 대시보드에서 특정 회의록 클릭 후 "대시보드" 탭 선택
|
||||||
|
|
||||||
|
#### 사용자 스토리
|
||||||
|
- 유저스토리 ID: **UFR-MEET-070**
|
||||||
|
- "회의록 작성자로서 | 나는, 회의 결과를 한눈에 파악하기 위해 | 회의록별 대시보드를 통해 핵심 정보를 조회하고 싶다."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 화면 구조
|
||||||
|
|
||||||
|
#### 1. Header 영역
|
||||||
|
|
||||||
|
**구성 요소**
|
||||||
|
- 뒤로가기 버튼: 회의록 본문으로 복귀
|
||||||
|
- 회의 제목: 큰 폰트로 강조 (H2)
|
||||||
|
- 회의 메타 정보
|
||||||
|
- 날짜/시간 (아이콘: 📅)
|
||||||
|
- 장소 (아이콘: 📍)
|
||||||
|
- 참석자 수 (아이콘: 👥)
|
||||||
|
- 탭 네비게이션
|
||||||
|
- 회의록 (기본 회의록 본문)
|
||||||
|
- 대시보드 (현재 화면)
|
||||||
|
- 타임라인 (시간순 발언 기록)
|
||||||
|
|
||||||
|
**레이아웃**
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ ← 회의록으로 돌아가기 │
|
||||||
|
│ │
|
||||||
|
│ 2024 Q4 마케팅 전략 회의 │
|
||||||
|
│ 📅 2024-01-15 14:00 │
|
||||||
|
│ 📍 본사 대회의실 👥 참석자 5명 │
|
||||||
|
│ │
|
||||||
|
│ [회의록] [대시보드] [타임라인] │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**스타일 가이드**
|
||||||
|
- 배경색: #FFFFFF
|
||||||
|
- 하단 경계선: 1px solid #E5E7EB
|
||||||
|
- 제목 폰트: 24px, Bold, #111827
|
||||||
|
- 메타 정보: 14px, Regular, #6B7280
|
||||||
|
- 탭 활성화: Primary Color (#00D9B1), 하단 2px 보더
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 2. 핵심내용 섹션
|
||||||
|
|
||||||
|
**구성 요소**
|
||||||
|
1. **섹션 헤더**
|
||||||
|
- 아이콘: 💡
|
||||||
|
- 제목: "핵심내용"
|
||||||
|
- 하단 경계선: 2px solid #F3F4F6
|
||||||
|
|
||||||
|
2. **핵심 포인트 리스트** (3-5개)
|
||||||
|
- 번호 배지 (1, 2, 3...)
|
||||||
|
- 핵심 내용 텍스트
|
||||||
|
- 좌측 Primary Color 보더 (3px)
|
||||||
|
|
||||||
|
3. **주요 키워드 태그**
|
||||||
|
- 해시태그 형식 (#디지털마케팅, #예산증액 등)
|
||||||
|
- 클릭 시 관련 섹션으로 이동 또는 관련 문서 검색
|
||||||
|
|
||||||
|
4. **회의 통계**
|
||||||
|
- 참석자 수
|
||||||
|
- 회의 시간
|
||||||
|
- 발언 횟수
|
||||||
|
- 주요 의제 수
|
||||||
|
|
||||||
|
**레이아웃**
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ 💡 핵심내용 │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ ┃ ① Q4 마케팅 예산을 전년 대비 │
|
||||||
|
│ ┃ 30% 증액하여 디지털 채널... │
|
||||||
|
│ ┃ │
|
||||||
|
│ ┃ ② 신규 인플루언서 마케팅 캠페인 │
|
||||||
|
│ ┃ 을 2월부터 시작하며... │
|
||||||
|
│ ┃ │
|
||||||
|
│ ┃ ③ 경쟁사 분석 결과를 바탕으로... │
|
||||||
|
│ │
|
||||||
|
│ #디지털마케팅 #예산증액 #인플루언서│
|
||||||
|
│ │
|
||||||
|
│ ┌──────┬──────┬──────┬──────┐ │
|
||||||
|
│ │ 5명 │ 90분 │ 32회 │ 8개 │ │
|
||||||
|
│ │참석자│회의 │발언 │주요 │ │
|
||||||
|
│ │ │시간 │횟수 │의제 │ │
|
||||||
|
│ └──────┴──────┴──────┴──────┘ │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**인터랙션**
|
||||||
|
- 핵심 포인트 클릭: 해당 내용이 언급된 회의록 위치로 이동
|
||||||
|
- 키워드 태그 클릭: 관련 회의록/문서 검색
|
||||||
|
- 통계 항목 클릭: 상세 분석 정보 표시 (모달)
|
||||||
|
|
||||||
|
**데이터 요구사항**
|
||||||
|
- AI 분석 결과 (UFR-AI-010)
|
||||||
|
- 핵심 포인트 텍스트 배열 (3-5개)
|
||||||
|
- 주요 키워드 배열
|
||||||
|
- 회의록 섹션 링크 정보
|
||||||
|
- 회의 통계 데이터
|
||||||
|
- 참석자 수
|
||||||
|
- 회의 시작/종료 시간
|
||||||
|
- 발언 횟수 (화자별)
|
||||||
|
- 의제 수
|
||||||
|
|
||||||
|
**에러 처리**
|
||||||
|
- AI 분석 실패 시: "핵심 내용을 분석하는 중입니다. 잠시만 기다려주세요." 메시지
|
||||||
|
- 데이터 로딩 실패 시: "데이터를 불러올 수 없습니다. 새로고침 해주세요." 메시지
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 3. 결정사항 섹션
|
||||||
|
|
||||||
|
**구성 요소**
|
||||||
|
1. **섹션 헤더**
|
||||||
|
- 아이콘: ✅
|
||||||
|
- 제목: "결정사항"
|
||||||
|
|
||||||
|
2. **결정사항 카드** (여러 개)
|
||||||
|
- 결정 내용 (Bold, 강조)
|
||||||
|
- 결정자 정보 (아이콘: 👤, 이름, 직책)
|
||||||
|
- 결정 시간 (아이콘: 🕐, HH:MM)
|
||||||
|
- 결정 근거/배경 (접을 수 있는 영역)
|
||||||
|
|
||||||
|
**레이아웃**
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ ✅ 결정사항 │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ ┌─────────────────────────────────┐ │
|
||||||
|
│ │ Q4 마케팅 예산 30% 증액 승인 │ │
|
||||||
|
│ │ (총 3억 → 3.9억) │ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ 👤 김민준 (마케팅 본부장) │ │
|
||||||
|
│ │ 🕐 14:25 │ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ ▼ 배경: 디지털 채널 성과가 │ │
|
||||||
|
│ │ 예상을 상회하며, 경쟁사... │ │
|
||||||
|
│ └─────────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────────────────────┐ │
|
||||||
|
│ │ 인플루언서 마케팅 캠페인 2월 │ │
|
||||||
|
│ │ 1일 론칭 결정 │ │
|
||||||
|
│ │ ... │ │
|
||||||
|
│ └─────────────────────────────────┘ │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**인터랙션**
|
||||||
|
- 결정사항 카드 클릭: 해당 결정이 논의된 회의록 위치로 이동
|
||||||
|
- 배경 영역 클릭: 상세 내용 펼치기/접기
|
||||||
|
- 결정자 이름 클릭: 해당 참석자의 발언 목록 보기
|
||||||
|
|
||||||
|
**데이터 요구사항**
|
||||||
|
- 결정사항 정보
|
||||||
|
- 결정 내용 텍스트
|
||||||
|
- 결정자 ID, 이름, 직책
|
||||||
|
- 결정 시간 (타임스탬프)
|
||||||
|
- 결정 근거/배경 텍스트
|
||||||
|
- 회의록 섹션 링크
|
||||||
|
|
||||||
|
**에러 처리**
|
||||||
|
- 결정사항 없음: "이 회의에서 결정된 사항이 없습니다."
|
||||||
|
- 데이터 로딩 실패: 재시도 버튼 제공
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 4. Todo 진행상황 섹션
|
||||||
|
|
||||||
|
**구성 요소**
|
||||||
|
1. **섹션 헤더**
|
||||||
|
- 아이콘: 📋
|
||||||
|
- 제목: "Todo 진행상황"
|
||||||
|
|
||||||
|
2. **필터 버튼**
|
||||||
|
- 전체 (개수)
|
||||||
|
- 시작 전 (개수)
|
||||||
|
- 진행 중 (개수)
|
||||||
|
- 완료 (개수)
|
||||||
|
|
||||||
|
3. **담당자별 Todo 그룹**
|
||||||
|
- 그룹 헤더
|
||||||
|
- 담당자 이름 (아이콘: 👤)
|
||||||
|
- Todo 개수 배지
|
||||||
|
- Todo 카드 (여러 개)
|
||||||
|
- Todo 제목
|
||||||
|
- 진행률 프로그레스 바 (0-100%)
|
||||||
|
- 마감일 (D-day 형식)
|
||||||
|
- 우선순위 배지
|
||||||
|
|
||||||
|
**레이아웃**
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ 📋 Todo 진행상황 │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ [전체 12] [시작 전 3] [진행 중 6] │
|
||||||
|
│ [완료 3] │
|
||||||
|
│ │
|
||||||
|
│ ┌─ 👤 박서연 (4개) ───────────────┐ │
|
||||||
|
│ │ ┌─────────────────────────────┐ │ │
|
||||||
|
│ │ │ 인플루언서 후보 리스트 작성 │ │ │
|
||||||
|
│ │ │ ████████░░ 75% D-5 [높음]│ │ │
|
||||||
|
│ │ └─────────────────────────────┘ │ │
|
||||||
|
│ │ ┌─────────────────────────────┐ │ │
|
||||||
|
│ │ │ 디지털 채널별 예산 배분... │ │ │
|
||||||
|
│ │ │ ████░░░░░░ 40% D-2 [긴급]│ │ │
|
||||||
|
│ │ └─────────────────────────────┘ │ │
|
||||||
|
│ └─────────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─ 👤 이준호 (3개) ───────────────┐ │
|
||||||
|
│ │ ... │ │
|
||||||
|
│ └─────────────────────────────────┘ │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**인터랙션**
|
||||||
|
- 필터 버튼 클릭: 해당 상태의 Todo만 표시
|
||||||
|
- Todo 카드 클릭: Todo 상세 정보 모달 표시 또는 Todo 관리 화면으로 이동
|
||||||
|
- 진행률 바 클릭: 진행률 업데이트 UI 표시
|
||||||
|
- 담당자 그룹 헤더 클릭: 그룹 접기/펼치기
|
||||||
|
|
||||||
|
**데이터 요구사항**
|
||||||
|
- Todo 목록 (UFR-TODO-010 연동)
|
||||||
|
- Todo ID
|
||||||
|
- 제목
|
||||||
|
- 담당자 ID, 이름
|
||||||
|
- 진행률 (0-100%)
|
||||||
|
- 상태 (시작 전/진행 중/완료)
|
||||||
|
- 마감일
|
||||||
|
- 우선순위 (낮음/보통/높음/긴급)
|
||||||
|
- 회의록 섹션 링크
|
||||||
|
|
||||||
|
**실시간 업데이트**
|
||||||
|
- WebSocket 연결을 통해 Todo 진행상황 실시간 반영 (UFR-TODO-020)
|
||||||
|
- 진행률 변경 시 프로그레스 바 애니메이션
|
||||||
|
- 상태 변경 시 해당 Todo 이동 애니메이션
|
||||||
|
|
||||||
|
**에러 처리**
|
||||||
|
- Todo 없음: "할당된 Todo가 없습니다."
|
||||||
|
- 데이터 로딩 실패: 재시도 버튼 제공
|
||||||
|
- 실시간 연결 끊김: "실시간 업데이트가 일시 중단되었습니다." 경고 표시
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 5. 참고자료 섹션
|
||||||
|
|
||||||
|
**구성 요소**
|
||||||
|
1. **섹션 헤더**
|
||||||
|
- 아이콘: 📚
|
||||||
|
- 제목: "참고자료"
|
||||||
|
|
||||||
|
2. **탭 네비게이션**
|
||||||
|
- 관련 회의록 (개수)
|
||||||
|
- 프로젝트 문서 (개수)
|
||||||
|
- 이슈 트래커 (개수)
|
||||||
|
- 위키 페이지 (개수)
|
||||||
|
|
||||||
|
3. **참고자료 카드** (여러 개)
|
||||||
|
- 문서 아이콘 (타입별 다른 아이콘)
|
||||||
|
- 문서 제목
|
||||||
|
- 메타 정보
|
||||||
|
- 작성일
|
||||||
|
- 작성자
|
||||||
|
- 관련도 점수 (%)
|
||||||
|
- 요약 내용 (2-3줄)
|
||||||
|
|
||||||
|
**레이아웃**
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ 📚 참고자료 │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ [관련 회의록 3] [프로젝트 문서 5] │
|
||||||
|
│ [이슈 트래커 2] [위키 페이지 4] │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────────────────────┐ │
|
||||||
|
│ │ 📄 2024 Q3 마케팅 전략 회의 │ │
|
||||||
|
│ │ 2023-12-20 • 김민준 • 92% │ │
|
||||||
|
│ │ 이전 분기 마케팅 전략 회의로, │ │
|
||||||
|
│ │ 디지털 채널 투자 확대 방향성이 │ │
|
||||||
|
│ │ 처음 논의되었으며... │ │
|
||||||
|
│ └─────────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────────────────────┐ │
|
||||||
|
│ │ 📄 인플루언서 마케팅 효과 분석 │ │
|
||||||
|
│ │ 2024-01-05 • 박서연 • 88% │ │
|
||||||
|
│ │ 인플루언서 마케팅 ROI 분석... │ │
|
||||||
|
│ └─────────────────────────────────┘ │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**인터랙션**
|
||||||
|
- 탭 클릭: 해당 타입의 참고자료만 표시
|
||||||
|
- 참고자료 카드 클릭: 해당 문서로 이동 (새 탭 또는 현재 탭)
|
||||||
|
- 관련도 점수 클릭: 관련도 계산 근거 표시 (툴팁)
|
||||||
|
|
||||||
|
**데이터 요구사항**
|
||||||
|
- 관련 회의록 (UFR-AI-040 연동)
|
||||||
|
- 회의록 ID
|
||||||
|
- 제목
|
||||||
|
- 날짜
|
||||||
|
- 참석자 (주 작성자)
|
||||||
|
- 관련도 점수 (0-100%)
|
||||||
|
- 요약 내용 (100자 이내)
|
||||||
|
|
||||||
|
- 업무 이력 (UFR-RAG-030 연동)
|
||||||
|
- 문서 ID
|
||||||
|
- 문서 타입 (프로젝트 문서/이슈/위키)
|
||||||
|
- 제목
|
||||||
|
- 작성일
|
||||||
|
- 작성자
|
||||||
|
- 관련도 점수
|
||||||
|
- 요약 내용
|
||||||
|
|
||||||
|
**에러 처리**
|
||||||
|
- 참고자료 없음: "관련 참고자료가 없습니다."
|
||||||
|
- 데이터 로딩 실패: 재시도 버튼 제공
|
||||||
|
- 문서 링크 오류: "문서를 불러올 수 없습니다." 메시지
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 스타일 시스템
|
||||||
|
|
||||||
|
#### 색상 팔레트
|
||||||
|
|
||||||
|
**Primary Color**
|
||||||
|
- Main: #00D9B1 (Turquoise)
|
||||||
|
- Light: rgba(0, 217, 177, 0.1)
|
||||||
|
- Dark: #00B794
|
||||||
|
|
||||||
|
**Secondary Color**
|
||||||
|
- Gray Scale
|
||||||
|
- 900: #111827
|
||||||
|
- 800: #1F2937
|
||||||
|
- 700: #374151
|
||||||
|
- 600: #6B7280
|
||||||
|
- 500: #9CA3AF
|
||||||
|
- 400: #D1D5DB
|
||||||
|
- 300: #E5E7EB
|
||||||
|
- 200: #F3F4F6
|
||||||
|
- 100: #F9FAFB
|
||||||
|
- 50: #FAFAFA
|
||||||
|
|
||||||
|
**Status Colors**
|
||||||
|
- Success: #10B981
|
||||||
|
- Warning: #F59E0B
|
||||||
|
- Error: #EF4444
|
||||||
|
- Info: #3B82F6
|
||||||
|
|
||||||
|
#### 타이포그래피
|
||||||
|
|
||||||
|
**폰트 패밀리**
|
||||||
|
- 기본: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
|
||||||
|
- 한글: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif
|
||||||
|
|
||||||
|
**폰트 크기**
|
||||||
|
- H1: 32px / 2rem (Bold)
|
||||||
|
- H2: 24px / 1.5rem (Bold)
|
||||||
|
- H3: 20px / 1.25rem (Semibold)
|
||||||
|
- H4: 18px / 1.125rem (Semibold)
|
||||||
|
- Body: 16px / 1rem (Regular)
|
||||||
|
- Body Small: 14px / 0.875rem (Regular)
|
||||||
|
- Caption: 12px / 0.75rem (Regular)
|
||||||
|
|
||||||
|
**폰트 굵기**
|
||||||
|
- Bold: 700
|
||||||
|
- Semibold: 600
|
||||||
|
- Medium: 500
|
||||||
|
- Regular: 400
|
||||||
|
|
||||||
|
**줄 높이**
|
||||||
|
- 제목: 1.2
|
||||||
|
- 본문: 1.6
|
||||||
|
|
||||||
|
#### 간격 시스템
|
||||||
|
|
||||||
|
```
|
||||||
|
spacing-1: 4px
|
||||||
|
spacing-2: 8px
|
||||||
|
spacing-3: 12px
|
||||||
|
spacing-4: 16px
|
||||||
|
spacing-5: 20px
|
||||||
|
spacing-6: 24px
|
||||||
|
spacing-8: 32px
|
||||||
|
spacing-10: 40px
|
||||||
|
spacing-12: 48px
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 경계선 반경
|
||||||
|
|
||||||
|
```
|
||||||
|
radius-sm: 4px
|
||||||
|
radius-md: 8px
|
||||||
|
radius-lg: 12px
|
||||||
|
radius-xl: 16px
|
||||||
|
radius-full: 9999px
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 그림자
|
||||||
|
|
||||||
|
```
|
||||||
|
shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05)
|
||||||
|
shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1)
|
||||||
|
shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 반응형 디자인 전략
|
||||||
|
|
||||||
|
### 브레이크포인트
|
||||||
|
|
||||||
|
```
|
||||||
|
Mobile: 0-767px (기본)
|
||||||
|
Tablet: 768-1023px
|
||||||
|
Desktop: 1024px+
|
||||||
|
```
|
||||||
|
|
||||||
|
### 모바일 (0-767px)
|
||||||
|
|
||||||
|
**레이아웃**
|
||||||
|
- 단일 컬럼 레이아웃
|
||||||
|
- 패딩: 16px (spacing-4)
|
||||||
|
- 섹션 간 간격: 24px (spacing-6)
|
||||||
|
|
||||||
|
**회의록별 대시보드 최적화**
|
||||||
|
- 통계 카드: 2x2 그리드
|
||||||
|
- Todo 그룹: 기본 펼침 상태, 스와이프로 접기/펼치기
|
||||||
|
- 참고자료 탭: 가로 스크롤 가능
|
||||||
|
|
||||||
|
**인터랙션**
|
||||||
|
- 터치 타겟 최소 크기: 44x44px
|
||||||
|
- 스와이프 제스처 지원
|
||||||
|
- 하단 고정 액션 버튼
|
||||||
|
|
||||||
|
### 태블릿 (768-1023px)
|
||||||
|
|
||||||
|
**레이아웃**
|
||||||
|
- 2컬럼 레이아웃 (일부 섹션)
|
||||||
|
- 패딩: 24px (spacing-6)
|
||||||
|
- 섹션 간 간격: 32px (spacing-8)
|
||||||
|
|
||||||
|
**회의록별 대시보드 최적화**
|
||||||
|
- 통계 카드: 4x1 그리드
|
||||||
|
- Todo 그룹: 사이드바에 요약, 메인 영역에 상세
|
||||||
|
- 참고자료: 2컬럼 그리드
|
||||||
|
|
||||||
|
### 데스크톱 (1024px+)
|
||||||
|
|
||||||
|
**레이아웃**
|
||||||
|
- 3컬럼 레이아웃 (대시보드 등)
|
||||||
|
- 최대 너비: 1200px (중앙 정렬)
|
||||||
|
- 패딩: 32px (spacing-8)
|
||||||
|
- 섹션 간 간격: 48px (spacing-12)
|
||||||
|
|
||||||
|
**회의록별 대시보드 최적화**
|
||||||
|
- 통계 카드: 4x1 그리드
|
||||||
|
- Todo 그룹: 좌우 분할 레이아웃 (리스트/상세)
|
||||||
|
- 참고자료: 3컬럼 그리드
|
||||||
|
- 호버 효과 강화
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 접근성 가이드라인
|
||||||
|
|
||||||
|
### WCAG 2.1 Level AA 준수
|
||||||
|
|
||||||
|
#### 1. 지각 가능성 (Perceivable)
|
||||||
|
|
||||||
|
**색상 대비**
|
||||||
|
- 일반 텍스트: 최소 4.5:1
|
||||||
|
- 큰 텍스트 (18px+ Bold, 24px+): 최소 3:1
|
||||||
|
- UI 컴포넌트: 최소 3:1
|
||||||
|
|
||||||
|
**대체 텍스트**
|
||||||
|
- 모든 의미 있는 이미지에 alt 속성 제공
|
||||||
|
- 아이콘에는 aria-label 또는 visually-hidden 텍스트 제공
|
||||||
|
|
||||||
|
**색상에만 의존하지 않기**
|
||||||
|
- 상태 표시 시 색상 + 아이콘/텍스트 병용
|
||||||
|
- 예: 에러 상태 = 빨간색 + ⚠️ 아이콘 + "오류" 텍스트
|
||||||
|
|
||||||
|
#### 2. 작동 가능성 (Operable)
|
||||||
|
|
||||||
|
**키보드 네비게이션**
|
||||||
|
- 모든 인터랙티브 요소에 키보드로 접근 가능
|
||||||
|
- Tab 키로 순차 이동
|
||||||
|
- Enter/Space 키로 활성화
|
||||||
|
- Esc 키로 모달/드롭다운 닫기
|
||||||
|
|
||||||
|
**포커스 표시**
|
||||||
|
- 포커스된 요소에 명확한 시각적 표시
|
||||||
|
- 포커스 아웃라인: 2px solid #3B82F6
|
||||||
|
|
||||||
|
**충분한 시간**
|
||||||
|
- 자동 타임아웃 시 경고 제공
|
||||||
|
- 시간 연장 옵션 제공
|
||||||
|
|
||||||
|
#### 3. 이해 가능성 (Understandable)
|
||||||
|
|
||||||
|
**명확한 레이블**
|
||||||
|
- 모든 폼 요소에 레이블 제공
|
||||||
|
- 플레이스홀더만으로 레이블 대체 금지
|
||||||
|
|
||||||
|
**에러 메시지**
|
||||||
|
- 명확하고 구체적인 에러 메시지
|
||||||
|
- 해결 방법 제공
|
||||||
|
|
||||||
|
**일관된 네비게이션**
|
||||||
|
- 동일한 기능은 동일한 위치에 배치
|
||||||
|
- 예측 가능한 동작
|
||||||
|
|
||||||
|
#### 4. 견고성 (Robust)
|
||||||
|
|
||||||
|
**시맨틱 HTML**
|
||||||
|
- 적절한 HTML5 태그 사용
|
||||||
|
- `<header>`, `<nav>`, `<main>`, `<section>`, `<article>` 등
|
||||||
|
|
||||||
|
**ARIA 속성**
|
||||||
|
- role, aria-label, aria-describedby 등 적절히 사용
|
||||||
|
- 동적 콘텐츠에 aria-live 적용
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 성능 최적화
|
||||||
|
|
||||||
|
### 로딩 전략
|
||||||
|
|
||||||
|
**초기 로딩**
|
||||||
|
- Critical CSS 인라인
|
||||||
|
- 폰트 preload
|
||||||
|
- 이미지 lazy loading
|
||||||
|
|
||||||
|
**코드 스플리팅**
|
||||||
|
- 라우트별 번들 분리
|
||||||
|
- 동적 import 활용
|
||||||
|
|
||||||
|
**캐싱 전략**
|
||||||
|
- 정적 리소스: 장기 캐싱
|
||||||
|
- API 응답: 적절한 캐시 정책
|
||||||
|
- Service Worker 활용
|
||||||
|
|
||||||
|
### 렌더링 최적화
|
||||||
|
|
||||||
|
**가상 스크롤**
|
||||||
|
- 긴 리스트에 가상 스크롤 적용
|
||||||
|
- 예: Todo 목록, 회의 목록
|
||||||
|
|
||||||
|
**애니메이션**
|
||||||
|
- CSS transform/opacity 사용
|
||||||
|
- JavaScript 애니메이션 최소화
|
||||||
|
- requestAnimationFrame 활용
|
||||||
|
|
||||||
|
**WebSocket 최적화**
|
||||||
|
- 필요한 경우에만 연결
|
||||||
|
- 재연결 로직 구현
|
||||||
|
- 메시지 배칭
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 구현 우선순위
|
||||||
|
|
||||||
|
### Phase 1: MVP (4주)
|
||||||
|
1. 로그인 화면
|
||||||
|
2. 전체 대시보드
|
||||||
|
3. 회의 예약
|
||||||
|
4. 회의 진행 (기본 기능)
|
||||||
|
5. 회의록 공유
|
||||||
|
|
||||||
|
### Phase 2: 핵심 기능 (4주)
|
||||||
|
1. **회의록별 대시보드**
|
||||||
|
2. Todo 관리
|
||||||
|
3. 실시간 협업
|
||||||
|
4. 템플릿 선택
|
||||||
|
|
||||||
|
### Phase 3: 고도화 (4주)
|
||||||
|
1. AI 기반 회의록 개선
|
||||||
|
2. 관련 문서 자동 연결
|
||||||
|
3. 회의 효율성 분석
|
||||||
|
4. 고급 검색
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 변경 이력
|
||||||
|
|
||||||
|
| 버전 | 날짜 | 작성자 | 변경 내용 |
|
||||||
|
|------|------|--------|-----------|
|
||||||
|
| 1.0 | 2024-01-15 | 이미준 | 회의록별 대시보드 설계 추가 |
|
||||||
|
|
||||||
@ -191,6 +191,61 @@ UFR-MEET-060: [회의록공유] 회의록 작성자로서 | 나는, 회의 내
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
UFR-MEET-070: [회의록대시보드] 회의록 작성자로서 | 나는, 회의 결과를 한눈에 파악하기 위해 | 회의록별 대시보드를 통해 핵심 정보를 조회하고 싶다.
|
||||||
|
- 시나리오: 회의록별 대시보드 조회
|
||||||
|
회의록이 확정된 상황에서 | 대시보드 탭을 클릭하면 | 핵심내용, 결정사항, Todo 진행상황, 참고자료가 요약되어 표시된다.
|
||||||
|
|
||||||
|
[대시보드 구성 요소]
|
||||||
|
1. 핵심내용
|
||||||
|
- AI가 추출한 회의의 핵심 논의사항 (3-5개 포인트)
|
||||||
|
- 주요 키워드 태그
|
||||||
|
- 회의 통계 (참석자 수, 회의 시간, 발언 횟수)
|
||||||
|
|
||||||
|
2. 결정사항
|
||||||
|
- 회의에서 결정된 사항 목록
|
||||||
|
- 각 결정사항별 결정자, 결정 시간
|
||||||
|
- 결정 근거 및 배경 (간략)
|
||||||
|
|
||||||
|
3. Todo 진행상황
|
||||||
|
- 할당된 Todo 목록 (UFR-TODO-010 연동)
|
||||||
|
- 각 Todo별 진행률 (0-100%) 표시
|
||||||
|
- 상태별 필터링 (시작 전/진행 중/완료)
|
||||||
|
- 담당자별 그룹핑
|
||||||
|
- 마감일 임박 알림 (3일 이내)
|
||||||
|
|
||||||
|
4. 참고자료
|
||||||
|
- 관련 회의록 (UFR-AI-040 연동)
|
||||||
|
- 이전 회의록 링크 (시간순)
|
||||||
|
- 관련도 점수 표시
|
||||||
|
- 업무 이력 (UFR-RAG-030 연동)
|
||||||
|
- 관련 프로젝트 문서
|
||||||
|
- 이슈 트래커 링크
|
||||||
|
- 사내 위키 페이지
|
||||||
|
|
||||||
|
[처리 결과]
|
||||||
|
- 대시보드가 생성됨
|
||||||
|
- 각 섹션별 데이터 로딩 상태 표시
|
||||||
|
- 실시간 업데이트 (Todo 진행상황)
|
||||||
|
- 섹션별 상세보기 링크 제공
|
||||||
|
|
||||||
|
[데이터 업데이트]
|
||||||
|
- Todo 진행상황: 실시간 업데이트 (UFR-TODO-020 연동)
|
||||||
|
- 참고자료: 매일 자동 업데이트
|
||||||
|
- 핵심내용/결정사항: 회의록 수정 시 재생성
|
||||||
|
|
||||||
|
[Policy/Rule]
|
||||||
|
- 대시보드는 회의록 확정 후 자동 생성
|
||||||
|
- Todo 진행상황은 실시간 반영
|
||||||
|
- 모바일 최적화 (반응형 디자인)
|
||||||
|
|
||||||
|
[비고]
|
||||||
|
- **차별화 포인트**: 회의 결과를 한눈에 파악할 수 있는 통합 뷰 제공
|
||||||
|
- 관련 정보를 한 화면에서 접근 가능하여 업무 효율성 향상
|
||||||
|
|
||||||
|
- M/21
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
3. STT 서비스 (기본 기능)
|
3. STT 서비스 (기본 기능)
|
||||||
1) 음성 인식 및 변환
|
1) 음성 인식 및 변환
|
||||||
UFR-STT-010: [음성녹음인식] 회의 참석자로서 | 나는, 발언 내용이 자동으로 기록되기 위해 | 음성이 실시간으로 녹음되고 인식되기를 원한다.
|
UFR-STT-010: [음성녹음인식] 회의 참석자로서 | 나는, 발언 내용이 자동으로 기록되기 위해 | 음성이 실시간으로 녹음되고 인식되기를 원한다.
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user