From 613b730287416724898a557031df8c7b3d979c67 Mon Sep 17 00:00:00 2001
From: hjmoons <gywhd408@naver.com>
Date: Tue, 21 Oct 2025 15:34:30 +0900
Subject: [PATCH] =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=86=A0=ED=83=80=EC=9E=85?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 design/uiux/prototype/02-대시보드.html        |   2 +-
 ...��록대시보드.html => 11-회의록대시보드.html} |   0
 design/uiux/prototype/12-회의록목록조회.html  | 831 ++++++++++++++++++
 3 files changed, 832 insertions(+), 1 deletion(-)
 rename design/uiux/prototype/{10-회의록대시보드.html => 11-회의록대시보드.html} (100%)
 create mode 100644 design/uiux/prototype/12-회의록목록조회.html
diff --git a/design/uiux/prototype/02-대시보드.html b/design/uiux/prototype/02-대시보드.html
index 4649598..21150b0 100644
--- a/design/uiux/prototype/02-대시보드.html
+++ b/design/uiux/prototype/02-대시보드.html
@@ -1148,7 +1148,7 @@
           '<span class="role-indicator"><span class="crown-icon">👑</span> 생성자</span>' : '';
 
         return `
-          <div class="meeting-card ${isOngoing ? 'ongoing' : ''}" onclick="event.stopPropagation(); navigateTo('10-회의록대시보드.html')">
+          <div class="meeting-card ${isOngoing ? 'ongoing' : ''}" onclick="event.stopPropagation(); navigateTo('11-회의록대시보드.html')">
             <div class="meeting-header">
               <div style="flex: 1;">
                 <div class="meeting-badges">
diff --git a/design/uiux/prototype/10-회의록대시보드.html b/design/uiux/prototype/11-회의록대시보드.html
similarity index 100%
rename from design/uiux/prototype/10-회의록대시보드.html
rename to design/uiux/prototype/11-회의록대시보드.html
diff --git a/design/uiux/prototype/12-회의록목록조회.html b/design/uiux/prototype/12-회의록목록조회.html
new file mode 100644
index 0000000..21d9b9c
--- /dev/null
+++ b/design/uiux/prototype/12-회의록목록조회.html
@@ -0,0 +1,831 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>회의록 목록 - 회의록 서비스</title>
+  <link rel="stylesheet" href="common.css">
+  <style>
+    /* 레이아웃 */
+    body {
+      margin: 0;
+      padding: 0;
+      background-color: var(--color-gray-50);
+    }
+
+    /* Header */
+    .page-header {
+      position: sticky;
+      top: 0;
+      z-index: var(--z-sticky);
+      background-color: var(--color-white);
+      border-bottom: 1px solid var(--color-gray-200);
+      padding: var(--spacing-4) var(--spacing-6);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    }
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+    }
+
+    .back-button {
+      width: 40px;
+      height: 40px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--radius-md);
+      transition: background-color var(--transition-fast);
+    }
+
+    .back-button:hover {
+      background-color: var(--color-gray-100);
+    }
+
+    .page-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+    }
+
+    .search-button {
+      width: 40px;
+      height: 40px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      font-size: 24px;
+      border-radius: var(--radius-md);
+      transition: background-color var(--transition-fast);
+    }
+
+    .search-button:hover {
+      background-color: var(--color-gray-100);
+    }
+
+    /* Main Content */
+    .main-content {
+      padding: var(--spacing-4);
+      padding-bottom: 100px;
+    }
+
+    /* Filter Section */
+    .filter-section {
+      background-color: var(--color-white);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-4);
+      margin-bottom: var(--spacing-4);
+      box-shadow: var(--shadow-sm);
+    }
+
+    .filter-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--spacing-3);
+      margin-bottom: var(--spacing-4);
+    }
+
+    .filter-label {
+      display: block;
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-700);
+      margin-bottom: var(--spacing-2);
+      font-weight: var(--font-weight-medium);
+    }
+
+    .filter-select {
+      width: 100%;
+      padding: var(--spacing-3);
+      border: 1px solid var(--color-gray-300);
+      border-radius: var(--radius-md);
+      font-size: var(--font-size-body);
+      background-color: var(--color-white);
+      cursor: pointer;
+      transition: border-color var(--transition-fast);
+    }
+
+    .filter-select:focus {
+      outline: none;
+      border-color: var(--color-primary-main);
+    }
+
+    /* Tab Filters */
+    .tab-filters {
+      display: flex;
+      gap: var(--spacing-2);
+      overflow-x: auto;
+      margin-bottom: var(--spacing-4);
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .tab-filter {
+      padding: var(--spacing-2) var(--spacing-4);
+      background-color: var(--color-gray-100);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-700);
+      cursor: pointer;
+      white-space: nowrap;
+      transition: all var(--transition-fast);
+    }
+
+    .tab-filter.active {
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      border-color: var(--color-primary-main);
+    }
+
+    /* Search Input */
+    .search-input-wrapper {
+      position: relative;
+      margin-bottom: var(--spacing-4);
+    }
+
+    .search-input {
+      width: 100%;
+      padding: var(--spacing-3) var(--spacing-10) var(--spacing-3) var(--spacing-4);
+      border: 1px solid var(--color-gray-300);
+      border-radius: var(--radius-md);
+      font-size: var(--font-size-body);
+      transition: border-color var(--transition-fast);
+    }
+
+    .search-input:focus {
+      outline: none;
+      border-color: var(--color-primary-main);
+    }
+
+    .clear-search {
+      position: absolute;
+      right: var(--spacing-3);
+      top: 50%;
+      transform: translateY(-50%);
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-size: 20px;
+      color: var(--color-gray-400);
+      display: none;
+    }
+
+    .clear-search.show {
+      display: block;
+    }
+
+    /* Stats Cards */
+    .stats-row {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: var(--spacing-3);
+      margin-bottom: var(--spacing-4);
+    }
+
+    .stat-card {
+      background-color: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-4);
+      text-align: center;
+      box-shadow: var(--shadow-sm);
+    }
+
+    .stat-label {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+      margin-bottom: var(--spacing-1);
+    }
+
+    .stat-value {
+      font-size: var(--font-size-h3);
+      font-weight: var(--font-weight-bold);
+      color: var(--color-gray-900);
+    }
+
+    /* Meeting List */
+    .meeting-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-3);
+    }
+
+    .meeting-item {
+      background-color: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-4);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+      box-shadow: var(--shadow-sm);
+    }
+
+    .meeting-item:hover {
+      box-shadow: var(--shadow-md);
+      transform: translateY(-2px);
+      border-color: var(--color-primary-main);
+    }
+
+    .meeting-item-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-bottom: var(--spacing-3);
+    }
+
+    .meeting-item-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .meeting-item-meta {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-500);
+      margin-bottom: var(--spacing-1);
+    }
+
+    .meeting-item-updated {
+      font-size: var(--font-size-caption);
+      color: var(--color-gray-400);
+    }
+
+    .meeting-item-badges {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: var(--spacing-2);
+    }
+
+    .read-only-label {
+      font-size: var(--font-size-caption);
+      color: var(--color-gray-500);
+    }
+
+    /* Empty State */
+    .empty-state {
+      text-align: center;
+      padding: var(--spacing-16) var(--spacing-4);
+      color: var(--color-gray-500);
+    }
+
+    .empty-state-icon {
+      font-size: 64px;
+      margin-bottom: var(--spacing-4);
+    }
+
+    .empty-state-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-700);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .empty-state-desc {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
+    }
+
+    /* Bottom Navigation */
+    .bottom-nav {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: var(--color-white);
+      border-top: 1px solid var(--color-gray-200);
+      display: flex;
+      justify-content: space-around;
+      padding: var(--spacing-2) 0;
+      z-index: var(--z-sticky);
+    }
+
+    .bottom-nav-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--spacing-1);
+      padding: var(--spacing-2);
+      color: var(--color-gray-500);
+      text-decoration: none;
+      font-size: var(--font-size-caption);
+      min-width: 60px;
+    }
+
+    .bottom-nav-item.active {
+      color: var(--color-primary-main);
+    }
+
+    .bottom-nav-icon {
+      font-size: 24px;
+    }
+
+    /* Responsive */
+    @media (max-width: 767px) {
+      .page-header {
+        padding: var(--spacing-3) var(--spacing-4);
+      }
+
+      .main-content {
+        padding: var(--spacing-3);
+      }
+
+      .filter-row {
+        grid-template-columns: 1fr;
+      }
+
+      .stats-row {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    @media (min-width: 768px) {
+      .bottom-nav {
+        display: none;
+      }
+
+      .main-content {
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+
+      .meeting-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+        gap: var(--spacing-4);
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Header -->
+  <header class="page-header">
+    <div class="header-left">
+      <button class="back-button" onclick="navigateTo('02-대시보드.html')">
+        ←
+      </button>
+      <h1 class="page-title">회의록 목록</h1>
+    </div>
+    <button class="search-button" onclick="focusSearch()">
+      🔍
+    </button>
+  </header>
+
+  <!-- Main Content -->
+  <main class="main-content">
+    <!-- Filter Section -->
+    <section class="filter-section">
+      <!-- Filter Row -->
+      <div class="filter-row">
+        <div>
+          <label class="filter-label" for="statusFilter">상태</label>
+          <select class="filter-select" id="statusFilter" onchange="applyFilters()">
+            <option value="all">전체</option>
+            <option value="draft">작성중</option>
+            <option value="confirmed">확정완료</option>
+          </select>
+        </div>
+        <div>
+          <label class="filter-label" for="sortFilter">정렬</label>
+          <select class="filter-select" id="sortFilter" onchange="applyFilters()">
+            <option value="recent">최신 업데이트순</option>
+            <option value="date">회의 일시순</option>
+            <option value="title">제목순</option>
+          </select>
+        </div>
+      </div>
+
+      <!-- Tab Filters -->
+      <div class="tab-filters">
+        <button class="tab-filter active" data-type="all" onclick="selectTypeFilter('all')">전체</button>
+        <button class="tab-filter" data-type="shared" onclick="selectTypeFilter('shared')">공유받은 회의</button>
+        <button class="tab-filter" data-type="attended" onclick="selectTypeFilter('attended')">참석한 회의</button>
+        <button class="tab-filter" data-type="created" onclick="selectTypeFilter('created')">생성한 회의</button>
+      </div>
+
+      <!-- Search Input -->
+      <div class="search-input-wrapper">
+        <input
+          type="text"
+          class="search-input"
+          id="searchInput"
+          placeholder="회의 제목, 참석자, 키워드 검색"
+          oninput="handleSearch()"
+        >
+        <button class="clear-search" id="clearSearch" onclick="clearSearch()">×</button>
+      </div>
+    </section>
+
+    <!-- Stats Row -->
+    <div class="stats-row">
+      <div class="stat-card">
+        <div class="stat-label">전체</div>
+        <div class="stat-value" id="totalCount">0</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">작성중</div>
+        <div class="stat-value" id="draftCount">0</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">확정완료</div>
+        <div class="stat-value" id="confirmedCount">0</div>
+      </div>
+    </div>
+
+    <!-- Meeting List -->
+    <div class="meeting-list" id="meetingList">
+      <!-- Meeting items will be rendered here -->
+    </div>
+
+    <!-- Empty State -->
+    <div class="empty-state" id="emptyState" style="display: none;">
+      <div class="empty-state-icon">📋</div>
+      <div class="empty-state-title">회의록이 없습니다</div>
+      <div class="empty-state-desc">새로운 회의를 시작해보세요!</div>
+    </div>
+  </main>
+
+  <!-- Bottom Navigation (Mobile) -->
+  <nav class="bottom-nav hide-desktop">
+    <a href="02-대시보드.html" class="bottom-nav-item">
+      <div class="bottom-nav-icon">📊</div>
+      <div>대시보드</div>
+    </a>
+    <a href="12-회의록목록조회.html" class="bottom-nav-item active">
+      <div class="bottom-nav-icon">📅</div>
+      <div>회의</div>
+    </a>
+    <a href="09-Todo관리.html" class="bottom-nav-item">
+      <div class="bottom-nav-icon">✅</div>
+      <div>Todo</div>
+    </a>
+    <a href="02-대시보드.html" class="bottom-nav-item">
+      <div class="bottom-nav-icon">⚙️</div>
+      <div>더보기</div>
+    </a>
+  </nav>
+
+  <!-- FAB -->
+  <button class="fab" onclick="navigateTo('04-템플릿선택.html')" title="새 회의 시작">+</button>
+
+  <!-- JavaScript -->
+  <script src="common.js"></script>
+  <script>
+    const { AppState, Storage, Toast, formatDateTime, timeAgo, navigateTo } = window.MeetingApp;
+
+    // 필터 상태
+    let currentFilters = {
+      type: 'all',      // all | shared | attended | created
+      status: 'all',    // all | draft | confirmed
+      sort: 'recent',   // recent | date | title
+      search: ''
+    };
+
+    // 샘플 데이터 초기화
+    function initSampleData() {
+      const currentUserId = 'user-001';
+
+      if (!Storage.get('meetings') || Storage.get('meetings').length === 0) {
+        const sampleMeetings = [
+          {
+            id: 'meeting-001',
+            title: '긴급 버그 픽스 회의',
+            date: new Date(Date.now() - 1800000).toISOString(),
+            startTime: new Date(Date.now() - 1800000).toISOString(),
+            location: '온라인 (Zoom)',
+            status: 'ongoing',
+            description: '프로덕션 환경 긴급 버그 대응',
+            creatorId: 'user-002',
+            attendees: ['user-001', 'user-002', 'user-003'],
+            updatedAt: new Date(Date.now() - 900000).toISOString()
+          },
+          {
+            id: 'meeting-002',
+            title: '주간 스프린트 회의',
+            date: new Date(Date.now() + 86400000).toISOString(),
+            startTime: new Date(Date.now() + 86400000).toISOString(),
+            location: '온라인 (Zoom)',
+            status: 'scheduled',
+            description: '이번 주 스프린트 진행사항 및 다음 주 계획 논의',
+            creatorId: 'user-001',
+            attendees: ['user-001', 'user-002', 'user-003', 'user-004'],
+            updatedAt: new Date(Date.now() - 3600000).toISOString()
+          },
+          {
+            id: 'meeting-003',
+            title: 'Q4 마케팅 전략 회의',
+            date: new Date(Date.now() - 172800000).toISOString(),
+            startTime: new Date(Date.now() - 172800000).toISOString(),
+            location: '본사 3층 회의실',
+            status: 'completed',
+            description: '4분기 마케팅 캠페인 기획 및 예산 검토',
+            creatorId: 'user-005',
+            attendees: ['user-001', 'user-005'],
+            updatedAt: new Date(Date.now() - 86400000).toISOString()
+          },
+          {
+            id: 'meeting-004',
+            title: '디자인 리뷰',
+            date: new Date(Date.now() + 3600000).toISOString(),
+            startTime: new Date(Date.now() + 3600000).toISOString(),
+            location: '온라인 (Google Meet)',
+            status: 'scheduled',
+            description: 'UI/UX 디자인 최종 검토 및 피드백',
+            creatorId: 'user-003',
+            attendees: ['user-001', 'user-003', 'user-006'],
+            updatedAt: new Date(Date.now() - 7200000).toISOString()
+          },
+          {
+            id: 'meeting-005',
+            title: '월간 전체 회의',
+            date: new Date(Date.now() + 259200000).toISOString(),
+            startTime: new Date(Date.now() + 259200000).toISOString(),
+            location: '대강당',
+            status: 'scheduled',
+            description: '월간 성과 공유 및 다음 달 목표 설정',
+            creatorId: 'user-001',
+            attendees: ['user-001', 'user-002', 'user-003', 'user-004', 'user-005'],
+            updatedAt: new Date(Date.now() - 10800000).toISOString()
+          },
+          {
+            id: 'meeting-006',
+            title: '고객 피드백 리뷰',
+            date: new Date(Date.now() - 345600000).toISOString(),
+            startTime: new Date(Date.now() - 345600000).toISOString(),
+            location: '온라인 (Teams)',
+            status: 'completed',
+            description: '최근 수집된 고객 VOC 분석 및 개선 방안 도출',
+            creatorId: 'user-007',
+            attendees: ['user-001', 'user-007'],
+            updatedAt: new Date(Date.now() - 259200000).toISOString()
+          },
+          {
+            id: 'meeting-007',
+            title: '신입사원 온보딩',
+            date: new Date(Date.now() - 518400000).toISOString(),
+            startTime: new Date(Date.now() - 518400000).toISOString(),
+            location: '본사 1층 교육장',
+            status: 'completed',
+            description: '2025년 1분기 신입사원 온보딩 프로그램',
+            creatorId: 'user-001',
+            attendees: ['user-001', 'user-008', 'user-009'],
+            updatedAt: new Date(Date.now() - 432000000).toISOString()
+          },
+          {
+            id: 'meeting-008',
+            title: '보안 정책 업데이트',
+            date: new Date(Date.now() - 604800000).toISOString(),
+            startTime: new Date(Date.now() - 604800000).toISOString(),
+            location: '온라인 (Zoom)',
+            status: 'completed',
+            description: '최신 보안 가이드라인 공유 및 적용 계획',
+            creatorId: 'user-010',
+            attendees: ['user-001', 'user-010'],
+            updatedAt: new Date(Date.now() - 518400000).toISOString()
+          }
+        ];
+        Storage.set('meetings', sampleMeetings);
+        Storage.set('currentUserId', currentUserId);
+      }
+
+      if (!Storage.get('sharedMeetings') || Storage.get('sharedMeetings').length === 0) {
+        const sharedMeetings = [
+          {
+            id: 'meeting-s001',
+            title: 'AI 기술 도입 검토 회의',
+            date: new Date(Date.now() - 259200000).toISOString(),
+            location: '본사 2층 회의실',
+            status: 'completed',
+            description: 'LLM 기반 서비스 개선 방안 논의',
+            sharedBy: '홍길동',
+            isShared: true,
+            attendees: ['user-011'],
+            updatedAt: new Date(Date.now() - 172800000).toISOString()
+          },
+          {
+            id: 'meeting-s002',
+            title: '팀 빌딩 워크샵',
+            date: new Date(Date.now() - 691200000).toISOString(),
+            location: '제주 연수원',
+            status: 'completed',
+            description: '팀 협업 강화 및 커뮤니케이션 개선 활동',
+            sharedBy: '백현정',
+            isShared: true,
+            attendees: ['user-011'],
+            updatedAt: new Date(Date.now() - 604800000).toISOString()
+          }
+        ];
+        Storage.set('sharedMeetings', sharedMeetings);
+      }
+    }
+
+    // 인증 체크 및 초기화
+    MeetingApp.ready(() => {
+      const authToken = Storage.get('authToken');
+      if (!authToken) {
+        window.location.href = '01-로그인.html';
+        return;
+      }
+
+      initSampleData();
+      applyFilters();
+    });
+
+    // 검색 입력 처리
+    let searchTimeout;
+    function handleSearch() {
+      const searchInput = document.getElementById('searchInput');
+      const clearSearch = document.getElementById('clearSearch');
+
+      // Clear 버튼 표시/숨김
+      if (searchInput.value.trim()) {
+        clearSearch.classList.add('show');
+      } else {
+        clearSearch.classList.remove('show');
+      }
+
+      // Debounce 처리 (300ms)
+      clearTimeout(searchTimeout);
+      searchTimeout = setTimeout(() => {
+        currentFilters.search = searchInput.value.trim().toLowerCase();
+        applyFilters();
+      }, 300);
+    }
+
+    // 검색어 지우기
+    function clearSearch() {
+      document.getElementById('searchInput').value = '';
+      document.getElementById('clearSearch').classList.remove('show');
+      currentFilters.search = '';
+      applyFilters();
+    }
+
+    // 검색 입력에 포커스
+    function focusSearch() {
+      document.getElementById('searchInput').focus();
+    }
+
+    // 참여 유형 필터 선택
+    function selectTypeFilter(type) {
+      // 탭 활성화 상태 변경
+      document.querySelectorAll('.tab-filter').forEach(tab => {
+        tab.classList.remove('active');
+      });
+      document.querySelector(`.tab-filter[data-type="${type}"]`).classList.add('active');
+
+      currentFilters.type = type;
+      applyFilters();
+    }
+
+    // 필터 적용
+    function applyFilters() {
+      const statusFilter = document.getElementById('statusFilter').value;
+      const sortFilter = document.getElementById('sortFilter').value;
+
+      currentFilters.status = statusFilter;
+      currentFilters.sort = sortFilter;
+
+      renderMeetingList();
+    }
+
+    // 회의록 목록 렌더링
+    function renderMeetingList() {
+      const currentUserId = Storage.get('currentUserId', 'user-001');
+      const meetings = Storage.get('meetings', []);
+      const sharedMeetings = Storage.get('sharedMeetings', []);
+
+      // 모든 회의록 결합
+      let allMeetings = [...meetings];
+
+      // 공유받은 회의록 추가
+      if (currentFilters.type === 'all' || currentFilters.type === 'shared') {
+        allMeetings = [...allMeetings, ...sharedMeetings];
+      }
+
+      // 참여 유형 필터링
+      let filteredMeetings = allMeetings.filter(meeting => {
+        if (currentFilters.type === 'shared') {
+          return meeting.isShared === true;
+        } else if (currentFilters.type === 'attended') {
+          return meeting.attendees && meeting.attendees.includes(currentUserId) && !meeting.isShared;
+        } else if (currentFilters.type === 'created') {
+          return meeting.creatorId === currentUserId;
+        }
+        return true; // 'all'
+      });
+
+      // 상태 필터링
+      if (currentFilters.status !== 'all') {
+        filteredMeetings = filteredMeetings.filter(meeting => {
+          if (currentFilters.status === 'draft') {
+            return meeting.status === 'scheduled' || meeting.status === 'ongoing';
+          } else if (currentFilters.status === 'confirmed') {
+            return meeting.status === 'completed';
+          }
+          return true;
+        });
+      }
+
+      // 검색 필터링
+      if (currentFilters.search) {
+        filteredMeetings = filteredMeetings.filter(meeting => {
+          const searchLower = currentFilters.search.toLowerCase();
+          const titleMatch = meeting.title.toLowerCase().includes(searchLower);
+          const descMatch = meeting.description && meeting.description.toLowerCase().includes(searchLower);
+          const locationMatch = meeting.location && meeting.location.toLowerCase().includes(searchLower);
+          return titleMatch || descMatch || locationMatch;
+        });
+      }
+
+      // 정렬
+      if (currentFilters.sort === 'recent') {
+        filteredMeetings.sort((a, b) => new Date(b.updatedAt || b.date) - new Date(a.updatedAt || a.date));
+      } else if (currentFilters.sort === 'date') {
+        filteredMeetings.sort((a, b) => new Date(b.date) - new Date(a.date));
+      } else if (currentFilters.sort === 'title') {
+        filteredMeetings.sort((a, b) => a.title.localeCompare(b.title, 'ko-KR'));
+      }
+
+      // 통계 업데이트
+      updateStats(filteredMeetings);
+
+      // 목록 렌더링
+      const meetingList = document.getElementById('meetingList');
+      const emptyState = document.getElementById('emptyState');
+
+      if (filteredMeetings.length === 0) {
+        meetingList.style.display = 'none';
+        emptyState.style.display = 'block';
+
+        if (currentFilters.search) {
+          emptyState.querySelector('.empty-state-title').textContent = '검색 결과가 없습니다';
+          emptyState.querySelector('.empty-state-desc').textContent = '다른 키워드로 검색해보세요';
+        } else {
+          emptyState.querySelector('.empty-state-title').textContent = '회의록이 없습니다';
+          emptyState.querySelector('.empty-state-desc').textContent = '새로운 회의를 시작해보세요!';
+        }
+        return;
+      }
+
+      meetingList.style.display = 'flex';
+      emptyState.style.display = 'none';
+
+      meetingList.innerHTML = filteredMeetings.map(meeting => {
+        const isCreator = meeting.creatorId === currentUserId;
+        const isShared = meeting.isShared === true;
+        const isReadOnly = isShared || (!isCreator && meeting.status === 'completed');
+
+        let statusBadge = '';
+        if (meeting.status === 'completed') {
+          statusBadge = '<span class="badge badge-success">확정완료</span>';
+        } else if (meeting.status === 'ongoing') {
+          statusBadge = '<span class="badge badge-error">진행중</span>';
+        } else {
+          statusBadge = '<span class="badge badge-warning">작성중</span>';
+        }
+
+        const readOnlyLabel = isReadOnly ? '<div class="read-only-label">조회 전용</div>' : '';
+        const updatedTime = timeAgo(meeting.updatedAt || meeting.date);
+
+        return `
+          <div class="meeting-item" onclick="navigateTo('10-회의록상세조회.html')">
+            <div class="meeting-item-header">
+              <div style="flex: 1;">
+                <div class="meeting-item-title">${meeting.title}</div>
+                <div class="meeting-item-meta">📅 ${formatDateTime(meeting.date)}</div>
+                <div class="meeting-item-meta">📍 ${meeting.location}</div>
+                <div class="meeting-item-meta">👥 ${meeting.attendees ? meeting.attendees.length : 0}명</div>
+                ${isShared ? `<div class="meeting-item-meta">👤 공유자: ${meeting.sharedBy}</div>` : ''}
+                <div class="meeting-item-updated">최종 수정: ${updatedTime}</div>
+              </div>
+              <div class="meeting-item-badges">
+                ${statusBadge}
+                ${readOnlyLabel}
+              </div>
+            </div>
+          </div>
+        `;
+      }).join('');
+    }
+
+    // 통계 업데이트
+    function updateStats(meetings) {
+      const total = meetings.length;
+      const draft = meetings.filter(m => m.status === 'scheduled' || m.status === 'ongoing').length;
+      const confirmed = meetings.filter(m => m.status === 'completed').length;
+
+      document.getElementById('totalCount').textContent = total;
+      document.getElementById('draftCount').textContent = draft;
+      document.getElementById('confirmedCount').textContent = confirmed;
+    }
+  </script>
+</body>
+</html>
