shared-dg05-coffeeQuokka/hgzero
1
0
Fork 0
mirror of https://github.com/hwanny1128/HGZero.git synced 2025-12-06 13:46:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

회의록 공유 화면 웹 레이아웃 개선

Browse Source 
- 웹 화면에서 컨텐츠 중앙 정렬 (max-width: 800px)
- 공유 이력 섹션 하단 불필요한 여백 제거
- 다른 화면들과 일관된 반응형 레이아웃 적용

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812 2025-10-22 13:13:59 +09:00
parent 9f15f4f6e5
commit ca5bbf32b2
1 changed files with 135 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
design/uiux/prototype/08-회의록공유.html
View File

@ -6,33 +6,70 @@
<title>회의록 공유 - 회의록 서비스</title>
<link rel="stylesheet" href="common.css">
<style>
/* 페이지 특화 스타일 */
.page-header {
/* Body 배경 흰색으로 변경 */
body {
background: var(--white);
}
/* 헤더 - 회의록 수정화면과 통일 */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
background: var(--white);
border-bottom: 1px solid var(--gray-300);
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--gray-300);
margin-bottom: var(--space-lg);
padding: 0 var(--space-md);
z-index: 100;
}
.back-button {
.header-left {
display: flex;
align-items: center;
gap: var(--space-md);
}
.icon-btn {
background: transparent;
border: none;
font-size: 24px;
color: var(--gray-700);
cursor: pointer;
padding: var(--space-sm);
transition: color var(--transition-fast);
}
.page-title {
flex: 1;
text-align: center;
font-size: var(--font-h2);
.icon-btn:hover {
color: var(--primary);
}
.header-title {
font-size: var(--font-h3);
font-weight: var(--font-weight-bold);
color: var(--gray-900);
}
/* 메인 콘텐츠 */
.main-content {
margin-top: 64px;
padding: var(--space-md);
padding-bottom: 100px;
}
@media (min-width: 768px) {
.main-content {
max-width: 800px;
margin-left: auto;
margin-right: auto;
padding-bottom: var(--space-lg);
}
}
/* 섹션 타이틀 */
.section-title {
font-size: var(--font-h3);
@ -194,8 +231,8 @@
color: var(--gray-700);
}
/* 고정 하단 버튼 */
.fixed-bottom-action {
/* 하단 버튼 - 회의록 수정화면과 통일 */
.bottom-buttons {
position: fixed;
bottom: 0;
left: 0;
@ -205,10 +242,12 @@
border-top: 1px solid var(--gray-300);
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
z-index: 100;
display: flex;
gap: var(--space-md);
}
@media (min-width: 768px) {
.fixed-bottom-action {
.bottom-buttons {
position: static;
margin-top: var(--space-lg);
border-top: none;
@ -219,15 +258,16 @@
</style>
</head>
<body>
<div class="page">
<div class="container" style="padding-bottom: 100px;">
<!-- 페이지 헤더 -->
<div class="page-header">
<button class="back-button" onclick="history.back()">←</button>
<h1 class="page-title">회의록 공유</h1>
<div style="width: 40px;"></div>
<!-- Header -->
<header class="header">
<div class="header-left">
<button class="icon-btn" onclick="history.back()">←</button>
<h1 class="header-title">회의록 공유</h1>
</div>
</header>
<!-- Main Content -->
<main class="main-content">
<!-- 공유 대상 -->
<section class="mb-lg">
<h3 class="section-title">공유 대상</h3>
@ -300,19 +340,19 @@
</section>
<!-- 공유 이력 -->
<section class="mb-lg">
<section>
<h3 class="section-title">공유 이력</h3>
<div class="history-list" id="shareHistory"></div>
</section>
</div>
<!-- 고정 하단 버튼 -->
<div class="fixed-bottom-action">
<button class="btn btn-primary" style="width: 100%;" onclick="shareMinutes()">
</main>
<!-- 하단 버튼 -->
<div class="bottom-buttons">
<button class="btn btn-primary" style="flex: 1;" onclick="shareMinutes()">
공유하기
</button>
</div>
</div>
<script src="common.js"></script>
<script>