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>

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 = '<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>
+              ${createBadge(statusBadge.text, statusBadge.type)}
+              ${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>

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;
+    }
+
   </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-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 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="sortFilter" onchange="applyFilters()">
+                <option value="modified">최근수정순</option>
+                <option value="meeting">최근회의순</option>
+                <option value="title">제목순</option>
+              </select>
+            </div>
+          </div>
+
+          <!-- 참여 유형 탭 (다중 선택 가능) -->
+          <div class="participation-tabs">
+            <button class="participation-tab" data-type="attended" onclick="toggleParticipationType('attended')">
+              참석한 회의
+            </button>
+            <button class="participation-tab" data-type="created" onclick="toggleParticipationType('created')">
+              생성한 회의
+            </button>
+          </div>
         </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="title">제목순</option>
-          </select>
+        <!-- 검색 -->
+        <div class="search-wrapper">
+          <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 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>
-        <button class="participation-tab" data-type="created" onclick="filterByParticipation('created')">
-          생성한 회의
-        </button>
-      </div>
-
-      <!-- 검색 -->
-      <div class="search-wrapper">
-        <span class="search-icon">🔍</span>
-        <input
-          type="text"
-          class="search-input"
-          placeholder="회의 제목, 참석자, 키워드 검색"
-          id="searchInput"
-          oninput="applyFilters()"
-        >
-      </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>
+      <!-- 동적으로 렌더링됨 -->
+    </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') {
-          meetingList.appendChild(item);
+      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') {
+      // 모든 아이템 계산 (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++;
-          const status = item.dataset.status;
           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>

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
   }
 ];