내 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; + } +}