주요 변경사항:
- 비활성화된 프로젝트 관리 기능 추가
* 프로젝트 관리 페이지에 접을 수 있는 비활성 프로젝트 섹션 추가
* 비활성화된 프로젝트 복구 기능 제공
* 업로드 시에는 활성 프로젝트만 표시되도록 API 호출 분리
- 헤더 비밀번호 변경 기능 완전 구현
* CommonHeader.js에 완전한 비밀번호 변경 모달 구현
* ESC 키 지원, 실시간 유효성 검사, 토스트 메시지 추가
* 중복 코드 제거 및 통일된 함수 호출 구조
- 수신함 수정 내용 표시 문제 해결
* description 우선 표시로 최신 수정 내용 반영
* 관리함에서 final_description/final_category 업데이트 로직 추가
- 현황판 날짜 그룹화 개선
* 업로드일 기준에서 관리함 진입일(reviewed_at) 기준으로 변경
* Invalid Date 오류 해결
- 프로젝트 관리 페이지 JavaScript 오류 수정
* 중복 변수 선언 및 함수 참조 오류 해결
* 페이지 초기화 로직 개선
기술적 개선:
- API 호출 최적화 (active_only 매개변수 명시적 전달)
- 프론트엔드 표시 우선순위 통일 (description || final_description)
- 백엔드 final_* 필드 업데이트 로직 추가
📊 통계 카드 재구성:
- 전체 진행 중: 모든 진행 중인 이슈 수
- 오늘 신규: 오늘 수신함에서 진행중으로 넘어온 이슈
- 완료 대기: 완료 신청된 이슈 (completion_requested_at 존재)
- 지연 중: 마감일이 지난 이슈
🎨 UI 개선:
- 완료 대기: 보라색 배경 + 모래시계 아이콘
- 지연 중: 빨간색 배경 + 시계 아이콘
- 각 카드별 애니메이션 점 효과 유지
🔧 로직 개선:
- reviewed_at 기준으로 오늘 신규 계산
- completion_requested_at 필드로 완료 대기 상태 판별
- expected_completion_date 기준으로 지연 상태 판별
- 실시간 통계 업데이트
💡 사용자 경험:
- 한눈에 파악 가능한 상태별 분류
- 색상 코딩으로 우선순위 구분
- 직관적인 아이콘 사용
Expected Result:
✅ 전체 진행 중 | 오늘 신규 | 완료 대기 | 지연 중
✅ 실시간 상태별 통계 표시
✅ 시각적으로 구분되는 색상 체계
✅ 관리자가 우선순위를 쉽게 파악
🔧 백엔드 API 추가:
- POST /api/issues/{issue_id}/completion-request
- 완료 사진 Base64 업로드 및 저장
- 완료 코멘트 저장
- 완료 신청 시간 및 신청자 기록
📊 데이터 모델 확장:
- completion_requested_at: 완료 신청 시간
- completion_requested_by_id: 완료 신청자 ID
- completion_photo_path: 완료 사진 경로
- completion_comment: 완료 코멘트
🛡️ 검증 로직:
- 진행 중 상태만 완료 신청 가능
- 중복 완료 신청 방지
- 파일 업로드 오류 시 롤백 처리
🔄 프론트엔드 연동:
- refreshDashboard() 함수 추가
- 완료 신청 후 현황판 자동 새로고침
- 오류 처리 및 사용자 피드백
Expected Result:
✅ 완료 신청 API 정상 작동
✅ 완료 사진 업로드 및 저장
✅ 완료 대기 상태로 변경
✅ 404 오류 해결
🎯 진행 상태 4단계 세분화:
- 진행 중 (파란색): 일반적인 진행 상태
- 긴급 (주황색): 마감 3일 이내
- 지연됨 (빨간색): 마감시간 초과
- 완료 대기 (보라색): 완료 신청 후 승인 대기
🔧 상태 판별 로직:
- 마감시간 기준 자동 상태 변경
- completion_requested_at 필드로 완료 대기 상태 판별
- 각 상태별 고유 색상, 아이콘, 텍스트
📱 완료 신청 기능:
- 마감시간 카드 우하단에 '완료신청' 버튼
- 완료 사진 업로드 (필수, 5MB 제한)
- 완료 코멘트 입력 (선택사항)
- 실시간 이미지 미리보기
🗄️ DB 구조 확장:
- completion_requested_at: 완료 신청 시간
- completion_requested_by_id: 신청자 ID
- completion_photo_path: 완료 사진 경로
- completion_comment: 완료 코멘트
🎨 UI/UX 개선:
- 상태별 그라데이션 배경색
- 애니메이션 아이콘 (톱니바퀴, 경고, 시계 등)
- 드래그 앤 드롭 사진 업로드
- 모달 기반 완료 신청 폼
💡 워크플로우:
1. 담당자가 작업 완료 후 '완료신청' 클릭
2. 완료 사진과 코멘트 업로드
3. 상태가 '완료 대기'로 변경
4. 관리자 승인 후 '완료됨'으로 최종 처리
🔐 보안 및 검증:
- 이미지 파일 타입 검증
- 파일 크기 제한 (5MB)
- Base64 인코딩으로 안전한 전송
- 사용자 인증 및 권한 확인
Expected Result:
✅ 진행 상황을 한눈에 파악 가능한 색상 코딩
✅ 마감 관리 자동화 (긴급/지연 상태)
✅ 완료 신청 프로세스로 품질 관리 강화
✅ 직관적인 UI로 사용자 경험 향상
🗑️ 정렬 기준 필터 완전 제거:
- 정렬 기준 드롭다운 UI 삭제
- sortIssues() 함수 제거
- 관련 함수 호출 제거
💡 UI 단순화 효과:
- 필터 영역이 더 깔끔해짐
- 프로젝트 선택에 집중
- 사용자 인터페이스 복잡도 감소
🎯 기본 정렬 유지:
- 날짜별 그룹화는 그대로 유지
- 최신순 정렬 (newest first) 기본 적용
- 핵심 기능은 보존하면서 불필요한 옵션만 제거
Expected Result:
✅ 더 간단하고 직관적인 필터 인터페이스
✅ 프로젝트 선택 + 새로고침 버튼만 유지
✅ 사용자 혼란 요소 제거
✅ 핵심 기능에 집중
🖼️ 이미지 크기 최대 확장:
- 이미지 크기: 20x20 → 24x24 (20% 추가 증가)
- 아이콘 크기: text-lg → text-xl (더 선명한 표시)
- 카드 영역을 최대한 활용하여 시각적 정보 전달력 극대화
🎯 진행중 태그 프리미엄 디자인:
- 배경: 연한 파란색 → 진한 파란색 그라데이션 (blue-500 to blue-600)
- 텍스트: 그라데이션 → 흰색 볼드체 (더 강한 대비)
- 패딩: px-3 py-1 → px-4 py-1.5 (더 풍성한 느낌)
- 그림자: shadow-sm → shadow-md (입체감 강화)
- 아이콘: 정적 시계 → 회전하는 톱니바퀴 (fa-cog fa-spin)
- 상태 점: 파란색 → 흰색 (더 명확한 대비)
📅 발생날짜 독립 디자인:
- 회색 배경 캡슐로 분리하여 정보 구분 명확화
- 진행중 태그와 시각적으로 분리되어 가독성 향상
👥 일정 & 담당 순서 변경:
- 담당자 → 마감시간 순으로 재배치
- 사람 중심의 정보 우선 표시
- 패딩 증가 (p-2 → p-3)로 더 여유로운 느낌
🎨 전체적인 시각적 개선:
- 더 강한 색상 대비로 정보 구분 명확화
- 애니메이션 효과로 생동감 추가
- 공간 활용도 최적화로 정보 밀도 향상
Expected Result:
✅ 이미지 가시성 44% 향상 (16→24px)
✅ 진행중 상태의 강력한 시각적 임팩트
✅ 담당자 우선 표시로 책임 소재 명확화
✅ 전체적으로 더 프로페셔널한 느낌
🎨 헤더 레이아웃 최적화:
- 진행중 태그와 발생날짜를 한 줄로 배치
- '발생 날짜' → '발생:' 으로 간소화하여 공간 절약
- 우측 상단 공간 효율성 향상
📏 부적합명 크기 조정:
- 텍스트 크기: text-lg → text-base (18px → 16px)
- 패딩: py-2 → py-1.5 (8px → 6px)
- 전체적으로 더 컴팩트한 느낌
🖼️ 이미지 크기 확대:
- 이미지 크기: 16x16 → 20x20 (25% 증가)
- 간격: space-x-2 → space-x-3 (8px → 12px)
- 상태 표시 점: 2x2 → 3x3 (더 명확한 시각적 피드백)
- 아이콘 크기: text-sm → text-lg (더 선명한 표시)
💡 공간 배치 개선:
- 상단 영역 압축으로 하단 콘텐츠 영역 확보
- 이미지 가시성 향상으로 시각적 정보 전달력 증대
- 전체적인 정보 밀도 최적화
Expected Result:
✅ 헤더 영역 공간 효율성 향상
✅ 이미지 가시성 25% 증가
✅ 진행중/발생날짜 한눈에 파악 가능
✅ 전체적으로 더 균형잡힌 레이아웃
🎨 헤더 레이아웃 재구성:
- 원인 태그를 오른쪽으로 이동하여 균형감 향상
- 발생 날짜를 오른쪽 상단에 배치하여 시간 정보 강조
- 카테고리 한글 표시 (자재 누락, 설계 오류, 반입 불량, 검사 누락, 기타)
📊 콘텐츠 영역 2x2 그리드 재구성:
- 상세 내용 | 해결 방안 (상단 나란히 배치)
- 이미지 | 일정 & 담당 (하단 배치)
🎯 해결 방안 섹션 강화:
- 녹색 테마로 해결책 강조 (bg-green-50, border-green-200)
- 전구 아이콘으로 아이디어 시각화
- 상세 내용과 동등한 비중으로 배치
💼 일정 & 담당 UI 개선:
- 마감시간: 오렌지 테마 카드 (긴급성 표현)
- 담당자: 보라색 테마 카드 (책임감 표현)
- 각각 아이콘과 색상으로 구분
- 컴팩트한 카드 형태로 가독성 향상
🖼️ 이미지 섹션 최적화:
- 크기를 16x16으로 조정하여 공간 효율성 증대
- 상태 표시 점 크기 축소로 깔끔함 유지
🏷️ 카테고리 태그 개선:
- 영어 → 한글 표시로 직관성 향상
- 오른쪽 배치로 시각적 균형 개선
Expected Result:
✅ 정보 우선순위에 따른 배치 최적화
✅ 상세 내용과 해결 방안의 동등한 비중
✅ 색상 코딩으로 정보 구분 명확화
✅ 컴팩트하면서도 가독성 높은 레이아웃
🎨 부적합명 강조 디자인:
- 파란색 배경 박스 (bg-blue-50)
- 왼쪽 파란색 보더 (border-l-4 border-blue-400)
- 진한 파란색 텍스트 (text-blue-900)
- 볼드 폰트로 중요도 강조
📝 상세 내용 보조 디자인:
- 회색 배경 (bg-gray-50)
- 얇은 회색 테두리 (border border-gray-200)
- 회색 이탤릭 텍스트 (text-gray-600 italic)
- 아이콘과 라벨로 구분 명확화
💡 시각적 계층 구조:
1️⃣ 부적합명: 눈에 띄는 파란색 강조 박스
2️⃣ 상세 내용: 차분한 회색 보조 정보
🔧 적용 범위:
- 현황판 카드 레이아웃
- 관리함 진행중 카드 레이아웃
- 일관된 디자인 언어 적용
Expected Result:
✅ 부적합명이 즉시 눈에 들어옴
✅ 상세 내용과 명확한 구분
✅ 정보 우선순위가 시각적으로 명확
✅ 전체적인 가독성 향상
🎯 부적합 정보 구조화 개선:
📝 수신함 검토 모달 개선:
- '설명' → '부적합명' + '상세 내용'으로 분리
- 부적합명: 간단한 제목 (필수 입력)
- 상세 내용: 자세한 설명 (선택 입력)
- 저장 시 첫 번째 줄에 제목, 나머지는 상세 내용으로 결합
🏢 관리함 진행중 페이지 개선:
- No. 옆에 프로젝트명 표시 (작은 글씨)
- 부적합명을 카드 헤더에 큰 제목으로 표시
- '부적합 내용' → '상세 내용'으로 변경
- getIssueTitle(), getIssueDetail() 헬퍼 함수 추가
📊 현황판 페이지 개선:
- No. 옆에 프로젝트명과 카테고리 태그 표시
- 부적합명을 카드 헤더에 제목으로 표시
- '부적합 내용' → '상세 내용'으로 변경
- 동일한 헬퍼 함수로 일관성 유지
💡 핵심 개선사항:
- 정보 계층 구조 명확화 (제목 vs 상세)
- 시각적 가독성 향상 (헤더에 중요 정보 집중)
- 일관된 표시 방식 (수신함 → 관리함 → 현황판)
- 기존 데이터 호환성 유지
🔧 기술적 구현:
- 첫 번째 줄을 제목으로 추출
- 두 번째 줄부터를 상세 내용으로 분리
- 기존 description 필드 활용 (DB 변경 없음)
- 폴백 처리로 안정성 확보
Expected Result:
✅ 부적합 정보의 체계적 관리
✅ 한눈에 파악 가능한 제목 표시
✅ 상세 내용과 요약 정보 분리
✅ 전체 워크플로우 일관성 향상
🎨 현황판 카드 레이아웃 개선사항:
1️⃣ 헤더 레이아웃 재구성:
- ❌ 단순한 좌우 배치 → ✅ 좌측: No. + 원인분류 태그, 우측: 긴급 + 진행중 상태
- 원인분류를 No. 옆으로 이동하여 한눈에 파악 가능
- 진행중 상태를 우측 상단으로 이동하여 시각적 균형 개선
2️⃣ 이미지 미리보기 기능 추가:
- ❌ 아이콘만 표시 → ✅ 실제 이미지 미리보기
- 크기 확대: 16x16px → 20x20px (25% 증가)
- 실제 이미지 로드 실패시 fallback 아이콘 표시
- object-cover로 이미지 비율 유지하며 완전 채움
3️⃣ 레이아웃 최적화:
- 불필요한 '원인 분류' 섹션 삭제 (헤더로 이동)
- 하단 '진행 중' 상태 표시 제거 (헤더로 이동)
- 해결방안을 col-span-2로 확장하여 공간 효율성 증대
- 전체적으로 더 깔끔하고 정보 밀도 높은 레이아웃
4️⃣ 시각적 개선:
- 이미지 hover 효과: 그림자 + 확대 애니메이션
- 상태 표시 아이콘 추가 (시계 아이콘)
- 그라데이션과 그림자 효과로 현대적 느낌
- 정보 계층 구조 명확화
🎯 사용성 개선 효과:
- 이미지 내용을 바로 확인 가능 (클릭 전 미리보기)
- 중요 정보(No., 원인분류, 상태)가 상단에 집중
- 공간 활용도 증가로 더 많은 정보 표시
- 시각적 노이즈 감소로 가독성 향상
🔧 기술적 개선:
- img 태그 onerror 핸들링으로 안정성 확보
- CSS object-cover로 이미지 왜곡 방지
- 반응형 레이아웃 유지
- 접근성 개선 (alt 텍스트 추가)
Expected Result:
✅ 실제 이미지 미리보기로 내용 파악 용이
✅ 정보 배치 최적화로 스캔 효율성 증대
✅ 깔끔하고 현대적인 카드 디자인
✅ 공간 효율성과 정보 밀도 향상
📋 Information Display Improvements:
1️⃣ 마감시간/담당자 섹션 개선:
- ❌ '마감시간 | 담당부서 담당자' (복잡한 한 줄 표시)
- ✅ 마감시간: / 담당자: (깔끔한 분리 표시)
- 담당부서 제거 (불필요한 정보)
- 각각 별도 라인으로 구분하여 가독성 향상
2️⃣ 부적합 내용 섹션 개선:
- ❌ 단순한 텍스트 표시
- ✅ 제목과 본문 구분 표시
- 첫 번째 단어를 제목으로 강조 (font-semibold)
- 나머지 내용을 본문으로 표시 (작은 글씨)
- 회색 배경 + 파란색 좌측 테두리로 시각적 구분
🎨 Visual Enhancements:
- 마감시간/담당자: 라벨(text-xs) + 값(font-medium) 구조
- 부적합 내용: 배경 박스 + 좌측 강조 테두리
- 제목: font-semibold + 약간 큰 글씨
- 본문: 작은 글씨 + 줄간격 조정 (leading-relaxed)
📱 Better Readability:
- 정보 계층 구조 명확화
- 시각적 구분으로 스캔 가능성 향상
- 공간 효율성과 가독성 균형
Expected Result:
✅ 더 깔끔한 정보 표시
✅ 제목-본문 구분으로 내용 파악 용이
✅ 마감시간/담당자 정보 명확화
✅ 시각적 계층 구조 개선
🎨 Modern Card Design:
- ❌ 촌스러운 작은 이미지 → ✅ 세련된 큰 이미지 (16x16px)
- 그라데이션 배경과 테두리로 고급스러운 느낌
- 이미지 있을 때 초록색 상태 점 표시
🖼️ Enhanced Image Display:
- 크기: 8x8px → 16x16px (2배 확대)
- 그라데이션 배경 (파란색 계열)
- hover 효과: 그림자 + 확대 애니메이션
- 상태 표시: 우상단 초록색 점으로 이미지 존재 표시
🎯 Visual Improvements:
- No. 텍스트: 그라데이션 텍스트 효과
- 긴급 배지: 🔥 이모지 + 그라데이션 배경
- 원인 분류: 태그 아이콘 + 노란-주황 그라데이션
- 해결방안: 회색 배경 박스로 구분
- 진행 중 상태: 파란색 그라데이션 배경 + 테두리
🚀 Advanced Hover Effects:
- 카드 전체: 위로 이동 + 살짝 확대
- 고급 그림자 효과 (3단계 레이어)
- 파란색 글로우 효과
- 부드러운 cubic-bezier 애니메이션
🎨 Color Scheme:
- 배경: 미묘한 그라데이션 (흰색 → 연한 회색)
- 이미지: 파란색 계열 그라데이션
- 원인분류: 노란-주황 그라데이션
- 상태: 파란-인디고 그라데이션
Expected Result:
✅ 훨씬 세련되고 모던한 디자인
✅ 이미지 가독성 대폭 향상
✅ 고급스러운 hover 애니메이션
✅ 직관적인 시각적 피드백
🎯 Simplified Card Layout:
- ❌ 긴 편집 가능한 카드 → ✅ 간결한 읽기 전용 카드
- 2x3 그리드 형식으로 정보 압축
- 카드 높이 대폭 단축
📋 Grid Structure (2 columns x 3 rows):
Row 1: 부적합 내용 | 발생 날짜
Row 2: 이미지 | 마감시간 + 담당부서/담당자
Row 3: 원인 분류 | 해결 방안
Bottom: 상태 (진행 중)
🎨 Visual Improvements:
- 작은 이미지 아이콘 (8x8px)
- 원인 분류: 노란색 배지
- 마감시간과 담당 정보 결합
- 중앙 정렬된 상태 표시
📱 Compact Design:
- 패딩 축소 (p-6 → p-4)
- 텍스트 크기 최적화 (text-sm)
- 불필요한 여백 제거
- 한눈에 들어오는 정보 배치
🔧 Read-Only Features:
- 모든 필드 읽기 전용
- 편집 버튼 제거
- 사진 클릭 시 모달 확대만 가능
- 깔끔한 정보 표시
Expected Result:
✅ 훨씬 간결한 카드 디자인
✅ 한눈에 들어오는 정보 배치
✅ 읽기 전용 모드
✅ 모바일 친화적 크기
🔄 Complete Layout Change:
- ❌ 단순 카드 그리드 → ✅ 관리함 스타일 날짜별 그룹화
- 날짜별 접기/펼치기 기능 추가
- 업로드일 기준으로 그룹화 및 최신순 정렬
📋 Card Layout (Management Style):
- 헤더: No., 긴급 표시 + 저장/완료처리 버튼
- 업로드 사진: 맨 위로 이동 (2개 슬롯, 없으면 '사진 없음')
- 부적합 내용: 읽기 전용 텍스트
- 원인 분류: 노란색 배지로 표시
- 관리 정보: 편집 가능한 입력 필드들
🎯 Interactive Features:
- 해결방안: textarea (편집 가능)
- 담당부서: select dropdown (편집 가능)
- 담당자: text input (편집 가능)
- 조치 예상일: date input (편집 가능)
- 원인부서: 읽기 전용
📅 Date Grouping:
- 업로드일(report_date) 기준 그룹화
- 날짜 헤더: 클릭으로 접기/펼치기
- 각 그룹별 건수 표시
- '업로드일' 배지로 기준 명시
🎨 Visual Improvements:
- 이모지 아이콘으로 필드 구분 (💡🏢👤📅)
- 진행 중 상태 애니메이션 유지
- 부드러운 hover 효과
- 일관된 색상 체계
🔧 Functionality:
- toggleDateGroup() 함수로 그룹 접기/펼치기
- 사진 모달 확대 기능 유지
- 긴급 표시 (3일 이내 마감)
- 저장/완료처리 버튼 (UI만, 기능은 추후)
Expected Result:
✅ 관리함과 완전히 동일한 UI/UX
✅ 날짜별 체계적 정리
✅ 편집 가능한 관리 인터페이스
✅ 직관적인 정보 표시
🎨 UI Format Change:
- ❌ 가로 테이블 형식 (정보 압축, 가독성 저하)
- ✅ 관리함 진행 중 카드 형식 (직관적, 모바일 친화적)
📋 Card Layout Features:
- 헤더: No., 긴급 표시, 등록일
- 기본 정보: 프로젝트, 부적합 내용, 원인 분류
- 관리 정보: 해결방안, 담당부서, 담당자, 조치 예상일, 원인부서
- 업로드 사진: 클릭 시 모달 확대
- 진행 중 표시: 애니메이션 점 + 상태 표시
🎯 UX Improvements:
- 3컬럼 반응형 그리드 (데스크톱/태블릿/모바일)
- 카드 hover 효과: 위로 이동 + 그림자 + 좌측 파란 테두리
- 긴급 표시: 예상완료일 3일 이내 시 빨간 배지
- 부드러운 애니메이션: 0.3초 transition
- 사진 hover 효과: 확대 + 색상 변경
📱 Mobile Optimization:
- 1컬럼 레이아웃으로 모바일 최적화
- 터치 친화적 카드 인터페이스
- 스크롤 가능한 세로 배치
- 적절한 패딩과 간격
🎨 Visual Enhancements:
- 진행 중 상태 애니메이션 (pulse 효과)
- 일관된 색상 체계 (파란색 강조)
- 깔끔한 카드 디자인
- 정보 계층 구조 명확화
🔧 Code Structure:
- createIssueRow → createIssueCard 함수 변경
- 테이블 HTML → 카드 그리드 HTML
- 테이블 CSS → 카드 CSS 스타일
- 반응형 그리드 시스템 적용
Expected Result:
✅ 관리함과 일관된 UI/UX
✅ 대폭 향상된 가독성
✅ 모바일 최적화
✅ 직관적인 정보 표시
🔄 Major UI Redesign:
- ❌ 세로 카드 레이아웃 (가독성 저하)
- ✅ 가로 테이블 레이아웃 (한눈에 정보 확인)
📊 Table Structure:
- 11개 컬럼: No., 프로젝트, 부적합내용, 카테고리, 해결방안, 담당부서, 담당자, 예상완료일, 원인부서, 사진, 등록일
- 가로 스크롤 지원으로 모든 정보 표시
- 각 컬럼별 최적화된 너비 설정
🎯 UX Improvements:
- 긴급 표시: 예상완료일 3일 이내 시 빨간 배지
- 텍스트 truncate: 긴 내용은 말줄임표로 처리 (hover시 전체 내용 표시)
- 사진 아이콘: 클릭 시 모달로 확대
- 행 hover 효과: 마우스 오버 시 배경색 변경
📱 Responsive Features:
- 가로 스크롤로 모바일에서도 모든 정보 확인 가능
- Sticky 헤더: 스크롤 시 헤더 고정
- 최소 너비 보장으로 정보 압축 방지
🎨 Visual Enhancements:
- 깔끔한 테이블 디자인
- 적절한 패딩과 간격
- 일관된 색상 체계
- 부드러운 hover 애니메이션
Expected Result:
✅ 대폭 향상된 가독성
✅ 한 화면에서 모든 정보 확인
✅ 효율적인 공간 활용
✅ 관리함과 일관된 UX
🎨 UI Redesign:
- 기존 프로젝트별 그룹 카드 → 개별 이슈 카드로 변경
- 관리함 진행 중 페이지와 동일한 카드 형식 적용
- 읽기 전용으로 구현 (수정 기능 없음)
📋 Card Content:
- 헤더: No., 긴급 표시, 등록일
- 기본 정보: 프로젝트, 부적합 내용, 카테고리
- 관리 정보: 해결방안, 담당부서, 담당자, 예상완료일, 원인부서
- 사진 정보: 업로드 사진 미리보기 (클릭 시 확대)
🔧 Features:
- 내용이 없는 부분은 '-'로 표시
- 사진 모달 확대 기능 (ESC 키 지원)
- 긴급도 표시 (예상완료일 3일 이내)
- 반응형 그리드 레이아웃 (1/2/3 컬럼)
🎯 Layout:
- 데스크톱: 3컬럼 그리드
- 태블릿: 2컬럼 그리드
- 모바일: 1컬럼 그리드
Expected Result:
✅ 관리함과 일관된 UI/UX
✅ 상세 정보 한눈에 확인 가능
✅ 사진 확대 기능으로 편의성 향상
✅ 읽기 전용으로 안전한 조회
🔧 Permission System Fix:
- loadPermissions() → setUser() + loadPagePermissions() 수정
- PagePermissionManager 중복 생성 제거 (전역 인스턴스 사용)
- issues_dashboard 페이지를 permissions.js에 추가 (defaultAccess: true)
🐛 Fixed Error:
- ❌ TypeError: window.pagePermissionManager.loadPermissions is not a function
- ✅ 올바른 메서드 호출: setUser() + loadPagePermissions()
📋 Permission Structure:
- issues_dashboard: { title: '현황판', defaultAccess: true }
- 모든 사용자가 기본적으로 현황판 접근 가능
Expected Result:
✅ 현황판 페이지 권한 시스템 정상 초기화
✅ 페이지 접근 권한 확인 정상 동작
✅ 공통 헤더 및 메뉴 정상 표시
🐛 Script Path Fix:
- common-header.js 경로 수정: /static/js/components/common-header.js
- page-manager.js 경로 수정: /static/js/components/page-manager.js
- 다른 페이지들과 동일한 경로 구조로 통일
🔧 Fixed Paths:
- ❌ /static/js/common-header.js
- ✅ /static/js/components/common-header.js
- ❌ /static/js/page-manager.js
- ✅ /static/js/components/page-manager.js
Expected Result:
✅ 현황판 페이지 정상 로드
✅ 404 오류 해결
✅ 무한 로딩 문제 해결
✅ 공통 헤더 및 권한 시스템 정상 동작
📊 Dashboard Overview Page:
- 진행 중인 부적합들을 프로젝트별로 한눈에 볼 수 있는 현황판
- 실시간 통계 및 시각적 대시보드 구현
- 프로젝트 선택 및 다양한 정렬 옵션 제공
🎯 Key Features:
- 전체 통계 카드 (전체 진행 중, 오늘 신규, 지연 위험, 활성 프로젝트)
- 프로젝트별 그룹화된 이슈 카드 표시
- 긴급도 기반 우선순위 표시 (마감일 3일 이내)
- 프로젝트 필터링 및 정렬 기능
🎨 Visual Design:
- 그라데이션 통계 카드 with 호버 애니메이션
- 프로젝트 카드 with 좌측 테두리 호버 효과
- 이슈 미니 카드 with 긴급도 색상 구분
- 반응형 그리드 레이아웃
📋 Dashboard Components:
- 4개 통계 카드: 진행 중, 신규, 지연 위험, 활성 프로젝트
- 프로젝트 선택 드롭다운
- 정렬 옵션: 우선순위, 신고일순, 마감일순
- 프로젝트별 이슈 그룹화 표시
🔧 Technical Implementation:
- issues_dashboard 페이지 권한 추가
- 진행 중 상태(in_progress) 이슈만 필터링
- 긴급도 계산 로직 (마감일 기준)
- 프로젝트별 그룹화 및 통계 계산
- 공통 헤더 및 권한 시스템 적용
🚀 Interactive Features:
- 이슈 카드 클릭 → 관리함 상세보기 이동
- 실시간 새로고침 기능
- 프로젝트별 필터링
- 우선순위/날짜/마감일 기준 정렬
💡 User Experience:
- 로딩 애니메이션 및 페이드인 효과
- 빈 상태 메시지
- 긴급 이슈 시각적 강조
- 직관적인 네비게이션
Expected Result:
✅ 진행 중인 부적합 현황을 한눈에 파악
✅ 프로젝트별 작업 우선순위 확인
✅ 지연 위험 이슈 조기 발견
✅ 효율적인 부적합 관리 워크플로우
