From 3419194f24a496e3098e762837d42f9c682ca0c6 Mon Sep 17 00:00:00 2001 From: yabo0812 Date: Wed, 22 Oct 2025 10:01:59 +0900 Subject: [PATCH] =?UTF-8?q?=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?= =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=86=A0=ED=83=80=EC=9E=85=20=ED=94=8C?= =?UTF-8?q?=EB=A1=9C=ED=8C=85=20=EC=95=A1=EC=85=98=20=EB=A9=94=EB=89=B4=20?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 모바일에서 플로팅 버튼 위치 개선 (하단 탭 위로 명확하게 표시) - 모바일: 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 --- design/uiux/prototype/02-대시보드.html | 160 ++++++++++++++++++++++++- design/uiux/prototype/common.css | 11 +- 2 files changed, 167 insertions(+), 4 deletions(-) diff --git a/design/uiux/prototype/02-대시보드.html b/design/uiux/prototype/02-대시보드.html index cec44f6..d461fb0 100644 --- a/design/uiux/prototype/02-대시보드.html +++ b/design/uiux/prototype/02-대시보드.html @@ -407,6 +407,93 @@ section { 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) */ + } + } @@ -529,8 +616,23 @@ + +
+ + +
+
+
🚀
+
새 회의 시작
+
+
+
📅
+
회의 예약
+
+
+ - +