From a68340735b91185c99bd26c79313bded46c36f66 Mon Sep 17 00:00:00 2001
From: hjmoons <gywhd408@naver.com>
Date: Tue, 21 Oct 2025 15:20:36 +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=ED=9A=8C=EC=9D=98=EB=A1=9D=20=EB=8C=80=EC=8B=9C=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20UI/UX=20=EC=84=A4?=
 =?UTF-8?q?=EA=B3=84=20=EB=AC=B8=EC=84=9C=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 design/uiux/prototype/02-๋Œ€์‹œ๋ณด๋“œ.html        | 669 +++++++++++++++++-
 ...˜๋ก๋ชฉ๋ก์กฐํšŒ.html => 10-ํšŒ์˜๋ก๋Œ€์‹œ๋ณด๋“œ.html} |   0
 2 files changed, 649 insertions(+), 20 deletions(-)
 rename design/uiux/prototype/{12-ํšŒ์˜๋ก๋ชฉ๋ก์กฐํšŒ.html => 10-ํšŒ์˜๋ก๋Œ€์‹œ๋ณด๋“œ.html} (100%)

diff --git a/design/uiux/prototype/02-๋Œ€์‹œ๋ณด๋“œ.html b/design/uiux/prototype/02-๋Œ€์‹œ๋ณด๋“œ.html
index b148282..4649598 100644
--- a/design/uiux/prototype/02-๋Œ€์‹œ๋ณด๋“œ.html
+++ b/design/uiux/prototype/02-๋Œ€์‹œ๋ณด๋“œ.html
@@ -289,6 +289,10 @@
       transform: translateY(-2px);
     }
 
+    .meeting-card.ongoing {
+      border-left: 4px solid var(--color-error-main);
+    }
+
     .meeting-header {
       display: flex;
       align-items: flex-start;
@@ -296,6 +300,79 @@
       margin-bottom: var(--spacing-3);
     }
 
