mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-07 06:06:24 +00:00
회의록 공유 화면 웹 레이아웃 개선
- 웹 화면에서 컨텐츠 중앙 정렬 (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
parent
9f15f4f6e5
commit
ca5bbf32b2
@ -6,33 +6,70 @@
|
|||||||
<title>회의록 공유 - 회의록 서비스</title>
|
<title>회의록 공유 - 회의록 서비스</title>
|
||||||
<link rel="stylesheet" href="common.css">
|
<link rel="stylesheet" href="common.css">
|
||||||
<style>
|
<style>
|
||||||
/* 페이지 특화 스타일 */
|
/* Body 배경 흰색으로 변경 */
|
||||||
.page-header {
|
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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding-bottom: var(--space-md);
|
padding: 0 var(--space-md);
|
||||||
border-bottom: 1px solid var(--gray-300);
|
z-index: 100;
|
||||||
margin-bottom: var(--space-lg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-button {
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: var(--gray-700);
|
color: var(--gray-700);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: var(--space-sm);
|
padding: var(--space-sm);
|
||||||
|
transition: color var(--transition-fast);
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.icon-btn:hover {
|
||||||
flex: 1;
|
color: var(--primary);
|
||||||
text-align: center;
|
}
|
||||||
font-size: var(--font-h2);
|
|
||||||
|
.header-title {
|
||||||
|
font-size: var(--font-h3);
|
||||||
font-weight: var(--font-weight-bold);
|
font-weight: var(--font-weight-bold);
|
||||||
color: var(--gray-900);
|
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 {
|
.section-title {
|
||||||
font-size: var(--font-h3);
|
font-size: var(--font-h3);
|
||||||
@ -194,8 +231,8 @@
|
|||||||
color: var(--gray-700);
|
color: var(--gray-700);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 고정 하단 버튼 */
|
/* 하단 버튼 - 회의록 수정화면과 통일 */
|
||||||
.fixed-bottom-action {
|
.bottom-buttons {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -205,10 +242,12 @@
|
|||||||
border-top: 1px solid var(--gray-300);
|
border-top: 1px solid var(--gray-300);
|
||||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.fixed-bottom-action {
|
.bottom-buttons {
|
||||||
position: static;
|
position: static;
|
||||||
margin-top: var(--space-lg);
|
margin-top: var(--space-lg);
|
||||||
border-top: none;
|
border-top: none;
|
||||||
@ -219,15 +258,16 @@
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="page">
|
<!-- Header -->
|
||||||
<div class="container" style="padding-bottom: 100px;">
|
<header class="header">
|
||||||
<!-- 페이지 헤더 -->
|
<div class="header-left">
|
||||||
<div class="page-header">
|
<button class="icon-btn" onclick="history.back()">←</button>
|
||||||
<button class="back-button" onclick="history.back()">←</button>
|
<h1 class="header-title">회의록 공유</h1>
|
||||||
<h1 class="page-title">회의록 공유</h1>
|
|
||||||
<div style="width: 40px;"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="main-content">
|
||||||
<!-- 공유 대상 -->
|
<!-- 공유 대상 -->
|
||||||
<section class="mb-lg">
|
<section class="mb-lg">
|
||||||
<h3 class="section-title">공유 대상</h3>
|
<h3 class="section-title">공유 대상</h3>
|
||||||
@ -300,19 +340,19 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 공유 이력 -->
|
<!-- 공유 이력 -->
|
||||||
<section class="mb-lg">
|
<section>
|
||||||
<h3 class="section-title">공유 이력</h3>
|
<h3 class="section-title">공유 이력</h3>
|
||||||
<div class="history-list" id="shareHistory"></div>
|
<div class="history-list" id="shareHistory"></div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 고정 하단 버튼 -->
|
</main>
|
||||||
<div class="fixed-bottom-action">
|
|
||||||
<button class="btn btn-primary" style="width: 100%;" onclick="shareMinutes()">
|
<!-- 하단 버튼 -->
|
||||||
|
<div class="bottom-buttons">
|
||||||
|
<button class="btn btn-primary" style="flex: 1;" onclick="shareMinutes()">
|
||||||
공유하기
|
공유하기
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="common.js"></script>
|
<script src="common.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user