hyungi/TK-FB-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
bad5584988398e9c3c16a3afb5b6708ee6dad0bb
TK-FB-Project/web-ui/css/daily-work-report.css
Hyungi Ahn bad5584988 enhance: daily-work-report.html 모던 UI 대폭 개선 - 대시보드 일관성 및 사용성 향상 
🎨 모던 디자인 시스템 적용:
1. 대시보드와 일관된 디자인 언어:
   - design-system.css 활용한 통일된 색상, 타이포그래피
   - 동일한 카드, 버튼, 애니메이션 스타일
   - 일관된 간격, 그림자, 테두리 반경

2. 새로운 CSS 파일 분리:
   - daily-work-report.css 생성 (673줄)
   - 인라인 스타일 완전 제거 (926줄 → 0줄)
   - 모듈화된 스타일 관리

🚀 사용자 경험 대폭 개선:
1. 모던한 진행 단계 표시:
   - 상단 3단계 진행 바 추가
   - 실시간 단계 상태 표시 (활성/완료)
   - 시각적 진행도 피드백

2. 개선된 레이아웃 구조:
   - 헤더: 그라데이션 배경, 중앙 정렬
   - 메인: 최대 너비 1200px, 중앙 배치
   - 카드: 일관된 패딩, 그림자, 테두리

3. 향상된 작업자 선택 UI:
   - worker-btn → worker-card 클래스 변경
   - 카드형 디자인으로 시각적 개선
   - 호버 효과: 상단 컬러 바, 배경 변화
   - 선택 상태: 그라데이션 배경, 흰색 텍스트

✨ 인터랙션 개선:
1. 버튼 디자인 통일:
   - 일관된 패딩, 높이 (48px)
   - 호버 효과: translateY(-2px), 그림자 확대
   - 색상: primary, success, secondary 통일

2. 폼 요소 개선:
   - form-input 클래스로 통일된 스타일
   - 포커스 상태: 테두리 색상, 그림자 효과
   - 라벨: 명확한 계층 구조

3. 애니메이션 효과:
   - 단계 전환: opacity, transform 애니메이션
   - 카드 호버: translateY, 그림자 변화
   - 부드러운 전환: var(--transition-normal)

📱 반응형 디자인 최적화:
1. 모바일 (768px 이하):
   - 진행 단계: 세로 배치
   - 작업자 그리드: 1열로 변경
   - 패딩, 폰트 크기 조정

2. 태블릿 (1024px 이하):
   - 적절한 그리드 컬럼 수 조정
   - 터치 친화적 버튼 크기

🔧 기술적 개선:
1. JavaScript 업데이트:
   - updateProgressSteps() 함수 추가
   - 진행 단계 실시간 업데이트
   - CSS 클래스명 변경 반영

2. HTML 구조 개선:
   - 시맨틱 태그 활용 (header, main)
   - 접근성 향상 (label, aria 속성)
   - 깔끔한 마크업 구조

🎯 결과:
- 대시보드와 완벽한 디자인 일관성
- 직관적이고 사용하기 쉬운 인터페이스
- 모든 디바이스에서 최적화된 경험
- 프로페셔널한 시각적 품질

테스트: http://localhost:20000/pages/common/daily-work-report.html
2025-11-03 12:56:45 +09:00

673 lines
13 KiB
CSS
Raw Blame History