+    .meeting-badges {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+    }
+
+    .badge-ongoing {
+      background-color: var(--color-error-main);
+      color: var(--color-white);
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.6; }
+    }
+
+    .role-indicator {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-1);
+      font-size: var(--font-size-caption);
+      color: var(--color-gray-600);
+    }
+
+    .crown-icon {
+      color: var(--color-warning-main);
+    }
+
+    .meeting-actions {
+      display: flex;
+      gap: var(--spacing-2);
+      margin-top: var(--spacing-3);
+    }
+
+    .btn-join {
+      flex: 1;
+      padding: var(--spacing-2) var(--spacing-4);
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      border: none;
+      border-radius: var(--radius-md);
+      font-weight: var(--font-weight-medium);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+    }
+
+    .btn-join:hover {
+      background-color: var(--color-primary-dark);
+      transform: translateY(-1px);
+    }
+
+    .btn-edit {
+      padding: var(--spacing-2) var(--spacing-3);
+      background-color: var(--color-white);
+      color: var(--color-primary-main);
+      border: 1px solid var(--color-primary-main);
+      border-radius: var(--radius-md);
+      font-size: var(--font-size-body-small);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+    }
+
+    .btn-edit:hover {
+      background-color: rgba(0, 217, 177, 0.1);
+    }
+
+    .timer-text {
+      font-size: var(--font-size-caption);
+      color: var(--color-gray-500);
+      margin-top: var(--spacing-2);
+    }
+
     .meeting-title {
       font-size: var(--font-size-h4);
       font-weight: var(--font-weight-semibold);
@@ -364,6 +441,151 @@
     .dday.warning { color: var(--color-warning-main); }
     .dday.normal { color: var(--color-gray-500); }
 
+    /* Quick Actions */
+    .quick-actions {
+      display: flex;
+      gap: var(--spacing-4);
+      margin-bottom: var(--spacing-8);
+    }
+
+    .quick-action-btn {
+      flex: 1;
+      padding: var(--spacing-6);
+      background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary-main) 100%);
+      color: var(--color-white);
+      border: none;
+      border-radius: var(--radius-lg);
+      cursor: pointer;
+      transition: all var(--transition-base);
+      text-align: center;
+      box-shadow: var(--shadow-sm);
+    }
+
+    .quick-action-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: var(--shadow-md);
+    }
+
+    .quick-action-btn.secondary {
+      background: var(--color-white);
+      color: var(--color-primary-main);
+      border: 2px solid var(--color-primary-main);
+    }
+
+    .quick-action-btn.secondary:hover {
+      background-color: rgba(0, 217, 177, 0.05);
+    }
+
+    .quick-action-icon {
+      font-size: 32px;
+      margin-bottom: var(--spacing-2);
+    }
+
+    .quick-action-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      margin-bottom: var(--spacing-1);
+    }
+
+    .quick-action-desc {
+      font-size: var(--font-size-body-small);
+      opacity: 0.9;
+    }
+
+    /* FAB Action Modal */
+    .fab-modal {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: var(--z-modal-backdrop);
+      align-items: flex-end;
+      justify-content: center;
+      padding: var(--spacing-4);
+    }
+
+    .fab-modal.show {
+      display: flex;
+    }
+
+    .fab-menu {
+      background-color: var(--color-white);
+      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+      padding: var(--spacing-6);
+      width: 100%;
+      max-width: 600px;
+      animation: slideUp var(--transition-base);
+    }
+
+    @keyframes slideUp {
+      from {
+        transform: translateY(100%);
+        opacity: 0;
+      }
+      to {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+
+    .fab-menu-title {
+      font-size: var(--font-size-h3);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-6);
+      text-align: center;
+    }
+
+    .fab-menu-item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-4);
+      padding: var(--spacing-5);
+      background-color: var(--color-white);
+      border: 2px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      margin-bottom: var(--spacing-3);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+    }
+
+    .fab-menu-item:hover {
+      border-color: var(--color-primary-main);
+      background-color: rgba(0, 217, 177, 0.05);
+      transform: translateX(4px);
+    }
+
+    .fab-menu-icon {
+      width: 56px;
+      height: 56px;
+      background-color: var(--color-primary-light);
+      border-radius: var(--radius-md);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28px;
+      flex-shrink: 0;
+    }
+
+    .fab-menu-content {
+      flex: 1;
+    }
+
+    .fab-menu-item-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-1);
+    }
+
+    .fab-menu-item-desc {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+    }
+
     /* Bottom Navigation (Mobile) */
     .bottom-nav {
       position: fixed;
@@ -479,6 +701,20 @@
         <p class="welcome-subtitle" id="welcomeSubtitle">์˜ค๋Š˜์˜ ์ผ์ •์„ ํ™•์ธํ•˜์„ธ์š”</p>
       </section>
 
+      <!-- Quick Actions -->
+      <section class="quick-actions hide-mobile">
+        <button class="quick-action-btn" onclick="navigateTo('04-ํ…œํ”Œ๋ฆฟ์„ ํƒ.html')">
+          <div class="quick-action-icon">๐Ÿš€</div>
+          <div class="quick-action-title">์ƒˆ ํšŒ์˜ ์‹œ์ž‘</div>
+          <div class="quick-action-desc">ํ…œํ”Œ๋ฆฟ์„ ์„ ํƒํ•˜์—ฌ ํšŒ์˜๋ฅผ ๋ฐ”๋กœ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค</div>
+        </button>
+        <button class="quick-action-btn secondary" onclick="navigateTo('03-ํšŒ์˜์˜ˆ์•ฝ.html')">
+          <div class="quick-action-icon">๐Ÿ“…</div>
+          <div class="quick-action-title">ํšŒ์˜ ์˜ˆ์•ฝ</div>
+          <div class="quick-action-desc">ํ–ฅํ›„ ์ง„ํ–‰ํ•  ํšŒ์˜๋ฅผ ๋ฏธ๋ฆฌ ์˜ˆ์•ฝํ•ฉ๋‹ˆ๋‹ค</div>
+        </button>
+      </section>
+
       <!-- Stats Grid -->
       <section class="stats-grid">
         <div class="stat-card">
@@ -498,14 +734,25 @@
         </div>
       </section>
 
-      <!-- Recent Meetings -->
+      <!-- ์˜ˆ์ •๋œ/์ง„ํ–‰์ค‘ ํšŒ์˜ -->
       <section class="section">
         <div class="section-header">
-          <h2 class="section-title">์ตœ๊ทผ ํšŒ์˜</h2>
+          <h2 class="section-title">์˜ˆ์ •๋œ ํšŒ์˜</h2>
           <a href="12-ํšŒ์˜๋ก๋ชฉ๋ก์กฐํšŒ.html" class="view-all-link">์ „์ฒด ๋ณด๊ธฐ โ†’</a>
         </div>
-        <div class="meeting-grid" id="meetingGrid">
-          <!-- Meetings will be rendered here -->
+        <div class="meeting-grid" id="upcomingMeetingGrid">
+          <!-- Upcoming/Ongoing meetings will be rendered here -->
+        </div>
+      </section>
+
+      <!-- ๋‚ด ํšŒ์˜๋ก -->
+      <section class="section">
+        <div class="section-header">
+          <h2 class="section-title">๋‚ด ํšŒ์˜๋ก</h2>
+          <a href="12-ํšŒ์˜๋ก๋ชฉ๋ก์กฐํšŒ.html" class="view-all-link">์ „์ฒด ๋ณด๊ธฐ โ†’</a>
+        </div>
+        <div class="meeting-grid" id="myMeetingGrid">
+          <!-- My meetings will be rendered here -->
         </div>
       </section>
 
@@ -519,6 +766,17 @@
           <!-- Todos will be rendered here -->
         </div>
       </section>
+
+      <!-- Shared Meetings -->
+      <section class="section">
+        <div class="section-header">
+          <h2 class="section-title">๊ณต์œ ๋ฐ›์€ ํšŒ์˜๋ก</h2>
+          <a href="12-ํšŒ์˜๋ก๋ชฉ๋ก์กฐํšŒ.html" class="view-all-link">์ „์ฒด ๋ณด๊ธฐ โ†’</a>
+        </div>
+        <div class="meeting-grid" id="sharedMeetingGrid">
+          <!-- Shared meetings will be rendered here -->
+        </div>
+      </section>
     </main>
   </div>
 
@@ -543,13 +801,198 @@
   </nav>
 
   <!-- FAB -->
-  <button class="fab" id="fabButton" title="์ƒˆ ํšŒ์˜ ์˜ˆ์•ฝ">+</button>
+  <button class="fab" id="fabButton" title="์ƒˆ ํšŒ์˜ ์‹œ์ž‘">+</button>
+
+  <!-- FAB Action Modal -->
+  <div class="fab-modal" id="fabModal">
+    <div class="fab-menu">
+      <h3 class="fab-menu-title">๋ฌด์—‡์„ ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?</h3>
+      <div class="fab-menu-item" onclick="navigateTo('04-ํ…œํ”Œ๋ฆฟ์„ ํƒ.html')">
+        <div class="fab-menu-icon">๐Ÿš€</div>
+        <div class="fab-menu-content">
+          <div class="fab-menu-item-title">์ƒˆ ํšŒ์˜ ์‹œ์ž‘</div>
+          <div class="fab-menu-item-desc">ํ…œํ”Œ๋ฆฟ์„ ์„ ํƒํ•˜์—ฌ ํšŒ์˜๋ฅผ ๋ฐ”๋กœ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค</div>
+        </div>
+      </div>
+      <div class="fab-menu-item" onclick="navigateTo('03-ํšŒ์˜์˜ˆ์•ฝ.html')">
+        <div class="fab-menu-icon">๐Ÿ“…</div>
+        <div class="fab-menu-content">
+          <div class="fab-menu-item-title">ํšŒ์˜ ์˜ˆ์•ฝ</div>
+          <div class="fab-menu-item-desc">ํ–ฅํ›„ ์ง„ํ–‰ํ•  ํšŒ์˜๋ฅผ ๋ฏธ๋ฆฌ ์˜ˆ์•ฝํ•ฉ๋‹ˆ๋‹ค</div>
+        </div>
+      </div>
+    </div>
+  </div>
 
   <!-- JavaScript -->
   <script src="common.js"></script>
   <script>
     const { AppState, Storage, Toast, MeetingUtils, formatDateTime, getDday, navigateTo } = window.MeetingApp;
 
+    // ์ƒ˜ํ”Œ ๋ฐ์ดํ„ฐ ์ดˆ๊ธฐํ™”
+    function initSampleData() {
+      // ๊ธฐ์กด ๋ฐ์ดํ„ฐ๊ฐ€ ์—†์œผ๋ฉด ์ƒ˜ํ”Œ ๋ฐ์ดํ„ฐ ์ƒ์„ฑ
+      const currentUserId = 'user-001'; // ํ˜„์žฌ ์‚ฌ์šฉ์ž ID (์˜ˆ์‹œ)
+
+      if (!Storage.get('meetings') || Storage.get('meetings').length === 0) {
+        const sampleMeetings = [
+          {
+            id: 'meeting-001',
+            title: '๊ธด๊ธ‰ ๋ฒ„๊ทธ ํ”ฝ์Šค ํšŒ์˜',
+            date: new Date(Date.now() - 1800000).toISOString(), // 30๋ถ„ ์ „ ์‹œ์ž‘
+            startTime: new Date(Date.now() - 1800000).toISOString(),
+            location: '์˜จ๋ผ์ธ (Zoom)',
+            status: 'ongoing',
+            description: 'ํ”„๋กœ๋•์…˜ ํ™˜๊ฒฝ ๊ธด๊ธ‰ ๋ฒ„๊ทธ ๋Œ€์‘',
+            creatorId: 'user-002',
+            attendees: ['user-001', 'user-002', 'user-003']
+          },
+          {
+            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']
+          },
+          {
+            id: 'meeting-003',
+            title: 'Q4 ๋งˆ์ผ€ํŒ… ์ „๋žต ํšŒ์˜',
+            date: new Date(Date.now() - 172800000).toISOString(), // 2์ผ ์ „
+            startTime: new Date(Date.now() - 172800000).toISOString(),
+            location: '๋ณธ์‚ฌ 3์ธต ํšŒ์˜์‹ค',
+            status: 'completed',
+            description: '4๋ถ„๊ธฐ ๋งˆ์ผ€ํŒ… ์บ ํŽ˜์ธ ๊ธฐํš ๋ฐ ์˜ˆ์‚ฐ ๊ฒ€ํ† ',
+            creatorId: 'user-005',
+            attendees: ['user-001', 'user-005']
+          },
+          {
+            id: 'meeting-004',
+            title: '๋””์ž์ธ ๋ฆฌ๋ทฐ',
+            date: new Date(Date.now() + 3600000).toISOString(), // 1์‹œ๊ฐ„ ํ›„
+            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']
+          },
+          {
+            id: 'meeting-005',
+            title: '์›”๊ฐ„ ์ „์ฒด ํšŒ์˜',
+            date: new Date(Date.now() + 259200000).toISOString(), // 3์ผ ํ›„
+            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']
+          },
+          {
+            id: 'meeting-006',
+            title: '๊ณ ๊ฐ ํ”ผ๋“œ๋ฐฑ ๋ฆฌ๋ทฐ',
+            date: new Date(Date.now() - 345600000).toISOString(), // 4์ผ ์ „
+            startTime: new Date(Date.now() - 345600000).toISOString(),
+            location: '์˜จ๋ผ์ธ (Teams)',
+            status: 'completed',
+            description: '์ตœ๊ทผ ์ˆ˜์ง‘๋œ ๊ณ ๊ฐ VOC ๋ถ„์„ ๋ฐ ๊ฐœ์„  ๋ฐฉ์•ˆ ๋„์ถœ',
+            creatorId: 'user-007',
+            attendees: ['user-001', 'user-007']
+          }
+        ];
+        Storage.set('meetings', sampleMeetings);
+        Storage.set('currentUserId', currentUserId);
+      }
+
+      if (!Storage.get('todos') || Storage.get('todos').length === 0) {
+        const sampleTodos = [
+          {
+            id: 'todo-001',
+            title: '๋งˆ์ผ€ํŒ… ์ž๋ฃŒ ์ตœ์ข… ๊ฒ€ํ†  ๋ฐ ์Šน์ธ',
+            assignee: '๊น€๋ฏผ์ค€',
+            dueDate: new Date(Date.now() + 86400000).toISOString(), // ๋‚ด์ผ
+            priority: 'high',
+            status: 'in_progress',
+            meetingId: 'meeting-002'
+          },
+          {
+            id: 'todo-002',
+            title: '๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์„ค์ • ๊ฐ€์ด๋“œ ๋ฌธ์„œ ์ž‘์„ฑ',
+            assignee: '์ด์ค€ํ˜ธ',
+            dueDate: new Date(Date.now() + 172800000).toISOString(), // 2์ผ ํ›„
+            priority: 'medium',
+            status: 'in_progress',
+            meetingId: 'meeting-003'
+          },
+          {
+            id: 'todo-003',
+            title: '๊ณ ๊ฐ ์„ค๋ฌธ์กฐ์‚ฌ ๊ฒฐ๊ณผ ๋ถ„์„ ๋ฐ ๋ณด๊ณ ์„œ ์ž‘์„ฑ',
+            assignee: '๋ฐ•์„œ์—ฐ',
+            dueDate: new Date(Date.now() + 432000000).toISOString(), // 5์ผ ํ›„
+            priority: 'high',
+            status: 'pending',
+            meetingId: 'meeting-005'
+          },
+          {
+            id: 'todo-004',
+            title: 'UI/UX ๋””์ž์ธ ๊ฐœ์„ ์•ˆ 3์ฐจ ๋ฆฌ๋ทฐ',
+            assignee: '์ตœ์œ ์ง„',
+            dueDate: new Date(Date.now() - 86400000).toISOString(), // ์–ด์ œ (์ง€์—ฐ)
+            priority: 'high',
+            status: 'in_progress',
+            meetingId: 'meeting-003'
+          },
+          {
+            id: 'todo-005',
+            title: '๋‹ค์Œ ์Šคํ”„๋ฆฐํŠธ ๋ฐฑ๋กœ๊ทธ ์ •๋ฆฌ',
+            assignee: '์ •๋„ํ˜„',
+            dueDate: new Date(Date.now() + 259200000).toISOString(), // 3์ผ ํ›„
+            priority: 'medium',
+            status: 'pending',
+            meetingId: 'meeting-001'
+          }
+        ];
+        Storage.set('todos', sampleTodos);
+      }
+
+      // ๊ณต์œ ๋ฐ›์€ ํšŒ์˜๋ก ์ƒ˜ํ”Œ ๋ฐ์ดํ„ฐ
+      if (!Storage.get('sharedMeetings') || Storage.get('sharedMeetings').length === 0) {
+        const sharedMeetings = [
+          {
+            id: 'meeting-s001',
+            title: 'AI ๊ธฐ์ˆ  ๋„์ž… ๊ฒ€ํ†  ํšŒ์˜',
+            date: new Date(Date.now() - 259200000).toISOString(), // 3์ผ ์ „
+            location: '๋ณธ์‚ฌ 2์ธต ํšŒ์˜์‹ค',
+            status: 'completed',
+            description: 'LLM ๊ธฐ๋ฐ˜ ์„œ๋น„์Šค ๊ฐœ์„  ๋ฐฉ์•ˆ ๋…ผ์˜',
+            sharedBy: 'ํ™๊ธธ๋™'
+          },
+          {
+            id: 'meeting-s002',
+            title: '๋ณด์•ˆ ์ •์ฑ… ์—…๋ฐ์ดํŠธ',
+            date: new Date(Date.now() - 432000000).toISOString(), // 5์ผ ์ „
+            location: '์˜จ๋ผ์ธ (Zoom)',
+            status: 'completed',
+            description: '์ตœ์‹  ๋ณด์•ˆ ๊ฐ€์ด๋“œ๋ผ์ธ ๊ณต์œ  ๋ฐ ์ ์šฉ ๊ณ„ํš',
+            sharedBy: '์†ก์ฃผ์˜'
+          },
+          {
+            id: 'meeting-s003',
+            title: 'ํŒ€ ๋นŒ๋”ฉ ์›Œํฌ์ƒต',
+            date: new Date(Date.now() - 604800000).toISOString(), // 7์ผ ์ „
+            location: '์ œ์ฃผ ์—ฐ์ˆ˜์›',
+            status: 'completed',
+            description: 'ํŒ€ ํ˜‘์—… ๊ฐ•ํ™” ๋ฐ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ๊ฐœ์„  ํ™œ๋™',
+            sharedBy: '๋ฐฑํ˜„์ •'
+          }
+        ];
+        Storage.set('sharedMeetings', sharedMeetings);
+      }
+    }
+
     // ์ธ์ฆ ์ฒดํฌ
     MeetingApp.ready(() => {
       const authToken = Storage.get('authToken');
@@ -569,10 +1012,20 @@
         AppState.currentUser = currentUser;
       }
 
+      // ์ƒ˜ํ”Œ ๋ฐ์ดํ„ฐ ์ดˆ๊ธฐํ™”
+      initSampleData();
+
       // ๋ฐ์ดํ„ฐ ๋กœ๋“œ ๋ฐ ๋ Œ๋”๋ง
       loadDashboardData();
-      renderMeetings();
+      renderUpcomingMeetings();
+      renderMyMeetings();
       renderTodos();
+      renderSharedMeetings();
+
+      // ํƒ€์ด๋จธ ์—…๋ฐ์ดํŠธ (1๋ถ„๋งˆ๋‹ค)
+      setInterval(() => {
+        renderUpcomingMeetings();
+      }, 60000);
     });
 
     // ๋Œ€์‹œ๋ณด๋“œ ํ†ต๊ณ„ ๋กœ๋“œ
