From 397689cc63a26c1af58d3e6b07d26d5130ac31cd Mon Sep 17 00:00:00 2001
From: yabo0812 <yabo0812@gmail.com>
Date: Fri, 24 Oct 2025 15:58:15 +0900
Subject: [PATCH] =?UTF-8?q?=ED=85=9C=ED=94=8C=EB=A6=BF=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EB=B0=B0=EC=B9=98=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/04-템플릿선택.html | 283 +++++------------------
 1 file changed, 54 insertions(+), 229 deletions(-)

diff --git a/design/uiux/prototype/04-템플릿선택.html b/design/uiux/prototype/04-템플릿선택.html
index ccb958e..7f22ccc 100644
--- a/design/uiux/prototype/04-템플릿선택.html
+++ b/design/uiux/prototype/04-템플릿선택.html
@@ -13,6 +13,32 @@
       padding-bottom: 80px;
     }
 
+    /* 템플릿 그리드 */
+    .template-list {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: var(--space-md);
+    }
+
+    /* 템플릿 카드 높이 균등 */
+    .template-list .card {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    .template-list .card-body {
+      flex: 1;
+    }
+
+
+    /* 모바일: 작은 간격 */
+    @media (max-width: 767px) {
+      .template-list {
+        gap: var(--space-sm);
+      }
+    }
+
     /* 데스크톱: 메인 콘텐츠 조정 */
     @media (min-width: 768px) {
       .main-content {
@@ -41,18 +67,16 @@
         <p class="text-muted">회의 유형에 맞는 템플릿을 선택하세요</p>
       </div>
 
-      <!-- Template Cards -->
-      <div class="template-list" style="display: flex; flex-direction: column; gap: var(--space-md);">
+      <!-- Template Cards (2x2 grid) -->
+      <div class="template-list">
         <!-- 일반 회의 템플릿 -->
         <div class="card" style="cursor: pointer;" onclick="selectTemplate('general')">
-          <div class="card-header">
-            <div style="display: flex; align-items: center; gap: var(--space-md);">
-              <div style="font-size: 32px;">📋</div>
-              <div>
-                <h3 class="card-title">일반 회의</h3>
-                <p class="text-muted text-small">기본 회의록 형식</p>
-              </div>
+          <div class="card-header" style="display: block !important;">
+            <div style="margin-bottom: 4px;">
+              <span style="font-size: 20px;">📋</span>
+              <span style="font-size: 14px; font-weight: 600; margin-left: 4px;">일반 회의</span>
             </div>
+            <div style="font-size: 11px; color: var(--text-muted);">기본 회의록 형식</div>
           </div>
           <div class="card-body">
             <div class="text-small text-muted">
@@ -63,21 +87,18 @@
             </div>
           </div>
           <div class="card-footer">
-            <button class="btn btn-secondary btn-sm" onclick="previewTemplate(event, 'general')">미리보기</button>
-            <button class="btn btn-primary btn-sm" onclick="selectTemplate('general')">선택</button>
+            <button class="btn btn-primary btn-sm" onclick="selectTemplate('general')" style="width: 100%;">선택</button>
           </div>
         </div>
 
         <!-- 스크럼 회의 템플릿 -->
         <div class="card" style="cursor: pointer;" onclick="selectTemplate('scrum')">
-          <div class="card-header">
-            <div style="display: flex; align-items: center; gap: var(--space-md);">
-              <div style="font-size: 32px;">🏃</div>
-              <div>
-                <h3 class="card-title">스크럼 회의</h3>
-                <p class="text-muted text-small">데일리 스탠드업 형식</p>
-              </div>
+          <div class="card-header" style="display: block !important;">
+            <div style="margin-bottom: 4px;">
+              <span style="font-size: 20px;">🏃</span>
+              <span style="font-size: 14px; font-weight: 600; margin-left: 4px;">스크럼 회의</span>
             </div>
+            <div style="font-size: 11px; color: var(--text-muted);">데일리 스탠드업 형식</div>
           </div>
           <div class="card-body">
             <div class="text-small text-muted">
@@ -87,21 +108,18 @@
             </div>
           </div>
           <div class="card-footer">
-            <button class="btn btn-secondary btn-sm" onclick="previewTemplate(event, 'scrum')">미리보기</button>
-            <button class="btn btn-primary btn-sm" onclick="selectTemplate('scrum')">선택</button>
+            <button class="btn btn-primary btn-sm" onclick="selectTemplate('scrum')" style="width: 100%;">선택</button>
           </div>
         </div>
 
         <!-- 킥오프 회의 템플릿 -->
         <div class="card" style="cursor: pointer;" onclick="selectTemplate('kickoff')">
-          <div class="card-header">
-            <div style="display: flex; align-items: center; gap: var(--space-md);">
-              <div style="font-size: 32px;">🚀</div>
-              <div>
-                <h3 class="card-title">킥오프 회의</h3>
-                <p class="text-muted text-small">프로젝트 시작 회의</p>
-              </div>
+          <div class="card-header" style="display: block !important;">
+            <div style="margin-bottom: 4px;">
+              <span style="font-size: 20px;">🚀</span>
+              <span style="font-size: 14px; font-weight: 600; margin-left: 4px;">킥오프 회의</span>
             </div>
+            <div style="font-size: 11px; color: var(--text-muted);">프로젝트 시작 회의</div>
           </div>
           <div class="card-body">
             <div class="text-small text-muted">
@@ -112,21 +130,18 @@
             </div>
           </div>
           <div class="card-footer">
-            <button class="btn btn-secondary btn-sm" onclick="previewTemplate(event, 'kickoff')">미리보기</button>
-            <button class="btn btn-primary btn-sm" onclick="selectTemplate('kickoff')">선택</button>
+            <button class="btn btn-primary btn-sm" onclick="selectTemplate('kickoff')" style="width: 100%;">선택</button>
           </div>
         </div>
 
         <!-- 주간 회의 템플릿 -->
         <div class="card" style="cursor: pointer;" onclick="selectTemplate('weekly')">
-          <div class="card-header">
-            <div style="display: flex; align-items: center; gap: var(--space-md);">
-              <div style="font-size: 32px;">📅</div>
-              <div>
-                <h3 class="card-title">주간 회의</h3>
-                <p class="text-muted text-small">주간 리뷰 및 계획</p>
-              </div>
+          <div class="card-header" style="display: block !important;">
+            <div style="margin-bottom: 4px;">
+              <span style="font-size: 20px;">📅</span>
+              <span style="font-size: 14px; font-weight: 600; margin-left: 4px;">주간 회의</span>
             </div>
+            <div style="font-size: 11px; color: var(--text-muted);">주간 리뷰 및 계획</div>
           </div>
           <div class="card-body">
             <div class="text-small text-muted">
@@ -137,72 +152,12 @@
             </div>
           </div>
           <div class="card-footer">
-            <button class="btn btn-secondary btn-sm" onclick="previewTemplate(event, 'weekly')">미리보기</button>
-            <button class="btn btn-primary btn-sm" onclick="selectTemplate('weekly')">선택</button>
+            <button class="btn btn-primary btn-sm" onclick="selectTemplate('weekly')" style="width: 100%;">선택</button>
           </div>
         </div>
       </div>
   </main>
 
-  <!-- Template Preview Modal -->
-  <div id="previewModal" class="modal-overlay">
-    <div class="modal">
-      <div class="modal-header">
-        <h2 class="modal-title" id="previewTitle">템플릿 미리보기</h2>
-        <button class="modal-close" onclick="closeModal('previewModal')">✕</button>
-      </div>
-      <div class="modal-body">
-        <div id="previewContent" style="max-height: 400px; overflow-y: auto;">
-          <!-- 섹션 리스트가 여기에 표시됨 -->
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button class="btn btn-ghost" onclick="closeModal('previewModal')">닫기</button>
-        <button class="btn btn-primary" onclick="customizeTemplate()">커스터마이징</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Template Customization Modal -->
-  <div id="customizeModal" class="modal-overlay">
-    <div class="modal">
-      <div class="modal-header">
-        <h2 class="modal-title">템플릿 커스터마이징</h2>
-        <button class="modal-close" onclick="closeModal('customizeModal')">✕</button>
-      </div>
-      <div class="modal-body">
-        <p class="text-small text-muted mb-md">섹션을 드래그하여 순서를 변경하거나 삭제할 수 있습니다</p>
-        <div id="sectionList" style="display: flex; flex-direction: column; gap: var(--space-sm);">
-          <!-- 섹션 목록이 여기에 표시됨 -->
-        </div>
-        <button class="btn btn-ghost mt-md" onclick="addSection()" style="width: 100%;">+ 섹션 추가</button>
-      </div>
-      <div class="modal-footer">
-        <button class="btn btn-ghost" onclick="closeModal('customizeModal')">취소</button>
-        <button class="btn btn-primary" onclick="startMeeting()">이 템플릿으로 시작</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Add Section Modal -->
-  <div id="addSectionModal" class="modal-overlay">
-    <div class="modal">
-      <div class="modal-header">
-        <h2 class="modal-title">섹션 추가</h2>
-        <button class="modal-close" onclick="closeModal('addSectionModal')">✕</button>
-      </div>
-      <div class="modal-body">
-        <div class="form-group">
-          <label class="form-label">섹션 이름</label>
-          <input type="text" class="form-control" id="newSectionName" placeholder="예: 기술 검토">
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button class="btn btn-ghost" onclick="closeModal('addSectionModal')">취소</button>
-        <button class="btn btn-primary" onclick="confirmAddSection()">추가</button>
-      </div>
-    </div>
-  </div>
 
   <script src="common.js"></script>
   <script>
@@ -230,35 +185,13 @@
       }
     };
 
-    let selectedTemplate = null;
-    let customSections = [];
-
-    // 템플릿 미리보기
-    function previewTemplate(event, templateId) {
-      event.stopPropagation();
-      const template = templates[templateId];
-
-      $('#previewTitle').textContent = template.name + ' 미리보기';
-
-      const content = template.sections.map((section, index) => `
-        <div class="list-item">
-          <span class="text-muted text-small">${index + 1}.</span>
-          <span class="list-item-title">${section}</span>
-        </div>
-      `).join('');
-
-      $('#previewContent').innerHTML = content;
-      openModal('previewModal');
-    }
-
     // 템플릿 선택
     function selectTemplate(templateId) {
-      selectedTemplate = templateId;
-      customSections = [...templates[templateId].sections];
+      const templateSections = [...templates[templateId].sections];
 
       // 회의 진행 화면으로 이동
       saveToStorage('selectedTemplate', templateId);
-      saveToStorage('templateSections', customSections);
+      saveToStorage('templateSections', templateSections);
       navigateTo('05-회의진행.html');
     }
 
@@ -276,114 +209,6 @@
     $('#skip-btn')?.addEventListener('click', () => {
       skipTemplate();
     });
-
-    // 커스터마이징 모달 열기
-    function customizeTemplate() {
-      closeModal('previewModal');
-      renderSectionList();
-      openModal('customizeModal');
-    }
-
-    // 섹션 리스트 렌더링
-    function renderSectionList() {
-      const sectionList = $('#sectionList');
-      sectionList.innerHTML = customSections.map((section, index) => `
-        <div class="list-item" draggable="true" data-index="${index}">
-          <span class="text-muted">☰</span>
-          <span class="list-item-title" style="flex: 1;">${section}</span>
-          <button class="btn btn-ghost btn-sm" onclick="removeSection(${index})">
-            <span style="color: var(--error);">✕</span>
-          </button>
-        </div>
-      `).join('');
-
-      // 드래그 이벤트 설정
-      setupDragAndDrop();
-    }
-
-    // 드래그 앤 드롭 설정
-    function setupDragAndDrop() {
-      const items = $$('#sectionList .list-item');
-      let draggedItem = null;
-
-      items.forEach(item => {
-        item.addEventListener('dragstart', function() {
-          draggedItem = this;
-          this.style.opacity = '0.5';
-        });
-
-        item.addEventListener('dragend', function() {
-          this.style.opacity = '1';
-        });
-
-        item.addEventListener('dragover', function(e) {
-          e.preventDefault();
-        });
-
-        item.addEventListener('drop', function(e) {
-          e.preventDefault();
-          if (draggedItem !== this) {
-            const draggedIndex = parseInt(draggedItem.dataset.index);
-            const targetIndex = parseInt(this.dataset.index);
-
-            const temp = customSections[draggedIndex];
-            customSections.splice(draggedIndex, 1);
-            customSections.splice(targetIndex, 0, temp);
-
-            renderSectionList();
-          }
-        });
-      });
-    }
-
-    // 섹션 삭제
-    function removeSection(index) {
-      if (customSections.length <= 1) {
-        showToast('최소 1개의 섹션이 필요합니다', 'error');
-        return;
-      }
-      customSections.splice(index, 1);
-      renderSectionList();
-    }
-
-    // 섹션 추가 모달 열기
-    function addSection() {
-      openModal('addSectionModal');
-      $('#newSectionName').value = '';
-      $('#newSectionName').focus();
-    }
-
-    // 섹션 추가 확인
-    function confirmAddSection() {
-      const name = $('#newSectionName').value.trim();
-      if (!name) {
-        showToast('섹션 이름을 입력해주세요', 'error');
-        return;
-      }
-      customSections.push(name);
-      renderSectionList();
-      closeModal('addSectionModal');
-      showToast('섹션이 추가되었습니다', 'success');
-    }
-
-    // 회의 시작
-    function startMeeting() {
-      if (customSections.length === 0) {
-        showToast('최소 1개의 섹션이 필요합니다', 'error');
-        return;
-      }
-
-      saveToStorage('selectedTemplate', selectedTemplate);
-      saveToStorage('templateSections', customSections);
-      navigateTo('05-회의진행.html');
-    }
-
-    // Enter 키로 섹션 추가
-    $('#addSectionModal')?.addEventListener('keypress', function(e) {
-      if (e.key === 'Enter') {
-        confirmAddSection();
-      }
-    });
   </script>
 </body>
 </html>