/* ========== 일일 작업보고서 전용 스타일 ========== */
/* 메인 레이아웃 */
.work-report-container {
min-height: 100vh;
background: var(--bg-secondary);
display: flex;
flex-direction: column;
}
.work-report-header {
background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
color: white;
padding: var(--space-8) var(--space-6);
text-align: center;
box-shadow: var(--shadow-lg);
}
.work-report-header h1 {
font-size: var(--text-4xl);
font-weight: var(--font-bold);
margin-bottom: var(--space-2);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.work-report-header .subtitle {
font-size: var(--text-lg);
opacity: 0.9;
font-weight: var(--font-medium);
}
.work-report-main {
flex: 1;
padding: var(--space-8) var(--space-6);
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
/* 뒤로가기 버튼 */
.back-button {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: var(--bg-primary);
color: var(--primary-600);
border: 2px solid var(--primary-200);
border-radius: var(--radius-lg);
text-decoration: none;
font-weight: var(--font-semibold);
transition: var(--transition-normal);
margin-bottom: var(--space-6);
box-shadow: var(--shadow-sm);
}
.back-button:hover {
background: var(--primary-50);
border-color: var(--primary-300);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* 진행 단계 표시 */
.progress-steps {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: var(--space-8);
padding: var(--space-6);
background: var(--bg-primary);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
}
.progress-step {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
position: relative;
flex: 1;
max-width: 200px;
}
.progress-step:not(:last-child)::after {
content: '';
position: absolute;
top: 20px;
right: -50%;
width: 100%;
height: 2px;
background: var(--border-light);
z-index: 1;
}
.progress-step.active:not(:last-child)::after,
.progress-step.completed:not(:last-child)::after {
background: var(--primary-500);
}
.step-circle {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--font-bold);
font-size: var(--text-sm);
background: var(--gray-200);
color: var(--gray-600);
transition: var(--transition-normal);
z-index: 2;
position: relative;
}
.progress-step.active .step-circle {
background: var(--primary-500);
color: white;
box-shadow: 0 0 0 4px var(--primary-100);
}
.progress-step.completed .step-circle {
background: var(--success-500);
color: white;
}
.step-label {
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--text-secondary);
text-align: center;
}
.progress-step.active .step-label {
color: var(--primary-600);
font-weight: var(--font-semibold);
}
.progress-step.completed .step-label {
color: var(--success-600);
}
/* 단계별 섹션 */
.step-section {
background: var(--bg-primary);
border-radius: var(--radius-xl);
padding: var(--space-8);
margin-bottom: var(--space-6);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-light);
opacity: 0.5;
transform: translateY(20px);
transition: all 0.4s ease;
}
.step-section.active {
opacity: 1;
transform: translateY(0);
border-color: var(--primary-200);
box-shadow: var(--shadow-lg);
}
.step-section.completed {
opacity: 0.8;
border-color: var(--success-200);
}
.step-header {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 2px solid var(--border-light);
}
.step-number {
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background: var(--primary-500);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--font-bold);
font-size: var(--text-lg);
box-shadow: var(--shadow-sm);
}
.step-number.completed {
background: var(--success-500);
}
.step-title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--text-primary);
}
/* 폼 요소들 */
.form-group {
margin-bottom: var(--space-6);
}
.form-label {
display: block;
margin-bottom: var(--space-3);
font-weight: var(--font-semibold);
color: var(--text-primary);
font-size: var(--text-base);
}
.form-input {
width: 100%;
padding: var(--space-4);
border: 2px solid var(--border-light);
border-radius: var(--radius-lg);
font-size: var(--text-base);
background: var(--bg-primary);
transition: var(--transition-normal);
box-shadow: var(--shadow-sm);
}
.form-input:focus {
outline: none;
border-color: var(--primary-500);
box-shadow: 0 0 0 3px var(--primary-100);
}
/* 작업자 선택 그리드 */
.worker-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.worker-card {
padding: var(--space-5);
border: 2px solid var(--border-light);
border-radius: var(--radius-xl);
background: var(--bg-primary);
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
font-weight: var(--font-semibold);
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
.worker-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--primary-500);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.worker-card:hover {
border-color: var(--primary-300);
background: var(--primary-50);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.worker-card:hover::before {
transform: scaleX(1);
}
.worker-card.selected {
border-color: var(--primary-500);
background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
color: white;
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
.worker-card.selected::before {
transform: scaleX(1);
background: rgba(255, 255, 255, 0.3);
}
/* 작업 항목 */
.work-entry {
background: var(--bg-tertiary);
border: 2px solid var(--border-light);
border-radius: var(--radius-xl);
padding: var(--space-6);
margin-bottom: var(--space-6);
position: relative;
transition: var(--transition-normal);
}
.work-entry:hover {
border-color: var(--primary-200);
box-shadow: var(--shadow-md);
}
.work-entry-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--border-light);
}
.work-entry-title {
font-size: var(--text-lg);
font-weight: var(--font-bold);
color: var(--text-primary);
}
.remove-work-btn {
width: 36px;
height: 36px;
border-radius: var(--radius-full);
background: var(--error-500);
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-normal);
font-size: var(--text-lg);
}
.remove-work-btn:hover {
background: var(--error-600);
transform: scale(1.1);
}
.work-entry-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.work-entry-full {
grid-column: span 2;
}
/* 시간 입력 */
.time-input-section {
background: var(--primary-50);
border-radius: var(--radius-lg);
padding: var(--space-4);
margin-top: var(--space-4);
}
.quick-time-buttons {
display: flex;
gap: var(--space-2);
margin-top: var(--space-3);
flex-wrap: wrap;
justify-content: center;
}
.quick-time-btn {
padding: var(--space-2) var(--space-4);
background: var(--bg-primary);
border: 2px solid var(--primary-200);
border-radius: var(--radius-lg);
cursor: pointer;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
transition: var(--transition-normal);
color: var(--primary-700);
}
.quick-time-btn:hover {
border-color: var(--primary-400);
background: var(--primary-100);
transform: translateY(-1px);
}
.quick-time-btn:active {
background: var(--primary-500);
color: white;
transform: translateY(0);
}
/* 총 작업시간 표시 */
.total-hours-display {
text-align: center;
font-size: var(--text-2xl);
font-weight: var(--font-bold);
padding: var(--space-6);
background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
color: white;
border-radius: var(--radius-xl);
margin-bottom: var(--space-6);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
/* 버튼 스타일 */
.btn {
padding: var(--space-4) var(--space-6);
border: none;
border-radius: var(--radius-lg);
font-size: var(--text-base);
font-weight: var(--font-semibold);
cursor: pointer;
transition: var(--transition-normal);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
text-decoration: none;
min-height: 48px;
box-shadow: var(--shadow-sm);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
.btn-primary {
background: var(--primary-500);
color: white;
}
.btn-primary:hover:not(:disabled) {
background: var(--primary-600);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-success {
background: var(--success-500);
color: white;
}
.btn-success:hover:not(:disabled) {
background: var(--success-600);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-secondary {
background: var(--gray-500);
color: white;
}
.btn-secondary:hover:not(:disabled) {
background: var(--gray-600);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-block {
width: 100%;
}
/* 메시지 */
.message {
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-lg);
margin-bottom: var(--space-6);
font-weight: var(--font-medium);
border: 1px solid;
}
.message.error {
background: var(--error-50);
color: var(--error-700);
border-color: var(--error-200);
}
.message.success {
background: var(--success-50);
color: var(--success-700);
border-color: var(--success-200);
}
.message.loading {
background: var(--primary-50);
color: var(--primary-700);
border-color: var(--primary-200);
}
.message.warning {
background: var(--warning-50);
color: var(--warning-700);
border-color: var(--warning-200);
}
/* 반응형 디자인 */
@media (max-width: 1024px) {
.work-report-main {
padding: var(--space-6) var(--space-4);
}
.progress-steps {
padding: var(--space-4);
}
.progress-step:not(:last-child)::after {
right: -40%;
}
}
@media (max-width: 768px) {
.work-report-header {
padding: var(--space-6) var(--space-4);
}
.work-report-header h1 {
font-size: var(--text-3xl);
}
.work-report-main {
padding: var(--space-4) var(--space-3);
}
.step-section {
padding: var(--space-6);
}
.worker-grid {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--space-3);
}
.worker-card {
min-height: 80px;
padding: var(--space-3);
font-size: var(--text-sm);
}
.work-entry-grid {
grid-template-columns: 1fr;
}
.work-entry-full {
grid-column: span 1;
}
.progress-steps {
flex-direction: column;
gap: var(--space-4);
}
.progress-step:not(:last-child)::after {
display: none;
}
.quick-time-buttons {
gap: var(--space-1);
}
.quick-time-btn {
padding: var(--space-1) var(--space-3);
font-size: var(--text-xs);
}
}
@media (max-width: 480px) {
.work-report-header h1 {
font-size: var(--text-2xl);
}
.step-section {
padding: var(--space-4);
}
.step-header {
flex-direction: column;
text-align: center;
gap: var(--space-2);
}
.step-number {
width: 40px;
height: 40px;
font-size: var(--text-base);
}
.step-title {
font-size: var(--text-xl);
}
.worker-grid {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.total-hours-display {
font-size: var(--text-xl);
padding: var(--space-4);
}
}
/* 가이드 그리드 */
.guide-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-4);
margin-top: var(--space-4);
}
.guide-item {
text-align: center;
padding: var(--space-5);
background: var(--bg-tertiary);
border-radius: var(--radius-xl);
border: 2px solid var(--border-light);
transition: var(--transition-normal);
}
.guide-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-300);
background: var(--primary-50);
}
.guide-icon {
font-size: var(--text-3xl);
margin-bottom: var(--space-3);
display: block;
}
.guide-item strong {
display: block;
font-size: var(--text-base);
font-weight: var(--font-bold);
margin-bottom: var(--space-2);
color: var(--text-primary);
}
@media (max-width: 768px) {
.guide-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-3);
}
.guide-item {
padding: var(--space-4);
}
.guide-icon {
font-size: var(--text-2xl);
}
}
@media (max-width: 480px) {
.guide-grid {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.guide-item {
padding: var(--space-3);
}
.guide-item strong {
font-size: var(--text-sm);
}
}
Reference in New Issue View Git Blame Copy Permalink