diff --git a/design/uiux/prototype/02-대시보드.html b/design/uiux/prototype/02-대시보드.html index 8fe6934..cd00362 100644 --- a/design/uiux/prototype/02-대시보드.html +++ b/design/uiux/prototype/02-대시보드.html @@ -150,6 +150,7 @@ } /* 회의 카드 */ + /* 최근 회의는 최대 3개만 표시하므로 3열로 제한 */ .meeting-grid { display: grid; gap: var(--space-md); @@ -168,12 +169,6 @@ } } - @media (min-width: 1440px) { - .meeting-grid { - grid-template-columns: repeat(4, 1fr); - } - } - .meeting-card { background: var(--white); border-radius: var(--radius-lg); @@ -689,8 +684,17 @@ const statusInfo = getMeetingStatusInfo(meeting); const isCreator = meeting.participants.some(p => p.id === currentUser.id && p.role === 'creator'); + // 버튼 표시 규칙 + // - ongoing: 참여하기 버튼 표시 + // - scheduled: 버튼 없음 (카드 클릭으로 수정 화면 이동) + // - draft/complete: 버튼 없음 (카드 클릭으로 상세조회 이동) + let actionButton = ''; + if (meeting.status === 'ongoing') { + actionButton = ``; + } + return ` -
Todo 항목은 조회만 가능합니다. 제목, 담당자, 마감일 정보만 표시됩니다.
@@ -1139,7 +1142,7 @@👤 담당자 변경 시 이전/새 담당자에게 알림이 전송됩니다
📅 마감일 변경 시 캘린더가 자동 업데이트됩니다
-회의 생성자로서 모든 항목을 수정할 수 있습니다.
-
-
-
-
diff --git a/design/uiux/prototype/common.js b/design/uiux/prototype/common.js
index 6e57a0a..c4b9010 100644
--- a/design/uiux/prototype/common.js
+++ b/design/uiux/prototype/common.js
@@ -31,7 +31,7 @@ const SAMPLE_MEETINGS = [
time: '14:00',
duration: 90,
location: '본사 2층 대회의실',
- status: 'scheduled', // ongoing, scheduled, completed
+ status: 'draft', // ongoing, scheduled, completed, draft(작성중), complete(확정완료)
participants: [
{ id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green' },
{ id: 'user-002', name: '박서연', avatar: '박', avatarColor: 'blue' },
@@ -39,7 +39,8 @@ const SAMPLE_MEETINGS = [
{ id: 'user-004', name: '최유진', avatar: '최', avatarColor: 'pink' }
],
sections: 3,
- todos: 5
+ todos: 5,
+ minutesId: 'minutes-001' // 회의록 ID 연결
},
{
id: 'meeting-002',
@@ -1083,6 +1084,12 @@ function getMeetingStatusInfo(meeting) {
if (meeting.status === 'ongoing') {
return { badgeType: 'ongoing', badgeText: '진행중' };
}
+ if (meeting.status === 'draft') {
+ return { badgeType: 'draft', badgeText: '작성중' };
+ }
+ if (meeting.status === 'complete') {
+ return { badgeType: 'complete', badgeText: '확정완료' };
+ }
if (meeting.status === 'completed') {
return { badgeType: 'complete', badgeText: '확정완료' };
}
diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md
index 150ecdb..201ed21 100644
--- a/design/uiux/uiux.md
+++ b/design/uiux/uiux.md
@@ -4,23 +4,58 @@
- **작성일**: 2025-10-21
- **최종 수정일**: 2025-10-27
- **작성자**: 이미준 (서비스 기획자)
-- **버전**: 1.5.2
+- **버전**: 1.5.3
- **설계 철학**: Mobile First Design
---
## 목차
1. [설계 개요](#설계-개요)
+ - [설계 목표](#설계-목표)
+ - [설계 원칙](#설계-원칙)
+ - [유저스토리 매핑](#유저스토리-매핑)
+ - [주요 추가 기능 (v1.1)](#주요-추가-기능-v11)
2. [프로토타입 화면 목록](#프로토타입-화면-목록)
3. [화면 간 사용자 플로우](#화면-간-사용자-플로우)
+ - [주요 사용자 시나리오별 플로우](#주요-사용자-시나리오별-플로우)
+ - [플로우 다이어그램](#플로우-다이어그램)
4. [화면별 상세 설계](#화면별-상세-설계)
+ - [01-로그인](#01-로그인)
+ - [02-대시보드](#02-대시보드)
+ - [03-회의예약](#03-회의예약)
+ - [04-템플릿선택](#04-템플릿선택)
+ - [05-회의진행](#05-회의진행)
+ - [07-회의종료](#07-회의종료)
+ - [09-Todo관리](#09-todo관리)
+ - [10-회의록상세조회](#10-회의록상세조회)
+ - [11-회의록수정](#11-회의록수정)
+ - [12-회의록목록조회](#12-회의록목록조회)
5. [공통 UI 컴포넌트](#공통-ui-컴포넌트)
6. [공통 에러 메시지 표준](#공통-에러-메시지-표준)
+ - [네트워크 오류](#네트워크-오류)
+ - [데이터 로딩 실패](#데이터-로딩-실패)
+ - [권한 오류](#권한-오류)
+ - [인증 오류](#인증-오류)
+ - [입력 검증 오류](#입력-검증-오류)
+ - [서버 오류](#서버-오류)
7. [화면 간 전환 및 네비게이션](#화면-간-전환-및-네비게이션)
8. [반응형 설계 전략](#반응형-설계-전략)
+ - [브레이크포인트](#브레이크포인트)
+ - [레이아웃 전략](#레이아웃-전략)
+ - [컴포넌트별 반응형 전략](#컴포넌트별-반응형-전략)
+ - [이미지 및 미디어](#이미지-및-미디어)
9. [접근성 보장 방안](#접근성-보장-방안)
10. [성능 최적화 방안](#성능-최적화-방안)
+ - [1. 로딩 성능](#1-로딩-성능)
+ - [2. 렌더링 성능](#2-렌더링-성능)
+ - [3. 네트워크 최적화](#3-네트워크-최적화)
+ - [4. 실시간 동기화 최적화](#4-실시간-동기화-최적화)
+ - [5. 성능 모니터링](#5-성능-모니터링)
+ - [성능 목표](#성능-목표)
11. [변경 이력](#변경-이력)
+12. [부록](#부록)
+ - [참고 자료](#참고-자료)
+ - [디자인 시스템 (추후 작성)](#디자인-시스템-추후-작성)
---
@@ -72,14 +107,16 @@
- 관련도 표시 (퍼센트 또는 별점)
- 최대 3개 자동 표시, 더보기로 전체 목록 확인 가능
+[↑ 목차로 돌아가기](#목차)
+
---
## 프로토타입 화면 목록
-| 번호 | 화면명 | 관련 유저스토리 | 비즈니스 중요도 | 사이드바 유무 | 이전화면 이동버튼 유무 | 비고 |
-|------|--------|----------------|-------------------|-----------|------------------------|-------|
-| 01 | 로그인 | UFR-USER-010 | 필수 | 사용자 인증 | X | X | |
-| 02 | 대시보드 | - | 필수 | 메인 랜딩 페이지 | O | X | |
+| 번호 | 화면명 | 관련 유저스토리 | 비즈니스 중요도 | 설명 | 사이드바 유무 | 이전화면 이동버튼 유무 | 비고 |
+|------|--------|----------------|-------------------|------------------------|------------|------------------------|-------|
+| 01 | 로그인 | UFR-USER-010 | 필수 | 사용자 인증 | X | X | |
+| 02 | 대시보드 | UFR-USER-020 | 필수 | 메인 랜딩 페이지 | O | X | |
| 03 | 회의예약 | UFR-MEET-010 | 높음 | 회의 생성 | X | O | |
| 04 | 템플릿선택 | UFR-MEET-020 | 중간 | 회의록 템플릿 선택 | X | O | |
| 05 | 회의진행 | UFR-MEET-030, UFR-STT-010/020, UFR-AI-010, UFR-COLLAB-010 | 높음 | 실시간 회의 진행 및 회의록 작성 | X | X | |
@@ -87,7 +124,9 @@
| 09 | Todo관리 | UFR-TODO-010, UFR-TODO-030 | 높음 | Todo 목록 및 진행 관리 | O | X | |
| 10 | 회의록상세조회 | UFR-MEET-047 | 중간 | 회의록 상세 보기 | X | O | |
| 11 | 회의록수정 | UFR-MEET-055 | 중간 | 지난 회의록 수정 | X | O | |
-| 12 | 회의록목록조회 | UFR-MEET-046 | 높음 | 회의록 목록 필터링/정렬/검색 | O | X | |
+| 12 | 회의록목록조회 | UFR-MEET-046 | 높음 | 회의록 목록 필터링/정렬/검색 | O | X | |
+
+[↑ 목차로 돌아가기](#목차)
---
@@ -143,6 +182,8 @@ graph TD
E -.실시간 연동.-> L
```
+[↑ 목차로 돌아가기](#목차)
+
---
## 화면별 상세 설계
@@ -1824,6 +1865,8 @@ graph TD
- 필터링 결과 없음: "조건에 맞는 회의록이 없습니다"
- 전체 회의록 없음: "회의록이 없습니다. 첫 회의를 시작해보세요!" + 회의 시작 버튼
+[↑ 목차로 돌아가기](#목차)
+
---
## 공통 UI 컴포넌트
@@ -1882,6 +1925,8 @@ graph TD
- **Desktop (768px+)**:
- 프로필 아이콘 숨김 (사이드바 하단 영역 사용)
+[↑ 목차로 돌아가기](#목차)
+
---
## 공통 에러 메시지 표준
@@ -1921,6 +1966,8 @@ graph TD
- **로깅**: 오류 상세 정보를 서버로 전송 (Sentry)
- **적용 화면**: 전체
+[↑ 목차로 돌아가기](#목차)
+
---
## 화면 간 전환 및 네비게이션
@@ -1952,6 +1999,8 @@ graph TD
- 특정 Todo 직접 접근: `/todo/{todoId}`
- 회의록 공유 링크: `/share/{shareToken}`
+[↑ 목차로 돌아가기](#목차)
+
---
## 반응형 설계 전략
@@ -2003,6 +2052,8 @@ graph TD
- Lazy Loading: 뷰포트 진입 시 로딩
- 최적화: WebP 포맷, 적절한 압축
+[↑ 목차로 돌아가기](#목차)
+
---
## 접근성 보장 방안
@@ -2040,6 +2091,8 @@ graph TD
- 자동 테스트: Lighthouse, axe DevTools
- 수동 테스트: 키보드 네비게이션, 스크린 리더 (NVDA, JAWS, VoiceOver)
+[↑ 목차로 돌아가기](#목차)
+
---
## 성능 최적화 방안
@@ -2091,6 +2144,8 @@ graph TD
- **STT 지연 시간**: < 1s
- **실시간 동기화 지연**: < 500ms
+[↑ 목차로 돌아가기](#목차)
+
---
## 변경 이력
@@ -2132,7 +2187,10 @@ graph TD
| 1.4.19 | 2025-10-24 | 강지수 | 05-회의진행 화면 설계서 프로토타입 기준 전면 수정