mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 11:26:25 +00:00
프로토타입 UI 개선 및 이미지 추가
- 대시보드 프로토타입 수정 - Todo 관리 프로토타입 수정 - 회의록 목록조회 프로토타입 수정 - 공통 CSS 스타일 업데이트 - 이미지 리소스 추가 (cicle.png, hi.png) - UI/UX 설계서 업데이트 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812
parent
ec1e87496b
commit
94399af741
@ -6,240 +6,64 @@
|
||||
<title>대시보드 - 회의록 서비스</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
<style>
|
||||
/* 레이아웃 */
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 사이드바 (데스크톱) */
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 모바일: 하단 네비게이션 표시 */
|
||||
.bottom-nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* 데스크톱 */
|
||||
@media (min-width: 768px) {
|
||||
body {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.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-xsmall);
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
||||
/* 하단 네비게이션 숨기기 */
|
||||
.bottom-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 메인 콘텐츠 왼쪽 여백 */
|
||||
.main-content {
|
||||
margin-left: 240px;
|
||||
padding-bottom: var(--space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* 헤더 - 개선안 A: 간결한 인사 + 실질적 정보 */
|
||||
.header {
|
||||
background: var(--white);
|
||||
border-bottom: 1px solid var(--gray-300);
|
||||
padding: var(--space-md) var(--space-md);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.header {
|
||||
padding: var(--space-lg) var(--space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
.header-greeting {
|
||||
font-size: var(--font-h3);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--gray-900);
|
||||
margin-bottom: var(--space-xs);
|
||||
/* 대시보드 헤더 커스터마이징 */
|
||||
.header-title {
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.header-info {
|
||||
font-size: var(--font-body);
|
||||
color: var(--gray-600);
|
||||
}
|
||||
|
||||
/* 메인 콘텐츠 */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: var(--space-md);
|
||||
padding-bottom: 80px;
|
||||
background: var(--gray-50);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.main-content {
|
||||
padding: var(--space-xl);
|
||||
.header-title {
|
||||
font-size: var(--font-h2);
|
||||
}
|
||||
|
||||
.header-title img {
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 통계 카드 - 개선안 A: 컴팩트 수평 배치 */
|
||||
.stats-compact {
|
||||
.header-subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.header-subtitle {
|
||||
font-size: var(--font-small);
|
||||
}
|
||||
}
|
||||
|
||||
/* 통계 카드 */
|
||||
.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-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
padding: var(--space-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.stats-compact-title {
|
||||
font-size: var(--font-small);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--gray-700);
|
||||
.stat-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: var(--space-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.stats-compact-items {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.stats-compact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
.stat-label {
|
||||
font-size: var(--font-small);
|
||||
color: var(--gray-600);
|
||||
color: var(--gray-500);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.stats-compact-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.stats-compact-value {
|
||||
.stat-value {
|
||||
font-size: var(--font-h2);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--gray-900);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.stats-compact {
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
|
||||
.stats-compact-items {
|
||||
justify-content: flex-start;
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.stats-compact-item {
|
||||
font-size: var(--font-body);
|
||||
}
|
||||
|
||||
.stats-compact-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 섹션 헤더 */
|
||||
@ -528,64 +352,53 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body class="layout-sidebar-header">
|
||||
<!-- 사이드바 (데스크톱) -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">M</div>
|
||||
<a href="02-대시보드.html" class="sidebar-logo">
|
||||
<img src="img/cicle.png" alt="로고" class="sidebar-logo-icon-img">
|
||||
<div class="sidebar-logo-text">회의록 서비스</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<a href="02-대시보드.html" class="sidebar-nav-item active">
|
||||
<span class="sidebar-nav-icon"><img src="img\home.png" width="32"></span>
|
||||
<span>대시보드</span>
|
||||
</a>
|
||||
<a href="12-회의록목록조회.html" class="sidebar-nav-item">
|
||||
<span class="sidebar-nav-icon"><img src="img\edit.png" width="32"></span>
|
||||
<span class="sidebar-nav-icon"><img src="img/edit.png" width="32"></span>
|
||||
<span>회의 목록</span>
|
||||
</a>
|
||||
<a href="09-Todo관리.html" class="sidebar-nav-item">
|
||||
<span class="sidebar-nav-icon"><img src="img\list.png" width="32"></span>
|
||||
<span class="sidebar-nav-icon"><img src="img/list.png" width="32"></span>
|
||||
<span>Todo 관리</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar avatar-green">김</div>
|
||||
<div class="sidebar-user-info">
|
||||
<div class="sidebar-user-name">김민준</div>
|
||||
<div class="sidebar-user-email">minjun.kim@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 헤더 -->
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<h1 class="header-title"><img src="img/hi.png" alt="" style="width: 18px; height: 18px; vertical-align: middle; margin-right: 6px;">안녕하세요, 김민준님!</h1>
|
||||
<p class="header-subtitle">오늘의 일정을 확인하세요</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 메인 콘텐츠 -->
|
||||
<main class="main-content">
|
||||
<!-- 헤더 - 개선안 A: 간결한 인사 + 실질적 정보 -->
|
||||
<header class="header">
|
||||
<h1 class="header-greeting">
|
||||
안녕하세요 👋
|
||||
</h1>
|
||||
<p class="header-info" id="header-meeting-info">오늘 <strong id="header-meeting-count">2</strong>건의 회의가 예정되어 있어요</p>
|
||||
</header>
|
||||
|
||||
<!-- 통계 - 개선안 A: 컴팩트 수평 배치 -->
|
||||
<section class="stats-compact">
|
||||
<div class="stats-compact-title">📊 오늘의 현황</div>
|
||||
<div class="stats-compact-items">
|
||||
<div class="stats-compact-item">
|
||||
<span class="stats-compact-icon">📅</span>
|
||||
<span>예정 <span class="stats-compact-value" id="stat-scheduled">2</span></span>
|
||||
</div>
|
||||
<div class="stats-compact-item">
|
||||
<span class="stats-compact-icon">✅</span>
|
||||
<span>진행 <span class="stats-compact-value" id="stat-todos">1</span></span>
|
||||
</div>
|
||||
<div class="stats-compact-item">
|
||||
<span class="stats-compact-icon">📈</span>
|
||||
<span>완료 <span class="stats-compact-value" id="stat-completion">0%</span></span>
|
||||
</div>
|
||||
<!-- 통계 -->
|
||||
<section class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">📅</div>
|
||||
<div class="stat-label">예정된 회의</div>
|
||||
<div class="stat-value" id="stat-scheduled">3</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">✅</div>
|
||||
<div class="stat-label">진행 중 Todo</div>
|
||||
<div class="stat-value" id="stat-todos">1</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">📈</div>
|
||||
<div class="stat-label">Todo 완료율</div>
|
||||
<div class="stat-value" id="stat-completion">33%</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -621,6 +434,7 @@
|
||||
<!-- 동적 생성 -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 하단 네비게이션 (모바일) -->
|
||||
@ -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 = `오늘 <strong>${scheduled}</strong>건의 회의가 예정되어 있어요`;
|
||||
}
|
||||
|
||||
// 통계 카드 업데이트
|
||||
$('#stat-scheduled').textContent = scheduled;
|
||||
$('#stat-todos').textContent = todos;
|
||||
$('#stat-completion').textContent = completion + '%';
|
||||
|
||||
@ -309,38 +309,33 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="has-sidebar">
|
||||
<body class="layout-sidebar-header has-sidebar">
|
||||
<!-- 사이드바 (데스크톱) -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">M</div>
|
||||
<a href="02-대시보드.html" class="sidebar-logo">
|
||||
<img src="img/cicle.png" alt="로고" class="sidebar-logo-icon-img">
|
||||
<div class="sidebar-logo-text">회의록 서비스</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<a href="02-대시보드.html" class="sidebar-nav-item">
|
||||
<span class="sidebar-nav-icon"><img src="img\home.png" width="32"></span>
|
||||
<span>대시보드</span>
|
||||
</a>
|
||||
<a href="12-회의록목록조회.html" class="sidebar-nav-item">
|
||||
<span class="sidebar-nav-icon"><img src="img\edit.png" width="32"></span>
|
||||
<span class="sidebar-nav-icon"><img src="img/edit.png" width="32"></span>
|
||||
<span>회의 목록</span>
|
||||
</a>
|
||||
<a href="09-Todo관리.html" class="sidebar-nav-item active">
|
||||
<span class="sidebar-nav-icon"><img src="img\list.png" width="32"></span>
|
||||
<span class="sidebar-nav-icon"><img src="img/list.png" width="32"></span>
|
||||
<span>Todo 관리</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar avatar-green">김</div>
|
||||
<div class="sidebar-user-info">
|
||||
<div class="sidebar-user-name">김민준</div>
|
||||
<div class="sidebar-user-email">minjun.kim@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 헤더 -->
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<h1 class="header-title">Todo 관리</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="page">
|
||||
<div class="container main-content">
|
||||
<!-- 페이지 헤더 -->
|
||||
|
||||
@ -6,80 +6,9 @@
|
||||
<title>회의록 목록조회 - 회의록 서비스</title>
|
||||
<link rel="stylesheet" href="common.css">
|
||||
<style>
|
||||
/* 헤더 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: var(--gray-700);
|
||||
cursor: pointer;
|
||||
padding: var(--space-sm);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: var(--font-h3);
|
||||
font-weight: var(--font-weight-bold);
|
||||
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;
|
||||
padding: var(--space-md);
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
/* 데스크톱: 메인 콘텐츠 패딩 조정 */
|
||||
@media (min-width: 768px) {
|
||||
.main-content {
|
||||
margin-left: 240px; /* 사이드바 너비만큼 왼쪽 여백 추가 */
|
||||
padding: var(--space-xl);
|
||||
padding-bottom: var(--space-xl);
|
||||
/* max-width 제거: 가용 공간을 모두 활용하여 여백 최소화 */
|
||||
}
|
||||
|
||||
.filter-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
/* 뒤로가기 버튼 숨김 */
|
||||
.header-left .icon-btn:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 필터 및 검색 영역 */
|
||||
@ -332,36 +261,24 @@
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body class="layout-sidebar-header">
|
||||
<!-- 사이드바 (데스크톱) -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">M</div>
|
||||
<a href="02-대시보드.html" class="sidebar-logo">
|
||||
<img src="img/cicle.png" alt="로고" class="sidebar-logo-icon-img">
|
||||
<div class="sidebar-logo-text">회의록 서비스</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<a href="02-대시보드.html" class="sidebar-nav-item">
|
||||
<span class="sidebar-nav-icon"><img src="img\home.png" width="32"></span>
|
||||
<span>대시보드</span>
|
||||
</a>
|
||||
<a href="12-회의록목록조회.html" class="sidebar-nav-item active">
|
||||
<span class="sidebar-nav-icon"><img src="img\edit.png" width="32"></span>
|
||||
<span class="sidebar-nav-icon"><img src="img/edit.png" width="32"></span>
|
||||
<span>회의 목록</span>
|
||||
</a>
|
||||
<a href="09-Todo관리.html" class="sidebar-nav-item">
|
||||
<span class="sidebar-nav-icon"><img src="img\list.png" width="32"></span>
|
||||
<span class="sidebar-nav-icon"><img src="img/list.png" width="32"></span>
|
||||
<span>Todo 관리</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar avatar-green">김</div>
|
||||
<div class="sidebar-user-info">
|
||||
<div class="sidebar-user-name">김민준</div>
|
||||
<div class="sidebar-user-email">minjun.kim@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 헤더 -->
|
||||
|
||||
@ -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만 있음 */
|
||||
}
|
||||
|
||||
BIN
design/uiux/prototype/img/cicle.png
Normal file
BIN
design/uiux/prototype/img/cicle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
design/uiux/prototype/img/hi.png
Normal file
BIN
design/uiux/prototype/img/hi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@ -76,7 +76,7 @@
|
||||
|
||||
## 프로토타입 화면 목록
|
||||
|
||||
| 번호 | 화면명 | 관련 유저스토리 | 비즈니스 중요도 | 메뉴바유무 | 이전화면 이동버튼 유무 | 비고 |
|
||||
| 번호 | 화면명 | 관련 유저스토리 | 비즈니스 중요도 | 사이드바 유무 | 이전화면 이동버튼 유무 | 비고 |
|
||||
|------|--------|----------------|-------------------|-----------|------------------------|-------|
|
||||
| 01 | 로그인 | UFR-USER-010 | 필수 | 사용자 인증 | X | X | |
|
||||
| 02 | 대시보드 | - | 필수 | 메인 랜딩 페이지 | O | X | |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user