diff --git a/web-ui/css/daily-work-report.css b/web-ui/css/daily-work-report.css
index 71be400..3ba8f76 100644
--- a/web-ui/css/daily-work-report.css
+++ b/web-ui/css/daily-work-report.css
@@ -1,756 +1,673 @@
-/* daily-work-report.css - 덮어쓰기 방지 완전 스타일 */
+/* ========== 일일 작업보고서 전용 스타일 ========== */
-/* 기본 레이아웃 */
-.daily-work-report-container {
- max-width: 1200px;
- margin: 0 auto;
- padding: 20px;
- font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+/* 메인 레이아웃 */
+.work-report-container {
+ min-height: 100vh;
+ background: var(--bg-secondary);
+ display: flex;
+ flex-direction: column;
}
-/* 단계 표시 */
-.steps-container {
+.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;
- margin-bottom: 30px;
+ 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;
}
-.step {
+.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;
- margin: 0 20px;
- opacity: 0.5;
- transition: all 0.3s ease;
-}
-
-.step.active {
- opacity: 1;
- transform: scale(1.1);
-}
-
-.step.completed {
- opacity: 1;
+ gap: var(--space-4);
+ margin-bottom: var(--space-6);
+ padding-bottom: var(--space-4);
+ border-bottom: 2px solid var(--border-light);
}
.step-number {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- background: linear-gradient(135deg, #e9ecef 0%, #adb5bd 100%);
+ 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: bold;
- color: #495057;
- margin-right: 10px;
+ 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;
-}
-
-.step.active .step-number {
- background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
- color: white;
- box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
-}
-
-.step.completed .step-number {
- background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
- color: white;
-}
-
-/* 🛡️ 보호 모드 표시기 */
-.protection-indicator {
- position: fixed;
- top: 20px;
- right: 20px;
- background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
- color: white;
- padding: 10px 15px;
- border-radius: 25px;
- font-size: 12px;
- font-weight: bold;
- box-shadow: 0 2px 10px rgba(39, 174, 96, 0.3);
- z-index: 1000;
- border: 2px solid #1e8449;
- animation: pulse-protection 2s infinite;
-}
-
-.protection-indicator::before {
- content: "🛡️";
- margin-right: 8px;
-}
-
-@keyframes pulse-protection {
- 0%, 100% { box-shadow: 0 2px 10px rgba(39, 174, 96, 0.3); }
- 50% { box-shadow: 0 4px 20px rgba(39, 174, 96, 0.5); }
-}
-
-/* 메시지 컨테이너 */
-.message-container {
- margin-bottom: 20px;
-}
-
-.message {
- padding: 15px;
- border-radius: 8px;
- margin-bottom: 10px;
- font-weight: 500;
- border: 2px solid transparent;
- transition: all 0.3s ease;
-}
-
-.message.success {
- background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
- color: white;
- border-color: #1e7e34;
- box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
-}
-
-.message.error {
- background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
- color: white;
- border-color: #bd2130;
- box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
-}
-
-.message.warning {
- background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
- color: white;
- border-color: #d68910;
- box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
- animation: fadeInShake 0.5s ease-out;
-}
-
-.message.loading {
- background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
- color: white;
- border-color: #2471a3;
+ 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;
}
-.message.loading::after {
- content: "";
+.worker-card::before {
+ content: '';
position: absolute;
top: 0;
- left: -100%;
- width: 100%;
- height: 100%;
- background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
- animation: loading-shimmer 1.5s infinite;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: var(--primary-500);
+ transform: scaleX(0);
+ transition: transform 0.3s ease;
}
-@keyframes loading-shimmer {
- 0% { left: -100%; }
- 100% { left: 100%; }
-}
-
-@keyframes fadeInShake {
- 0% {
- opacity: 0;
- transform: translateX(-10px);
- }
- 50% {
- opacity: 1;
- transform: translateX(5px);
- }
- 100% {
- opacity: 1;
- transform: translateX(0);
- }
-}
-
-/* 단계별 콘텐츠 */
-.step-content {
- background: white;
- border-radius: 12px;
- padding: 30px;
- margin-bottom: 20px;
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
- border: 2px solid #e9ecef;
-}
-
-/* 1단계: 날짜 선택 */
-.date-selection {
- text-align: center;
-}
-
-.date-input {
- padding: 15px;
- font-size: 18px;
- border: 2px solid #dee2e6;
- border-radius: 8px;
- width: 200px;
- margin: 20px 0;
- transition: all 0.3s ease;
-}
-
-.date-input:focus {
- border-color: #007bff;
- box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
- outline: none;
-}
-
-/* 2단계: 작업자 선택 */
-.worker-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
- gap: 15px;
- margin: 20px 0;
-}
-
-.worker-btn {
- padding: 15px;
- border: 2px solid #dee2e6;
- border-radius: 10px;
- background: white;
- cursor: pointer;
- transition: all 0.3s ease;
- font-weight: 500;
- font-size: 14px;
- position: relative;
-}
-
-.worker-btn:hover {
- border-color: #007bff;
- background: #f8f9fa;
+.worker-card:hover {
+ border-color: var(--primary-300);
+ background: var(--primary-50);
transform: translateY(-2px);
- box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
+ box-shadow: var(--shadow-lg);
}
-.worker-btn.selected {
- background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
+.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;
- border-color: #0056b3;
- box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
+ box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
-/* 🚫 차단된 작업자 버튼 스타일 */
-.worker-btn.blocked {
- background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
- color: white !important;
- border: 2px solid #a93226 !important;
- opacity: 0.7;
- cursor: not-allowed !important;
- position: relative;
- animation: pulse-blocked 2s infinite;
-}
-
-.worker-btn.blocked:hover {
- transform: none !important;
- box-shadow: none !important;
-}
-
-.worker-btn.blocked::after {
- content: "🚫";
- position: absolute;
- top: -5px;
- right: -5px;
- background: #fff;
- border-radius: 50%;
- width: 20px;
- height: 20px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 12px;
- border: 2px solid #e74c3c;
-}
-
-@keyframes pulse-blocked {
- 0%, 100% { opacity: 0.7; }
- 50% { opacity: 0.5; }
-}
-
-/* 3단계: 작업 입력 */
-.work-entries-container {
- margin: 20px 0;
+.worker-card.selected::before {
+ transform: scaleX(1);
+ background: rgba(255, 255, 255, 0.3);
}
+/* 작업 항목 */
.work-entry {
- background: #f8f9fa;
- border: 2px solid #e9ecef;
- border-radius: 12px;
- padding: 20px;
- margin-bottom: 20px;
- transition: all 0.3s ease;
+ 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: #007bff;
- box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1);
+ border-color: var(--primary-200);
+ box-shadow: var(--shadow-md);
}
.work-entry-header {
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 20px;
+ margin-bottom: var(--space-4);
+ padding-bottom: var(--space-3);
+ border-bottom: 1px solid var(--border-light);
}
.work-entry-title {
- font-size: 18px;
- font-weight: bold;
- color: #495057;
+ font-size: var(--text-lg);
+ font-weight: var(--font-bold);
+ color: var(--text-primary);
}
.remove-work-btn {
- background: #dc3545;
+ width: 36px;
+ height: 36px;
+ border-radius: var(--radius-full);
+ background: var(--error-500);
color: white;
border: none;
- border-radius: 50%;
- width: 30px;
- height: 30px;
cursor: pointer;
- font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
- transition: all 0.3s ease;
+ transition: var(--transition-normal);
+ font-size: var(--text-lg);
}
.remove-work-btn:hover {
- background: #c82333;
+ background: var(--error-600);
transform: scale(1.1);
}
-.work-entry-row {
+.work-entry-grid {
display: grid;
grid-template-columns: 1fr 1fr;
- gap: 20px;
- margin-bottom: 20px;
+ gap: var(--space-4);
}
-.form-group {
- display: flex;
- flex-direction: column;
-}
-
-.form-group label {
- font-weight: bold;
- margin-bottom: 8px;
- color: #495057;
- font-size: 14px;
-}
-
-.large-select {
- padding: 12px;
- border: 2px solid #dee2e6;
- border-radius: 8px;
- font-size: 14px;
- transition: all 0.3s ease;
- background: white;
-}
-
-.large-select:focus {
- border-color: #007bff;
- box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
- outline: none;
-}
-
-/* 에러 유형 섹션 */
-.error-type-section {
- opacity: 0.5;
- transition: all 0.3s ease;
-}
-
-.error-type-section.visible {
- opacity: 1;
+.work-entry-full {
+ grid-column: span 2;
}
/* 시간 입력 */
-.time-input-row {
- grid-column: 1 / -1;
+.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: 10px;
- margin-top: 10px;
+ gap: var(--space-2);
+ margin-top: var(--space-3);
+ flex-wrap: wrap;
+ justify-content: center;
}
.quick-time-btn {
- padding: 8px 15px;
- background: #e9ecef;
- border: 2px solid #dee2e6;
- border-radius: 20px;
+ 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: 12px;
- font-weight: bold;
- transition: all 0.3s ease;
+ font-size: var(--text-sm);
+ font-weight: var(--font-semibold);
+ transition: var(--transition-normal);
+ color: var(--primary-700);
}
.quick-time-btn:hover {
- background: #007bff;
- color: white;
- border-color: #0056b3;
- transform: translateY(-2px);
+ border-color: var(--primary-400);
+ background: var(--primary-100);
+ transform: translateY(-1px);
}
-/* 총 시간 표시 */
-.total-hours-display {
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+.quick-time-btn:active {
+ background: var(--primary-500);
color: white;
- padding: 15px;
- border-radius: 10px;
+ transform: translateY(0);
+}
+
+/* 총 작업시간 표시 */
+.total-hours-display {
text-align: center;
- font-size: 18px;
- font-weight: bold;
- margin: 20px 0;
- box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+ 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: 12px 25px;
- border: 2px solid transparent;
- border-radius: 8px;
- font-weight: bold;
+ 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: all 0.3s ease;
- font-size: 14px;
+ transition: var(--transition-normal);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-2);
text-decoration: none;
- display: inline-block;
-}
-
-.btn-primary {
- background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
- color: white;
- border-color: #0056b3;
-}
-
-.btn-primary:hover {
- background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
- transform: translateY(-2px);
- box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
-}
-
-.btn-success {
- background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
- color: white;
- border-color: #1e7e34;
-}
-
-.btn-success:hover {
- background: linear-gradient(135deg, #1e7e34 0%, #155724 100%);
- transform: translateY(-2px);
- box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
+ min-height: 48px;
+ box-shadow: var(--shadow-sm);
}
.btn:disabled {
- opacity: 0.6;
+ opacity: 0.5;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
-/* 작업 추가 버튼 */
-.add-work-container {
- text-align: center;
- margin: 30px 0;
-}
-
-.add-work-btn {
- background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
+.btn-primary {
+ background: var(--primary-500);
color: white;
- border: 2px solid #138496;
- padding: 15px 30px;
- border-radius: 25px;
- font-size: 16px;
- font-weight: bold;
- cursor: pointer;
- transition: all 0.3s ease;
}
-.add-work-btn:hover {
- background: linear-gradient(135deg, #138496 0%, #0f6674 100%);
- transform: translateY(-3px);
- box-shadow: 0 6px 20px rgba(23, 162, 184, 0.3);
-}
-
-/* 저장 버튼 */
-.submit-container {
- text-align: center;
- margin: 40px 0;
-}
-
-.submit-btn {
- background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
- color: white;
- border: 2px solid #1e7e34;
- padding: 18px 40px;
- border-radius: 30px;
- font-size: 18px;
- font-weight: bold;
- cursor: pointer;
- transition: all 0.3s ease;
-}
-
-.submit-btn:hover {
- background: linear-gradient(135deg, #1e7e34 0%, #17a2b8 100%);
- transform: translateY(-3px);
- box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
-}
-
-/* 오늘 작업자 현황 */
-.daily-workers-section {
- margin-top: 40px;
- padding: 20px;
- background: #f8f9fa;
- border-radius: 12px;
- border: 2px solid #e9ecef;
-}
-
-.daily-workers-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 20px;
- padding: 15px;
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- color: white;
- border-radius: 10px;
- border: 2px solid #5a6fd8;
-}
-
-.daily-workers-header h4 {
- margin: 0;
- font-size: 16px;
- font-weight: bold;
-}
-
-.refresh-btn {
- background: rgba(255, 255, 255, 0.2);
- color: white;
- border: 2px solid rgba(255, 255, 255, 0.3);
- padding: 8px 15px;
- border-radius: 20px;
- cursor: pointer;
- font-size: 12px;
- font-weight: bold;
- transition: all 0.3s ease;
-}
-
-.refresh-btn:hover {
- background: rgba(255, 255, 255, 0.3);
+.btn-primary:hover:not(:disabled) {
+ background: var(--primary-600);
transform: translateY(-2px);
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+ box-shadow: var(--shadow-lg);
}
-/* 작업자 현황 그리드 */
-.worker-status-grid {
- display: grid;
- gap: 20px;
-}
-
-.worker-status-item {
- background: white;
- border: 2px solid #e9ecef;
- border-radius: 12px;
- padding: 20px;
- transition: all 0.3s ease;
-}
-
-.worker-status-item:hover {
- border-color: #007bff;
- box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1);
-}
-
-.worker-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 15px;
- padding-bottom: 10px;
- border-bottom: 2px solid #e9ecef;
-}
-
-.worker-name {
- font-size: 18px;
- font-weight: bold;
- color: #495057;
-}
-
-.worker-total-hours {
- background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
+.btn-success {
+ background: var(--success-500);
color: white;
- padding: 5px 15px;
- border-radius: 15px;
- font-size: 14px;
- font-weight: bold;
}
-/* 개별 작업 항목 */
-.individual-works-container {
- margin-top: 15px;
-}
-
-.individual-work-item {
- background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
- border: 2px solid #dee2e6;
- border-radius: 10px;
- padding: 15px;
- margin-bottom: 10px;
- transition: all 0.3s ease;
-}
-
-.individual-work-item:hover {
- background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
- border-color: #adb5bd;
+.btn-success:hover:not(:disabled) {
+ background: var(--success-600);
transform: translateY(-2px);
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+ box-shadow: var(--shadow-lg);
}
-.work-details-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- gap: 15px;
- margin-bottom: 15px;
-}
-
-.detail-item {
- display: flex;
- flex-direction: column;
- gap: 5px;
-}
-
-.detail-label {
- font-size: 12px;
- font-weight: bold;
- color: #6c757d;
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-.detail-value {
- font-size: 14px;
- font-weight: 600;
- color: #212529;
- padding: 8px 12px;
- background: white;
- border: 1px solid #ced4da;
- border-radius: 6px;
-}
-
-/* 액션 버튼들 */
-.action-buttons {
- display: flex;
- gap: 10px;
- justify-content: flex-end;
-}
-
-.edit-btn, .delete-btn {
- padding: 8px 15px;
- border: none;
- border-radius: 6px;
- font-size: 12px;
- font-weight: bold;
- cursor: pointer;
- transition: all 0.3s ease;
-}
-
-.edit-btn {
- background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+.btn-secondary {
+ background: var(--gray-500);
color: white;
- border: 2px solid #2471a3;
}
-.edit-btn:hover {
- background: linear-gradient(135deg, #2980b9 0%, #2471a3 100%);
+.btn-secondary:hover:not(:disabled) {
+ background: var(--gray-600);
transform: translateY(-2px);
- box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
+ box-shadow: var(--shadow-lg);
}
-.delete-btn {
- background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
- color: white;
- border: 2px solid #a93226;
+.btn-block {
+ width: 100%;
}
-.delete-btn:hover {
- background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
- transform: translateY(-2px);
- box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
+/* 메시지 */
+.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;
}
-/* 데이터 없음 메시지 */
-.no-data-message {
- text-align: center;
- padding: 40px;
- color: #6c757d;
- font-size: 16px;
- line-height: 1.6;
+.message.error {
+ background: var(--error-50);
+ color: var(--error-700);
+ border-color: var(--error-200);
}
-.no-data-message small {
- display: block;
- margin-top: 10px;
- font-size: 14px;
- color: #adb5bd;
+.message.success {
+ background: var(--success-50);
+ color: var(--success-700);
+ border-color: var(--success-200);
}
-/* 로딩 스피너 */
-.loading-spinner {
- text-align: center;
- padding: 40px;
- font-size: 16px;
- color: #007bff;
- font-weight: bold;
+.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: 768px) {
- .daily-work-report-container {
- padding: 10px;
+@media (max-width: 1024px) {
+ .work-report-main {
+ padding: var(--space-6) var(--space-4);
}
- .work-entry-row {
- grid-template-columns: 1fr;
+ .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-fill, minmax(120px, 1fr));
- gap: 10px;
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+ gap: var(--space-3);
}
- .work-details-grid {
+ .worker-card {
+ min-height: 80px;
+ padding: var(--space-3);
+ font-size: var(--text-sm);
+ }
+
+ .work-entry-grid {
grid-template-columns: 1fr;
}
- .daily-workers-header {
+ .work-entry-full {
+ grid-column: span 1;
+ }
+
+ .progress-steps {
flex-direction: column;
- gap: 10px;
- text-align: center;
+ gap: var(--space-4);
}
- .protection-indicator {
- position: relative;
- top: auto;
- right: auto;
- margin: 10px auto;
- text-align: center;
+ .progress-step:not(:last-child)::after {
+ display: none;
}
- .steps-container {
- flex-direction: column;
- align-items: center;
+ .quick-time-buttons {
+ gap: var(--space-1);
}
- .step {
- margin: 10px 0;
+ .quick-time-btn {
+ padding: var(--space-1) var(--space-3);
+ font-size: var(--text-xs);
}
}
@media (max-width: 480px) {
- .worker-grid {
- grid-template-columns: 1fr 1fr;
+ .work-report-header h1 {
+ font-size: var(--text-2xl);
}
- .action-buttons {
+ .step-section {
+ padding: var(--space-4);
+ }
+
+ .step-header {
flex-direction: column;
+ text-align: center;
+ gap: var(--space-2);
}
- .date-input {
- width: 100%;
+ .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);
}
}
\ No newline at end of file
diff --git a/web-ui/js/daily-work-report.js b/web-ui/js/daily-work-report.js
index afcf762..adf60eb 100644
--- a/web-ui/js/daily-work-report.js
+++ b/web-ui/js/daily-work-report.js
@@ -86,9 +86,29 @@ function goToStep(stepNumber) {
}
}
}
+
+ // 진행 단계 표시 업데이트
+ updateProgressSteps(stepNumber);
+
currentStep = stepNumber;
}
+// 진행 단계 표시 업데이트
+function updateProgressSteps(currentStepNumber) {
+ for (let i = 1; i <= 3; i++) {
+ const progressStep = document.getElementById(`progressStep${i}`);
+ if (progressStep) {
+ progressStep.classList.remove('active', 'completed');
+
+ if (i < currentStepNumber) {
+ progressStep.classList.add('completed');
+ } else if (i === currentStepNumber) {
+ progressStep.classList.add('active');
+ }
+ }
+ }
+}
+
// 초기 데이터 로드 (통합 API 사용)
async function loadData() {
try {
@@ -203,7 +223,7 @@ function populateWorkerGrid() {
workers.forEach(worker => {
const btn = document.createElement('button');
btn.type = 'button';
- btn.className = 'worker-btn';
+ btn.className = 'worker-card';
btn.textContent = worker.worker_name;
btn.dataset.id = worker.worker_id;
@@ -470,7 +490,7 @@ function resetForm() {
goToStep(1);
selectedWorkers.clear();
- document.querySelectorAll('.worker-btn.selected').forEach(btn => {
+ document.querySelectorAll('.worker-card.selected').forEach(btn => {
btn.classList.remove('selected');
});
diff --git a/web-ui/pages/common/daily-work-report.html b/web-ui/pages/common/daily-work-report.html
index a38a914..e53c098 100644
--- a/web-ui/pages/common/daily-work-report.html
+++ b/web-ui/pages/common/daily-work-report.html
@@ -4,1054 +4,150 @@
일일 작업보고서 작성 | (주)테크니컬코리아
-
+
+
-
-