From 688d456a12bae28bb58e2fae896dbf0ff85ee42c Mon Sep 17 00:00:00 2001 From: yabo0812 Date: Fri, 24 Oct 2025 00:11:00 +0900 Subject: [PATCH 01/11] =?UTF-8?q?12-=ED=9A=8C=EC=9D=98=EB=A1=9D=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=EC=A1=B0=ED=9A=8C=20=ED=99=94=EB=A9=B4=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=95=84=ED=82=A4=ED=85=8D=EC=B2=98=20?= =?UTF-8?q?=EB=AC=B8=EC=84=9C=ED=99=94=20(v2.0.6,=20v1.4.14,=20v1.2.4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 유저스토리 v2.0.6: UFR-MEET-046 데이터/뷰 레이어 분리 구조 명시 - 데이터 소스: common.js → SAMPLE_MINUTES 배열 (30개 샘플) - 렌더링 방식: renderMeetings(), createMeetingCard() 함수 - 샘플 데이터: 작성중 13개, 확정완료 17개 - 정렬 옵션: 최근수정순/최근회의순/제목순 - 페이지네이션: 초기 10개, "10개 더보기" 버튼 - UI/UX 설계서 v1.4.14: 12-회의록목록조회 데이터 아키텍처 섹션 추가 - 데이터/뷰 레이어 분리 구조 설명 - 동적 렌더링 방식 문서화 - 프로토타입 파일 경로 추가 - 스타일 가이드 v1.2.4: UI/UX 설계서 변경사항 동기화 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- design/uiux/prototype/02-대시보드.html | 33 +- design/uiux/prototype/12-회의록목록조회.html | 757 ++++++++++--------- design/uiux/prototype/common.js | 452 ++++++++++- design/uiux/style-guide.md | 1 + design/uiux/uiux.md | 28 +- design/userstory.md | 17 +- 6 files changed, 895 insertions(+), 393 deletions(-) diff --git a/design/uiux/prototype/02-대시보드.html b/design/uiux/prototype/02-대시보드.html index 991a7c7..b12d73a 100644 --- a/design/uiux/prototype/02-대시보드.html +++ b/design/uiux/prototype/02-대시보드.html @@ -307,16 +307,19 @@ font-weight: var(--font-weight-medium); } - /* 회의록 리스트 - Todo 카드와 동일한 스타일 */ + /* 회의록 리스트 - 그리드 형태 */ .minutes-list { - background: var(--white); - border-radius: var(--radius-lg); - padding: var(--space-md); - box-shadow: var(--shadow-sm); + display: grid; + grid-template-columns: 1fr; + gap: var(--space-md); margin-bottom: var(--space-xl); - display: flex; - flex-direction: column; - gap: var(--space-sm); + } + + /* 데스크톱에서 2x2 그리드 */ + @media (min-width: 768px) { + .minutes-list { + grid-template-columns: repeat(2, 1fr); + } } /* 회의록 카드 스타일 */ @@ -347,7 +350,11 @@ font-weight: var(--font-weight-medium); color: var(--gray-900); font-size: var(--font-base); - flex-shrink: 0; + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; } .minutes-card-meta { @@ -819,7 +826,7 @@ const myMinutes = SAMPLE_MINUTES .filter(m => m.participants.some(p => p.id === currentUser.id)) // 참여자 또는 생성자 모두 포함 .sort((a, b) => new Date(b.date + ' ' + b.time) - new Date(a.date + ' ' + a.time)) // 최신순 정렬 - .slice(0, 3); // 상위 3개만 표시 + .slice(0, 4); // 상위 4개만 표시 if (myMinutes.length === 0) { container.innerHTML = '
📝

참여한 회의록이 없습니다

'; @@ -838,11 +845,9 @@ return `
-
- ${createBadge(statusBadge.text, statusBadge.type)} -
+ ${createBadge(statusBadge.text, statusBadge.type)} + ${isCreator ? '👑' : ''}

${minutes.title}

- ${isCreator ? '👑' : ''}
📅 ${formatDate(minutes.date)} ${formatTime(minutes.time)} diff --git a/design/uiux/prototype/12-회의록목록조회.html b/design/uiux/prototype/12-회의록목록조회.html index c96dc11..b48e26a 100644 --- a/design/uiux/prototype/12-회의록목록조회.html +++ b/design/uiux/prototype/12-회의록목록조회.html @@ -95,23 +95,49 @@ margin-bottom: var(--space-lg); } - .filter-grid { - display: grid; - grid-template-columns: 1fr 1fr; + /* 필터 컨테이너 */ + .filter-container { + display: flex; + flex-direction: column; gap: var(--space-md); - margin-bottom: var(--space-md); } - /* 반응형: 필터 그리드 */ - @media (min-width: 640px) { - .filter-grid { - grid-template-columns: repeat(3, 1fr); + /* 모바일: 정렬 + 참여유형을 한 줄로 */ + .filter-top-row { + display: flex; + gap: var(--space-md); + align-items: center; + } + + .filter-grid { + flex: 0 0 auto; + min-width: 140px; + } + + /* 데스크톱: 한 줄 레이아웃 */ + @media (min-width: 768px) { + .filter-section { + padding: var(--space-lg); + } + + .filter-container { + display: flex; + flex-direction: row; + align-items: center; + gap: var(--space-md); + } + + .filter-top-row { + display: contents; /* 데스크톱에서는 래퍼 무시 */ } - } - @media (min-width: 1024px) { .filter-grid { - grid-template-columns: repeat(4, 1fr); + flex: 0 0 auto; + min-width: 140px; + } + + .filter-label { + display: none; } } @@ -148,10 +174,15 @@ .participation-tabs { display: flex; gap: var(--space-sm); - margin-bottom: var(--space-md); overflow-x: auto; } + @media (min-width: 768px) { + .participation-tabs { + flex: 0 0 auto; + } + } + .participation-tab { padding: 8px 16px; border: 1px solid var(--gray-300); @@ -172,22 +203,24 @@ /* 검색 영역 */ .search-wrapper { - position: relative; - margin-bottom: var(--space-md); + display: flex; + gap: var(--space-sm); } - .search-icon { - position: absolute; - left: 12px; - top: 50%; - transform: translateY(-50%); - font-size: 20px; - color: var(--gray-500); + @media (min-width: 768px) { + .search-wrapper { + flex: 1; + } + } + + .search-input-wrapper { + position: relative; + flex: 1; } .search-input { width: 100%; - padding: 12px 16px 12px 40px; + padding: 12px 16px; border: 1px solid var(--gray-300); border-radius: var(--radius-md); font-size: var(--font-body); @@ -201,110 +234,127 @@ box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.1); } - /* 통계 정보 - 컴팩트하게 */ - .stats-section { - background: var(--white); - border-radius: var(--radius-lg); - box-shadow: var(--shadow-sm); - padding: var(--space-md); - margin-bottom: var(--space-lg); - } - - /* common.css의 stats-grid 스타일 활용 */ - .stat-item { - text-align: center; - padding: var(--space-md); - background: var(--gray-50); + .search-btn { + padding: 12px 20px; + background: var(--primary); + color: var(--white); + border: none; border-radius: var(--radius-md); - min-height: 80px; + font-size: var(--font-body); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: background var(--transition-fast); + white-space: nowrap; + flex-shrink: 0; + } + + .search-btn:hover { + background: var(--primary-dark); + } + + .search-btn:active { + transform: scale(0.98); + } + + /* 상태 필터 탭 (09-Todo관리 스타일) */ + .status-filter-tabs { display: flex; - flex-direction: column; - justify-content: center; + gap: var(--space-sm); + margin-bottom: var(--space-lg); + overflow-x: auto; + padding-bottom: var(--space-sm); } - .stat-value { - font-size: var(--font-h2); - font-weight: var(--font-weight-bold); - color: var(--primary); - margin-bottom: var(--space-xs); - } - - .stat-label { + .status-filter-tab { + padding: 8px 16px; + background: var(--white); + border: 1px solid var(--gray-300); + border-radius: 20px; font-size: var(--font-small); - color: var(--gray-600); + font-weight: var(--font-weight-medium); + color: var(--gray-700); + cursor: pointer; + white-space: nowrap; + transition: all var(--transition-fast); } - /* 회의록 목록 */ + .status-filter-tab.active { + background: var(--primary); + color: var(--white); + border-color: var(--primary); + } + + .status-filter-tab:hover { + border-color: var(--primary); + } + + .status-count { + margin-left: 2px; + } + + /* 회의록 목록 - 모바일 1열, 데스크톱 2열 */ .meeting-list { - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: 1fr; gap: var(--space-md); } - /* 반응형: 그리드 레이아웃 */ - @media (min-width: 640px) { + /* 데스크톱에서 2열 그리드 */ + @media (min-width: 768px) { .meeting-list { - display: grid; grid-template-columns: repeat(2, 1fr); - gap: var(--space-md); - } - } - - @media (min-width: 1024px) { - .meeting-list { - grid-template-columns: repeat(3, 1fr); - } - } - - @media (min-width: 1440px) { - .meeting-list { - grid-template-columns: repeat(4, 1fr); } } + /* 회의록 카드 - 대시보드와 동일한 스타일 */ .meeting-item { + border: 1px solid var(--gray-300); + border-radius: var(--radius-md); background: var(--white); - border-radius: var(--radius-lg); - box-shadow: var(--shadow-md); - padding: var(--space-md); + transition: all var(--transition-fast); cursor: pointer; - transition: all var(--transition-normal); + padding: var(--space-md); } .meeting-item:hover { - box-shadow: var(--shadow-lg); - transform: translateY(-2px); + box-shadow: var(--shadow-md); + border-color: var(--primary); } .meeting-header { display: flex; - justify-content: space-between; - align-items: flex-start; + justify-content: flex-start; + align-items: center; + gap: var(--space-xs); margin-bottom: var(--space-sm); + flex-wrap: wrap; } .meeting-title { - flex: 1; - font-size: var(--font-body); - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-medium); color: var(--gray-900); - margin-bottom: var(--space-xs); + font-size: var(--font-base); + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; } .meeting-badges { display: flex; - flex-direction: column; gap: var(--space-xs); - align-items: flex-end; + align-items: center; + flex-shrink: 0; } .meeting-meta { display: flex; - align-items: center; - gap: var(--space-md); + flex-wrap: wrap; + gap: var(--space-sm); font-size: var(--font-small); - color: var(--gray-500); - margin-bottom: var(--space-xs); + color: var(--gray-600); + align-items: center; } .meeting-meta-item { @@ -345,6 +395,36 @@ margin-bottom: var(--space-lg); } + /* 더보기 버튼 */ + .load-more-wrapper { + display: flex; + justify-content: center; + margin-top: var(--space-lg); + margin-bottom: var(--space-xl); + } + + .load-more-btn { + padding: 12px 24px; + background: var(--white); + border: 2px solid var(--primary); + color: var(--primary); + border-radius: var(--radius-md); + font-size: var(--font-body); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: all var(--transition-fast); + } + + .load-more-btn:hover { + background: var(--primary); + color: var(--white); + } + + /* 추가 데이터 숨김 처리 */ + .meeting-item.hidden { + display: none; + } + @@ -381,7 +461,7 @@
-

내 회의록

+

회의록

+ +
-
- - + +
+
+ +
+
- - -
- - - -
- - -
- 🔍 - -
- -
-
-
-
8
-
전체
-
-
-
3
-
작성중
-
-
-
5
-
확정완료
-
-
+ +
+ + +
- -
-
-
-

2025년 1분기 제품 기획 회의

-
- - 📅 2025-10-25 14:00 - - - 👤 4명 - -
-
최종 수정: 1시간 전
-
-
- 확정완료 -
-
-
+ +
- -
-
-
-

주간 스크럼 회의

-
- - 📅 2025-10-21 10:00 - - - 👤 3명 - -
-
최종 수정: 3시간 전
-
-
- 작성중 - 60% 완료 -
-
-
- - -
-
-
-

AI 기능 개선 회의

-
- - 📅 2025-10-23 15:00 - - - 👤 2명 - -
-
최종 수정: 2일 전
-
-
- 확정완료 -
-
-
- - -
-
-
-

개발 리소스 계획 회의

-
- - 📅 2025-10-22 11:00 - - - 👤 5명 - -
-
최종 수정: 1일 전
-
-
- 확정완료 - 조회 전용 -
-
-
- - -
-
-
-

경쟁사 분석 회의

-
- - 📅 2025-10-20 10:00 - - - 👤 3명 - -
-
최종 수정: 3일 전
-
-
- 작성중 - 40% 완료 -
-
-
- - -
-
-
-

UI/UX 디자인 검토 회의

-
- - 📅 2025-10-19 14:00 - - - 👤 4명 - -
-
최종 수정: 4일 전
-
-
- 확정완료 -
-
-
- - -
-
-
-

사용자 인터뷰 결과

-
- - 📅 2025-10-18 14:00 - - - 👤 2명 - -
-
최종 수정: 5일 전
-
-
- 작성중 - 조회 전용 -
-
-
- - -
-
-
-

보안 검토 회의

-
- - 📅 2025-10-17 11:00 - - - 👤 3명 - -
-
최종 수정: 6일 전
-
-
- 확정완료 -
-
-
+ + @@ -670,119 +575,252 @@ diff --git a/design/uiux/prototype/common.js b/design/uiux/prototype/common.js index 1b4f320..49b3a6f 100644 --- a/design/uiux/prototype/common.js +++ b/design/uiux/prototype/common.js @@ -27,9 +27,9 @@ const SAMPLE_MEETINGS = [ location: '본사 2층 대회의실', status: 'scheduled', // ongoing, scheduled, completed participants: [ - { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green', role: 'creator' }, + { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green' }, { id: 'user-002', name: '박서연', avatar: '박', avatarColor: 'blue' }, - { id: 'user-003', name: '이준호', avatar: '이', avatarColor: 'yellow' }, + { id: 'user-003', name: '이준호', avatar: '이', avatarColor: 'yellow', role: 'creator' }, { id: 'user-004', name: '최유진', avatar: '최', avatarColor: 'pink' } ], sections: 3, @@ -76,8 +76,8 @@ const SAMPLE_MEETINGS = [ location: '본사 1층 경영진 회의실', status: 'scheduled', participants: [ - { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green', role: 'creator' }, - { id: 'user-005', name: '정도현', avatar: '정', avatarColor: 'purple' } + { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green' }, + { id: 'user-005', name: '정도현', avatar: '정', avatarColor: 'purple', role: 'creator' } ], sections: 0, todos: 0 @@ -107,9 +107,9 @@ const SAMPLE_MEETINGS = [ location: '본사 4층 라운지', status: 'completed', participants: [ - { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green', role: 'creator' }, + { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green'}, { id: 'user-003', name: '이준호', avatar: '이', avatarColor: 'yellow' }, - { id: 'user-005', name: '정도현', avatar: '정', avatarColor: 'purple' } + { id: 'user-005', name: '정도현', avatar: '정', avatarColor: 'purple', role: 'creator' } ], sections: 3, todos: 4 @@ -127,9 +127,9 @@ const SAMPLE_MINUTES = [ time: '14:00', status: 'draft', // complete(확정완료), draft(작성중) participants: [ - { id: 'user-001', name: '김민준', role: 'creator' }, + { id: 'user-001', name: '김민준' }, { id: 'user-002', name: '박서연' }, - { id: 'user-003', name: '이준호' }, + { id: 'user-003', name: '이준호' , role: 'creator'}, { id: 'user-004', name: '최유진' } ], participantCount: 4, @@ -144,7 +144,7 @@ const SAMPLE_MINUTES = [ title: '주간 스크럼 회의', date: '2025-10-21', time: '10:00', - status: 'complete', + status: 'draft', participants: [ { id: 'user-002', name: '박서연', role: 'creator' }, { id: 'user-001', name: '김민준' }, @@ -152,6 +152,7 @@ const SAMPLE_MINUTES = [ ], participantCount: 3, lastUpdated: '2025-10-21', + completionRate: 60, sections: 2, todos: 8 }, @@ -199,9 +200,9 @@ const SAMPLE_MINUTES = [ time: '13:00', status: 'complete', participants: [ - { id: 'user-001', name: '김민준', role: 'creator' }, + { id: 'user-001', name: '김민준' }, { id: 'user-002', name: '박서연' }, - { id: 'user-004', name: '최유진' } + { id: 'user-004', name: '최유진' , role: 'creator'} ], participantCount: 3, lastUpdated: '2025-10-18', @@ -216,9 +217,9 @@ const SAMPLE_MINUTES = [ time: '11:00', status: 'complete', participants: [ - { id: 'user-001', name: '김민준', role: 'creator' }, + { id: 'user-001', name: '김민준' }, { id: 'user-003', name: '이준호' }, - { id: 'user-005', name: '정도현' } + { id: 'user-005', name: '정도현', role: 'creator' } ], participantCount: 3, lastUpdated: '2025-10-20', @@ -231,7 +232,7 @@ const SAMPLE_MINUTES = [ title: 'UI/UX 디자인 검토 회의', date: '2025-10-19', time: '14:00', - status: 'complete', + status: 'draft', participants: [ { id: 'user-004', name: '최유진', role: 'creator' }, { id: 'user-001', name: '김민준' }, @@ -240,6 +241,7 @@ const SAMPLE_MINUTES = [ ], participantCount: 4, lastUpdated: '2025-10-19', + completionRate: 40, sections: 4, todos: 5 }, @@ -259,6 +261,428 @@ const SAMPLE_MINUTES = [ lastUpdated: '2025-10-20', sections: 3, todos: 2 + }, + { + id: 'minutes-009', + meetingId: 'meeting-010', + title: '사용자 인터뷰 결과 공유 및 다음 단계 논의', + date: '2025-10-18', + time: '14:00', + status: 'draft', + participants: [ + { id: 'user-004', name: '최유진', role: 'creator' }, + { id: 'user-001', name: '김민준' } + ], + participantCount: 2, + lastUpdated: '2025-10-18', + completionRate: 75, + sections: 2, + todos: 4 + }, + { + id: 'minutes-010', + meetingId: 'meeting-011', + title: '보안 검토 회의', + date: '2025-10-17', + time: '11:00', + status: 'complete', + participants: [ + { id: 'user-001', name: '김민준' }, + { id: 'user-003', name: '이준호' , role: 'creator'}, + { id: 'user-005', name: '정도현' } + ], + participantCount: 3, + lastUpdated: '2025-10-17', + sections: 3, + todos: 5 + }, + { + id: 'minutes-011', + meetingId: 'meeting-012', + title: '마케팅 전략 수립 회의', + date: '2025-10-16', + time: '13:00', + status: 'complete', + participants: [ + { id: 'user-002', name: '박서연', role: 'creator' }, + { id: 'user-001', name: '김민준' }, + { id: 'user-003', name: '이준호' }, + { id: 'user-004', name: '최유진' } + ], + participantCount: 4, + lastUpdated: '2025-10-16', + sections: 4, + todos: 6 + }, + { + id: 'minutes-012', + meetingId: 'meeting-013', + title: '분기별 성과 리뷰 회의', + date: '2025-10-15', + time: '10:00', + status: 'draft', + participants: [ + { id: 'user-001', name: '김민준'}, + { id: 'user-002', name: '박서연' }, + { id: 'user-003', name: '이준호' , role: 'creator' }, + { id: 'user-004', name: '최유진' }, + { id: 'user-005', name: '정도현' }, + { id: 'user-006', name: '강지수' } + ], + participantCount: 6, + lastUpdated: '2025-10-15', + completionRate: 20, + sections: 2, + todos: 3 + }, + { + id: 'minutes-013', + meetingId: 'meeting-014', + title: '신규 프로젝트 킥오프 미팅', + date: '2025-10-14', + time: '09:00', + status: 'complete', + participants: [ + { id: 'user-003', name: '이준호', role: 'creator' }, + { id: 'user-001', name: '김민준' }, + { id: 'user-002', name: '박서연' }, + { id: 'user-004', name: '최유진' }, + { id: 'user-005', name: '정도현' } + ], + participantCount: 5, + lastUpdated: '2025-10-14', + sections: 4, + todos: 7 + }, + { + id: 'minutes-014', + meetingId: 'meeting-015', + title: '고객 피드백 반영 회의', + date: '2025-10-13', + time: '14:00', + status: 'complete', + participants: [ + { id: 'user-001', name: '김민준', role: 'creator' }, + { id: 'user-002', name: '박서연' }, + { id: 'user-004', name: '최유진' } + ], + participantCount: 3, + lastUpdated: '2025-10-13', + sections: 3, + todos: 4 + }, + { + id: 'minutes-015', + meetingId: 'meeting-016', + title: '기술 스택 검토 회의', + date: '2025-10-12', + time: '11:00', + status: 'draft', + participants: [ + { id: 'user-003', name: '이준호', role: 'creator' }, + { id: 'user-001', name: '김민준' }, + { id: 'user-002', name: '박서연' }, + { id: 'user-005', name: '정도현' } + ], + participantCount: 4, + lastUpdated: '2025-10-12', + completionRate: 30, + sections: 2, + todos: 5 + }, + { + id: 'minutes-016', + meetingId: 'meeting-017', + title: '월간 운영 리뷰 회의', + date: '2025-10-11', + time: '15:00', + status: 'complete', + participants: [ + { id: 'user-001', name: '김민준' }, + { id: 'user-002', name: '박서연' , role: 'creator'}, + { id: 'user-003', name: '이준호' }, + { id: 'user-004', name: '최유진' }, + { id: 'user-005', name: '정도현' }, + { id: 'user-006', name: '강지수' }, + { id: 'user-007', name: '송주영' } + ], + participantCount: 7, + lastUpdated: '2025-10-11', + sections: 5, + todos: 8 + }, + { + id: 'minutes-017', + meetingId: 'meeting-018', + title: '채용 인터뷰 디브리핑', + date: '2025-10-10', + time: '16:00', + status: 'complete', + participants: [ + { id: 'user-005', name: '정도현', role: 'creator' }, + { id: 'user-001', name: '김민준' }, + { id: 'user-002', name: '박서연' } + ], + participantCount: 3, + lastUpdated: '2025-10-10', + sections: 2, + todos: 3 + }, + { + id: 'minutes-018', + meetingId: 'meeting-019', + title: '파트너사 협업 방안 논의', + date: '2025-10-09', + time: '10:00', + status: 'draft', + participants: [ + { id: 'user-001', name: '김민준', role: 'creator' }, + { id: 'user-002', name: '박서연' }, + { id: 'user-003', name: '이준호' }, + { id: 'user-004', name: '최유진' }, + { id: 'user-005', name: '정도현' } + ], + participantCount: 5, + lastUpdated: '2025-10-09', + completionRate: 50, + sections: 3, + todos: 6 + }, + { + id: 'minutes-019', + meetingId: 'meeting-020', + title: '데이터 분석 결과 공유', + date: '2025-10-08', + time: '13:00', + status: 'complete', + participants: [ + { id: 'user-002', name: '박서연', role: 'creator' }, + { id: 'user-001', name: '김민준' }, + { id: 'user-003', name: '이준호' }, + { id: 'user-005', name: '정도현' } + ], + participantCount: 4, + lastUpdated: '2025-10-08', + sections: 4, + todos: 5 + }, + { + id: 'minutes-020', + meetingId: 'meeting-021', + title: '서비스 개선 아이디어 회의', + date: '2025-10-07', + time: '14:00', + status: 'complete', + participants: [ + { id: 'user-001', name: '김민준'}, + { id: 'user-002', name: '박서연', role: 'creator' }, + { id: 'user-003', name: '이준호' }, + { id: 'user-004', name: '최유진' }, + { id: 'user-005', name: '정도현' }, + { id: 'user-006', name: '강지수' } + ], + participantCount: 6, + lastUpdated: '2025-10-07', + sections: 4, + todos: 7 + }, + { + id: 'minutes-021', + meetingId: 'meeting-022', + title: '고객 VOC 분석 회의', + date: '2025-10-06', + time: '11:00', + status: 'draft', + participants: [ + { id: 'user-004', name: '최유진', role: 'creator' }, + { id: 'user-001', name: '김민준' }, + { id: 'user-002', name: '박서연' } + ], + participantCount: 3, + lastUpdated: '2025-10-06', + completionRate: 65, + sections: 2, + todos: 4 + }, + { + id: 'minutes-022', + meetingId: 'meeting-023', + title: '연말 계획 수립 회의', + date: '2025-10-05', + time: '09:00', + status: 'complete', + participants: [ + { id: 'user-001', name: '김민준' }, + { id: 'user-002', name: '박서연' }, + { id: 'user-003', name: '이준호' , role: 'creator'}, + { id: 'user-004', name: '최유진' }, + { id: 'user-005', name: '정도현' }, + { id: 'user-006', name: '강지수' }, + { id: 'user-007', name: '송주영' }, + { id: 'user-008', name: '백현정' } + ], + participantCount: 8, + lastUpdated: '2025-10-05', + sections: 6, + todos: 10 + }, + { + id: 'minutes-023', + meetingId: 'meeting-024', + title: '브랜드 리뉴얼 전략 회의', + date: '2025-10-04', + time: '13:00', + status: 'draft', + participants: [ + { id: 'user-004', name: '최유진', role: 'creator' }, + { id: 'user-001', name: '김민준' }, + { id: 'user-002', name: '박서연' }, + { id: 'user-006', name: '강지수' }, + { id: 'user-007', name: '송주영' }, + { id: 'user-008', name: '백현정' } + ], + participantCount: 6, + lastUpdated: '2025-10-04', + completionRate: 45, + sections: 3, + todos: 5 + }, + { + id: 'minutes-024', + meetingId: 'meeting-025', + title: '플랫폼 확장성 검토 회의', + date: '2025-10-03', + time: '10:00', + status: 'complete', + participants: [ + { id: 'user-001', name: '김민준', role: 'creator' }, + { id: 'user-003', name: '이준호' }, + { id: 'user-005', name: '정도현' }, + { id: 'user-007', name: '송주영' }, + { id: 'user-002', name: '박서연' } + ], + participantCount: 5, + lastUpdated: '2025-10-03', + sections: 4, + todos: 6 + }, + { + id: 'minutes-025', + meetingId: 'meeting-026', + title: '사용자 경험 개선 워크샵', + date: '2025-10-02', + time: '14:00', + status: 'draft', + participants: [ + { id: 'user-004', name: '최유진', role: 'creator' }, + { id: 'user-001', name: '김민준' }, + { id: 'user-002', name: '박서연' }, + { id: 'user-006', name: '강지수' }, + { id: 'user-003', name: '이준호' }, + { id: 'user-005', name: '정도현' }, + { id: 'user-008', name: '백현정' } + ], + participantCount: 7, + lastUpdated: '2025-10-02', + completionRate: 85, + sections: 5, + todos: 8 + }, + { + id: 'minutes-026', + meetingId: 'meeting-027', + title: '클라우드 인프라 마이그레이션 계획', + date: '2025-10-01', + time: '09:30', + status: 'draft', + participants: [ + { id: 'user-001', name: '김민준' }, + { id: 'user-003', name: '이준호' }, + { id: 'user-007', name: '송주영' , role: 'creator'}, + { id: 'user-005', name: '정도현' } + ], + participantCount: 4, + lastUpdated: '2025-10-01', + completionRate: 55, + sections: 3, + todos: 7 + }, + { + id: 'minutes-027', + meetingId: 'meeting-028', + title: '월간 KPI 점검 회의', + date: '2025-09-30', + time: '16:00', + status: 'complete', + participants: [ + { id: 'user-002', name: '박서연', role: 'creator' }, + { id: 'user-001', name: '김민준' }, + { id: 'user-003', name: '이준호' }, + { id: 'user-004', name: '최유진' }, + { id: 'user-005', name: '정도현' }, + { id: 'user-006', name: '강지수' }, + { id: 'user-007', name: '송주영' }, + { id: 'user-008', name: '백현정' } + ], + participantCount: 8, + lastUpdated: '2025-09-30', + sections: 5, + todos: 9 + }, + { + id: 'minutes-028', + meetingId: 'meeting-029', + title: '예산 집행 검토 회의', + date: '2025-09-29', + time: '11:00', + status: 'complete', + participants: [ + { id: 'user-001', name: '김민준', role: 'creator' }, + { id: 'user-002', name: '박서연' }, + { id: 'user-005', name: '정도현' } + ], + participantCount: 3, + lastUpdated: '2025-09-29', + sections: 3, + todos: 4 + }, + { + id: 'minutes-029', + meetingId: 'meeting-030', + title: '고객 이탈 방지 전략 논의', + date: '2025-09-28', + time: '15:00', + status: 'draft', + participants: [ + { id: 'user-002', name: '박서연', role: 'creator' }, + { id: 'user-001', name: '김민준' }, + { id: 'user-004', name: '최유진' }, + { id: 'user-006', name: '강지수' }, + { id: 'user-003', name: '이준호' } + ], + participantCount: 5, + lastUpdated: '2025-09-28', + completionRate: 35, + sections: 2, + todos: 4 + }, + { + id: 'minutes-030', + meetingId: 'meeting-031', + title: '협력사 계약 검토 회의', + date: '2025-09-27', + time: '10:00', + status: 'complete', + participants: [ + { id: 'user-001', name: '김민준' }, + { id: 'user-002', name: '박서연' }, + { id: 'user-003', name: '이준호' , role: 'creator'}, + { id: 'user-005', name: '정도현' } + ], + participantCount: 4, + lastUpdated: '2025-09-27', + sections: 3, + todos: 5 } ]; diff --git a/design/uiux/style-guide.md b/design/uiux/style-guide.md index a0f7511..ca3087e 100644 --- a/design/uiux/style-guide.md +++ b/design/uiux/style-guide.md @@ -1245,3 +1245,4 @@ Todo 마감일 표시를 위한 D-day 배지 스타일입니다. | 1.2.1 | 2025-10-23 | 강지수 | 회의 진행 화면 액션아이템 탭 UI/UX 개선 (v1.2.1)
- **기능 개선**: 전체 영역 "편집" 버튼 제거, "추가" 버튼 추가
- **Todo 카드별 편집 버튼**: 10-회의록상세조회 화면과 동일하게 각 Todo 카드에 ✏️ 편집 버튼 추가
- **Todo 편집 모달**: 추가/편집 공통 모달 구현
- 모달 제목: "Todo 추가" 또는 "Todo 편집"
- 입력 필드: Todo 제목, 담당자 (선택), 마감일 (날짜 선택), 우선순위 (높음/보통/낮음)
- 유효성 검사: 필수 필드 검증
- 모바일: 전체화면 모달, 데스크톱: 중앙 모달 (600px)
- **UI 일관성**: common.css의 `.todo-card` 스타일 재사용
- **인터랙션**: "추가" 버튼 클릭 → 빈 모달, "편집" 버튼 클릭 → 기존 데이터 로드 | | 1.2.2 | 2025-10-23 | 강지수 | 05-회의진행 화면 Todo 카드 스타일 통일 (v1.2.2)
- **Todo 카드 구조 통일**: 10-회의록상세조회 화면과 동일한 HTML 구조 적용
- `.todo-card` > `.todo-top` > (`.todo-checkbox-wrapper` + `.todo-content-wrapper` + `.todo-actions`)
- 체크박스: `.todo-checkbox` (24px, border-radius 6px)
- 배지: `.todo-badges` 컨테이너에 D-day 배지 + 우선순위 배지
- 제목: `.todo-title` (font-body, regular, gray-900)
- 메타 정보: `.todo-meta-row` (담당자, 마감일)
- 편집 버튼: 절대 위치 (top-right)
- **CSS 스타일 추가**: 10-회의록상세조회와 동일한 스타일 적용
- 호버 효과: shadow + primary 테두리
- 완료 상태: opacity 0.5 + gray 배경 + 취소선
- 아이콘 버튼: 32px, 호버 시 scale(1.1)
- **JavaScript 함수 추가**: `toggleTodoComplete()` 함수 구현
- 완료/미완료 토글 기능
- 확인 다이얼로그 표시
- 토스트 메시지 표시 | | 1.2.3 | 2025-10-23 | 강지수 | 05-회의진행 화면 D-day 배지 제거 (v1.2.3)
- **정책 변경**: 회의 진행 중에는 Todo의 마감일이 확정되지 않았으므로 D-day 배지 숨김
- **Todo 카드 배지 수정**: 우선순위 배지만 표시 (D-day 배지 제거)
- Todo 1: 높음
- Todo 2: 보통
- Todo 3: 높음
- **마감일 표시 간소화**: "2025-10-23 마감" → "마감: 10/23"
- **이유**: 회의 중 작성되는 Todo는 마감일이 임시로 입력된 것이며, 회의 종료 후 확정됨
- **다른 화면**: 09-Todo관리, 10-회의록상세조회는 D-day 배지 유지 (확정된 회의록) | +| 1.2.4 | 2025-10-24 | 이미준 | 12-회의록목록조회 화면 데이터 아키텍처 반영 (v1.2.4)
- **프로토타입 동기화**: UI/UX 설계서 v1.4.14 변경사항 반영
- **데이터 아키텍처 명시**: common.js → SAMPLE_MINUTES 배열 기반 동적 렌더링
- **정렬 옵션 레이블 변경**: "최신순" → "최근수정순", "회의일시순" → "최근회의순"
- **페이지네이션**: 초기 10개 표시, "10개 더보기" 버튼으로 추가 로딩
- **샘플 데이터**: 총 30개 (작성중 13개, 확정완료 17개) | diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index 1ea5c5a..f8eebe3 100644 --- a/design/uiux/uiux.md +++ b/design/uiux/uiux.md @@ -1609,23 +1609,42 @@ graph TD - **목적**: 회의록 목록 조회 및 필터링/정렬/검색 기능 제공 - **관련 유저스토리**: UFR-MEET-046 (회의록목록조회) - **비즈니스 중요도**: 높음 +- **프로토타입**: design/uiux/prototype/12-회의록목록조회.html +- **데이터 소스**: common.js → SAMPLE_MINUTES 배열 (30개 샘플 데이터) - **접근 경로**: - 대시보드 → "내 회의록" 전체 보기 - 하단 네비게이션 → "회의록" 메뉴 +#### 데이터 아키텍처 +- **데이터 레이어**: common.js의 SAMPLE_MINUTES 배열 + - 총 30개 샘플 데이터 (작성중 13개, 확정완료 17개) + - 각 회의록 객체 구조: id, meetingId, title, date, time, status, participants, participantCount, lastUpdated, sections, todos, completionRate +- **뷰 레이어**: 12-회의록목록조회.html + - JavaScript 기반 동적 렌더링 + - renderMeetings() 함수: 필터링/정렬/검색 로직 처리 후 목록 생성 + - createMeetingCard() 함수: 개별 회의록 카드 HTML 생성 +- **렌더링 방식**: + - 페이지 로드 시: DOMContentLoaded 이벤트에서 renderMeetings() 호출 + - 초기 표시: 10개 회의록 (displayedCount 변수로 관리) + - 추가 로딩: "10개 더보기" 버튼 클릭 시 10개씩 증가 + - 필터/정렬/검색 시: 즉시 renderMeetings() 재호출하여 목록 갱신 + #### 주요 기능 1. **회의록 목록 조회** (참여/생성한 회의록) 2. **필터링 기능**: - 참여 유형: 참석한 회의, 생성한 회의 - 상태: 전체, 작성중, 확정완료 3. **정렬 기능**: - - 최신 회의순 (회의 일시 기준, 최근 순) - - 최신 업데이트순 (수정 일시 기준, 최근 순) - - 제목 가나다순 (오름차순) + - 최근수정순 (수정 일시 기준, 최근 순) - 기본값 + - 최근회의순 (회의 일시 기준, 최근 순) + - 제목순 (가나다순) 4. **검색 기능**: - 제목, 참석자, 키워드로 통합 검색 - 실시간 검색 결과 업데이트 -5. 회의록 상세 조회 (항목 클릭 시) +5. **페이지네이션**: + - 초기 10개 회의록 표시 + - "10개 더보기" 버튼으로 추가 로딩 +6. 회의록 상세 조회 (항목 클릭 시) #### UI 구성요소 @@ -2084,6 +2103,7 @@ graph TD | 1.4.11 | 2025-10-23 | 강지수 | 회의 진행 화면 액션아이템 탭 UI/UX 개선
- **05-회의진행**: 액션아이템 섹션 사용성 개선
- **"편집" 버튼 제거**: 전체 영역 편집 버튼 삭제, "추가" 버튼으로 변경
- **Todo 카드별 편집 버튼 추가**: 10-회의록상세조회 화면과 동일한 구조
- 각 Todo 카드 우측에 ✏️ 편집 버튼 배치
- common.css의 .todo-card 스타일 재사용으로 일관성 유지
- **Todo 편집 모달 구현**: 추가/편집 공통 모달
- 모달 제목: "Todo 추가" 또는 "Todo 편집" (동적 변경)
- 입력 필드: Todo 제목(필수), 담당자 선택(필수), 마감일(필수), 우선순위(필수)
- 유효성 검사: 각 필드별 필수 검증
- 모바일: 전체화면 모달 (100vh), 데스크톱: 중앙 모달 (600px)
- **인터랙션 정의**:
- "추가" 버튼: 빈 모달 표시, 모든 필드 초기화
- "편집" 버튼: 기존 Todo 데이터 로드 및 모달 표시
- "저장" 버튼: 유효성 검사 후 저장, 성공 토스트 표시
- **JavaScript 함수 추가**: addTodoItem(), editTodoItem(todoId), saveTodoItem()
- **프로토타입**: design/uiux/prototype/05-회의진행.html 수정 (~100줄 추가)
- **스타일 가이드**: design/uiux/style-guide.md v1.2.1 (변경 이력 추가)
- **일관성**: 10-회의록상세조회, 09-Todo관리 화면과 Todo 카드 편집 방식 통일 | | 1.4.12 | 2025-10-23 | 강지수 | 05-회의진행 화면 Todo 카드 스타일 10-회의록상세조회와 완전 통일
- **Todo 카드 HTML 구조 통일**:
- 기존: inline-flex 기반 간소화 구조
- 변경: `.todo-card` > `.todo-top` > (`.todo-checkbox-wrapper` + `.todo-content-wrapper` + `.todo-actions`) 구조
- 10-회의록상세조회.html과 100% 동일한 HTML 구조 적용
- **CSS 스타일 추가**: 페이지 하단 `
- -
-
-
-

2025년 1분기 제품 기획 회의

-
+ +
+
+

2025년 1분기 제품 기획 회의

+
-
-
-
- 00:28:06 -
-
-
-
-
-
-
-
- -
-
김
-
박
-
이
-
최
+
+
+ + 00:15:51 +
+
+
+
+
+
-
+
- +
-
- -
- -
-
회의 개요
-
논의 사항
-
결정 사항
-
액션 아이템
-
- - -
- -
- -
-
-

🤖 AI 요약

-
- 2분 전 생성 - -
+
+ +
+
+
+ 회의 목적 + 2025년 1분기 신제품 개발 방향 수립
-

- 2025년 1분기 신제품 개발을 위한 기획 회의입니다. AI 기반 회의록 자동화 서비스의 핵심 기능과 차별화 전략에 대해 논의하였으며, 예상 개발 일정은 3개월입니다. -

-
- -
-
-

내용

- +
+ 일시 + 2025년 10월 25일 14:00 - 15:30
-
-

회의 목적: 2025년 1분기 신제품 개발 방향 수립

-

참석자: 김민준(PM), 박서연(AI), 이준호(Backend), 최유진(Frontend)

-

일시: 2025년 10월 25일 14:00 - 15:30

-

장소: 본사 2층 대회의실

-
-
- -
- - +
+ 장소 + 본사 2층 대회의실 +
+ +
+ 회의 안건 + 1. 제품 핵심 기능 정의
2. 타겟 고객층 설정
3. 개발 일정 수립 +
- - - - -
- - - - - -
- - -
-
-
-
-
-

참고자료

- -
-
- -
- - - - -
- - -