From 33745c543e028c98eb4fd3f67bd62656315edf11 Mon Sep 17 00:00:00 2001
From: yabo0812 <yabo0812@gmail.com>
Date: Wed, 22 Oct 2025 17:10:00 +0900
Subject: [PATCH] =?UTF-8?q?04-=ED=85=9C=ED=94=8C=EB=A6=BF=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=ED=99=94=EB=A9=B4=20=EB=B2=84=ED=8A=BC=20=EB=B0=8F?=
 =?UTF-8?q?=20=ED=97=A4=EB=8D=94=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=ED=86=B5?=
 =?UTF-8?q?=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 모든 버튼에 'btn' 클래스 추가하여 common.css 표준 적용
  - 카드 내 버튼: btn-secondary, btn-primary
  - 모달 버튼: btn-ghost, btn-primary
  - 동적 생성 버튼 포함
- 헤더 구조를 03-회의예약.html과 동일하게 변경
  - page-header → header 클래스 사용
  - header-left 구조로 통일
  - back-btn 클래스 적용
- 건너뛰기 버튼을 btn-primary로 변경 (임시저장 버튼과 통일)
- 뒤로가기 버튼에 history.back() 기능 적용
- 메인 콘텐츠 영역 구조 통일 (main-content)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .claude/settings.local.json              |   3 +-
 design/uiux/prototype/04-템플릿선택.html | 106 ++++++++++-------------
 2 files changed, 47 insertions(+), 62 deletions(-)
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 92aeb11..80c5c95 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -38,7 +38,8 @@
       "mcp__sequential-thinking__sequentialthinking",
       "Bash(awk '{print $1\"\"\"\": \"\"\"\"; system(\"\"\"\"sed -n \"\"\"\" $1\"\"\"\"p design/uiux/prototype/common.css\"\"\"\")}')",
       "Bash(git stash:*)",
-      "Bash(tools/check-mermaid.sh:*)"
+      "Bash(tools/check-mermaid.sh:*)",
+      "Bash(git restore:*)"
     ],
     "deny": [],
     "ask": []
diff --git a/design/uiux/prototype/04-템플릿선택.html b/design/uiux/prototype/04-템플릿선택.html
index e5b4c47..ccb958e 100644
--- a/design/uiux/prototype/04-템플릿선택.html
+++ b/design/uiux/prototype/04-템플릿선택.html
@@ -6,39 +6,19 @@
   <title>템플릿 선택 - 회의록 서비스</title>
   <link rel="stylesheet" href="common.css">
   <style>
