diff --git a/design/uiux/prototype/02-대시보드.html b/design/uiux/prototype/02-대시보드.html index 599b9ea..b51660b 100644 --- a/design/uiux/prototype/02-대시보드.html +++ b/design/uiux/prototype/02-대시보드.html @@ -6,240 +6,64 @@ 대시보드 - 회의록 서비스 - + + +
+
+

안녕하세요, 김민준님!

+

오늘의 일정을 확인하세요

+
+
+
- -
-

- 안녕하세요 👋 -

-

오늘 2건의 회의가 예정되어 있어요

-
- -
-
📊 오늘의 현황
-
-
- 📅 - 예정 2 -
-
- ✅ - 진행 1 -
-
- 📈 - 완료 0% -
+ +
+
+
📅
+
예정된 회의
+
3
+
+
+
✅
+
진행 중 Todo
+
1
+
+
+
📈
+
Todo 완료율
+
33%
@@ -621,6 +434,7 @@
+
@@ -809,7 +623,7 @@ } /** - * 통계 업데이트 - 개선안 A: 헤더 정보 포함 + * 통계 업데이트 */ function updateStats() { const scheduled = SAMPLE_MEETINGS.filter(m => m.status === 'scheduled' || m.status === 'ongoing').length; @@ -818,15 +632,6 @@ const completedTodos = SAMPLE_TODOS.filter(t => t.assignee.id === currentUser.id && t.status === 'completed').length; const completion = totalTodos > 0 ? Math.round((completedTodos / totalTodos) * 100) : 0; - // 헤더 정보 업데이트 - $('#header-meeting-count').textContent = scheduled; - if (scheduled === 0) { - $('#header-meeting-info').innerHTML = '예정된 회의가 없습니다'; - } else { - $('#header-meeting-info').innerHTML = `오늘 ${scheduled}건의 회의가 예정되어 있어요`; - } - - // 통계 카드 업데이트 $('#stat-scheduled').textContent = scheduled; $('#stat-todos').textContent = todos; $('#stat-completion').textContent = completion + '%'; diff --git a/design/uiux/prototype/09-Todo관리.html b/design/uiux/prototype/09-Todo관리.html index b460da4..a9d4226 100644 --- a/design/uiux/prototype/09-Todo관리.html +++ b/design/uiux/prototype/09-Todo관리.html @@ -309,38 +309,33 @@ } - + + +
+
+

Todo 관리

+
+
+
diff --git a/design/uiux/prototype/12-회의록목록조회.html b/design/uiux/prototype/12-회의록목록조회.html index 8520be5..6d25d20 100644 --- a/design/uiux/prototype/12-회의록목록조회.html +++ b/design/uiux/prototype/12-회의록목록조회.html @@ -6,80 +6,9 @@ 회의록 목록조회 - 회의록 서비스 - + diff --git a/design/uiux/prototype/common.css b/design/uiux/prototype/common.css index 3bdca5e..8e3f728 100644 --- a/design/uiux/prototype/common.css +++ b/design/uiux/prototype/common.css @@ -578,6 +578,15 @@ input[type="date"]::-webkit-calendar-picker-indicator { color: var(--primary); } +/* 비활성 네비게이션 아이콘 그레이톤 */ +.nav-item:not(.active) img { + filter: grayscale(100%) opacity(0.5); +} + +.nav-item.active img { + filter: none; +} + .nav-item:hover { color: var(--primary); } @@ -1009,6 +1018,13 @@ input[type="date"]::-webkit-calendar-picker-indicator { gap: var(--space-sm); padding: 0 var(--space-lg); margin-bottom: var(--space-xl); + text-decoration: none; + cursor: pointer; + transition: opacity var(--transition-fast); + } + + .sidebar-logo:hover { + opacity: 0.8; } .sidebar-logo-icon { @@ -1023,6 +1039,12 @@ input[type="date"]::-webkit-calendar-picker-indicator { color: white; } + .sidebar-logo-icon-img { + width: 40px; + height: 40px; + border-radius: var(--radius-md); + } + .sidebar-logo-text { font-size: var(--font-h3); font-weight: var(--font-weight-bold); @@ -1063,6 +1085,16 @@ input[type="date"]::-webkit-calendar-picker-indicator { text-align: center; } + /* 비활성 메뉴 아이콘 그레이톤 */ + .sidebar-nav-item:not(.active) .sidebar-nav-icon img { + filter: grayscale(100%) opacity(0.5); + } + + .sidebar-nav-item.active .sidebar-nav-icon img, + .sidebar-nav-item:hover .sidebar-nav-icon img { + filter: none; + } + .sidebar-user { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--gray-300); @@ -1544,3 +1576,122 @@ input[type="date"]::-webkit-calendar-picker-indicator { /* flex: 1 유지하여 가로 꽉 채움 */ } } + +/* ======================================== + LAYOUT PATTERNS + ======================================== */ + +/* Layout A: 사이드바 + 헤더 (대시보드, Todo관리, 회의록목록조회) */ +.layout-sidebar-header .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; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-md); + z-index: 99; +} + +.layout-sidebar-header .header-left { + display: flex; + align-items: center; + gap: var(--space-md); +} + +.layout-sidebar-header .header-title { + font-size: var(--font-h3); + font-weight: var(--font-weight-bold); + color: var(--gray-900); +} + +.layout-sidebar-header .main-content { + margin-top: 64px; + padding: var(--space-md); + padding-bottom: 80px; + background: var(--gray-50); +} + +/* 데스크톱: 사이드바 옆으로 헤더 및 콘텐츠 배치 */ +@media (min-width: 768px) { + .layout-sidebar-header .header { + left: 240px; /* 사이드바 너비만큼 오른쪽으로 이동 */ + padding: 0 var(--space-xl); + } + + .layout-sidebar-header .main-content { + margin-left: 240px; /* 사이드바 너비만큼 왼쪽 여백 추가 */ + padding: var(--space-xl); + padding-bottom: var(--space-xl); + } +} + +/* Layout B: 헤더만 (회의예약, 회의진행, 회의록상세 등) */ +.layout-header-only .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; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-md); + z-index: 99; +} + +.layout-header-only .header-left { + display: flex; + align-items: center; + gap: var(--space-md); +} + +.layout-header-only .icon-btn { + background: transparent; + border: none; + font-size: 24px; + color: var(--gray-700); + cursor: pointer; + padding: var(--space-sm); + transition: color var(--transition-fast); +} + +.layout-header-only .icon-btn:hover { + color: var(--primary); +} + +.layout-header-only .header-title { + font-size: var(--font-h3); + font-weight: var(--font-weight-bold); + color: var(--gray-900); +} + +.layout-header-only .main-content { + margin-top: 64px; + padding: var(--space-md); + padding-bottom: 80px; +} + +@media (min-width: 768px) { + .layout-header-only .header { + padding: 0 var(--space-xl); + } + + .layout-header-only .main-content { + padding: var(--space-xl); + padding-bottom: var(--space-xl); + } +} + +/* Layout C: 사이드바/헤더 없음 (로그인) */ +.layout-none { + /* 특별한 스타일 불필요, body만 있음 */ +} diff --git a/design/uiux/prototype/img/cicle.png b/design/uiux/prototype/img/cicle.png new file mode 100644 index 0000000..de7f45d Binary files /dev/null and b/design/uiux/prototype/img/cicle.png differ diff --git a/design/uiux/prototype/img/hi.png b/design/uiux/prototype/img/hi.png new file mode 100644 index 0000000..32aa9ad Binary files /dev/null and b/design/uiux/prototype/img/hi.png differ diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index ae5ebf3..8578644 100644 --- a/design/uiux/uiux.md +++ b/design/uiux/uiux.md @@ -76,7 +76,7 @@ ## 프로토타입 화면 목록 -| 번호 | 화면명 | 관련 유저스토리 | 비즈니스 중요도 | 메뉴바유무 | 이전화면 이동버튼 유무 | 비고 | +| 번호 | 화면명 | 관련 유저스토리 | 비즈니스 중요도 | 사이드바 유무 | 이전화면 이동버튼 유무 | 비고 | |------|--------|----------------|-------------------|-----------|------------------------|-------| | 01 | 로그인 | UFR-USER-010 | 필수 | 사용자 인증 | X | X | | | 02 | 대시보드 | - | 필수 | 메인 랜딩 페이지 | O | X | |