mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 13:46: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,99 +258,100 @@
|
|||||||
</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>
|
||||||
<div style="width: 40px;"></div>
|
</header>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="main-content">
|
||||||
|
<!-- 공유 대상 -->
|
||||||
|
<section class="mb-lg">
|
||||||
|
<h3 class="section-title">공유 대상</h3>
|
||||||
|
<div class="radio-group">
|
||||||
|
<div class="radio-option selected" id="shareAllOption" onclick="selectShareTarget('all')">
|
||||||
|
<input type="radio" name="shareTarget" id="shareAll" checked>
|
||||||
|
<label for="shareAll">참석자 전체</label>
|
||||||
|
</div>
|
||||||
|
<div class="radio-option" id="shareSelectedOption" onclick="selectShareTarget('selected')">
|
||||||
|
<input type="radio" name="shareTarget" id="shareSelected">
|
||||||
|
<label for="shareSelected">특정 참석자 선택</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 공유 대상 -->
|
<div class="participant-list" id="participantList">
|
||||||
<section class="mb-lg">
|
<div id="participantCheckList"></div>
|
||||||
<h3 class="section-title">공유 대상</h3>
|
</div>
|
||||||
<div class="radio-group">
|
</section>
|
||||||
<div class="radio-option selected" id="shareAllOption" onclick="selectShareTarget('all')">
|
|
||||||
<input type="radio" name="shareTarget" id="shareAll" checked>
|
|
||||||
<label for="shareAll">참석자 전체</label>
|
|
||||||
</div>
|
|
||||||
<div class="radio-option" id="shareSelectedOption" onclick="selectShareTarget('selected')">
|
|
||||||
<input type="radio" name="shareTarget" id="shareSelected">
|
|
||||||
<label for="shareSelected">특정 참석자 선택</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="participant-list" id="participantList">
|
<!-- 공유 권한 -->
|
||||||
<div id="participantCheckList"></div>
|
<section class="mb-lg">
|
||||||
</div>
|
<h3 class="section-title">공유 권한</h3>
|
||||||
</section>
|
<div class="form-group">
|
||||||
|
<select class="form-control" id="sharePermission">
|
||||||
|
<option value="readonly" selected>읽기 전용</option>
|
||||||
|
<option value="comment">댓글 가능</option>
|
||||||
|
<option value="edit">편집 가능</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- 공유 권한 -->
|
<!-- 공유 방식 -->
|
||||||
<section class="mb-lg">
|
<section class="mb-lg">
|
||||||
<h3 class="section-title">공유 권한</h3>
|
<h3 class="section-title">공유 방식</h3>
|
||||||
<div class="form-group">
|
<div class="checkbox-wrapper mb-md">
|
||||||
<select class="form-control" id="sharePermission">
|
<input type="checkbox" class="checkbox" id="emailShare" checked>
|
||||||
<option value="readonly" selected>읽기 전용</option>
|
<label for="emailShare">이메일 발송</label>
|
||||||
<option value="comment">댓글 가능</option>
|
</div>
|
||||||
<option value="edit">편집 가능</option>
|
<button class="btn btn-secondary" style="width: 100%;" onclick="copyShareLink()">
|
||||||
|
🔗 링크 복사
|
||||||
|
</button>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 링크 보안 설정 -->
|
||||||
|
<section class="mb-lg">
|
||||||
|
<h3 class="section-title">링크 보안 설정 (선택)</h3>
|
||||||
|
|
||||||
|
<div class="toggle-group">
|
||||||
|
<div class="toggle-item">
|
||||||
|
<span class="toggle-label">유효기간 설정</span>
|
||||||
|
<div class="toggle-switch" id="expiryToggle" onclick="toggleOption('expiry')"></div>
|
||||||
|
</div>
|
||||||
|
<div class="toggle-content" id="expiryContent">
|
||||||
|
<select class="form-control">
|
||||||
|
<option value="7">7일</option>
|
||||||
|
<option value="30" selected>30일</option>
|
||||||
|
<option value="90">90일</option>
|
||||||
|
<option value="0">무제한</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 공유 방식 -->
|
<div class="toggle-item">
|
||||||
<section class="mb-lg">
|
<span class="toggle-label">비밀번호 설정</span>
|
||||||
<h3 class="section-title">공유 방식</h3>
|
<div class="toggle-switch" id="passwordToggle" onclick="toggleOption('password')"></div>
|
||||||
<div class="checkbox-wrapper mb-md">
|
|
||||||
<input type="checkbox" class="checkbox" id="emailShare" checked>
|
|
||||||
<label for="emailShare">이메일 발송</label>
|
|
||||||
</div>
|
</div>
|
||||||
<button class="btn btn-secondary" style="width: 100%;" onclick="copyShareLink()">
|
<div class="toggle-content" id="passwordContent">
|
||||||
🔗 링크 복사
|
<input type="password" class="form-control" placeholder="비밀번호 입력">
|
||||||
</button>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 링크 보안 설정 -->
|
|
||||||
<section class="mb-lg">
|
|
||||||
<h3 class="section-title">링크 보안 설정 (선택)</h3>
|
|
||||||
|
|
||||||
<div class="toggle-group">
|
|
||||||
<div class="toggle-item">
|
|
||||||
<span class="toggle-label">유효기간 설정</span>
|
|
||||||
<div class="toggle-switch" id="expiryToggle" onclick="toggleOption('expiry')"></div>
|
|
||||||
</div>
|
|
||||||
<div class="toggle-content" id="expiryContent">
|
|
||||||
<select class="form-control">
|
|
||||||
<option value="7">7일</option>
|
|
||||||
<option value="30" selected>30일</option>
|
|
||||||
<option value="90">90일</option>
|
|
||||||
<option value="0">무제한</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="toggle-item">
|
|
||||||
<span class="toggle-label">비밀번호 설정</span>
|
|
||||||
<div class="toggle-switch" id="passwordToggle" onclick="toggleOption('password')"></div>
|
|
||||||
</div>
|
|
||||||
<div class="toggle-content" id="passwordContent">
|
|
||||||
<input type="password" class="form-control" placeholder="비밀번호 입력">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</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>
|
<button class="btn btn-primary" style="flex: 1;" onclick="shareMinutes()">
|
||||||
</div>
|
공유하기
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="common.js"></script>
|
<script src="common.js"></script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user