-    .page-header {
+    /* 메인 콘텐츠 */
+    .main-content {
+      margin-top: 64px;
       padding: var(--space-md);
-      background: var(--white);
-      border-bottom: 1px solid var(--gray-300);
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      z-index: 99;
-    }
-
-    .header-inner {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .header-title {
-      font-size: var(--font-h2);
-      margin: 0;
-    }
-
-    .page-content {
-      margin-top: 80px;
       padding-bottom: 80px;
     }
 
+    /* 데스크톱: 메인 콘텐츠 조정 */
     @media (min-width: 768px) {
-      .page-header {
-        padding: var(--space-lg) var(--space-xl);
-      }
-
-      .page-content {
+      .main-content {
+        padding: var(--space-xl);
+        padding-bottom: var(--space-xl);
+        max-width: 1200px;
         margin-left: auto;
         margin-right: auto;
       }
@@ -46,20 +26,17 @@
   </style>
 </head>
 <body>
-  <div class="page">
-    <!-- Header -->
-    <header class="page-header">
-      <div class="header-inner">
-        <button class="btn-ghost" onclick="history.back()">
-          <span style="font-size: 24px;">←</span>
-        </button>
-        <h1 class="header-title">템플릿 선택</h1>
-        <button class="btn-ghost" onclick="skipTemplate()">건너뛰기</button>
-      </div>
-    </header>
+  <!-- 헤더 -->
+  <header class="header">
+    <div class="header-left">
+      <button class="back-btn" id="back-btn">←</button>
+      <h1 class="header-title">템플릿 선택</h1>
+    </div>
+    <button class="btn btn-primary btn-sm" id="skip-btn">건너뛰기</button>
+  </header>
 
-    <!-- Main Content -->
-    <div class="container">
+  <!-- 메인 콘텐츠 -->
+  <main class="main-content">
       <div style="margin-bottom: var(--space-lg);">
         <p class="text-muted">회의 유형에 맞는 템플릿을 선택하세요</p>
       </div>
@@ -86,8 +63,8 @@
             </div>
           </div>
           <div class="card-footer">
-            <button class="btn-secondary btn-sm" onclick="previewTemplate(event, 'general')">미리보기</button>
-            <button class="btn-primary btn-sm" onclick="selectTemplate('general')">선택</button>
+            <button class="btn btn-secondary btn-sm" onclick="previewTemplate(event, 'general')">미리보기</button>
+            <button class="btn btn-primary btn-sm" onclick="selectTemplate('general')">선택</button>
           </div>
         </div>
 
@@ -110,8 +87,8 @@
             </div>
           </div>
           <div class="card-footer">
-            <button class="btn-secondary btn-sm" onclick="previewTemplate(event, 'scrum')">미리보기</button>
-            <button class="btn-primary btn-sm" onclick="selectTemplate('scrum')">선택</button>
+            <button class="btn btn-secondary btn-sm" onclick="previewTemplate(event, 'scrum')">미리보기</button>
+            <button class="btn btn-primary btn-sm" onclick="selectTemplate('scrum')">선택</button>
           </div>
         </div>
 
@@ -135,8 +112,8 @@
             </div>
           </div>
           <div class="card-footer">
-            <button class="btn-secondary btn-sm" onclick="previewTemplate(event, 'kickoff')">미리보기</button>
-            <button class="btn-primary btn-sm" onclick="selectTemplate('kickoff')">선택</button>
+            <button class="btn btn-secondary btn-sm" onclick="previewTemplate(event, 'kickoff')">미리보기</button>
+            <button class="btn btn-primary btn-sm" onclick="selectTemplate('kickoff')">선택</button>
           </div>
         </div>
 
@@ -160,15 +137,12 @@
             </div>
           </div>
           <div class="card-footer">
-            <button class="btn-secondary btn-sm" onclick="previewTemplate(event, 'weekly')">미리보기</button>
-            <button class="btn-primary btn-sm" onclick="selectTemplate('weekly')">선택</button>
+            <button class="btn btn-secondary btn-sm" onclick="previewTemplate(event, 'weekly')">미리보기</button>
+            <button class="btn btn-primary btn-sm" onclick="selectTemplate('weekly')">선택</button>
           </div>
         </div>
       </div>
-    </div>
-
-    <!-- Bottom Navigation -->
-  </div>
+  </main>
 
   <!-- Template Preview Modal -->
   <div id="previewModal" class="modal-overlay">
@@ -183,8 +157,8 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button class="btn-ghost" onclick="closeModal('previewModal')">닫기</button>
-        <button class="btn-primary" onclick="customizeTemplate()">커스터마이징</button>
+        <button class="btn btn-ghost" onclick="closeModal('previewModal')">닫기</button>
+        <button class="btn btn-primary" onclick="customizeTemplate()">커스터마이징</button>
       </div>
     </div>
   </div>
@@ -201,11 +175,11 @@
         <div id="sectionList" style="display: flex; flex-direction: column; gap: var(--space-sm);">
           <!-- 섹션 목록이 여기에 표시됨 -->
         </div>
-        <button class="btn-ghost mt-md" onclick="addSection()" style="width: 100%;">+ 섹션 추가</button>
+        <button class="btn btn-ghost mt-md" onclick="addSection()" style="width: 100%;">+ 섹션 추가</button>
       </div>
       <div class="modal-footer">
-        <button class="btn-ghost" onclick="closeModal('customizeModal')">취소</button>
-        <button class="btn-primary" onclick="startMeeting()">이 템플릿으로 시작</button>
+        <button class="btn btn-ghost" onclick="closeModal('customizeModal')">취소</button>
+        <button class="btn btn-primary" onclick="startMeeting()">이 템플릿으로 시작</button>
       </div>
     </div>
   </div>
@@ -224,8 +198,8 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button class="btn-ghost" onclick="closeModal('addSectionModal')">취소</button>
-        <button class="btn-primary" onclick="confirmAddSection()">추가</button>
+        <button class="btn btn-ghost" onclick="closeModal('addSectionModal')">취소</button>
+        <button class="btn btn-primary" onclick="confirmAddSection()">추가</button>
       </div>
     </div>
   </div>
@@ -293,6 +267,16 @@
       selectTemplate('general');
     }
 
+    // 뒤로가기 버튼
+    $('#back-btn')?.addEventListener('click', () => {
+      history.back();
+    });
+
+    // 건너뛰기 버튼
+    $('#skip-btn')?.addEventListener('click', () => {
+      skipTemplate();
+    });
+
     // 커스터마이징 모달 열기
     function customizeTemplate() {
       closeModal('previewModal');
@@ -307,7 +291,7 @@
         <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-ghost btn-sm" onclick="removeSection(${index})">
+          <button class="btn btn-ghost btn-sm" onclick="removeSection(${index})">
             <span style="color: var(--error);">✕</span>
           </button>
         </div>
