mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 13:46:24 +00:00
대시보드 프로토타입 플로팅 액션 메뉴 디자인 개선
- 모바일에서 플로팅 버튼 위치 개선 (하단 탭 위로 명확하게 표시) - 모바일: bottom 160px (하단 네비게이션 바 위에 배치) - 데스크톱: bottom 96px (적절한 위치 유지) - 플로팅 액션 메뉴 버튼 스타일 통일 - 배경색: Primary 색상 (#4DD5A7) - FAB와 동일 - 텍스트/아이콘: 흰색 - FAB와 동일 - Hover 효과: Primary-dark - FAB와 동일 - 그림자: shadow-fab - FAB와 동일 - 사용성 개선 - 터치 영역 확보: min-height 48px - Active 상태 피드백 추가 - 부드러운 애니메이션 유지 - FAB 버튼 z-index 조정 - common.css: z-index 1001로 상향 (하단 네비게이션 바 위에 표시) - 모바일: bottom 88px, 데스크톱: bottom 24px - Mobile First 디자인 철학 준수 - UI/UX 설계서와 완벽 매칭 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812
parent
93ff4ddaca
commit
3419194f24
@ -407,6 +407,93 @@
|
|||||||
section {
|
section {
|
||||||
margin-bottom: var(--space-xl);
|
margin-bottom: var(--space-xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 플로팅 액션 메뉴 */
|
||||||
|
.fab-menu {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 160px; /* 모바일: FAB 버튼(88px) + FAB 높이(56px) + 여백(16px) */
|
||||||
|
right: var(--space-lg);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-md);
|
||||||
|
z-index: 999;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
pointer-events: none;
|
||||||
|
transition: all var(--transition-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab-menu.active {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab-menu-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
background: var(--primary); /* FAB와 동일한 Primary 색상 */
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
padding: var(--space-sm) var(--space-lg);
|
||||||
|
box-shadow: var(--shadow-fab);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
white-space: nowrap;
|
||||||
|
min-height: 48px; /* 터치 영역 확보 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab-menu-item:hover {
|
||||||
|
background: var(--primary-dark); /* FAB hover와 동일 */
|
||||||
|
transform: translateX(-4px);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab-menu-item:active {
|
||||||
|
transform: translateX(-4px) scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab-menu-item-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab-menu-item-text {
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
font-size: var(--font-body);
|
||||||
|
color: var(--white); /* 흰색 텍스트 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FAB 회전 효과 */
|
||||||
|
.fab.active {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 오버레이 */
|
||||||
|
.fab-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
z-index: 998;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity var(--transition-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab-overlay.active {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 데스크톱에서 위치 조정 */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.fab-menu {
|
||||||
|
bottom: 96px; /* 데스크톱: FAB 버튼(24px) + FAB 높이(56px) + 여백(16px) */
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -529,8 +616,23 @@
|
|||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<!-- FAB 오버레이 -->
|
||||||
|
<div class="fab-overlay" id="fabOverlay"></div>
|
||||||
|
|
||||||
|
<!-- FAB 메뉴 -->
|
||||||
|
<div class="fab-menu" id="fabMenu">
|
||||||
|
<div class="fab-menu-item" id="quickStartBtn">
|
||||||
|
<div class="fab-menu-item-icon">🚀</div>
|
||||||
|
<div class="fab-menu-item-text">새 회의 시작</div>
|
||||||
|
</div>
|
||||||
|
<div class="fab-menu-item" id="scheduleMeetingBtn">
|
||||||
|
<div class="fab-menu-item-icon">📅</div>
|
||||||
|
<div class="fab-menu-item-text">회의 예약</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- FAB (Floating Action Button) -->
|
<!-- FAB (Floating Action Button) -->
|
||||||
<button class="fab" id="fabButton" title="새 회의 예약">+</button>
|
<button class="fab" id="fabButton" title="새 회의 만들기">+</button>
|
||||||
|
|
||||||
<script src="common.js"></script>
|
<script src="common.js"></script>
|
||||||
<script>
|
<script>
|
||||||
@ -746,10 +848,64 @@
|
|||||||
console.log('대시보드 초기화 완료');
|
console.log('대시보드 초기화 완료');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* FAB 메뉴 토글
|
||||||
|
*/
|
||||||
|
let fabMenuOpen = false;
|
||||||
|
|
||||||
|
function toggleFabMenu() {
|
||||||
|
fabMenuOpen = !fabMenuOpen;
|
||||||
|
const fabButton = $('#fabButton');
|
||||||
|
const fabMenu = $('#fabMenu');
|
||||||
|
const fabOverlay = $('#fabOverlay');
|
||||||
|
|
||||||
|
if (fabMenuOpen) {
|
||||||
|
fabButton.classList.add('active');
|
||||||
|
fabMenu.classList.add('active');
|
||||||
|
fabOverlay.classList.add('active');
|
||||||
|
} else {
|
||||||
|
fabButton.classList.remove('active');
|
||||||
|
fabMenu.classList.remove('active');
|
||||||
|
fabOverlay.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeFabMenu() {
|
||||||
|
if (fabMenuOpen) {
|
||||||
|
toggleFabMenu();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* FAB 버튼 클릭 이벤트
|
* FAB 버튼 클릭 이벤트
|
||||||
*/
|
*/
|
||||||
$('#fabButton').addEventListener('click', () => {
|
$('#fabButton').addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
toggleFabMenu();
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* FAB 오버레이 클릭 시 메뉴 닫기
|
||||||
|
*/
|
||||||
|
$('#fabOverlay').addEventListener('click', () => {
|
||||||
|
closeFabMenu();
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* "새 회의 시작" 버튼 클릭
|
||||||
|
*/
|
||||||
|
$('#quickStartBtn').addEventListener('click', () => {
|
||||||
|
closeFabMenu();
|
||||||
|
// 템플릿 선택 화면으로 이동 (빠른 시작)
|
||||||
|
navigateTo('04-템플릿선택.html');
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* "회의 예약" 버튼 클릭
|
||||||
|
*/
|
||||||
|
$('#scheduleMeetingBtn').addEventListener('click', () => {
|
||||||
|
closeFabMenu();
|
||||||
|
// 회의 예약 화면으로 이동
|
||||||
navigateTo('03-회의예약.html');
|
navigateTo('03-회의예약.html');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -280,7 +280,7 @@ a:hover {
|
|||||||
/* FAB */
|
/* FAB */
|
||||||
.fab {
|
.fab {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 24px;
|
bottom: 88px; /* 하단 네비게이션 바(64px) + 여백(24px) */
|
||||||
right: 24px;
|
right: 24px;
|
||||||
width: 56px;
|
width: 56px;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
@ -295,7 +295,14 @@ a:hover {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
transition: all var(--transition-normal);
|
transition: all var(--transition-normal);
|
||||||
z-index: 100;
|
z-index: 1001; /* 하단 네비게이션 바(1000) 위에 표시 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 데스크톱에서는 원래 위치로 */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.fab {
|
||||||
|
bottom: 24px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fab:hover {
|
.fab:hover {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user