회의진행화면 레이아웃 수정

design/uiux/prototype/05-회의진행.html

@@ -129,18 +129,23 @@
       flex: 1;
       overflow-y: auto;
       background: var(--gray-100);
-      padding: 0 var(--space-md) 10px;
+      padding: var(--space-md);
+      padding-bottom: 88px; /* 하단 버튼 영역 확보 */
+      max-width: none !important; /* common.css의 max-width: 900px 오버라이드 */
+      margin: 0 !important; /* common.css의 auto margin 제거 */
     }
 
     @media (min-width: 768px) {
       .main-content {
-        padding: 0 var(--space-lg) 88px;
+        padding: var(--space-lg);
+        padding-bottom: 88px;
       }
     }
 
     @media (min-width: 1024px) {
       .main-content {
-        padding: 0 var(--space-xl) 88px;
+        padding: var(--space-xl);
+        padding-bottom: 88px;
       }
     }
 
@@ -151,6 +156,8 @@
       padding: var(--space-md);
       margin-bottom: var(--space-md);
       box-shadow: var(--shadow-md);
+      width: 100%;
+      box-sizing: border-box;
     }
 
     .meeting-info-grid {
@@ -192,6 +199,11 @@
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-md);
       margin-bottom: var(--space-md);
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
+      display: block;
     }
 
     .tabs-header {
@@ -248,22 +260,19 @@
     .tab-content {
       display: none;
       padding: var(--space-md);
+      width: 100%;
+      box-sizing: border-box;
     }
 
     .tab-content.active {
       display: block;
     }
 
-    @media (min-width: 768px) {
+    /* 모든 탭 콘텐츠 내부 요소 텍스트 줄바꿈 강제 */
-      .tab-content {
+    .tab-content * {
-        padding: var(--space-lg);
+      max-width: 100%;
-      }
+      word-wrap: break-word;
-    }
+      overflow-wrap: break-word;
-
-    @media (min-width: 1024px) {
-      .tab-content {
-        padding: var(--space-xl);
-      }
     }
 
     /* 참석자 탭 */
@@ -437,6 +446,26 @@
       line-height: 1.5;
     }
 
+    /* 용어 검색 폼 */
+    .term-search-form {
+      display: flex;
+      gap: var(--space-xs);
+      margin-bottom: var(--space-sm);
+    }
+
+    .term-search-input {
+      flex: 1;
+      font-size: var(--font-small);
+      padding: var(--space-sm);
+    }
+
+    .term-search-btn {
+      padding: var(--space-sm) var(--space-md);
+      font-size: var(--font-small);
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
     /* 용어 사전 카드 */
     .term-item {
       background: #FAFAFA;
@@ -757,8 +786,21 @@
           <div class="tab-content" id="tab-terms">
             <h3 class="text-small font-bold mb-md">용어 사전</h3>
 
+            <!-- 용어 검색 폼 -->
+            <div class="term-search-form">
+              <input
+                type="text"
+                class="form-control term-search-input"
+                id="termSearchInput"
+                placeholder="용어 검색..."
+              >
+              <button class="btn btn-primary btn-sm term-search-btn" onclick="searchTerm()">
+                검색
+              </button>
+            </div>
+
             <div id="termsList">
-              <div class="term-item" onclick="showTermDetail('MVP')">
+              <div class="term-item highlight" onclick="showTermDetail('MVP')">
                 <div class="term-name">
                   MVP
                   <span class="term-badge">기획</span>
@@ -769,7 +811,7 @@
                 <div class="term-context">신제품 기획 회의에서 언급</div>
               </div>
 
-              <div class="term-item" onclick="showTermDetail('B2C')">
+              <div class="term-item highlight" onclick="showTermDetail('B2C')">
                 <div class="term-name">
                   B2C
                   <span class="term-badge">비즈니스</span>
@@ -780,7 +822,7 @@
                 <div class="term-context">타겟 고객 분석 시 사용</div>
               </div>
 
-              <div class="term-item" onclick="showTermDetail('PMF')">
+              <div class="term-item highlight" onclick="showTermDetail('PMF')">
                 <div class="term-name">
                   PMF
                   <span class="term-badge">전략</span>
@@ -791,7 +833,7 @@
                 <div class="term-context">제품 전략 논의 중 언급</div>
               </div>
 
-              <div class="term-item" onclick="showTermDetail('CAC')">
+              <div class="term-item highlight" onclick="showTermDetail('CAC')">
                 <div class="term-name">
                   CAC
                   <span class="term-badge">마케팅</span>
@@ -802,6 +844,102 @@
                 <div class="term-context">마케팅 예산 논의에서 사용</div>
               </div>
             </div>            
+
+            <div id="termList">
+              <div class="term-item" onclick="showTermDetail('Mobile First')">
+                <div class="term-name">
+                  Mobile First
+                  <span class="term-badge">설계 방법론</span>
+                  <span class="term-mention-icon">💬</span>
+                </div>
+                <div class="term-definition">
+                  모바일 환경을 우선적으로 고려하여 디자인하고, 이후 더 큰 화면으로 확장하는 설계 방법론입니다.
+                </div>
+                <div class="term-context">회의에서 언급됨 (14:23)</div>
+              </div>
+
+              <div class="term-item" onclick="showTermDetail('AI')">
+                <div class="term-name">
+                  AI
+                  <span class="term-badge">기술</span>
+                  <span class="term-mention-icon">💬</span>
+                </div>
+                <div class="term-definition">
+                  Artificial Intelligence의 약자로, 인공지능을 의미합니다. 이 프로젝트에서는 회의록 자동 작성에 활용됩니다.
+                </div>
+                <div class="term-context">회의에서 5회 언급됨</div>
+              </div>
+
+              <div class="term-item" onclick="showTermDetail('API')">
+                <div class="term-name">
+                  API
+                  <span class="term-badge">기술</span>
+                  <span class="term-mention-icon">💬</span>
+                </div>
+                <div class="term-definition">
+                  Application Programming Interface의 약자로, 소프트웨어 간 상호작용을 위한 인터페이스입니다.
+                </div>
+                <div class="term-context">회의에서 3회 언급됨</div>
+              </div>
+
+              <div class="term-item" onclick="showTermDetail('API Gateway')">
+                <div class="term-name">
+                  API Gateway
+                  <span class="term-badge">아키텍처</span>
+                  <span class="term-mention-icon">💬</span>
+                </div>
+                <div class="term-definition">
+                  클라이언트와 백엔드 마이크로서비스 사이의 단일 진입점 역할을 하는 서버. 요청 라우팅, 인증, 속도 제한, 로드 밸런싱 등을 처리합니다.
+                </div>
+                <div class="term-context">API 설계 리뷰 회의 (2024-09-28)에서 AWS API Gateway 채택 결정</div>
+              </div>
+
+              <div class="term-item" onclick="showTermDetail('마이크로서비스')">
+                <div class="term-name">
+                  마이크로서비스
+                  <span class="term-badge">아키텍처</span>
+                  <span class="term-mention-icon">💬</span>
+                </div>
+                <div class="term-definition">
+                  애플리케이션을 작고 독립적인 서비스들로 분리하여 개발하고 배포하는 아키텍처 패턴입니다.
+                </div>
+                <div class="term-context">회의에서 언급됨</div>
+              </div>
+
+              <div class="term-item " onclick="showTermDetail('MVP')">
+                <div class="term-name">
+                  MVP
+                  <span class="term-badge">방법론</span>
+                  <span class="term-mention-icon">💬</span>
+                </div>
+                <div class="term-definition">
+                  Minimum Viable Product의 약자. 최소한의 기능만 갖춘 제품으로, 시장 반응을 빠르게 확인하기 위해 개발합니다.
+                </div>
+                <div class="term-context">개발 일정 논의에서 언급</div>
+              </div>
+
+              <div class="term-item" onclick="showTermDetail('RESTful API')">
+                <div class="term-name">
+                  RESTful API
+                  <span class="term-badge">기술</span>
+                </div>
+                <div class="term-definition">
+                  REST(Representational State Transfer) 아키텍처 스타일을 따르는 웹 서비스 API 설계 방식입니다.
+                </div>
+                <div class="term-context">API 설계 리뷰 회의 참조</div>
+              </div>
+
+              <div class="term-item" onclick="showTermDetail('JWT')">
+                <div class="term-name">
+                  JWT
+                  <span class="term-badge">보안</span>
+                </div>
+                <div class="term-definition">
+                  JSON Web Token의 약자. 사용자 인증 정보를 안전하게 전송하기 위한 토큰 기반 인증 방식입니다.
+                </div>
+                <div class="term-context">API Gateway 보안 정책에서 채택</div>
+              </div>
+            </div>
           </div>
 
           <!-- 관련 회의록 탭 -->
@@ -979,6 +1117,68 @@
       // });
     }
 
+    // 용어 검색
+    function searchTerm() {
+      const searchInput = document.getElementById('termSearchInput');
+      const searchText = searchInput.value.trim().toLowerCase();
+
+      if (!searchText) {
+        alert('검색할 용어를 입력해주세요');
+        return;
+      }
+
+      const termItems = document.querySelectorAll('.term-item');
+      let foundCount = 0;
+
+      termItems.forEach(item => {
+        const termName = item.querySelector('.term-name').textContent.toLowerCase();
+        const termDefinition = item.querySelector('.term-definition').textContent.toLowerCase();
+
+        // 용어명 또는 정의에 검색어가 포함되어 있는지 확인
+        if (termName.includes(searchText) || termDefinition.includes(searchText)) {
+          item.style.display = '';
+          item.classList.add('highlight');
+          foundCount++;
+        } else {
+          item.style.display = 'none';
+          item.classList.remove('highlight');
+        }
+      });
+
+      if (foundCount === 0) {
+        alert('검색 결과가 없습니다');
+        // 모든 항목 다시 표시
+        termItems.forEach(item => {
+          item.style.display = '';
+          item.classList.remove('highlight');
+        });
+        searchInput.value = '';
+      }
+    }
+
+    // Enter 키로 검색 실행
+    document.addEventListener('DOMContentLoaded', function() {
+      const searchInput = document.getElementById('termSearchInput');
+      if (searchInput) {
+        searchInput.addEventListener('keypress', function(event) {
+          if (event.key === 'Enter') {
+            searchTerm();
+          }
+        });
+
+        // 입력값이 비워지면 전체 표시
+        searchInput.addEventListener('input', function() {
+          if (this.value.trim() === '') {
+            const termItems = document.querySelectorAll('.term-item');
+            termItems.forEach(item => {
+              item.style.display = '';
+              item.classList.remove('highlight');
+            });
+          }
+        });
+      }
+    });
+
     // 녹음 일시정지
     function pauseRecording() {
       alert('녹음이 일시정지되었습니다');