diff --git a/design/uiux/prototype/02-대시보드.html b/design/uiux/prototype/02-대시보드.html
index 991a7c7..b12d73a 100644
--- a/design/uiux/prototype/02-대시보드.html
+++ b/design/uiux/prototype/02-대시보드.html
@@ -307,16 +307,19 @@
       font-weight: var(--font-weight-medium);
     }
 
-    /* 회의록 리스트 - Todo 카드와 동일한 스타일 */
+    /* 회의록 리스트 - 그리드 형태 */
     .minutes-list {
-      background: var(--white);
-      border-radius: var(--radius-lg);
-      padding: var(--space-md);
-      box-shadow: var(--shadow-sm);
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: var(--space-md);
       margin-bottom: var(--space-xl);
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-sm);
+    }
+
+    /* 데스크톱에서 2x2 그리드 */
+    @media (min-width: 768px) {
+      .minutes-list {
+        grid-template-columns: repeat(2, 1fr);
+      }
     }
 
     /* 회의록 카드 스타일 */
@@ -347,7 +350,11 @@
       font-weight: var(--font-weight-medium);
       color: var(--gray-900);
       font-size: var(--font-base);
-      flex-shrink: 0;
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
     }
 
     .minutes-card-meta {
@@ -819,7 +826,7 @@
       const myMinutes = SAMPLE_MINUTES
         .filter(m => m.participants.some(p => p.id === currentUser.id)) // 참여자 또는 생성자 모두 포함
         .sort((a, b) => new Date(b.date + ' ' + b.time) - new Date(a.date + ' ' + a.time)) // 최신순 정렬
-        .slice(0, 3); // 상위 3개만 표시
+        .slice(0, 4); // 상위 4개만 표시
 
       if (myMinutes.length === 0) {
         container.innerHTML = '<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>
diff --git a/design/uiux/prototype/12-회의록목록조회.html b/design/uiux/prototype/12-회의록목록조회.html
index c96dc11..b48e26a 100644
--- a/design/uiux/prototype/12-회의록목록조회.html
+++ b/design/uiux/prototype/12-회의록목록조회.html
@@ -95,23 +95,49 @@
       margin-bottom: var(--space-lg);
     }
 
-    .filter-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
+    /* 필터 컨테이너 */
+    .filter-container {
+      display: flex;
+      flex-direction: column;
       gap: var(--space-md);
-      margin-bottom: var(--space-md);
     }
 
-    /* 반응형: 필터 그리드 */
-    @media (min-width: 640px) {
-      .filter-grid {
-        grid-template-columns: repeat(3, 1fr);
+    /* 모바일: 정렬 + 참여유형을 한 줄로 */
+    .filter-top-row {
+      display: flex;
+      gap: var(--space-md);
+      align-items: center;
+    }
+
+    .filter-grid {
+      flex: 0 0 auto;
+      min-width: 140px;
+    }
+
+    /* 데스크톱: 한 줄 레이아웃 */
+    @media (min-width: 768px) {
+      .filter-section {
+        padding: var(--space-lg);
+      }
+
+      .filter-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--space-md);
+      }
+
+      .filter-top-row {
+        display: contents; /* 데스크톱에서는 래퍼 무시 */
       }
-    }
 
-    @media (min-width: 1024px) {
       .filter-grid {
-        grid-template-columns: repeat(4, 1fr);
+        flex: 0 0 auto;
+        min-width: 140px;
+      }
+
+      .filter-label {
+        display: none;
       }
     }
 
@@ -148,10 +174,15 @@
     .participation-tabs {
       display: flex;
       gap: var(--space-sm);
-      margin-bottom: var(--space-md);
       overflow-x: auto;
     }
 
+    @media (min-width: 768px) {
+      .participation-tabs {
+        flex: 0 0 auto;
+      }
+    }
+
     .participation-tab {
       padding: 8px 16px;
       border: 1px solid var(--gray-300);
@@ -172,22 +203,24 @@
 
     /* 검색 영역 */
     .search-wrapper {
-      position: relative;
-      margin-bottom: var(--space-md);
+      display: flex;
+      gap: var(--space-sm);
     }
 
-    .search-icon {
-      position: absolute;
-      left: 12px;
-      top: 50%;
-      transform: translateY(-50%);
-      font-size: 20px;
-      color: var(--gray-500);
+    @media (min-width: 768px) {
+      .search-wrapper {
+        flex: 1;
+      }
+    }
+
+    .search-input-wrapper {
+      position: relative;
+      flex: 1;
     }
 
     .search-input {
       width: 100%;
-      padding: 12px 16px 12px 40px;
+      padding: 12px 16px;
       border: 1px solid var(--gray-300);
       border-radius: var(--radius-md);
       font-size: var(--font-body);
@@ -201,110 +234,127 @@
       box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.1);
     }
 
-    /* 통계 정보 - 컴팩트하게 */
-    .stats-section {
-      background: var(--white);
-      border-radius: var(--radius-lg);
-      box-shadow: var(--shadow-sm);
-      padding: var(--space-md);
-      margin-bottom: var(--space-lg);
-    }
-
-    /* common.css의 stats-grid 스타일 활용 */
-    .stat-item {
-      text-align: center;
-      padding: var(--space-md);
-      background: var(--gray-50);
+    .search-btn {
+      padding: 12px 20px;
+      background: var(--primary);
+      color: var(--white);
+      border: none;
       border-radius: var(--radius-md);
-      min-height: 80px;
+      font-size: var(--font-body);
+      font-weight: var(--font-weight-semibold);
+      cursor: pointer;
+      transition: background var(--transition-fast);
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    .search-btn:hover {
+      background: var(--primary-dark);
+    }
+
+    .search-btn:active {
+      transform: scale(0.98);
+    }
+
+    /* 상태 필터 탭 (09-Todo관리 스타일) */
+    .status-filter-tabs {
       display: flex;
-      flex-direction: column;
-      justify-content: center;
+      gap: var(--space-sm);
+      margin-bottom: var(--space-lg);
+      overflow-x: auto;
+      padding-bottom: var(--space-sm);
     }
 
-    .stat-value {
-      font-size: var(--font-h2);
-      font-weight: var(--font-weight-bold);
-      color: var(--primary);
-      margin-bottom: var(--space-xs);
-    }
-
-    .stat-label {
+    .status-filter-tab {
+      padding: 8px 16px;
+      background: var(--white);
+      border: 1px solid var(--gray-300);
+      border-radius: 20px;
       font-size: var(--font-small);
-      color: var(--gray-600);
+      font-weight: var(--font-weight-medium);
+      color: var(--gray-700);
+      cursor: pointer;
+      white-space: nowrap;
+      transition: all var(--transition-fast);
     }
 
-    /* 회의록 목록 */
+    .status-filter-tab.active {
+      background: var(--primary);
+      color: var(--white);
+      border-color: var(--primary);
+    }
+
+    .status-filter-tab:hover {
+      border-color: var(--primary);
+    }
+
+    .status-count {
+      margin-left: 2px;
+    }
+
+    /* 회의록 목록 - 모바일 1열, 데스크톱 2열 */
     .meeting-list {
-      display: flex;
-      flex-direction: column;
+      display: grid;
+      grid-template-columns: 1fr;
       gap: var(--space-md);
     }
 
-    /* 반응형: 그리드 레이아웃 */
-    @media (min-width: 640px) {
+    /* 데스크톱에서 2열 그리드 */
+    @media (min-width: 768px) {
       .meeting-list {
-        display: grid;
         grid-template-columns: repeat(2, 1fr);
-        gap: var(--space-md);
-      }
-    }
-
-    @media (min-width: 1024px) {
-      .meeting-list {
-        grid-template-columns: repeat(3, 1fr);
-      }
-    }
-
-    @media (min-width: 1440px) {
-      .meeting-list {
-        grid-template-columns: repeat(4, 1fr);
       }
     }
 
+    /* 회의록 카드 - 대시보드와 동일한 스타일 */
     .meeting-item {
+      border: 1px solid var(--gray-300);
+      border-radius: var(--radius-md);
       background: var(--white);
-      border-radius: var(--radius-lg);
-      box-shadow: var(--shadow-md);
-      padding: var(--space-md);
+      transition: all var(--transition-fast);
       cursor: pointer;
-      transition: all var(--transition-normal);
+      padding: var(--space-md);
     }
 
     .meeting-item:hover {
-      box-shadow: var(--shadow-lg);
-      transform: translateY(-2px);
+      box-shadow: var(--shadow-md);
+      border-color: var(--primary);
     }
 
     .meeting-header {
       display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
+      justify-content: flex-start;
+      align-items: center;
+      gap: var(--space-xs);
       margin-bottom: var(--space-sm);
+      flex-wrap: wrap;
     }
 
     .meeting-title {
-      flex: 1;
-      font-size: var(--font-body);
-      font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-medium);
       color: var(--gray-900);
-      margin-bottom: var(--space-xs);
+      font-size: var(--font-base);
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
     }
 
     .meeting-badges {
       display: flex;
-      flex-direction: column;
       gap: var(--space-xs);
-      align-items: flex-end;
+      align-items: center;
+      flex-shrink: 0;
     }
 
     .meeting-meta {
       display: flex;
-      align-items: center;
-      gap: var(--space-md);
+      flex-wrap: wrap;
+      gap: var(--space-sm);
       font-size: var(--font-small);
-      color: var(--gray-500);
-      margin-bottom: var(--space-xs);
+      color: var(--gray-600);
+      align-items: center;
     }
 
     .meeting-meta-item {
@@ -345,6 +395,36 @@
       margin-bottom: var(--space-lg);
     }
 
+    /* 더보기 버튼 */
+    .load-more-wrapper {
+      display: flex;
+      justify-content: center;
+      margin-top: var(--space-lg);
+      margin-bottom: var(--space-xl);
+    }
+
+    .load-more-btn {
+      padding: 12px 24px;
+      background: var(--white);
+      border: 2px solid var(--primary);
+      color: var(--primary);
+      border-radius: var(--radius-md);
+      font-size: var(--font-body);
+      font-weight: var(--font-weight-semibold);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+    }
+
+    .load-more-btn:hover {
+      background: var(--primary);
+      color: var(--white);
+    }
+
+    /* 추가 데이터 숨김 처리 */
+    .meeting-item.hidden {
+      display: none;
+    }
+
   </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>
diff --git a/design/uiux/prototype/common.js b/design/uiux/prototype/common.js
index 1b4f320..49b3a6f 100644
--- a/design/uiux/prototype/common.js
+++ b/design/uiux/prototype/common.js
@@ -27,9 +27,9 @@ const SAMPLE_MEETINGS = [
     location: '본사 2층 대회의실',
     status: 'scheduled', // ongoing, scheduled, completed
     participants: [
-      { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green', role: 'creator' },
+      { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green' },
       { id: 'user-002', name: '박서연', avatar: '박', avatarColor: 'blue' },
-      { id: 'user-003', name: '이준호', avatar: '이', avatarColor: 'yellow' },
+      { id: 'user-003', name: '이준호', avatar: '이', avatarColor: 'yellow', role: 'creator' },
       { id: 'user-004', name: '최유진', avatar: '최', avatarColor: 'pink' }
     ],
     sections: 3,
@@ -76,8 +76,8 @@ const SAMPLE_MEETINGS = [
     location: '본사 1층 경영진 회의실',
     status: 'scheduled',
     participants: [
-      { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green', role: 'creator' },
-      { id: 'user-005', name: '정도현', avatar: '정', avatarColor: 'purple' }
+      { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green' },
+      { id: 'user-005', name: '정도현', avatar: '정', avatarColor: 'purple', role: 'creator' }
     ],
     sections: 0,
     todos: 0
@@ -107,9 +107,9 @@ const SAMPLE_MEETINGS = [
     location: '본사 4층 라운지',
     status: 'completed',
     participants: [
-      { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green', role: 'creator' },
+      { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green'},
       { id: 'user-003', name: '이준호', avatar: '이', avatarColor: 'yellow' },
-      { id: 'user-005', name: '정도현', avatar: '정', avatarColor: 'purple' }
+      { id: 'user-005', name: '정도현', avatar: '정', avatarColor: 'purple', role: 'creator'  }
     ],
     sections: 3,
     todos: 4
@@ -127,9 +127,9 @@ const SAMPLE_MINUTES = [
     time: '14:00',
     status: 'draft', // complete(확정완료), draft(작성중)
     participants: [
-      { id: 'user-001', name: '김민준', role: 'creator' },
+      { id: 'user-001', name: '김민준' },
       { id: 'user-002', name: '박서연' },
-      { id: 'user-003', name: '이준호' },
+      { id: 'user-003', name: '이준호' , role: 'creator'},
       { id: 'user-004', name: '최유진' }
     ],
     participantCount: 4,
@@ -144,7 +144,7 @@ const SAMPLE_MINUTES = [
     title: '주간 스크럼 회의',
     date: '2025-10-21',
     time: '10:00',
-    status: 'complete',
+    status: 'draft',
     participants: [
       { id: 'user-002', name: '박서연', role: 'creator' },
       { id: 'user-001', name: '김민준' },
@@ -152,6 +152,7 @@ const SAMPLE_MINUTES = [
     ],
     participantCount: 3,
     lastUpdated: '2025-10-21',
+    completionRate: 60,
     sections: 2,
     todos: 8
   },
@@ -199,9 +200,9 @@ const SAMPLE_MINUTES = [
     time: '13:00',
     status: 'complete',
     participants: [
-      { id: 'user-001', name: '김민준', role: 'creator' },
+      { id: 'user-001', name: '김민준' },
       { id: 'user-002', name: '박서연' },
-      { id: 'user-004', name: '최유진' }
+      { id: 'user-004', name: '최유진' , role: 'creator'}
     ],
     participantCount: 3,
     lastUpdated: '2025-10-18',
@@ -216,9 +217,9 @@ const SAMPLE_MINUTES = [
     time: '11:00',
     status: 'complete',
     participants: [
-      { id: 'user-001', name: '김민준', role: 'creator' },
+      { id: 'user-001', name: '김민준' },
       { id: 'user-003', name: '이준호' },
-      { id: 'user-005', name: '정도현' }
+      { id: 'user-005', name: '정도현', role: 'creator' }
     ],
     participantCount: 3,
     lastUpdated: '2025-10-20',
@@ -231,7 +232,7 @@ const SAMPLE_MINUTES = [
     title: 'UI/UX 디자인 검토 회의',
     date: '2025-10-19',
     time: '14:00',
-    status: 'complete',
+    status: 'draft',
     participants: [
       { id: 'user-004', name: '최유진', role: 'creator' },
       { id: 'user-001', name: '김민준' },
@@ -240,6 +241,7 @@ const SAMPLE_MINUTES = [
     ],
     participantCount: 4,
     lastUpdated: '2025-10-19',
+    completionRate: 40,
     sections: 4,
     todos: 5
   },
@@ -259,6 +261,428 @@ const SAMPLE_MINUTES = [
     lastUpdated: '2025-10-20',
     sections: 3,
     todos: 2
+  },
+  {
+    id: 'minutes-009',
+    meetingId: 'meeting-010',
+    title: '사용자 인터뷰 결과 공유 및 다음 단계 논의',
+    date: '2025-10-18',
+    time: '14:00',
+    status: 'draft',
+    participants: [
+      { id: 'user-004', name: '최유진', role: 'creator' },
+      { id: 'user-001', name: '김민준' }
+    ],
+    participantCount: 2,
+    lastUpdated: '2025-10-18',
+    completionRate: 75,
+    sections: 2,
+    todos: 4
+  },
+  {
+    id: 'minutes-010',
+    meetingId: 'meeting-011',
+    title: '보안 검토 회의',
+    date: '2025-10-17',
+    time: '11:00',
+    status: 'complete',
+    participants: [
+      { id: 'user-001', name: '김민준' },
+      { id: 'user-003', name: '이준호' , role: 'creator'},
+      { id: 'user-005', name: '정도현' }
+    ],
+    participantCount: 3,
+    lastUpdated: '2025-10-17',
+    sections: 3,
+    todos: 5
+  },
+  {
+    id: 'minutes-011',
+    meetingId: 'meeting-012',
+    title: '마케팅 전략 수립 회의',
+    date: '2025-10-16',
+    time: '13:00',
+    status: 'complete',
+    participants: [
+      { id: 'user-002', name: '박서연', role: 'creator' },
+      { id: 'user-001', name: '김민준' },
+      { id: 'user-003', name: '이준호' },
+      { id: 'user-004', name: '최유진' }
+    ],
+    participantCount: 4,
+    lastUpdated: '2025-10-16',
+    sections: 4,
+    todos: 6
+  },
+  {
+    id: 'minutes-012',
+    meetingId: 'meeting-013',
+    title: '분기별 성과 리뷰 회의',
+    date: '2025-10-15',
+    time: '10:00',
+    status: 'draft',
+    participants: [
+      { id: 'user-001', name: '김민준'},
+      { id: 'user-002', name: '박서연' },
+      { id: 'user-003', name: '이준호' , role: 'creator' },
+      { id: 'user-004', name: '최유진' },
+      { id: 'user-005', name: '정도현' },
+      { id: 'user-006', name: '강지수' }
+    ],
+    participantCount: 6,
+    lastUpdated: '2025-10-15',
+    completionRate: 20,
+    sections: 2,
+    todos: 3
+  },
+  {
+    id: 'minutes-013',
+    meetingId: 'meeting-014',
+    title: '신규 프로젝트 킥오프 미팅',
+    date: '2025-10-14',
+    time: '09:00',
+    status: 'complete',
+    participants: [
+      { id: 'user-003', name: '이준호', role: 'creator' },
+      { id: 'user-001', name: '김민준' },
+      { id: 'user-002', name: '박서연' },
+      { id: 'user-004', name: '최유진' },
+      { id: 'user-005', name: '정도현' }
+    ],
+    participantCount: 5,
+    lastUpdated: '2025-10-14',
+    sections: 4,
+    todos: 7
+  },
+  {
+    id: 'minutes-014',
+    meetingId: 'meeting-015',
+    title: '고객 피드백 반영 회의',
+    date: '2025-10-13',
+    time: '14:00',
+    status: 'complete',
+    participants: [
+      { id: 'user-001', name: '김민준', role: 'creator' },
+      { id: 'user-002', name: '박서연' },
+      { id: 'user-004', name: '최유진' }
+    ],
+    participantCount: 3,
+    lastUpdated: '2025-10-13',
+    sections: 3,
+    todos: 4
+  },
+  {
+    id: 'minutes-015',
+    meetingId: 'meeting-016',
+    title: '기술 스택 검토 회의',
+    date: '2025-10-12',
+    time: '11:00',
+    status: 'draft',
+    participants: [
+      { id: 'user-003', name: '이준호', role: 'creator' },
+      { id: 'user-001', name: '김민준' },
+      { id: 'user-002', name: '박서연' },
+      { id: 'user-005', name: '정도현' }
+    ],
+    participantCount: 4,
+    lastUpdated: '2025-10-12',
+    completionRate: 30,
+    sections: 2,
+    todos: 5
+  },
+  {
+    id: 'minutes-016',
+    meetingId: 'meeting-017',
+    title: '월간 운영 리뷰 회의',
+    date: '2025-10-11',
+    time: '15:00',
+    status: 'complete',
+    participants: [
+      { id: 'user-001', name: '김민준' },
+      { id: 'user-002', name: '박서연' , role: 'creator'},
+      { id: 'user-003', name: '이준호' },
+      { id: 'user-004', name: '최유진' },
+      { id: 'user-005', name: '정도현' },
+      { id: 'user-006', name: '강지수' },
+      { id: 'user-007', name: '송주영' }
+    ],
+    participantCount: 7,
+    lastUpdated: '2025-10-11',
+    sections: 5,
+    todos: 8
+  },
+  {
+    id: 'minutes-017',
+    meetingId: 'meeting-018',
+    title: '채용 인터뷰 디브리핑',
+    date: '2025-10-10',
+    time: '16:00',
+    status: 'complete',
+    participants: [
+      { id: 'user-005', name: '정도현', role: 'creator' },
+      { id: 'user-001', name: '김민준' },
+      { id: 'user-002', name: '박서연' }
+    ],
+    participantCount: 3,
+    lastUpdated: '2025-10-10',
+    sections: 2,
+    todos: 3
+  },
+  {
+    id: 'minutes-018',
+    meetingId: 'meeting-019',
+    title: '파트너사 협업 방안 논의',
+    date: '2025-10-09',
+    time: '10:00',
+    status: 'draft',
+    participants: [
+      { id: 'user-001', name: '김민준', role: 'creator' },
+      { id: 'user-002', name: '박서연' },
+      { id: 'user-003', name: '이준호' },
+      { id: 'user-004', name: '최유진' },
+      { id: 'user-005', name: '정도현' }
+    ],
+    participantCount: 5,
+    lastUpdated: '2025-10-09',
+    completionRate: 50,
+    sections: 3,
+    todos: 6
+  },
+  {
+    id: 'minutes-019',
+    meetingId: 'meeting-020',
+    title: '데이터 분석 결과 공유',
+    date: '2025-10-08',
+    time: '13:00',
+    status: 'complete',
+    participants: [
+      { id: 'user-002', name: '박서연', role: 'creator' },
+      { id: 'user-001', name: '김민준' },
+      { id: 'user-003', name: '이준호' },
+      { id: 'user-005', name: '정도현' }
+    ],
+    participantCount: 4,
+    lastUpdated: '2025-10-08',
+    sections: 4,
+    todos: 5
+  },
+  {
+    id: 'minutes-020',
+    meetingId: 'meeting-021',
+    title: '서비스 개선 아이디어 회의',
+    date: '2025-10-07',
+    time: '14:00',
+    status: 'complete',
+    participants: [
+      { id: 'user-001', name: '김민준'},
+      { id: 'user-002', name: '박서연', role: 'creator'  },
+      { id: 'user-003', name: '이준호' },
+      { id: 'user-004', name: '최유진' },
+      { id: 'user-005', name: '정도현' },
+      { id: 'user-006', name: '강지수' }
+    ],
+    participantCount: 6,
+    lastUpdated: '2025-10-07',
+    sections: 4,
+    todos: 7
+  },
+  {
+    id: 'minutes-021',
+    meetingId: 'meeting-022',
+    title: '고객 VOC 분석 회의',
+    date: '2025-10-06',
+    time: '11:00',
+    status: 'draft',
+    participants: [
+      { id: 'user-004', name: '최유진', role: 'creator' },
+      { id: 'user-001', name: '김민준' },
+      { id: 'user-002', name: '박서연' }
+    ],
+    participantCount: 3,
+    lastUpdated: '2025-10-06',
+    completionRate: 65,
+    sections: 2,
+    todos: 4
+  },
+  {
+    id: 'minutes-022',
+    meetingId: 'meeting-023',
+    title: '연말 계획 수립 회의',
+    date: '2025-10-05',
+    time: '09:00',
+    status: 'complete',
+    participants: [
+      { id: 'user-001', name: '김민준' },
+      { id: 'user-002', name: '박서연' },
+      { id: 'user-003', name: '이준호' , role: 'creator'},
+      { id: 'user-004', name: '최유진' },
+      { id: 'user-005', name: '정도현' },
+      { id: 'user-006', name: '강지수' },
+      { id: 'user-007', name: '송주영' },
+      { id: 'user-008', name: '백현정' }
+    ],
+    participantCount: 8,
+    lastUpdated: '2025-10-05',
+    sections: 6,
+    todos: 10
+  },
+  {
+    id: 'minutes-023',
+    meetingId: 'meeting-024',
+    title: '브랜드 리뉴얼 전략 회의',
+    date: '2025-10-04',
+    time: '13:00',
+    status: 'draft',
+    participants: [
+      { id: 'user-004', name: '최유진', role: 'creator' },
+      { id: 'user-001', name: '김민준' },
+      { id: 'user-002', name: '박서연' },
+      { id: 'user-006', name: '강지수' },
+      { id: 'user-007', name: '송주영' },
+      { id: 'user-008', name: '백현정' }
+    ],
+    participantCount: 6,
+    lastUpdated: '2025-10-04',
+    completionRate: 45,
+    sections: 3,
+    todos: 5
+  },
+  {
+    id: 'minutes-024',
+    meetingId: 'meeting-025',
+    title: '플랫폼 확장성 검토 회의',
+    date: '2025-10-03',
+    time: '10:00',
+    status: 'complete',
+    participants: [
+      { id: 'user-001', name: '김민준', role: 'creator' },
+      { id: 'user-003', name: '이준호' },
+      { id: 'user-005', name: '정도현' },
+      { id: 'user-007', name: '송주영' },
+      { id: 'user-002', name: '박서연' }
+    ],
+    participantCount: 5,
+    lastUpdated: '2025-10-03',
+    sections: 4,
+    todos: 6
+  },
+  {
+    id: 'minutes-025',
+    meetingId: 'meeting-026',
+    title: '사용자 경험 개선 워크샵',
+    date: '2025-10-02',
+    time: '14:00',
+    status: 'draft',
+    participants: [
+      { id: 'user-004', name: '최유진', role: 'creator' },
+      { id: 'user-001', name: '김민준' },
+      { id: 'user-002', name: '박서연' },
+      { id: 'user-006', name: '강지수' },
+      { id: 'user-003', name: '이준호' },
+      { id: 'user-005', name: '정도현' },
+      { id: 'user-008', name: '백현정' }
+    ],
+    participantCount: 7,
+    lastUpdated: '2025-10-02',
+    completionRate: 85,
+    sections: 5,
+    todos: 8
+  },
+  {
+    id: 'minutes-026',
+    meetingId: 'meeting-027',
+    title: '클라우드 인프라 마이그레이션 계획',
+    date: '2025-10-01',
+    time: '09:30',
+    status: 'draft',
+    participants: [
+      { id: 'user-001', name: '김민준' },
+      { id: 'user-003', name: '이준호' },
+      { id: 'user-007', name: '송주영' , role: 'creator'},
+      { id: 'user-005', name: '정도현' }
+    ],
+    participantCount: 4,
+    lastUpdated: '2025-10-01',
+    completionRate: 55,
+    sections: 3,
+    todos: 7
+  },
+  {
+    id: 'minutes-027',
+    meetingId: 'meeting-028',
+    title: '월간 KPI 점검 회의',
+    date: '2025-09-30',
+    time: '16:00',
+    status: 'complete',
+    participants: [
+      { id: 'user-002', name: '박서연', role: 'creator' },
+      { id: 'user-001', name: '김민준' },
+      { id: 'user-003', name: '이준호' },
+      { id: 'user-004', name: '최유진' },
+      { id: 'user-005', name: '정도현' },
+      { id: 'user-006', name: '강지수' },
+      { id: 'user-007', name: '송주영' },
+      { id: 'user-008', name: '백현정' }
+    ],
+    participantCount: 8,
+    lastUpdated: '2025-09-30',
+    sections: 5,
+    todos: 9
+  },
+  {
+    id: 'minutes-028',
+    meetingId: 'meeting-029',
+    title: '예산 집행 검토 회의',
+    date: '2025-09-29',
+    time: '11:00',
+    status: 'complete',
+    participants: [
+      { id: 'user-001', name: '김민준', role: 'creator' },
+      { id: 'user-002', name: '박서연' },
+      { id: 'user-005', name: '정도현' }
+    ],
+    participantCount: 3,
+    lastUpdated: '2025-09-29',
+    sections: 3,
+    todos: 4
+  },
+  {
+    id: 'minutes-029',
+    meetingId: 'meeting-030',
+    title: '고객 이탈 방지 전략 논의',
+    date: '2025-09-28',
+    time: '15:00',
+    status: 'draft',
+    participants: [
+      { id: 'user-002', name: '박서연', role: 'creator' },
+      { id: 'user-001', name: '김민준' },
+      { id: 'user-004', name: '최유진' },
+      { id: 'user-006', name: '강지수' },
+      { id: 'user-003', name: '이준호' }
+    ],
+    participantCount: 5,
+    lastUpdated: '2025-09-28',
+    completionRate: 35,
+    sections: 2,
+    todos: 4
+  },
+  {
+    id: 'minutes-030',
+    meetingId: 'meeting-031',
+    title: '협력사 계약 검토 회의',
+    date: '2025-09-27',
+    time: '10:00',
+    status: 'complete',
+    participants: [
+      { id: 'user-001', name: '김민준' },
+      { id: 'user-002', name: '박서연' },
+      { id: 'user-003', name: '이준호' , role: 'creator'},
+      { id: 'user-005', name: '정도현' }
+    ],
+    participantCount: 4,
+    lastUpdated: '2025-09-27',
+    sections: 3,
+    todos: 5
   }
 ];
 
diff --git a/design/uiux/style-guide.md b/design/uiux/style-guide.md
index a0f7511..ca3087e 100644
--- a/design/uiux/style-guide.md
+++ b/design/uiux/style-guide.md
@@ -1245,3 +1245,4 @@ Todo 마감일 표시를 위한 D-day 배지 스타일입니다.
 | 1.2.1 | 2025-10-23 | 강지수 | 회의 진행 화면 액션아이템 탭 UI/UX 개선 (v1.2.1)<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개) |
diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md
index 1ea5c5a..f8eebe3 100644
--- a/design/uiux/uiux.md
+++ b/design/uiux/uiux.md
@@ -1609,23 +1609,42 @@ graph TD
 - **목적**: 회의록 목록 조회 및 필터링/정렬/검색 기능 제공
 - **관련 유저스토리**: UFR-MEET-046 (회의록목록조회)
 - **비즈니스 중요도**: 높음
+- **프로토타입**: design/uiux/prototype/12-회의록목록조회.html
+- **데이터 소스**: common.js → SAMPLE_MINUTES 배열 (30개 샘플 데이터)
 - **접근 경로**:
   - 대시보드 → "내 회의록" 전체 보기
   - 하단 네비게이션 → "회의록" 메뉴
 
+#### 데이터 아키텍처
+- **데이터 레이어**: common.js의 SAMPLE_MINUTES 배열
+  - 총 30개 샘플 데이터 (작성중 13개, 확정완료 17개)
+  - 각 회의록 객체 구조: id, meetingId, title, date, time, status, participants, participantCount, lastUpdated, sections, todos, completionRate
+- **뷰 레이어**: 12-회의록목록조회.html
+  - JavaScript 기반 동적 렌더링
+  - renderMeetings() 함수: 필터링/정렬/검색 로직 처리 후 목록 생성
+  - createMeetingCard() 함수: 개별 회의록 카드 HTML 생성
+- **렌더링 방식**:
+  - 페이지 로드 시: DOMContentLoaded 이벤트에서 renderMeetings() 호출
+  - 초기 표시: 10개 회의록 (displayedCount 변수로 관리)
+  - 추가 로딩: "10개 더보기" 버튼 클릭 시 10개씩 증가
+  - 필터/정렬/검색 시: 즉시 renderMeetings() 재호출하여 목록 갱신
+
 #### 주요 기능
 1. **회의록 목록 조회** (참여/생성한 회의록)
 2. **필터링 기능**:
    - 참여 유형: 참석한 회의, 생성한 회의
    - 상태: 전체, 작성중, 확정완료
 3. **정렬 기능**:
-   - 최신 회의순 (회의 일시 기준, 최근 순)
-   - 최신 업데이트순 (수정 일시 기준, 최근 순)
-   - 제목 가나다순 (오름차순)
+   - 최근수정순 (수정 일시 기준, 최근 순) - 기본값
+   - 최근회의순 (회의 일시 기준, 최근 순)
+   - 제목순 (가나다순)
 4. **검색 기능**:
    - 제목, 참석자, 키워드로 통합 검색
    - 실시간 검색 결과 업데이트
-5. 회의록 상세 조회 (항목 클릭 시)
+5. **페이지네이션**:
+   - 초기 10개 회의록 표시
+   - "10개 더보기" 버튼으로 추가 로딩
+6. 회의록 상세 조회 (항목 클릭 시)
 
 #### UI 구성요소
 
@@ -2084,6 +2103,7 @@ graph TD
 | 1.4.11 | 2025-10-23 | 강지수 | 회의 진행 화면 액션아이템 탭 UI/UX 개선<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 예정 |
 
 ---
 
diff --git a/design/userstory.md b/design/userstory.md
index 6edbb47..7ee3f85 100644
--- a/design/userstory.md
+++ b/design/userstory.md
@@ -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