shared-dg05-coffeeQuokka/hgzero
1
0
Fork 0
mirror of https://github.com/hwanny1128/HGZero.git synced 2026-06-13 07:09:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Todo 관리 화면 UI/UX 개선 (통계 블록 및 편집 모달)

Browse Source 
- 통계 블록 디자인 개선
  - 그라데이션 제거 → 모던한 단색 배경 + 좌측 4px 액센트 라인
  - 상태별 연한 단색 배경 (블루/오렌지/레드)
  - 호버 효과 추가 (translateY -2px)
  - 미묘한 그림자로 깊이감 표현
  - 모바일에서도 3개 블록 한 줄 유지 (grid 3열 고정)

- Todo 편집 모달 전체화면 모드로 변경
  - 모바일: 전체화면 (100vh), 헤더/바디/푸터 flexbox 구조
  - 바디 영역만 스크롤 가능
  - 데스크톱: 중앙 모달 (max-width: 600px)
  - 버튼 크기 확대 및 가로 균등 배치

- 설계서 업데이트 (v1.4.8)
  - 변경 이력에 개선 내용 추가
  - 09-Todo관리 인터랙션 섹션 상세화

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812
2025-10-23 17:42:41 +09:00
parent 5eeb251551
commit 647e0a4fa3
2 changed files with 187 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/uiux/prototype/09-Todo관리.html
+127 -33
View File
@@ -83,8 +83,11 @@
/* 페이지 특화 스타일 */
/* 통계 영역 - 모바일 최적화 */
/* 통계 영역 - 모바일에서도 한 줄 유지 */
.stats-overview {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
@@ -92,27 +95,35 @@
.stat-box {
min-height: 80px;
padding: var(--space-sm);
background: var(--gray-100); /* 플랫한 배경 */
border: 1px solid var(--gray-200); /* 얇은 경계선 */
border-radius: var(--radius-md); /* 부드러운 모서리 */
box-shadow: none; /* 그림자 제거 */
transition: none; /* 호버 효과 제거 */
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-md);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* 상태별 컬러 코딩 */
.stat-box:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
/* 상태별 컬러 코딩 - 단색 배경 + 좌측 액센트 라인 */
.stat-box.stat-incomplete {
background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%); /* 차분한 블루 그라데이션 */
border-color: #90CAF9;
background: #F8FBFF;
border-left: 4px solid #2196F3;
border-color: #E3F2FD;
}
.stat-box.stat-urgent {
background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%); /* 주의 오렌지 그라데이션 */
border-color: #FFB74D;
background: #FFFBF5;
border-left: 4px solid #FF9800;
border-color: #FFE0B2;
}
.stat-box.stat-overdue {
background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%); /* 긴급 레드 그라데이션 */
border-color: #EF5350;
background: #FFF8F8;
border-left: 4px solid #F44336;
border-color: #FFCDD2;
}
.stat-number {
@@ -289,6 +300,7 @@
display: flex;
gap: var(--space-md);
align-items: flex-start;
position: relative;
}
.todo-checkbox-wrapper {
@@ -363,9 +375,11 @@
display: none;
}
/* 액션 버튼 영역 */
/* 액션 버튼 영역 - 우측 상단에 배치 */
.todo-actions {
margin-top: var(--space-xs);
position: absolute;
top: var(--space-md);
right: var(--space-md);
}
/* 아이콘 버튼 */
@@ -379,22 +393,19 @@
background: none;
border: none;
border-radius: var(--radius-md);
color: var(--gray-600);
font-size: 20px;
cursor: pointer;
transition: all var(--transition-fast);
}
.icon-btn:hover {
background: var(--gray-100);
color: var(--primary);
transform: scale(1.1);
}
.icon-btn:active {
background: var(--gray-200);
}
.icon-btn .material-icons {
font-size: 20px;
transform: scale(1);
}
/* 빈 상태 */
@@ -420,11 +431,6 @@
margin-bottom: var(--space-lg);
}
@media (min-width: 768px) {
.stats-overview {
grid-template-columns: repeat(4, 1fr);
}
}
/* 날짜 입력 필드 래퍼 - 달력 아이콘 보호 */
.date-input-wrapper {
@@ -466,6 +472,96 @@
box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.15),
0 4px 0 0 var(--primary);
}
/* Todo 편집 모달 - 모바일 전체화면 */
#editTodoModal .modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
max-width: none;
max-height: none;
margin: 0;
border-radius: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
#editTodoModal .modal-header {
flex-shrink: 0;
padding: var(--space-lg) var(--space-md);
border-bottom: 1px solid var(--gray-200);
display: flex;
align-items: center;
justify-content: space-between;
}
#editTodoModal .modal-title {
font-size: var(--font-h3);
font-weight: var(--font-weight-bold);
margin: 0;
}
#editTodoModal .modal-close {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
background: none;
border: none;
cursor: pointer;
color: var(--gray-600);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
#editTodoModal .modal-close:hover {
background: var(--gray-100);
color: var(--gray-900);
}
#editTodoModal .modal-body {
flex: 1;
overflow-y: auto;
padding: var(--space-lg) var(--space-md);
-webkit-overflow-scrolling: touch;
}
#editTodoModal .modal-footer {
flex-shrink: 0;
padding: var(--space-md);
border-top: 1px solid var(--gray-200);
display: flex;
gap: var(--space-sm);
background: var(--white);
}
#editTodoModal .modal-footer .btn {
flex: 1;
}
/* 데스크톱에서는 중앙 모달로 복원 */
@media (min-width: 768px) {
#editTodoModal .modal {
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto;
width: 90%;
max-width: 600px;
height: auto;
max-height: 90vh;
margin: 0 auto;
border-radius: var(--radius-lg);
}
}
</style>
</head>
<body class="layout-sidebar-header has-sidebar">
@@ -771,13 +867,11 @@
</a>
<span>${formatDate(todo.dueDate)}</span>
</div>
${!isCompleted ? `
<div class="todo-actions">
<button class="icon-btn" onclick="editTodo('${todo.id}')" title="편집">
<span class="material-icons">edit</span>
</button>
</div>
` : ''}
${!isCompleted ? `
<div class="todo-actions">
<button class="icon-btn" onclick="editTodo('${todo.id}')" title="편집">✏️</button>
</div>
` : ''}
</div>
</div>
`);