feat: 오류 분석 시스템 완전 재구조화 및 개선

 주요 기능
- Production Report 스타일 오류 분석 테이블 구현
- 작업 형태 중심의 데이터 집계 및 표시
- 프로젝트별 그룹화 (rowspan 적용)
- 연차/휴무 통합 처리 및 주말 제외

📊 테이블 구조 개선
- Job No. → 프로젝트명 표시
- 작업내용 → 작업 형태 (Base, Vessel, Piping Assembly)
- 총 시간 → 작업 형태별 총 시간
- 세부시간 → 정규/오류 유형별 세분화
- 백분율 → 오류율로 변경

🎨 UI/UX 개선
- 프로젝트별 rowspan 그룹화
- 정규(녹색)/오류(빨간색) 시각적 구분
- 연차/휴무 오렌지 색상 테마
- 프로젝트 그룹 경계선 추가

🔧 데이터 처리 로직
- 작업 형태별 오류 데이터 집계
- 오류 유형별 세분화 (설계미스, 발주미스 등)
- 주말 연차/휴무 자동 제외
- 모든 연차/휴무 하나로 통합

🛡️ 안정성 개선
- DOM 요소 null 체크 및 안전한 접근
- 디버깅 로그 추가
- 에러 핸들링 강화
This commit is contained in:
Hyungi Ahn
2025-11-05 08:39:35 +09:00
parent 26f9a4dea2
commit 052e868599
2 changed files with 558 additions and 22 deletions

View File

@@ -1159,6 +1159,29 @@ body {
.data-table {
min-width: 600px;
}
.error-analysis-table {
font-size: 0.8rem;
}
.error-analysis-table th,
.error-analysis-table td {
padding: 0.5rem 0.25rem;
}
.error-analysis-table .job-no {
width: 80px;
min-width: 80px;
font-size: 0.75rem;
}
.error-analysis-table .work-type-breakdown {
gap: 0.15rem;
}
.error-analysis-table .work-type-item {
padding: 0.15rem;
}
}
@media (max-width: 480px) {
@@ -1267,6 +1290,200 @@ select:focus {
outline-offset: 2px;
}
/* ========== 오류 분석 테이블 스타일 ========== */
.error-analysis-table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
font-size: 0.9rem;
background: var(--white);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.error-analysis-table th {
background: #FF6B6B; /* 오류 분석 전용 빨간색 헤더 */
color: var(--white);
font-weight: 600;
text-align: center;
padding: 1rem 0.75rem;
border-bottom: 2px solid #E74C3C;
font-size: 0.85rem;
line-height: 1.3;
}
.error-analysis-table td {
padding: 0.75rem;
border-bottom: 1px solid #F8F9FA;
text-align: center;
vertical-align: middle;
}
.error-analysis-table .job-no,
.error-analysis-table .project-name {
background: #FFE5E5; /* 연한 빨간색 배경 */
color: #C0392B;
font-weight: 600;
text-align: center;
width: 120px;
min-width: 120px;
vertical-align: middle;
}
.error-analysis-table .work-content {
text-align: left;
font-weight: 500;
color: var(--gray-800);
}
.error-analysis-table .total-hours {
font-weight: 600;
color: var(--gray-900);
}
.error-analysis-table .detail-hours {
text-align: left;
line-height: 1.4;
}
.error-analysis-table .regular-hours {
color: #27AE60;
font-weight: 500;
}
.error-analysis-table .error-hours {
color: #E74C3C;
font-weight: 600;
}
.error-analysis-table .work-type {
text-align: left;
padding: 0.5rem;
}
.error-analysis-table .work-type-breakdown {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.error-analysis-table .work-type-item {
display: flex;
flex-direction: column;
gap: 0.1rem;
padding: 0.25rem;
background: #F8F9FA;
border-radius: 4px;
margin-bottom: 0.25rem;
}
/* 정규 작업 스타일 */
.error-analysis-table .work-type-item.regular {
background: #E8F5E8;
border-left: 3px solid #4CAF50;
}
.error-analysis-table .work-type-item.regular .work-type-name {
color: #2E7D32;
}
.error-analysis-table .work-type-item.regular .regular-time {
color: #4CAF50;
font-weight: 600;
}
.error-analysis-table .work-type-item.regular .work-type-status {
color: #388E3C;
font-size: 0.7rem;
font-weight: 500;
}
/* 오류 작업 스타일 */
.error-analysis-table .work-type-item.error {
background: #FFEBEE;
border-left: 3px solid #F44336;
}
.error-analysis-table .work-type-item.error .work-type-name {
color: #C62828;
}
.error-analysis-table .work-type-item.error .error-time {
color: #F44336;
font-weight: 600;
}
.error-analysis-table .work-type-item.error .work-type-status {
color: #D32F2F;
font-size: 0.7rem;
font-weight: 600;
}
.error-analysis-table .work-type-name {
font-weight: 600;
color: var(--gray-800);
font-size: 0.85rem;
}
.error-analysis-table .work-type-hours {
font-size: 0.75rem;
color: var(--gray-600);
}
.error-analysis-table .error-percentage {
font-weight: 600;
font-size: 1rem;
}
.error-analysis-table .error-percentage.has-error {
color: #E74C3C;
background: #FFE5E5;
border-radius: 4px;
padding: 0.25rem;
}
/* 프로젝트 그룹 스타일 */
.error-analysis-table .project-group {
border-top: 1px solid #E0E0E0;
}
.error-analysis-table .project-group:first-child {
border-top: none;
}
/* 연차/휴무 오류 스타일 */
.error-analysis-table .vacation-project {
background: #FFF3E0 !important; /* 연한 오렌지 배경 */
border-top: 3px solid #FF9800 !important;
}
.error-analysis-table .vacation-project .job-no,
.error-analysis-table .vacation-project .project-name {
background: #FF9800 !important; /* 오렌지 배경 */
color: var(--white) !important;
}
.error-analysis-table .vacation-project td {
background: #FFF3E0 !important;
color: #E65100 !important;
}
/* 총계 행 스타일 */
.error-analysis-table .total-row {
background: #FFEBEE !important;
color: #C62828;
border-top: 2px solid #E74C3C;
font-weight: 600;
}
.error-analysis-table .total-row td {
background: #FFEBEE !important;
color: #C62828 !important;
font-weight: 600;
border-bottom: none;
}
/* 다크 모드 지원 (선택사항) */
@media (prefers-color-scheme: dark) {
:root {