mirror of
https://github.com/hwanny1128/HGZero.git
synced 2026-06-13 07:09:09 +00:00
유저스토리-설계서-프로토타입 일관성 개선 및 Mobile 네비게이션 수정
- 요구사항설계검토-report.md 작성 및 개선사항 반영 - 화면번호를 프로토타입 파일명 기준으로 통일 (09, 10, 11, 12) - 유저스토리에 화면정보 추가 (UFR-MEET-046, UFR-MEET-047) - 카테고리 필터에서 "공유받은 회의" 제거 - Mobile 하단 네비게이션 3개 메뉴로 수정 (홈/회의록/Todo) - 프로필 메뉴 제거 (Desktop 사이드바로 통합) - UI/UX 설계서 버전 1.5 업데이트 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812
@@ -34,24 +34,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 통계 카드 */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* 통계 카드 - common.css의 공통 스타일 사용 */
|
||||
.stat-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: var(--space-sm);
|
||||
font-size: 24px;
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
@@ -98,7 +84,7 @@
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (min-width: 640px) {
|
||||
.meeting-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
@@ -110,6 +96,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.meeting-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.meeting-card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
|
||||
@@ -7,42 +7,16 @@
|
||||
<link rel="stylesheet" href="common.css">
|
||||
<style>
|
||||
/* 페이지 특화 스타일 */
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: var(--space-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: var(--font-h2);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
/* 통계 카드 */
|
||||
/* 통계 영역 - 모바일 최적화 */
|
||||
.stats-overview {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
/* 데스크톱: 통계를 4개 컬럼으로 */
|
||||
@media (min-width: 768px) {
|
||||
.stats-overview {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
/* 통계 카드 - 모바일에서 컴팩트하게 */
|
||||
.stat-box {
|
||||
background: var(--white);
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
text-align: center;
|
||||
min-height: 80px;
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
|
||||
.stat-box.highlight {
|
||||
@@ -51,32 +25,73 @@
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: var(--font-h1);
|
||||
font-size: var(--font-h2);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--primary);
|
||||
margin-bottom: var(--space-xs);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.stat-text {
|
||||
font-size: var(--font-small);
|
||||
font-size: var(--font-caption);
|
||||
color: var(--gray-700);
|
||||
}
|
||||
|
||||
/* 원형 진행 바 */
|
||||
/* 원형 진행 바 - 모바일에서 축소 */
|
||||
.circular-progress {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto var(--space-sm);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.circular-progress svg {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.circular-progress-text {
|
||||
font-size: var(--font-body);
|
||||
}
|
||||
|
||||
/* 데스크톱에서 통계 카드 크기 복원 */
|
||||
@media (min-width: 768px) {
|
||||
.stat-box {
|
||||
min-height: 100px;
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: var(--font-h1);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.stat-text {
|
||||
font-size: var(--font-small);
|
||||
}
|
||||
|
||||
.circular-progress {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.circular-progress svg {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.circular-progress-text {
|
||||
font-size: var(--font-h3);
|
||||
}
|
||||
}
|
||||
|
||||
.circular-progress svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.circular-progress circle {
|
||||
fill: none;
|
||||
stroke-width: 8;
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
.circular-progress .bg-circle {
|
||||
@@ -94,11 +109,17 @@
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: var(--font-h3);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* 데스크톱에서 stroke-width 복원 */
|
||||
@media (min-width: 768px) {
|
||||
.circular-progress circle {
|
||||
stroke-width: 8;
|
||||
}
|
||||
}
|
||||
|
||||
/* 필터 탭 */
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
@@ -336,13 +357,8 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="page">
|
||||
<div class="container main-content">
|
||||
<!-- 페이지 헤더 -->
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">내 Todo</h1>
|
||||
</div>
|
||||
|
||||
<!-- 메인 콘텐츠 -->
|
||||
<main class="main-content">
|
||||
<!-- 통계 개요 -->
|
||||
<div class="stats-overview">
|
||||
<div class="stat-box">
|
||||
@@ -351,7 +367,7 @@
|
||||
</div>
|
||||
<div class="stat-box highlight">
|
||||
<div class="circular-progress">
|
||||
<svg width="80" height="80">
|
||||
<svg viewBox="0 0 80 80">
|
||||
<circle class="bg-circle" cx="40" cy="40" r="36"></circle>
|
||||
<circle class="progress-circle" cx="40" cy="40" r="36"
|
||||
stroke-dasharray="226" stroke-dashoffset="226" id="progressCircle"></circle>
|
||||
@@ -388,10 +404,10 @@
|
||||
|
||||
<!-- Todo 리스트 -->
|
||||
<div id="todoListContainer"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 하단 네비게이션 -->
|
||||
<nav class="bottom-nav">
|
||||
<!-- 하단 네비게이션 -->
|
||||
<nav class="bottom-nav">
|
||||
<a href="02-대시보드.html" class="nav-item">
|
||||
<img src="img/home.png" alt="홈" style="width: 45px;">
|
||||
</a>
|
||||
@@ -402,7 +418,6 @@
|
||||
<img src="img/list.png" alt="Todo" style="width: 45px;">
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Todo 추가 모달 -->
|
||||
<div class="modal-overlay" id="addTodoModal">
|
||||
|
||||
@@ -22,13 +22,19 @@
|
||||
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
/* 데스크톱: 필터 그리드를 4개 컬럼으로 */
|
||||
@media (min-width: 768px) {
|
||||
/* 반응형: 필터 그리드 */
|
||||
@media (min-width: 640px) {
|
||||
.filter-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.filter-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
@@ -120,38 +126,37 @@
|
||||
box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.1);
|
||||
}
|
||||
|
||||
/* 통계 정보 */
|
||||
/* 통계 정보 - 컴팩트하게 */
|
||||
.stats-section {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: var(--space-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
/* common.css의 stats-grid 스타일 활용 */
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: var(--space-sm);
|
||||
background: var(--gray-100);
|
||||
padding: var(--space-md);
|
||||
background: var(--gray-50);
|
||||
border-radius: var(--radius-md);
|
||||
min-height: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: var(--font-h2);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--gray-900);
|
||||
color: var(--primary);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: var(--font-small);
|
||||
color: var(--gray-500);
|
||||
color: var(--gray-600);
|
||||
}
|
||||
|
||||
/* 회의록 목록 */
|
||||
@@ -161,12 +166,12 @@
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
/* 데스크톱: 그리드 레이아웃 */
|
||||
@media (min-width: 768px) {
|
||||
/* 반응형: 그리드 레이아웃 */
|
||||
@media (min-width: 640px) {
|
||||
.meeting-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--space-lg);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -176,6 +181,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.meeting-list {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.meeting-item {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
|
||||
@@ -1616,19 +1616,74 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
padding: var(--space-md);
|
||||
padding-bottom: 80px;
|
||||
background: var(--gray-50);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 데스크톱: 사이드바 옆으로 헤더 및 콘텐츠 배치 */
|
||||
@media (min-width: 768px) {
|
||||
.layout-sidebar-header .header {
|
||||
left: 240px; /* 사이드바 너비만큼 오른쪽으로 이동 */
|
||||
padding: 0 var(--space-xl);
|
||||
padding: 0 var(--space-lg);
|
||||
}
|
||||
|
||||
.layout-sidebar-header .main-content {
|
||||
margin-left: 240px; /* 사이드바 너비만큼 왼쪽 여백 추가 */
|
||||
padding: var(--space-xl);
|
||||
padding: var(--space-lg);
|
||||
padding-bottom: var(--space-xl);
|
||||
max-width: calc(100vw - 240px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 큰 화면에서 최대 폭 제한 없이 전체 영역 활용 */
|
||||
@media (min-width: 1440px) {
|
||||
.layout-sidebar-header .main-content {
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* 통계 카드 공통 스타일 - 컴팩트하게 */
|
||||
.stats-grid,
|
||||
.stats-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.stats-grid,
|
||||
.stats-overview {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.stats-grid,
|
||||
.stats-overview {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 통계 카드 높이 제한 */
|
||||
.stat-card,
|
||||
.stat-box {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
min-height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.stat-card,
|
||||
.stat-box {
|
||||
padding: var(--space-lg);
|
||||
min-height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user