@@ -594,27 +1047,182 @@
       document.getElementById('todoCompletionRate').textContent = `${completionRate}%`;
     }
 
-    // ํšŒ์˜ ๋ชฉ๋ก ๋ Œ๋”๋ง
-    function renderMeetings() {
-      const meetings = Storage.get('meetings', []).slice(0, 3);
-      const meetingGrid = document.getElementById('meetingGrid');
+    // ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ•จ์ˆ˜: ์‹œ๊ฐ„๊นŒ์ง€ ๋‚จ์€ ์‹œ๊ฐ„ ๊ณ„์‚ฐ
+    function getTimeUntilMeeting(startTime) {
+      const now = new Date();
+      const start = new Date(startTime);
+      const diff = start - now;
+      return diff;
+    }
 
-      if (meetings.length === 0) {
-        meetingGrid.innerHTML = '<p style="color: var(--color-gray-500);">์•„์ง ๋“ฑ๋ก๋œ ํšŒ์˜๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.</p>';
+    // ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ•จ์ˆ˜: ํƒ€์ด๋จธ ํ…์ŠคํŠธ ํฌ๋งทํŒ…
+    function formatTimerText(milliseconds) {
+      if (milliseconds < 0) return '์‹œ์ž‘๋จ';
+
+      const hours = Math.floor(milliseconds / 3600000);
+      const minutes = Math.floor((milliseconds % 3600000) / 60000);
+
+      if (hours > 24) {
+        const days = Math.floor(hours / 24);
+        return `D-${days}`;
+      } else if (hours > 0) {
+        return `${hours}์‹œ๊ฐ„ ํ›„`;
+      } else if (minutes > 10) {
+        return `${minutes}๋ถ„ ํ›„`;
+      } else if (minutes > 0) {
+        return `๊ณง ์‹œ์ž‘`;
+      } else {
+        return '์‹œ์ž‘ ๊ฐ€๋Šฅ';
+      }
+    }
+
+    // ์˜ˆ์ •๋œ/์ง„ํ–‰์ค‘ ํšŒ์˜ ๋ Œ๋”๋ง
+    function renderUpcomingMeetings() {
+      const meetings = Storage.get('meetings', []);
+      const currentUserId = Storage.get('currentUserId', 'user-001');
+      const upcomingMeetingGrid = document.getElementById('upcomingMeetingGrid');
+
+      // ์ง„ํ–‰์ค‘ ๋ฐ ์˜ˆ์ •๋œ ํšŒ์˜ ํ•„ํ„ฐ๋ง
+      const now = new Date();
+      const upcomingMeetings = meetings.filter(m => {
+        if (m.status === 'ongoing') return true;
+        if (m.status === 'scheduled') {
+          const meetingDate = new Date(m.startTime || m.date);
+          return meetingDate >= now;
+        }
+        return false;
+      });
+
+      // ์ •๋ ฌ: ์ง„ํ–‰์ค‘ ํšŒ์˜ ์šฐ์„ , ๊ทธ ๋‹ค์Œ ๊ฐ€๊นŒ์šด ํšŒ์˜์ˆœ
+      upcomingMeetings.sort((a, b) => {
+        if (a.status === 'ongoing' && b.status !== 'ongoing') return -1;
+        if (a.status !== 'ongoing' && b.status === 'ongoing') return 1;
+        return new Date(a.startTime || a.date) - new Date(b.startTime || b.date);
+      });
+
+      // ์ตœ๋Œ€ 3๊ฐœ๋งŒ ํ‘œ์‹œ
+      const displayMeetings = upcomingMeetings.slice(0, 3);
+
+      if (displayMeetings.length === 0) {
+        upcomingMeetingGrid.innerHTML = '<p style="color: var(--color-gray-500);">์˜ˆ์ •๋œ ํšŒ์˜๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.</p>';
         return;
       }
 
-      meetingGrid.innerHTML = meetings.map(meeting => `
-        <div class="meeting-card" onclick="navigateTo('05-ํšŒ์˜์ง„ํ–‰.html')">
+      upcomingMeetingGrid.innerHTML = displayMeetings.map(meeting => {
+        const isCreator = meeting.creatorId === currentUserId;
+        const isOngoing = meeting.status === 'ongoing';
+        const timeUntil = isOngoing ? 0 : getTimeUntilMeeting(meeting.startTime || meeting.date);
+        const canJoin = isOngoing || (timeUntil > 0 && timeUntil <= 600000); // 10๋ถ„ ์ด๋‚ด
+        const timerText = isOngoing ? '์ง„ํ–‰์ค‘' : formatTimerText(timeUntil);
+
+        let actionButtons = '';
+        if (isOngoing) {
+          // ์ง„ํ–‰์ค‘ ํšŒ์˜: ๋ชจ๋“  ์ฐธ์„์ž์—๊ฒŒ ์ฐธ์—ฌํ•˜๊ธฐ ๋ฒ„ํŠผ
+          actionButtons = `
+            <div class="meeting-actions">
+              <button class="btn-join" onclick="navigateTo('05-ํšŒ์˜์ง„ํ–‰.html')">์ฐธ์—ฌํ•˜๊ธฐ</button>
+            </div>
+          `;
+        } else if (isCreator) {
+          // ์ƒ์„ฑ์ž: ์ˆ˜์ • ๋ฒ„ํŠผ
+          actionButtons = `
+            <div class="meeting-actions">
+              <button class="btn-edit" onclick="navigateTo('03-ํšŒ์˜์˜ˆ์•ฝ.html')">์ˆ˜์ •</button>
+            </div>
+          `;
+        } else if (canJoin) {
+          // ์ฐธ์„์ž: 10๋ถ„ ์ด๋‚ด๋ฉด ์ฐธ์—ฌํ•˜๊ธฐ ๋ฒ„ํŠผ
+          actionButtons = `
+            <div class="meeting-actions">
+              <button class="btn-join" onclick="navigateTo('05-ํšŒ์˜์ง„ํ–‰.html')">์ฐธ์—ฌํ•˜๊ธฐ</button>
+            </div>
+          `;
+        } else {
+          // ์ฐธ์„์ž: 10๋ถ„ ์ด์ƒ ๋‚จ์Œ
+          actionButtons = `
+            <div class="timer-text">${timerText} ์ฐธ์—ฌ ๊ฐ€๋Šฅ</div>
+          `;
+        }
+
+        const roleIndicator = isCreator && !isOngoing ?
+          '<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-header">
+              <div style="flex: 1;">
+                <div class="meeting-badges">
+                  ${isOngoing ? '<span class="badge badge-ongoing">์ง„ํ–‰์ค‘</span>' : `<span class="badge badge-neutral">${timerText}</span>`}
+                  ${roleIndicator}
+                </div>
+                <div class="meeting-title">${meeting.title}</div>
+                <div class="meeting-meta">๐Ÿ“… ${formatDateTime(meeting.date)}</div>
+                <div class="meeting-meta">๐Ÿ“ ${meeting.location}</div>
+                <div class="meeting-meta">๐Ÿ‘ฅ ${meeting.attendees ? meeting.attendees.length : 0}๋ช…</div>
+              </div>
+            </div>
+            <div style="font-size: var(--font-size-body-small); color: var(--color-gray-600); margin-bottom: var(--spacing-2);">
+              ${meeting.description}
+            </div>
+            ${actionButtons}
+          </div>
+        `;
+      }).join('');
+    }
+
+    // ๋‚ด ํšŒ์˜๋ก ๋ Œ๋”๋ง
+    function renderMyMeetings() {
+      const meetings = Storage.get('meetings', []);
+      const myMeetingGrid = document.getElementById('myMeetingGrid');
+
+      // ์™„๋ฃŒ๋œ ํšŒ์˜๋งŒ ํ•„ํ„ฐ๋ง
+      const completedMeetings = meetings
+        .filter(m => m.status === 'completed')
+        .sort((a, b) => new Date(b.date) - new Date(a.date))
+        .slice(0, 3);
+
+      if (completedMeetings.length === 0) {
+        myMeetingGrid.innerHTML = '<p style="color: var(--color-gray-500);">์ž‘์„ฑํ•œ ํšŒ์˜๋ก์ด ์—†์Šต๋‹ˆ๋‹ค. ์ฒซ ํšŒ์˜๋ฅผ ์‹œ์ž‘ํ•ด๋ณด์„ธ์š”!</p>';
+        return;
+      }
+
+      myMeetingGrid.innerHTML = completedMeetings.map(meeting => `
+        <div class="meeting-card" onclick="navigateTo('10-ํšŒ์˜๋ก์ƒ์„ธ์กฐํšŒ.html')">
           <div class="meeting-header">
             <div>
               <div class="meeting-title">${meeting.title}</div>
               <div class="meeting-meta">๐Ÿ“… ${formatDateTime(meeting.date)}</div>
               <div class="meeting-meta">๐Ÿ“ ${meeting.location}</div>
+              <div class="meeting-meta">๐Ÿ‘ฅ ${meeting.attendees ? meeting.attendees.length : 0}๋ช…</div>
             </div>
-            <span class="badge ${MeetingUtils.getStatusClass(meeting.status)}">
-              ${MeetingUtils.getStatusLabel(meeting.status)}
-            </span>
+            <span class="badge badge-success">ํ™•์ •์™„๋ฃŒ</span>
+          </div>
+          <div style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">
+            ${meeting.description}
+          </div>
+        </div>
+      `).join('');
+    }
+
+    // ๊ณต์œ ๋ฐ›์€ ํšŒ์˜๋ก ๋ Œ๋”๋ง
+    function renderSharedMeetings() {
+      const sharedMeetings = Storage.get('sharedMeetings', []);
+      const sharedMeetingGrid = document.getElementById('sharedMeetingGrid');
+
+      if (sharedMeetings.length === 0) {
+        sharedMeetingGrid.innerHTML = '<p style="color: var(--color-gray-500);">๊ณต์œ ๋ฐ›์€ ํšŒ์˜๋ก์ด ์—†์Šต๋‹ˆ๋‹ค.</p>';
+        return;
+      }
+
+      sharedMeetingGrid.innerHTML = sharedMeetings.map(meeting => `
+        <div class="meeting-card" onclick="navigateTo('10-ํšŒ์˜๋ก์ƒ์„ธ์กฐํšŒ.html')">
+          <div class="meeting-header">
+            <div>
+              <div class="meeting-title">${meeting.title}</div>
+              <div class="meeting-meta">๐Ÿ“… ${formatDateTime(meeting.date)}</div>
+              <div class="meeting-meta">๐Ÿ‘ค ๊ณต์œ ์ž: ${meeting.sharedBy}</div>
+            </div>
+            <span class="badge badge-primary">๊ณต์œ ๋จ</span>
           </div>
           <div style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">
             ${meeting.description}
@@ -678,9 +1286,30 @@
       }, 1000);
     });
 
-    // FAB ๋ฒ„ํŠผ
-    document.getElementById('fabButton').addEventListener('click', () => {
-      window.location.href = '03-ํšŒ์˜์˜ˆ์•ฝ.html';
+    // FAB ๋ฒ„ํŠผ - ๋ชจ๋‹ฌ ํ† ๊ธ€
+    const fabButton = document.getElementById('fabButton');
+    const fabModal = document.getElementById('fabModal');
+
+    fabButton.addEventListener('click', (e) => {
+      e.stopPropagation();
+      fabModal.classList.add('show');
+      document.body.style.overflow = 'hidden';
+    });
+
+    // ๋ชจ๋‹ฌ ๋ฐฐ๊ฒฝ ํด๋ฆญ ์‹œ ๋‹ซ๊ธฐ
+    fabModal.addEventListener('click', (e) => {
+      if (e.target === fabModal) {
+        fabModal.classList.remove('show');
+        document.body.style.overflow = 'auto';
+      }
+    });
+
+    // ESC ํ‚ค๋กœ ๋ชจ๋‹ฌ ๋‹ซ๊ธฐ
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && fabModal.classList.contains('show')) {
+        fabModal.classList.remove('show');
+        document.body.style.overflow = 'auto';
+      }
     });
   </script>
 </body>
diff --git a/design/uiux/prototype/12-ํšŒ์˜๋ก๋ชฉ๋ก์กฐํšŒ.html b/design/uiux/prototype/10-ํšŒ์˜๋ก๋Œ€์‹œ๋ณด๋“œ.html
similarity index 100%
rename from design/uiux/prototype/12-ํšŒ์˜๋ก๋ชฉ๋ก์กฐํšŒ.html
rename to design/uiux/prototype/10-ํšŒ์˜๋ก๋Œ€์‹œ๋ณด๋“œ.html