mirror of
https://github.com/hwanny1128/HGZero.git
synced 2026-01-21 11:26:23 +00:00
04-템플릿선택 화면 버튼 및 헤더 스타일 통일
- 모든 버튼에 '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>
This commit is contained in:
yabo0812
parent
954a86e5da
commit
33745c543e
@ -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": []
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user