내 Todo
diff --git a/design/uiux/prototype/10-회의록상세조회.html b/design/uiux/prototype/10-회의록상세조회.html index a9c4d2d..171a0f6 100644 --- a/design/uiux/prototype/10-회의록상세조회.html +++ b/design/uiux/prototype/10-회의록상세조회.html @@ -49,6 +49,18 @@ color: var(--gray-900); } + /* 데스크톱: 헤더 위치 조정 */ + @media (min-width: 768px) { + .header { + left: 240px; + padding: 0 var(--space-xl); + } + + .header-left .icon-btn:first-child { + display: none; + } + } + /* 탭 네비게이션 */ .tab-nav { position: fixed; @@ -60,6 +72,13 @@ z-index: 99; } + /* 데스크톱: 탭 네비게이션 위치 조정 */ + @media (min-width: 768px) { + .tab-nav { + left: 240px; + } + } + .tabs { display: flex; margin-bottom: 0; @@ -78,6 +97,16 @@ padding-bottom: 120px; } + /* 데스크톱: 메인 콘텐츠 조정 */ + @media (min-width: 768px) { + .main-content { + margin-left: 240px; + padding: var(--space-xl); + padding-bottom: var(--space-xl); + max-width: 1200px; + } + } + /* 기본 정보 카드 */ .info-card { background: var(--white); @@ -549,6 +578,37 @@ + + +
diff --git a/design/uiux/prototype/12-회의록목록조회.html b/design/uiux/prototype/12-회의록목록조회.html
index c227027..0678836 100644
--- a/design/uiux/prototype/12-회의록목록조회.html
+++ b/design/uiux/prototype/12-회의록목록조회.html
@@ -20,7 +20,7 @@
align-items: center;
justify-content: space-between;
padding: 0 var(--space-md);
- z-index: 100;
+ z-index: 99;
}
.header-left {
@@ -49,6 +49,18 @@
color: var(--gray-900);
}
+ /* 데스크톱: 헤더 위치 조정 및 뒤로가기 버튼 숨기기 */
+ @media (min-width: 768px) {
+ .header {
+ left: 240px; /* 사이드바 너비만큼 오른쪽으로 이동 */
+ padding: 0 var(--space-xl);
+ }
+
+ .header-left .icon-btn:first-child {
+ display: none; /* 뒤로가기 버튼 숨김 */
+ }
+ }
+
/* 메인 콘텐츠 */
.main-content {
margin-top: 64px;
@@ -56,6 +68,14 @@
padding-bottom: 80px;
}
+ /* 데스크톱: 메인 콘텐츠 패딩 조정 */
+ @media (min-width: 768px) {
+ .main-content {
+ padding: var(--space-xl);
+ padding-bottom: var(--space-xl);
+ }
+ }
+
/* 필터 및 검색 영역 */
.filter-section {
background: var(--white);
@@ -72,6 +92,13 @@
margin-bottom: var(--space-md);
}
+ /* 데스크톱: 필터 그리드를 4개 컬럼으로 */
+ @media (min-width: 768px) {
+ .filter-grid {
+ grid-template-columns: repeat(4, 1fr);
+ }
+ }
+
.filter-group {
display: flex;
flex-direction: column;
@@ -199,6 +226,21 @@
gap: var(--space-md);
}
+ /* 데스크톱: 그리드 레이아웃 */
+ @media (min-width: 768px) {
+ .meeting-list {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: var(--space-lg);
+ }
+ }
+
+ @media (min-width: 1024px) {
+ .meeting-list {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
+
.meeting-item {
background: var(--white);
border-radius: var(--radius-lg);
@@ -339,6 +381,37 @@
+
+
+
diff --git a/design/uiux/prototype/common.css b/design/uiux/prototype/common.css
index 26d628b..70c85ad 100644
--- a/design/uiux/prototype/common.css
+++ b/design/uiux/prototype/common.css
@@ -813,3 +813,121 @@ textarea.form-control {
color: var(--gray-700);
margin-bottom: var(--space-sm);
}
+
+/* ========================================
+ 18. Desktop Sidebar (공통)
+ ======================================== */
+/* 사이드바 기본 숨김 (모바일) */
+.sidebar {
+ display: none;
+}
+
+/* 데스크톱에서 사이드바 표시 */
+@media (min-width: 768px) {
+ .sidebar {
+ display: flex;
+ flex-direction: column;
+ position: fixed;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 240px;
+ background: var(--white);
+ border-right: 1px solid var(--gray-300);
+ padding: var(--space-lg) 0;
+ z-index: 100;
+ }
+
+ .sidebar-logo {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ padding: 0 var(--space-lg);
+ margin-bottom: var(--space-xl);
+ }
+
+ .sidebar-logo-icon {
+ width: 40px;
+ height: 40px;
+ background: var(--primary);
+ border-radius: var(--radius-md);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 20px;
+ color: white;
+ }
+
+ .sidebar-logo-text {
+ font-size: var(--font-h3);
+ font-weight: var(--font-weight-bold);
+ color: var(--gray-900);
+ }
+
+ .sidebar-nav {
+ flex: 1;
+ padding: 0 var(--space-md);
+ }
+
+ .sidebar-nav-item {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ padding: var(--space-md) var(--space-lg);
+ margin-bottom: var(--space-xs);
+ border-radius: var(--radius-md);
+ text-decoration: none;
+ color: var(--gray-700);
+ font-weight: var(--font-weight-medium);
+ transition: all var(--transition-fast);
+ }
+
+ .sidebar-nav-item:hover {
+ background: var(--gray-100);
+ color: var(--primary);
+ }
+
+ .sidebar-nav-item.active {
+ background: var(--primary-light);
+ color: var(--primary);
+ }
+
+ .sidebar-nav-icon {
+ font-size: 20px;
+ width: 24px;
+ text-align: center;
+ }
+
+ .sidebar-user {
+ padding: var(--space-md) var(--space-lg);
+ border-top: 1px solid var(--gray-300);
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ }
+
+ .sidebar-user-info {
+ flex: 1;
+ }
+
+ .sidebar-user-name {
+ font-weight: var(--font-weight-medium);
+ color: var(--gray-900);
+ font-size: var(--font-small);
+ }
+
+ .sidebar-user-email {
+ font-size: var(--font-caption);
+ color: var(--gray-500);
+ }
+
+ /* 메인 콘텐츠 왼쪽 여백 */
+ .main-content {
+ margin-left: 240px;
+ }
+
+ /* 하단 네비게이션 숨기기 */
+ .bottom-nav {
+ display: none;
+ }
+}