mirror of
https://github.com/hwanny1128/HGZero.git
synced 2026-01-21 20:46:23 +00:00
12-회의록목록조회 화면 데이터 아키텍처 문서화 (v2.0.6, v1.4.14, v1.2.4)
- 유저스토리 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 <noreply@anthropic.com>
This commit is contained in:
yabo0812
parent
0dc0e0cee6
commit
688d456a12
@ -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 = '<div class="empty-state"><div class="empty-icon">📝</div><p>참여한 회의록이 없습니다</p></div>';
|
||||
@ -838,11 +845,9 @@
|
||||
return `
|
||||
<div class="minutes-card" onclick="navigateTo('10-회의록상세조회.html')">
|
||||
<div class="minutes-card-header">
|
||||
<div class="minutes-card-badges">
|
||||
${createBadge(statusBadge.text, statusBadge.type)}
|
||||
</div>
|
||||
${isCreator ? '<span style="font-size: 16px; flex-shrink: 0;" title="생성자">👑</span>' : ''}
|
||||
<h4 class="minutes-card-title">${minutes.title}</h4>
|
||||
${isCreator ? '<span style="font-size: 16px;" title="생성자">👑</span>' : ''}
|
||||
</div>
|
||||
<div class="minutes-card-meta">
|
||||
<span>📅 ${formatDate(minutes.date)} ${formatTime(minutes.time)}</span>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.filter-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
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; /* 데스크톱에서는 래퍼 무시 */
|
||||
}
|
||||
|
||||
.filter-grid {
|
||||
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);
|
||||
}
|
||||
|
||||
/* 회의록 목록 */
|
||||
.meeting-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
.status-filter-tab.active {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
/* 반응형: 그리드 레이아웃 */
|
||||
@media (min-width: 640px) {
|
||||
.status-filter-tab:hover {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.status-count {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/* 회의록 목록 - 모바일 1열, 데스크톱 2열 */
|
||||
.meeting-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
/* 데스크톱에서 2열 그리드 */
|
||||
@media (min-width: 768px) {
|
||||
.meeting-list {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.meeting-list {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-columns: repeat(2, 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;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="layout-sidebar-header">
|
||||
@ -381,7 +461,7 @@
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<button class="icon-btn" onclick="navigateTo('02-대시보드.html')">←</button>
|
||||
<h1 class="header-title">내 회의록</h1>
|
||||
<h1 class="header-title">회의록</h1>
|
||||
</div>
|
||||
<!-- Mobile 프로필 아이콘 -->
|
||||
<button class="mobile-profile-btn" onclick="toggleProfileMenu()" title="프로필">
|
||||
@ -406,249 +486,74 @@
|
||||
<main class="main-content">
|
||||
<!-- 필터 및 검색 -->
|
||||
<div class="filter-section">
|
||||
<!-- 필터 그리드 -->
|
||||
<div class="filter-container">
|
||||
<!-- 모바일: 정렬 + 참여유형 한 줄 -->
|
||||
<div class="filter-top-row">
|
||||
<!-- 정렬 -->
|
||||
<div class="filter-grid">
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">상태</label>
|
||||
<select class="filter-select" id="statusFilter" onchange="applyFilters()">
|
||||
<option value="all">전체</option>
|
||||
<option value="draft">작성중</option>
|
||||
<option value="complete">확정완료</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">정렬</label>
|
||||
<select class="filter-select" id="sortFilter" onchange="applyFilters()">
|
||||
<option value="latest">최신순</option>
|
||||
<option value="meeting">회의일시순</option>
|
||||
<option value="modified">최근수정순</option>
|
||||
<option value="meeting">최근회의순</option>
|
||||
<option value="title">제목순</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 참여 유형 탭 -->
|
||||
<!-- 참여 유형 탭 (다중 선택 가능) -->
|
||||
<div class="participation-tabs">
|
||||
<button class="participation-tab active" data-type="all" onclick="filterByParticipation('all')">
|
||||
전체
|
||||
</button>
|
||||
<button class="participation-tab" data-type="attended" onclick="filterByParticipation('attended')">
|
||||
<button class="participation-tab" data-type="attended" onclick="toggleParticipationType('attended')">
|
||||
참석한 회의
|
||||
</button>
|
||||
<button class="participation-tab" data-type="created" onclick="filterByParticipation('created')">
|
||||
<button class="participation-tab" data-type="created" onclick="toggleParticipationType('created')">
|
||||
생성한 회의
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 검색 -->
|
||||
<div class="search-wrapper">
|
||||
<span class="search-icon">🔍</span>
|
||||
<div class="search-input-wrapper">
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
placeholder="회의 제목, 참석자, 키워드 검색"
|
||||
id="searchInput"
|
||||
oninput="applyFilters()"
|
||||
onkeypress="if(event.key==='Enter') handleSearch()"
|
||||
>
|
||||
</div>
|
||||
<button class="search-btn" onclick="handleSearch()">검색</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 통계 정보 -->
|
||||
<div class="stats-section">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">8</div>
|
||||
<div class="stat-label">전체</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">3</div>
|
||||
<div class="stat-label">작성중</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">5</div>
|
||||
<div class="stat-label">확정완료</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 상태 필터 탭 (통계 + 필터 결합) -->
|
||||
<div class="status-filter-tabs">
|
||||
<button class="status-filter-tab active" data-status="all" onclick="filterByStatus('all')">
|
||||
전체 <span class="status-count" id="count-all">(20)</span>
|
||||
</button>
|
||||
<button class="status-filter-tab" data-status="draft" onclick="filterByStatus('draft')">
|
||||
작성중 <span class="status-count" id="count-draft">(7)</span>
|
||||
</button>
|
||||
<button class="status-filter-tab" data-status="complete" onclick="filterByStatus('complete')">
|
||||
확정완료 <span class="status-count" id="count-complete">(13)</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 회의록 목록 -->
|
||||
<div class="meeting-list" id="meetingList">
|
||||
<!-- 회의록 1 -->
|
||||
<div class="meeting-item" data-status="complete" data-type="created" onclick="navigateTo('10-회의록상세조회.html')">
|
||||
<div class="meeting-header">
|
||||
<div>
|
||||
<h3 class="meeting-title">2025년 1분기 제품 기획 회의</h3>
|
||||
<div class="meeting-meta">
|
||||
<span class="meeting-meta-item">
|
||||
📅 2025-10-25 14:00
|
||||
</span>
|
||||
<span class="meeting-meta-item">
|
||||
👤 4명
|
||||
</span>
|
||||
</div>
|
||||
<div class="meeting-updated">최종 수정: 1시간 전</div>
|
||||
</div>
|
||||
<div class="meeting-badges">
|
||||
<span class="badge badge-complete">확정완료</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 동적으로 렌더링됨 -->
|
||||
</div>
|
||||
|
||||
<!-- 회의록 2 -->
|
||||
<div class="meeting-item" data-status="draft" data-type="attended" onclick="navigateTo('10-회의록상세조회.html')">
|
||||
<div class="meeting-header">
|
||||
<div>
|
||||
<h3 class="meeting-title">주간 스크럼 회의</h3>
|
||||
<div class="meeting-meta">
|
||||
<span class="meeting-meta-item">
|
||||
📅 2025-10-21 10:00
|
||||
</span>
|
||||
<span class="meeting-meta-item">
|
||||
👤 3명
|
||||
</span>
|
||||
</div>
|
||||
<div class="meeting-updated">최종 수정: 3시간 전</div>
|
||||
</div>
|
||||
<div class="meeting-badges">
|
||||
<span class="badge badge-draft">작성중</span>
|
||||
<span class="text-caption text-muted">60% 완료</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 회의록 3 -->
|
||||
<div class="meeting-item" data-status="complete" data-type="created" onclick="navigateTo('10-회의록상세조회.html')">
|
||||
<div class="meeting-header">
|
||||
<div>
|
||||
<h3 class="meeting-title">AI 기능 개선 회의</h3>
|
||||
<div class="meeting-meta">
|
||||
<span class="meeting-meta-item">
|
||||
📅 2025-10-23 15:00
|
||||
</span>
|
||||
<span class="meeting-meta-item">
|
||||
👤 2명
|
||||
</span>
|
||||
</div>
|
||||
<div class="meeting-updated">최종 수정: 2일 전</div>
|
||||
</div>
|
||||
<div class="meeting-badges">
|
||||
<span class="badge badge-complete">확정완료</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 회의록 4 -->
|
||||
<div class="meeting-item" data-status="complete" data-type="attended" onclick="navigateTo('10-회의록상세조회.html')">
|
||||
<div class="meeting-header">
|
||||
<div>
|
||||
<h3 class="meeting-title">개발 리소스 계획 회의</h3>
|
||||
<div class="meeting-meta">
|
||||
<span class="meeting-meta-item">
|
||||
📅 2025-10-22 11:00
|
||||
</span>
|
||||
<span class="meeting-meta-item">
|
||||
👤 5명
|
||||
</span>
|
||||
</div>
|
||||
<div class="meeting-updated">최종 수정: 1일 전</div>
|
||||
</div>
|
||||
<div class="meeting-badges">
|
||||
<span class="badge badge-complete">확정완료</span>
|
||||
<span class="text-caption text-muted">조회 전용</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 회의록 5 -->
|
||||
<div class="meeting-item" data-status="draft" data-type="created" onclick="navigateTo('10-회의록상세조회.html')">
|
||||
<div class="meeting-header">
|
||||
<div>
|
||||
<h3 class="meeting-title">경쟁사 분석 회의</h3>
|
||||
<div class="meeting-meta">
|
||||
<span class="meeting-meta-item">
|
||||
📅 2025-10-20 10:00
|
||||
</span>
|
||||
<span class="meeting-meta-item">
|
||||
👤 3명
|
||||
</span>
|
||||
</div>
|
||||
<div class="meeting-updated">최종 수정: 3일 전</div>
|
||||
</div>
|
||||
<div class="meeting-badges">
|
||||
<span class="badge badge-draft">작성중</span>
|
||||
<span class="text-caption text-muted">40% 완료</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 회의록 6 -->
|
||||
<div class="meeting-item" data-status="complete" data-type="attended" onclick="navigateTo('10-회의록상세조회.html')">
|
||||
<div class="meeting-header">
|
||||
<div>
|
||||
<h3 class="meeting-title">UI/UX 디자인 검토 회의</h3>
|
||||
<div class="meeting-meta">
|
||||
<span class="meeting-meta-item">
|
||||
📅 2025-10-19 14:00
|
||||
</span>
|
||||
<span class="meeting-meta-item">
|
||||
👤 4명
|
||||
</span>
|
||||
</div>
|
||||
<div class="meeting-updated">최종 수정: 4일 전</div>
|
||||
</div>
|
||||
<div class="meeting-badges">
|
||||
<span class="badge badge-complete">확정완료</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 회의록 7 -->
|
||||
<div class="meeting-item" data-status="draft" data-type="attended" onclick="navigateTo('10-회의록상세조회.html')">
|
||||
<div class="meeting-header">
|
||||
<div>
|
||||
<h3 class="meeting-title">사용자 인터뷰 결과</h3>
|
||||
<div class="meeting-meta">
|
||||
<span class="meeting-meta-item">
|
||||
📅 2025-10-18 14:00
|
||||
</span>
|
||||
<span class="meeting-meta-item">
|
||||
👤 2명
|
||||
</span>
|
||||
</div>
|
||||
<div class="meeting-updated">최종 수정: 5일 전</div>
|
||||
</div>
|
||||
<div class="meeting-badges">
|
||||
<span class="badge badge-draft">작성중</span>
|
||||
<span class="text-caption text-muted">조회 전용</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 회의록 8 -->
|
||||
<div class="meeting-item" data-status="complete" data-type="created" onclick="navigateTo('10-회의록상세조회.html')">
|
||||
<div class="meeting-header">
|
||||
<div>
|
||||
<h3 class="meeting-title">보안 검토 회의</h3>
|
||||
<div class="meeting-meta">
|
||||
<span class="meeting-meta-item">
|
||||
📅 2025-10-17 11:00
|
||||
</span>
|
||||
<span class="meeting-meta-item">
|
||||
👤 3명
|
||||
</span>
|
||||
</div>
|
||||
<div class="meeting-updated">최종 수정: 6일 전</div>
|
||||
</div>
|
||||
<div class="meeting-badges">
|
||||
<span class="badge badge-complete">확정완료</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 더보기 버튼 -->
|
||||
<div class="load-more-wrapper" id="loadMoreWrapper" style="display: none;">
|
||||
<button class="load-more-btn" onclick="loadMoreMeetings()">10개 더보기</button>
|
||||
</div>
|
||||
|
||||
<!-- 빈 상태 (검색 결과 없음) -->
|
||||
<div class="empty-state" id="emptyState" style="display: none;">
|
||||
<div class="empty-state-icon">🔍</div>
|
||||
<div class="empty-state-title">검색 결과가 없습니다</div>
|
||||
<p class="empty-state-desc">다른 키워드로 검색해보세요</p>
|
||||
</div>
|
||||
@ -670,119 +575,252 @@
|
||||
|
||||
<script src="common.js"></script>
|
||||
<script>
|
||||
let currentParticipationType = 'all';
|
||||
let selectedParticipationTypes = []; // 선택된 참여 유형 배열 (빈 배열 = 전체)
|
||||
let currentStatus = 'all';
|
||||
let currentSort = 'latest';
|
||||
let currentSort = 'modified';
|
||||
let currentSearch = '';
|
||||
let currentLoadedCount = 10; // 현재 로드된 항목 개수
|
||||
let currentFilteredItems = []; // 현재 필터링된 항목들 저장
|
||||
|
||||
// 참여 유형 필터
|
||||
function filterByParticipation(type) {
|
||||
currentParticipationType = type;
|
||||
/**
|
||||
* 회의록 카드 HTML 생성
|
||||
*/
|
||||
function createMeetingCard(minute) {
|
||||
const isCreator = minute.participants.some(p => p.id === CURRENT_USER.id && p.role === 'creator');
|
||||
const participationType = isCreator ? 'created' : 'attended';
|
||||
const statusBadge = minute.status === 'complete' ?
|
||||
'<span class="badge badge-complete">확정완료</span>' :
|
||||
'<span class="badge badge-draft">작성중</span>';
|
||||
const crownEmoji = isCreator ? '<span style="font-size: 16px; flex-shrink: 0;" title="생성자">👑</span>' : '';
|
||||
const completionRate = minute.status === 'draft' ? `<span>${minute.completionRate}% 완료</span>` : '';
|
||||
|
||||
return `
|
||||
<div class="meeting-item" data-status="${minute.status}" data-type="${participationType}" data-date="${minute.date}" onclick="navigateTo('10-회의록상세조회.html')">
|
||||
<div class="meeting-header">
|
||||
${statusBadge}
|
||||
${crownEmoji}
|
||||
<h3 class="meeting-title">${minute.title}</h3>
|
||||
</div>
|
||||
<div class="meeting-meta">
|
||||
<span>📅 ${minute.date} ${minute.time}</span>
|
||||
<span>👥 ${minute.participantCount}명</span>
|
||||
${completionRate}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 회의록 목록 렌더링
|
||||
*/
|
||||
function renderMeetings() {
|
||||
const meetingList = document.getElementById('meetingList');
|
||||
meetingList.innerHTML = SAMPLE_MINUTES.map(minute => createMeetingCard(minute)).join('');
|
||||
|
||||
// 초기 필터 적용
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
/**
|
||||
* 더보기 버튼 클릭 - 10개씩 추가 표시
|
||||
*/
|
||||
function loadMoreMeetings() {
|
||||
// 현재 필터링된 항목들 중에서 숨겨진 항목만 선택
|
||||
const hiddenItems = currentFilteredItems.filter(item =>
|
||||
item.classList.contains('hidden')
|
||||
);
|
||||
|
||||
const itemsToShow = hiddenItems.slice(0, 10);
|
||||
|
||||
itemsToShow.forEach(item => {
|
||||
item.classList.remove('hidden');
|
||||
item.style.display = 'block';
|
||||
});
|
||||
|
||||
currentLoadedCount += itemsToShow.length;
|
||||
|
||||
// 더 이상 숨겨진 항목이 없으면 더보기 버튼 숨김
|
||||
if (hiddenItems.length <= 10) {
|
||||
document.getElementById('loadMoreWrapper').style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 검색 버튼 클릭 핸들러
|
||||
*/
|
||||
function handleSearch() {
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
/**
|
||||
* 참여 유형 토글 (다중 선택 가능)
|
||||
*/
|
||||
function toggleParticipationType(type) {
|
||||
const button = document.querySelector(`[data-type="${type}"]`);
|
||||
|
||||
if (selectedParticipationTypes.includes(type)) {
|
||||
// 이미 선택되어 있으면 제거
|
||||
selectedParticipationTypes = selectedParticipationTypes.filter(t => t !== type);
|
||||
button.classList.remove('active');
|
||||
} else {
|
||||
// 선택되어 있지 않으면 추가
|
||||
selectedParticipationTypes.push(type);
|
||||
button.classList.add('active');
|
||||
}
|
||||
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
/**
|
||||
* 상태 필터 클릭
|
||||
*/
|
||||
function filterByStatus(status) {
|
||||
currentStatus = status;
|
||||
|
||||
// 탭 활성화
|
||||
document.querySelectorAll('.participation-tab').forEach(tab => {
|
||||
document.querySelectorAll('.status-filter-tab').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
document.querySelector(`[data-type="${type}"]`).classList.add('active');
|
||||
document.querySelector(`[data-status="${status}"]`).classList.add('active');
|
||||
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
// 필터 적용
|
||||
function applyFilters() {
|
||||
const statusFilter = document.getElementById('statusFilter').value;
|
||||
const sortFilter = document.getElementById('sortFilter').value;
|
||||
const searchInput = document.getElementById('searchInput').value.toLowerCase();
|
||||
|
||||
currentStatus = statusFilter;
|
||||
currentSort = sortFilter;
|
||||
currentSearch = searchInput;
|
||||
|
||||
const meetingItems = Array.from(document.querySelectorAll('.meeting-item'));
|
||||
const emptyState = document.getElementById('emptyState');
|
||||
let visibleCount = 0;
|
||||
|
||||
// 필터링
|
||||
// 1단계: 모든 항목 초기화 (숨김 처리)
|
||||
meetingItems.forEach(item => {
|
||||
item.style.display = 'none';
|
||||
item.classList.add('hidden');
|
||||
});
|
||||
|
||||
// 2단계: 필터링 조건에 맞는 항목만 선택
|
||||
let filteredItems = meetingItems.filter(item => {
|
||||
const itemStatus = item.dataset.status;
|
||||
const itemType = item.dataset.type;
|
||||
const itemTitle = item.querySelector('.meeting-title').textContent.toLowerCase();
|
||||
|
||||
let show = true;
|
||||
|
||||
// 참여 유형 필터
|
||||
if (currentParticipationType !== 'all' && itemType !== currentParticipationType) {
|
||||
show = false;
|
||||
// 참여 유형 필터 (다중 선택 로직)
|
||||
if (selectedParticipationTypes.length === 1) {
|
||||
if (!selectedParticipationTypes.includes(itemType)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 상태 필터
|
||||
if (currentStatus !== 'all' && itemStatus !== currentStatus) {
|
||||
show = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
// 검색
|
||||
if (currentSearch && !itemTitle.includes(currentSearch)) {
|
||||
show = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
item.style.display = show ? 'block' : 'none';
|
||||
if (show) visibleCount++;
|
||||
return true;
|
||||
});
|
||||
|
||||
// 정렬
|
||||
const matchCount = filteredItems.length;
|
||||
|
||||
// 3단계: 정렬
|
||||
if (currentSort === 'title') {
|
||||
meetingItems.sort((a, b) => {
|
||||
filteredItems.sort((a, b) => {
|
||||
const titleA = a.querySelector('.meeting-title').textContent;
|
||||
const titleB = b.querySelector('.meeting-title').textContent;
|
||||
return titleA.localeCompare(titleB);
|
||||
});
|
||||
} else if (currentSort === 'meeting') {
|
||||
filteredItems.sort((a, b) => {
|
||||
const dateA = a.dataset.date;
|
||||
const dateB = b.dataset.date;
|
||||
return dateB.localeCompare(dateA); // 최근회의순
|
||||
});
|
||||
}
|
||||
// modified는 이미 SAMPLE_MINUTES 순서대로 (lastUpdated 기준)
|
||||
|
||||
// 정렬된 순서로 다시 추가
|
||||
// 4단계: 현재 필터링된 항목들 저장
|
||||
currentFilteredItems = filteredItems;
|
||||
|
||||
// 5단계: 정렬된 순서로 DOM에 다시 추가
|
||||
const meetingList = document.getElementById('meetingList');
|
||||
meetingItems.forEach(item => {
|
||||
if (item.style.display !== 'none') {
|
||||
filteredItems.forEach(item => {
|
||||
meetingList.appendChild(item);
|
||||
});
|
||||
|
||||
// 6단계: 상위 10개만 표시, 나머지는 hidden 유지
|
||||
filteredItems.forEach((item, index) => {
|
||||
if (index < 10) {
|
||||
item.style.display = 'block';
|
||||
item.classList.remove('hidden');
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
item.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// 빈 상태 표시
|
||||
if (visibleCount === 0) {
|
||||
// 7단계: 빈 상태 표시
|
||||
if (matchCount === 0) {
|
||||
meetingList.style.display = 'none';
|
||||
emptyState.style.display = 'block';
|
||||
document.getElementById('loadMoreWrapper').style.display = 'none';
|
||||
} else {
|
||||
meetingList.style.display = 'flex';
|
||||
meetingList.style.display = 'grid';
|
||||
emptyState.style.display = 'none';
|
||||
|
||||
// 더보기 버튼: 필터링된 항목이 10개 초과이면 표시
|
||||
const hasMoreItems = matchCount > 10;
|
||||
document.getElementById('loadMoreWrapper').style.display = hasMoreItems ? 'flex' : 'none';
|
||||
}
|
||||
|
||||
// 통계 업데이트
|
||||
updateStats(meetingItems);
|
||||
// 통계 업데이트 (전체 개수 기준)
|
||||
updateStats();
|
||||
}
|
||||
|
||||
// 통계 업데이트
|
||||
function updateStats(items) {
|
||||
/**
|
||||
* 통계 업데이트 - 전체 회의록 개수 기준
|
||||
* (hidden 포함, 필터/검색 무관하게 전체 데이터 기준)
|
||||
*/
|
||||
function updateStats() {
|
||||
const allItems = Array.from(document.querySelectorAll('.meeting-item'));
|
||||
|
||||
let total = 0;
|
||||
let draft = 0;
|
||||
let complete = 0;
|
||||
|
||||
items.forEach(item => {
|
||||
if (item.style.display !== 'none') {
|
||||
total++;
|
||||
// 모든 아이템 계산 (hidden 포함)
|
||||
allItems.forEach(item => {
|
||||
const status = item.dataset.status;
|
||||
const itemType = item.dataset.type;
|
||||
|
||||
// 참여 유형 필터 적용
|
||||
let include = true;
|
||||
if (selectedParticipationTypes.length === 1) {
|
||||
if (!selectedParticipationTypes.includes(itemType)) {
|
||||
include = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (include) {
|
||||
total++;
|
||||
if (status === 'draft') draft++;
|
||||
if (status === 'complete') complete++;
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.stat-value')[0].textContent = total;
|
||||
document.querySelectorAll('.stat-value')[1].textContent = draft;
|
||||
document.querySelectorAll('.stat-value')[2].textContent = complete;
|
||||
document.getElementById('count-all').textContent = `(${total})`;
|
||||
document.getElementById('count-draft').textContent = `(${draft})`;
|
||||
document.getElementById('count-complete').textContent = `(${complete})`;
|
||||
}
|
||||
|
||||
// 초기 통계 설정
|
||||
const allItems = Array.from(document.querySelectorAll('.meeting-item'));
|
||||
updateStats(allItems);
|
||||
|
||||
/**
|
||||
* 프로필 메뉴 토글 (Mobile)
|
||||
*/
|
||||
@ -807,6 +845,11 @@
|
||||
navigateTo('01-로그인.html');
|
||||
}
|
||||
}
|
||||
|
||||
// 페이지 로드 시 회의록 렌더링
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
renderMeetings();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
452
design/uiux/prototype/common.js
vendored
452
design/uiux/prototype/common.js
vendored
@ -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
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@ -1245,3 +1245,4 @@ Todo 마감일 표시를 위한 D-day 배지 스타일입니다.
|
||||
| 1.2.1 | 2025-10-23 | 강지수 | 회의 진행 화면 액션아이템 탭 UI/UX 개선 (v1.2.1)<br>- **기능 개선**: 전체 영역 "편집" 버튼 제거, "추가" 버튼 추가<br>- **Todo 카드별 편집 버튼**: 10-회의록상세조회 화면과 동일하게 각 Todo 카드에 ✏️ 편집 버튼 추가<br>- **Todo 편집 모달**: 추가/편집 공통 모달 구현<br> - 모달 제목: "Todo 추가" 또는 "Todo 편집"<br> - 입력 필드: Todo 제목, 담당자 (선택), 마감일 (날짜 선택), 우선순위 (높음/보통/낮음)<br> - 유효성 검사: 필수 필드 검증<br> - 모바일: 전체화면 모달, 데스크톱: 중앙 모달 (600px)<br>- **UI 일관성**: common.css의 `.todo-card` 스타일 재사용<br>- **인터랙션**: "추가" 버튼 클릭 → 빈 모달, "편집" 버튼 클릭 → 기존 데이터 로드 |
|
||||
| 1.2.2 | 2025-10-23 | 강지수 | 05-회의진행 화면 Todo 카드 스타일 통일 (v1.2.2)<br>- **Todo 카드 구조 통일**: 10-회의록상세조회 화면과 동일한 HTML 구조 적용<br> - `.todo-card` > `.todo-top` > (`.todo-checkbox-wrapper` + `.todo-content-wrapper` + `.todo-actions`)<br> - 체크박스: `.todo-checkbox` (24px, border-radius 6px)<br> - 배지: `.todo-badges` 컨테이너에 D-day 배지 + 우선순위 배지<br> - 제목: `.todo-title` (font-body, regular, gray-900)<br> - 메타 정보: `.todo-meta-row` (담당자, 마감일)<br> - 편집 버튼: 절대 위치 (top-right)<br>- **CSS 스타일 추가**: 10-회의록상세조회와 동일한 스타일 적용<br> - 호버 효과: shadow + primary 테두리<br> - 완료 상태: opacity 0.5 + gray 배경 + 취소선<br> - 아이콘 버튼: 32px, 호버 시 scale(1.1)<br>- **JavaScript 함수 추가**: `toggleTodoComplete()` 함수 구현<br> - 완료/미완료 토글 기능<br> - 확인 다이얼로그 표시<br> - 토스트 메시지 표시 |
|
||||
| 1.2.3 | 2025-10-23 | 강지수 | 05-회의진행 화면 D-day 배지 제거 (v1.2.3)<br>- **정책 변경**: 회의 진행 중에는 Todo의 마감일이 확정되지 않았으므로 D-day 배지 숨김<br>- **Todo 카드 배지 수정**: 우선순위 배지만 표시 (D-day 배지 제거)<br> - Todo 1: 높음<br> - Todo 2: 보통<br> - Todo 3: 높음<br>- **마감일 표시 간소화**: "2025-10-23 마감" → "마감: 10/23"<br>- **이유**: 회의 중 작성되는 Todo는 마감일이 임시로 입력된 것이며, 회의 종료 후 확정됨<br>- **다른 화면**: 09-Todo관리, 10-회의록상세조회는 D-day 배지 유지 (확정된 회의록) |
|
||||
| 1.2.4 | 2025-10-24 | 이미준 | 12-회의록목록조회 화면 데이터 아키텍처 반영 (v1.2.4)<br>- **프로토타입 동기화**: UI/UX 설계서 v1.4.14 변경사항 반영<br>- **데이터 아키텍처 명시**: common.js → SAMPLE_MINUTES 배열 기반 동적 렌더링<br>- **정렬 옵션 레이블 변경**: "최신순" → "최근수정순", "회의일시순" → "최근회의순"<br>- **페이지네이션**: 초기 10개 표시, "10개 더보기" 버튼으로 추가 로딩<br>- **샘플 데이터**: 총 30개 (작성중 13개, 확정완료 17개) |
|
||||
|
||||
@ -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 개선<br>- **05-회의진행**: 액션아이템 섹션 사용성 개선<br> - **"편집" 버튼 제거**: 전체 영역 편집 버튼 삭제, "추가" 버튼으로 변경<br> - **Todo 카드별 편집 버튼 추가**: 10-회의록상세조회 화면과 동일한 구조<br> - 각 Todo 카드 우측에 ✏️ 편집 버튼 배치<br> - common.css의 .todo-card 스타일 재사용으로 일관성 유지<br> - **Todo 편집 모달 구현**: 추가/편집 공통 모달<br> - 모달 제목: "Todo 추가" 또는 "Todo 편집" (동적 변경)<br> - 입력 필드: Todo 제목(필수), 담당자 선택(필수), 마감일(필수), 우선순위(필수)<br> - 유효성 검사: 각 필드별 필수 검증<br> - 모바일: 전체화면 모달 (100vh), 데스크톱: 중앙 모달 (600px)<br> - **인터랙션 정의**:<br> - "추가" 버튼: 빈 모달 표시, 모든 필드 초기화<br> - "편집" 버튼: 기존 Todo 데이터 로드 및 모달 표시<br> - "저장" 버튼: 유효성 검사 후 저장, 성공 토스트 표시<br>- **JavaScript 함수 추가**: addTodoItem(), editTodoItem(todoId), saveTodoItem()<br>- **프로토타입**: design/uiux/prototype/05-회의진행.html 수정 (~100줄 추가)<br>- **스타일 가이드**: design/uiux/style-guide.md v1.2.1 (변경 이력 추가)<br>- **일관성**: 10-회의록상세조회, 09-Todo관리 화면과 Todo 카드 편집 방식 통일 |
|
||||
| 1.4.12 | 2025-10-23 | 강지수 | 05-회의진행 화면 Todo 카드 스타일 10-회의록상세조회와 완전 통일<br>- **Todo 카드 HTML 구조 통일**:<br> - 기존: inline-flex 기반 간소화 구조<br> - 변경: `.todo-card` > `.todo-top` > (`.todo-checkbox-wrapper` + `.todo-content-wrapper` + `.todo-actions`) 구조<br> - 10-회의록상세조회.html과 100% 동일한 HTML 구조 적용<br>- **CSS 스타일 추가**: 페이지 하단 `<style>` 블록에 완전한 Todo 카드 스타일 추가<br> - `.todo-card`: 카드 기본 스타일 (padding, border, shadow, hover 효과)<br> - `.todo-checkbox`: 24px 체크박스 (border-radius 6px, checked 시 success 색상)<br> - `.todo-badges`: D-day 배지 + 우선순위 배지 컨테이너<br> - `.todo-title`: font-body, regular 스타일 제목<br> - `.todo-meta-row`: 담당자 + 마감일 메타 정보<br> - `.todo-actions`: 절대 위치 (top-right) 편집 버튼<br> - `.icon-btn`: 32px 아이콘 버튼, 호버 시 scale(1.1) 효과<br> - `.completed` 상태: opacity 0.5, 취소선, gray 배경<br>- **JavaScript 함수 추가**: `toggleTodoComplete(todoId, isChecked)` 구현<br> - 완료 처리: 확인 다이얼로그 → .completed 클래스 추가 → 성공 토스트<br> - 미완료 처리: 확인 다이얼로그 → .completed 클래스 제거 → 정보 토스트<br> - 사용자 취소 시: 체크박스 상태 원복<br>- **샘플 데이터 업데이트**: 3개 Todo 카드에 D-day 배지 추가<br> - Todo 1: D-2 (badge-warning) + 높음<br> - Todo 2: D-7 (badge-primary) + 보통<br> - Todo 3: D-day (badge-error) + 높음<br>- **프로토타입**: design/uiux/prototype/05-회의진행.html 수정 (~120줄 추가)<br>- **스타일 가이드**: design/uiux/style-guide.md v1.2.2 (변경 이력 추가)<br>- **완전한 일관성**: 05-회의진행 ≡ 10-회의록상세조회 ≡ 09-Todo관리 (3개 화면 Todo 카드 100% 통일) |
|
||||
| 1.4.13 | 2025-10-23 | 강지수 | 05-회의진행 화면 D-day 배지 제거 (회의 중 Todo는 마감일 미확정)<br>- **정책 변경**: 회의 진행 중 Todo는 마감일이 확정되지 않았으므로 D-day 배지 숨김<br> - 회의 중 작성되는 Todo의 마감일은 임시 값<br> - 회의 종료 후 회의록 확정 시 마감일도 함께 확정<br>- **Todo 카드 배지 수정**: 우선순위 배지만 표시<br> - Todo 1: 높음 (D-day 배지 제거)<br> - Todo 2: 보통 (D-day 배지 제거)<br> - Todo 3: 높음 (D-day 배지 제거)<br>- **마감일 표시 간소화**: "2025-10-23 마감" → "마감: 10/23"<br> - 연도 제거로 가독성 향상<br> - 짧은 형식으로 카드 공간 효율 개선<br>- **다른 화면 비교**:<br> - 09-Todo관리: D-day 배지 표시 (확정된 회의록의 Todo)<br> - 10-회의록상세조회: D-day 배지 표시 (확정 완료된 회의록)<br> - 05-회의진행: D-day 배지 숨김 (진행 중, 마감일 미확정)<br>- **프로토타입**: design/uiux/prototype/05-회의진행.html 수정<br>- **스타일 가이드**: design/uiux/style-guide.md v1.2.3 (변경 이력 추가) |
|
||||
| 1.4.14 | 2025-10-24 | 이미준 | 12-회의록목록조회 화면 데이터 아키텍처 및 렌더링 방식 문서화<br>- **데이터 아키텍처 섹션 추가**: 데이터/뷰 레이어 분리 구조 설명<br> - 데이터 레이어: common.js → SAMPLE_MINUTES 배열 (30개 샘플)<br> - 뷰 레이어: 12-회의록목록조회.html → renderMeetings(), createMeetingCard() 함수<br> - 렌더링 방식: 동적 렌더링, 초기 10개 표시, "10개 더보기" 버튼으로 추가 로딩<br>- **정렬 옵션 레이블 변경**: "최신순" → "최근수정순", "회의일시순" → "최근회의순"<br>- **페이지네이션 기능 문서화**: 초기 10개 표시, "10개 더보기" 버튼 기능 설명<br>- **샘플 데이터 분포 명시**: 총 30개 (작성중 13개, 확정완료 17개)<br>- **프로토타입 파일 경로 추가**: design/uiux/prototype/12-회의록목록조회.html<br>- **스타일 가이드 버전 업데이트**: v1.2.3 → v1.2.4 예정 |
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -258,26 +258,35 @@ UFR-MEET-046: [회의록목록조회] 회의록 작성자로서 | 나는, 작성
|
||||
[화면 정보]
|
||||
- 화면번호: 12-회의록목록조회
|
||||
- 프로토타입: design/uiux/prototype/12-회의록목록조회.html
|
||||
- 데이터 소스: common.js → SAMPLE_MINUTES 배열 (30개 샘플 데이터)
|
||||
|
||||
[데이터 구조]
|
||||
- **데이터 레이어**: common.js의 SAMPLE_MINUTES 배열
|
||||
- **뷰 레이어**: 12-회의록목록조회.html (동적 렌더링)
|
||||
- **렌더링 방식**: JavaScript로 SAMPLE_MINUTES 데이터를 동적으로 HTML로 생성
|
||||
- **샘플 데이터 분포**: 총 30개 (작성중 13개, 확정완료 17개)
|
||||
|
||||
[회의록 목록 조회]
|
||||
- 회의록 상태별 필터링: 전체 / 작성중 / 확정완료
|
||||
- 정렬 옵션: 최신순 / 회의일시순 / 제목순
|
||||
- 카테고리 필터: 전체 / 참석한 회의
|
||||
- 정렬 옵션: 최근수정순 / 최근회의순 / 제목순
|
||||
- 참여 유형 필터: 참석한 회의 / 생성한 회의 (다중 선택 가능)
|
||||
- 검색 기능: 회의 제목, 참석자, 키워드로 검색
|
||||
- 통계 표시: 전체 개수, 작성중 개수, 확정완료 개수
|
||||
- 페이지네이션: 초기 10개 표시, "10개 더보기" 버튼으로 추가 로드
|
||||
- 목록 표시 정보:
|
||||
- 회의 제목
|
||||
- 회의 일시
|
||||
- 참석자 수
|
||||
- 회의록 상태 (작성중/확정완료)
|
||||
- 검증 완료율 (작성중인 경우)
|
||||
- 권한 정보 (조회 전용 표시)
|
||||
- 검증 완료율 (작성중인 경우, %)
|
||||
- 생성자 표시 (👑 아이콘)
|
||||
- 마지막 수정 시간
|
||||
|
||||
[처리 결과]
|
||||
- 필터/정렬/검색 조건에 맞는 회의록 목록 표시
|
||||
- 회의록 클릭 시 상세 조회 화면으로 이동
|
||||
- 모바일/태블릿/데스크톱 반응형 레이아웃
|
||||
- 실시간 통계 업데이트
|
||||
|
||||
- M/8
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user