mirror of
https://github.com/hwanny1128/HGZero.git
synced 2026-01-21 13:46:26 +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",
|
"mcp__sequential-thinking__sequentialthinking",
|
||||||
"Bash(awk '{print $1\"\"\"\": \"\"\"\"; system(\"\"\"\"sed -n \"\"\"\" $1\"\"\"\"p design/uiux/prototype/common.css\"\"\"\")}')",
|
"Bash(awk '{print $1\"\"\"\": \"\"\"\"; system(\"\"\"\"sed -n \"\"\"\" $1\"\"\"\"p design/uiux/prototype/common.css\"\"\"\")}')",
|
||||||
"Bash(git stash:*)",
|
"Bash(git stash:*)",
|
||||||
"Bash(tools/check-mermaid.sh:*)"
|
"Bash(tools/check-mermaid.sh:*)",
|
||||||
|
"Bash(git restore:*)"
|
||||||
],
|
],
|
||||||
"deny": [],
|
"deny": [],
|
||||||
"ask": []
|
"ask": []
|
||||||
|
|||||||
@ -6,39 +6,19 @@
|
|||||||
<title>템플릿 선택 - 회의록 서비스</title>
|
<title>템플릿 선택 - 회의록 서비스</title>
|
||||||
<link rel="stylesheet" href="common.css">
|
<link rel="stylesheet" href="common.css">
|
||||||
<style>
|
<style>
|
||||||
.page-header {
|
/* 메인 콘텐츠 */
|
||||||
|
.main-content {
|
||||||
|
margin-top: 64px;
|
||||||
padding: var(--space-md);
|
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;
|
padding-bottom: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 데스크톱: 메인 콘텐츠 조정 */
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.page-header {
|
.main-content {
|
||||||
padding: var(--space-lg) var(--space-xl);
|
padding: var(--space-xl);
|
||||||
}
|
padding-bottom: var(--space-xl);
|
||||||
|
max-width: 1200px;
|
||||||
.page-content {
|
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
@ -46,20 +26,17 @@
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="page">
|
<!-- 헤더 -->
|
||||||
<!-- Header -->
|
<header class="header">
|
||||||
<header class="page-header">
|
<div class="header-left">
|
||||||
<div class="header-inner">
|
<button class="back-btn" id="back-btn">←</button>
|
||||||
<button class="btn-ghost" onclick="history.back()">
|
<h1 class="header-title">템플릿 선택</h1>
|
||||||
<span style="font-size: 24px;">←</span>
|
</div>
|
||||||
</button>
|
<button class="btn btn-primary btn-sm" id="skip-btn">건너뛰기</button>
|
||||||
<h1 class="header-title">템플릿 선택</h1>
|
</header>
|
||||||
<button class="btn-ghost" onclick="skipTemplate()">건너뛰기</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- 메인 콘텐츠 -->
|
||||||
<div class="container">
|
<main class="main-content">
|
||||||
<div style="margin-bottom: var(--space-lg);">
|
<div style="margin-bottom: var(--space-lg);">
|
||||||
<p class="text-muted">회의 유형에 맞는 템플릿을 선택하세요</p>
|
<p class="text-muted">회의 유형에 맞는 템플릿을 선택하세요</p>
|
||||||
</div>
|
</div>
|
||||||
@ -86,8 +63,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-footer">
|
<div class="card-footer">
|
||||||
<button class="btn-secondary btn-sm" onclick="previewTemplate(event, 'general')">미리보기</button>
|
<button class="btn btn-secondary btn-sm" onclick="previewTemplate(event, 'general')">미리보기</button>
|
||||||
<button class="btn-primary btn-sm" onclick="selectTemplate('general')">선택</button>
|
<button class="btn btn-primary btn-sm" onclick="selectTemplate('general')">선택</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -110,8 +87,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-footer">
|
<div class="card-footer">
|
||||||
<button class="btn-secondary btn-sm" onclick="previewTemplate(event, 'scrum')">미리보기</button>
|
<button class="btn btn-secondary btn-sm" onclick="previewTemplate(event, 'scrum')">미리보기</button>
|
||||||
<button class="btn-primary btn-sm" onclick="selectTemplate('scrum')">선택</button>
|
<button class="btn btn-primary btn-sm" onclick="selectTemplate('scrum')">선택</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -135,8 +112,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-footer">
|
<div class="card-footer">
|
||||||
<button class="btn-secondary btn-sm" onclick="previewTemplate(event, 'kickoff')">미리보기</button>
|
<button class="btn btn-secondary btn-sm" onclick="previewTemplate(event, 'kickoff')">미리보기</button>
|
||||||
<button class="btn-primary btn-sm" onclick="selectTemplate('kickoff')">선택</button>
|
<button class="btn btn-primary btn-sm" onclick="selectTemplate('kickoff')">선택</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -160,15 +137,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-footer">
|
<div class="card-footer">
|
||||||
<button class="btn-secondary btn-sm" onclick="previewTemplate(event, 'weekly')">미리보기</button>
|
<button class="btn btn-secondary btn-sm" onclick="previewTemplate(event, 'weekly')">미리보기</button>
|
||||||
<button class="btn-primary btn-sm" onclick="selectTemplate('weekly')">선택</button>
|
<button class="btn btn-primary btn-sm" onclick="selectTemplate('weekly')">선택</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
|
|
||||||
<!-- Bottom Navigation -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Template Preview Modal -->
|
<!-- Template Preview Modal -->
|
||||||
<div id="previewModal" class="modal-overlay">
|
<div id="previewModal" class="modal-overlay">
|
||||||
@ -183,8 +157,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button class="btn-ghost" onclick="closeModal('previewModal')">닫기</button>
|
<button class="btn btn-ghost" onclick="closeModal('previewModal')">닫기</button>
|
||||||
<button class="btn-primary" onclick="customizeTemplate()">커스터마이징</button>
|
<button class="btn btn-primary" onclick="customizeTemplate()">커스터마이징</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -201,11 +175,11 @@
|
|||||||
<div id="sectionList" style="display: flex; flex-direction: column; gap: var(--space-sm);">
|
<div id="sectionList" style="display: flex; flex-direction: column; gap: var(--space-sm);">
|
||||||
<!-- 섹션 목록이 여기에 표시됨 -->
|
<!-- 섹션 목록이 여기에 표시됨 -->
|
||||||
</div>
|
</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>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button class="btn-ghost" onclick="closeModal('customizeModal')">취소</button>
|
<button class="btn btn-ghost" onclick="closeModal('customizeModal')">취소</button>
|
||||||
<button class="btn-primary" onclick="startMeeting()">이 템플릿으로 시작</button>
|
<button class="btn btn-primary" onclick="startMeeting()">이 템플릿으로 시작</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -224,8 +198,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button class="btn-ghost" onclick="closeModal('addSectionModal')">취소</button>
|
<button class="btn btn-ghost" onclick="closeModal('addSectionModal')">취소</button>
|
||||||
<button class="btn-primary" onclick="confirmAddSection()">추가</button>
|
<button class="btn btn-primary" onclick="confirmAddSection()">추가</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -293,6 +267,16 @@
|
|||||||
selectTemplate('general');
|
selectTemplate('general');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 뒤로가기 버튼
|
||||||
|
$('#back-btn')?.addEventListener('click', () => {
|
||||||
|
history.back();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 건너뛰기 버튼
|
||||||
|
$('#skip-btn')?.addEventListener('click', () => {
|
||||||
|
skipTemplate();
|
||||||
|
});
|
||||||
|
|
||||||
// 커스터마이징 모달 열기
|
// 커스터마이징 모달 열기
|
||||||
function customizeTemplate() {
|
function customizeTemplate() {
|
||||||
closeModal('previewModal');
|
closeModal('previewModal');
|
||||||
@ -307,7 +291,7 @@
|
|||||||
<div class="list-item" draggable="true" data-index="${index}">
|
<div class="list-item" draggable="true" data-index="${index}">
|
||||||
<span class="text-muted">☰</span>
|
<span class="text-muted">☰</span>
|
||||||
<span class="list-item-title" style="flex: 1;">${section}</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>
|
<span style="color: var(--error);">✕</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user