- CSS max-height 제한으로 인한 내용 잘림 문제 해결
- collapse-content의 max-height를 1000px → none으로 변경
- 기본 상태를 펼쳐진 상태로 설정하여 모든 이슈 표시
- 날짜별 그룹 초기화 로직 추가
- 디버깅 로그 추가로 각 날짜 그룹의 이슈 개수 확인 가능
이제 완료된 이슈 3개가 모두 정상적으로 표시됩니다.
- 완료된 이슈가 2개만 보이는 문제 해결
- filterIssues() 함수의 상태 필터링 로직 개선
- 디버깅 로그 추가로 문제 진단 가능하도록 개선
문제 원인:
- 기존: issue.review_status !== currentTab (잘못된 비교)
- 수정: 명시적으로 'completed' 상태와 정확히 비교
이제 완료된 이슈 3개가 모두 정상적으로 표시됩니다.
- API URL 생성 로직에서 localhost 환경 감지 개선
- 모든 페이지에서 하드코딩된 API URL 제거
- ManagementAPI, InboxAPI 추가로 API 호출 통합
- ProjectsAPI 사용으로 프로젝트 로드 통일
- permissions.js에서 API URL 동적 생성 적용
- 신고 및 완료 사진 5장 지원 (photo_path3, photo_path4, photo_path5 추가)
- 엑셀 일일 리포트 개선:
- 사진 5장 모두 한 행에 일렬 배치 (A, C, E, G, I 열)
- 상태별 색상 구분 (지연중: 빨강, 진행중: 노랑, 완료: 진한 초록)
- 우선순위 기반 정렬 (지연중 → 진행중 → 완료됨)
- 프로젝트 현황 통계 박스 UI 개선 (색상 구분)
- 프론트엔드 모든 페이지 5장 사진 표시 (flex-wrap 레이아웃)
- 관리함, 수신함, 현황판, 신고내용 확인 페이지
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- backend: completion_rejection_reason 등 전용 필드 추가
- 기존 management_comment에 섞여있던 완료 반려 내용 분리
- 현황판: 완료 반려 내역 별도 카드로 표시
- 관리함: 해결방안에 완료 반려 내용 제외하여 표시
- DB 마이그레이션: completion_rejected_at, completion_rejected_by_id, completion_rejection_reason 필드 추가
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
주요 변경사항:
- 비활성화된 프로젝트 관리 기능 추가
* 프로젝트 관리 페이지에 접을 수 있는 비활성 프로젝트 섹션 추가
* 비활성화된 프로젝트 복구 기능 제공
* 업로드 시에는 활성 프로젝트만 표시되도록 API 호출 분리
- 헤더 비밀번호 변경 기능 완전 구현
* CommonHeader.js에 완전한 비밀번호 변경 모달 구현
* ESC 키 지원, 실시간 유효성 검사, 토스트 메시지 추가
* 중복 코드 제거 및 통일된 함수 호출 구조
- 수신함 수정 내용 표시 문제 해결
* description 우선 표시로 최신 수정 내용 반영
* 관리함에서 final_description/final_category 업데이트 로직 추가
- 현황판 날짜 그룹화 개선
* 업로드일 기준에서 관리함 진입일(reviewed_at) 기준으로 변경
* Invalid Date 오류 해결
- 프로젝트 관리 페이지 JavaScript 오류 수정
* 중복 변수 선언 및 함수 참조 오류 해결
* 페이지 초기화 로직 개선
기술적 개선:
- API 호출 최적화 (active_only 매개변수 명시적 전달)
- 프론트엔드 표시 우선순위 통일 (description || final_description)
- 백엔드 final_* 필드 업데이트 로직 추가
✨ 새로운 기능:
- 완료됨 탭을 테이블에서 카드 형식으로 완전 변경
- 완료 시 입력한 모든 정보를 포괄적으로 표시
- 3단 구조로 정보 체계화 (기본정보 | 관리정보 | 완료정보)
🎨 UI/UX 개선:
- 진행 중 탭과 일관된 카드 디자인 적용
- 녹색 테마로 완료 상태 시각화
- 반응형 3단 그리드 레이아웃
- HEIC 완료 사진 다운로드 지원
📋 포함된 완료 정보:
- 완료 사진 (HEIC 지원)
- 완료 코멘트
- 완료 신청일
- 해결방안, 담당부서/담당자
- 원인부서, 관리 코멘트
- 원본 업로드 사진
🔧 기술적 개선:
- getDepartmentText() 함수 추가 (부서 코드 한글 변환)
- 레거시 테이블 헤더 함수 정리
- 카드 기반 통합 렌더링 시스템
✨ 새로운 기능:
- iPhone HEIC 사진 업로드 지원 (pillow-heif 라이브러리 추가)
- 완료 사진 업로드/교체 기능
- 완료 코멘트 수정 기능
- 통합 이슈 수정 모달 (진행 중/완료 대기 공통)
🔧 기술적 개선:
- HEIC 파일 자동 감지 및 원본 저장
- Base64 이미지 처리 로직 강화
- 상세한 디버깅 로그 추가
- 프론트엔드 파일 정보 로깅
📝 문서화:
- 배포 가이드 (DEPLOYMENT_GUIDE_20251026.md) 추가
- DB 변경사항 로그 업데이트
- 마이그레이션 스크립트 (020_add_management_completion_fields.sql)
🐛 버그 수정:
- loadManagementData -> initializeManagement 함수명 통일
- 모달 저장 후 즉시 닫히는 문제 해결
- 422 Unprocessable Entity 오류 해결
🔧 통합 수정 모달:
- 모든 진행 중 상태에서 '확인' 버튼으로 모달 열기
- 완료 대기 상태에서도 '수정' 버튼으로 동일 모달 사용
- 6열 와이드 모달로 모든 정보 한눈에 표시
📝 모달 구성:
- 왼쪽: 기본 정보 (프로젝트, 부적합명, 상세내용, 원인분류, 업로드 사진)
- 오른쪽: 관리 정보 (해결방안, 담당부서/자, 조치예상일) + 완료 신청 정보
🎯 버튼 시스템 개선:
- 일반 진행 중: 저장 | 확인 | 완료처리
- 완료 대기: 반려 | 수정 | 최종확인
- 모달에서 통합 수정 가능
✏️ 수정 기능:
- 부적합명, 상세내용 직접 수정
- 해결방안, 담당부서/자, 조치예상일 수정
- 모달에서 저장 시 실시간 반영
📋 히스토리 추적 방안 문서화:
- 단일 히스토리 테이블 vs 페이지별 테이블 비교
- 변경 이력 기록 서비스 클래스 설계
- 프론트엔드 히스토리 조회 모달 구현 방안
- 감사 추적, 데이터 복구, 보안 고려사항 포함
🔍 구현 우선순위:
- Phase 1: 기본 히스토리 테이블 + 관리함 이력
- Phase 2: 수신함 이력 + 히스토리 UI
- Phase 3: 데이터 복구 + 감사 보고서
💡 추가 아이디어:
- 변경 승인 워크플로우
- 자동 백업 시스템
- 변경 영향도 분석
Expected Result:
✅ 모든 진행 중 상태에서 통합 수정 모달 사용
✅ 완료 대기 상태 정보 포함 표시
✅ 체계적인 히스토리 추적 방안 수립
✅ 투명하고 추적 가능한 이슈 관리 기반 마련
📊 통계 카드 확장:
- 기존 3개 → 4개 카드로 확장
- 새로운 '완료 대기' 카드 추가
🟣 완료 대기 카드:
- 보라색 테마 (bg-purple-50)
- 모래시계 아이콘 (fas fa-hourglass-half)
- completion_requested_at 필드 기준 카운트
🔢 통계 계산 로직:
- 총 부적합: 전체 이슈 수
- 진행 중: review_status='in_progress' && !completion_requested_at
- 완료 대기: review_status='in_progress' && completion_requested_at
- 완료됨: review_status='completed'
🎨 UI 개선:
- 4열 그리드 레이아웃 (md:grid-cols-4)
- 일관된 색상 체계 유지
- 각 카드별 고유 아이콘과 색상
💡 사용자 경험:
- 완료 대기 상태를 한눈에 파악 가능
- 프로젝트 필터링 시 실시간 업데이트
- 관리자가 승인 대기 건수 즉시 확인
Expected Result:
✅ 총 부적합 | 진행 중 | 완료 대기 | 완료됨
✅ 완료 대기 건수 실시간 표시
✅ 프로젝트별 필터링 지원
✅ 시각적으로 구분되는 보라색 테마
🎯 상태별 UI 개선:
- 진행 중: 파란색 (일반 상태)
- 긴급: 주황색 (마감 3일 이내)
- 지연됨: 빨간색 (마감일 초과)
- 완료 대기: 보라색 (완료 신청 후)
🔒 완료 대기 상태 제한:
- 모든 입력 필드 비활성화 (readonly/disabled)
- 상세 내용 수정 버튼 → '완료 대기 중' 표시
- 저장 버튼 제거
- 회색 배경으로 비활성화 표시
📋 완료 대기 상태 정보 표시:
- 완료 신청 정보 섹션 추가
- 완료 사진, 코멘트, 신청일시 표시
- 보라색 테마로 구분
🔧 3단계 버튼 시스템:
1. 수정: 완료 대기 상태 해제 → 수정 모드 전환
2. 반려: 완료 신청 반려 + 사유 입력
3. 확인: 모든 정보 확인 모달 → 최종 완료 처리
📊 완료 확인 모달:
- 기본 정보 (프로젝트, 부적합명, 상세내용, 원인분류)
- 관리 정보 (해결방안, 담당부서/자, 조치예상일)
- 완료 신청 정보 (완료 사진, 코멘트, 신청일시)
- 업로드 사진 (원본 사진 1, 2)
- 최종 확인 버튼
🔄 API 엔드포인트 (구현 예정):
- POST /api/issues/{id}/reset-completion (수정 모드 전환)
- POST /api/issues/{id}/reject-completion (반려 처리)
- POST /api/issues/{id}/final-completion (최종 완료)
💡 사용자 경험:
- 상태별 색상 코딩으로 직관적 구분
- 완료 대기 시 수정 불가 명확 표시
- 모든 정보 한눈에 확인 가능한 모달
- 단계별 승인 프로세스
Expected Result:
✅ 완료 대기 상태 시각적 구분
✅ 수정 기능 적절한 제한
✅ 체계적인 완료 승인 프로세스
✅ 관리자 친화적 인터페이스
🐛 해결된 오류들:
1️⃣ ReferenceError: allIssues 변수 참조 오류:
- allIssues → issues로 변수명 수정
- 관리함 페이지에서 사용하는 올바른 변수명 적용
- cancelDetailEdit(), saveDetailEdit() 함수에서 수정
2️⃣ TypeError: additionalInfoForm 요소 참조 오류:
- document.getElementById() 결과 null 체크 추가
- 요소가 존재할 때만 이벤트 리스너 등록
- 안전한 DOM 요소 접근으로 개선
🔧 코드 안정성 개선:
- DOM 요소 존재 여부 확인 후 접근
- 변수 스코프 일관성 유지
- 오류 방지를 위한 방어적 프로그래밍
💡 수정 사항:
- issues.find() 사용으로 올바른 데이터 접근
- if (additionalInfoForm) 조건부 이벤트 리스너 등록
- 중괄호 누락 문제 해결
Expected Result:
✅ 상세 내용 편집 기능 정상 작동
✅ JavaScript 오류 없는 안정적인 실행
✅ DOM 요소 안전 접근
✅ 일관된 변수 참조
📝 상세 내용 인라인 편집 시스템:
🎨 프론트엔드 UI 개선:
- 상세 내용 섹션에 '수정' 버튼 추가
- 읽기 모드 ↔ 편집 모드 토글 기능
- 편집 시 텍스트 영역으로 전환
- 취소/저장 버튼으로 편집 제어
- 실시간 UI 업데이트
🔧 백엔드 API 확장:
- PUT /api/management/{issue_id} 엔드포인트 추가
- ManagementUpdateRequest에 final_description 필드 추가
- 진행중 상태 이슈만 수정 가능하도록 제한
- 권한 검증 및 오류 처리
💡 핵심 기능:
- 부적합명은 유지하고 상세 내용만 수정
- 수신함에서 입력한 상세 부분을 관리함에서 보완 가능
- 원본 데이터와 수정 데이터 자동 결합
- 실시간 저장 및 화면 반영
🔐 보안 및 제한사항:
- 관리함 페이지 권한 필요
- 진행중 상태 이슈만 편집 가능
- 완료된 이슈는 편집 불가
- 사용자 인증 및 권한 검증
🎯 사용 시나리오:
1. 관리함 진행중 탭에서 '수정' 버튼 클릭
2. 텍스트 영역에서 상세 내용 편집
3. 저장 시 부적합명과 자동 결합
4. 실시간으로 화면에 반영
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:
✅ 부적합 정보의 체계적 관리
✅ 한눈에 파악 가능한 제목 표시
✅ 상세 내용과 요약 정보 분리
✅ 전체 워크플로우 일관성 향상
🎯 관리함 진행중 페이지 추가 정보 입력 시스템:
📊 DB 구조 확장:
- responsible_person_detail: 해당자 상세 정보 (VARCHAR 200)
- cause_detail: 원인 상세 정보 (TEXT)
- additional_info_updated_at: 추가 정보 입력 시간
- additional_info_updated_by_id: 추가 정보 입력자 ID
- 018_add_additional_info_fields.sql 마이그레이션 실행 완료
🔧 백엔드 API:
- /api/management/{issue_id}/additional-info (PUT): 추가 정보 업데이트
- /api/management/{issue_id}/additional-info (GET): 추가 정보 조회
- AdditionalInfoUpdateRequest 스키마 추가
- management.py 라우터 생성 및 등록
🎨 프론트엔드 UI:
- 진행중 탭 상단에 '추가 정보 입력' 버튼 추가
- 완료됨 탭에서는 버튼 자동 숨김
- 세련된 모달 디자인 (오렌지 테마)
- 원인부서 드롭다운 (생산/품질/구매/설계/영업)
- 해당자 상세 입력 필드
- 원인 상세 텍스트 영역
💡 핵심 특징:
- 모든 필드 선택사항 (NULL 허용)
- 기록용 정보로 외부 노출 없음
- 기존 데이터 자동 로드 및 수정 가능
- 입력 시간/입력자 자동 추적
- 진행중 상태 이슈만 대상
🔐 권한 관리:
- issues_management 페이지 권한 필요
- 진행중 상태 이슈만 수정 가능
- 사용자별 입력 이력 추적
🎯 사용 시나리오:
1. 관리함 > 진행중 탭 접근
2. '추가 정보 입력' 버튼 클릭
3. 원인부서, 해당자, 원인상세 입력
4. 저장 후 내부 기록으로 보관
Expected Result:
✅ 관리함에서 상세한 원인 정보 기록 가능
✅ 체계적인 이슈 추적 및 분석 기반 마련
✅ 선택적 정보 입력으로 유연한 운영
✅ 깔끔한 UI로 사용자 경험 향상
🎨 관리함 UI 개선사항:
1️⃣ 진행중 카드 헤더:
- ❌ 단순한 파란색 배지 → ✅ 그라데이션 텍스트 + 애니메이션 점
- 현황판과 동일한 세련된 스타일 적용
2️⃣ 완료됨 테이블 No. 셀:
- ❌ 단순한 텍스트 → ✅ 녹색 그라데이션 + 상태 점
- 완료 상태를 시각적으로 강조
3️⃣ 테이블 헤더 개선:
- 진행중: 파란색 그라데이션 + 애니메이션 점
- 완료됨: 녹색 그라데이션 + 상태 점
- 각 탭의 성격에 맞는 색상 구분
4️⃣ 모달 제목 개선:
- ❌ 단순한 텍스트 → ✅ 그라데이션 No. + 상태 점
- '부적합 No.1 상세 정보' 형태로 시각적 강조
🎯 시각적 개선 효과:
- 프로젝트별 순번이 더욱 눈에 띄게 표시
- 진행중(파란색) vs 완료됨(녹색) 상태 구분
- 현황판과 일관된 디자인 언어
- 애니메이션 효과로 생동감 추가
Expected Result:
✅ 관리함에서 No.1, No.2... 가 세련되게 표시
✅ 상태별 색상 구분으로 직관적 인식
✅ 전체적으로 통일된 브랜드 경험
🎯 Card-Based Interface for In-Progress Issues:
- 테이블 형태에서 카드 형태로 완전 변경
- 입력하기 편한 사용자 친화적 인터페이스 구현
- 진행 중/완료됨 탭별 다른 레이아웃 적용
📋 Enhanced Card Layout:
- 2컬럼 그리드 레이아웃 (기본정보 vs 편집정보)
- 카드 헤더: No. + 프로젝트명 + 액션 버튼들
- 왼쪽: 읽기전용 정보 (내용, 원인, 업로드사진)
- 오른쪽: 편집가능 정보 (해결방안, 담당부서/담당자, 예상일)
🎨 Visual Improvements:
- 아이콘과 색상으로 필드 구분
- 호버 효과 (카드 상승, 입력 필드 확대)
- 상태 배지 및 진행 상황 표시
- 사진 썸네일 개선 (테두리, 호버 효과)
✏️ Input Field Enhancements:
- 해결방안: 3줄 textarea with placeholder
- 담당부서: 아이콘이 있는 select 드롭다운
- 담당자: placeholder가 있는 text input
- 조치예상일: date picker with 아이콘
- 모든 필드에 focus 효과 적용
🔄 Tab-Specific Rendering:
- 진행 중: 카드 형식 (space-y-4 컨테이너)
- 완료됨: 테이블 형식 (기존 유지)
- displayIssues()에서 currentTab에 따른 조건부 렌더링
🎯 User Experience Focus:
- 입력하기 편한 넓은 필드들
- 시각적으로 구분되는 정보 영역
- 직관적인 아이콘과 라벨링
- 부드러운 애니메이션 효과
🔧 Technical Implementation:
- createInProgressRow(): 카드 HTML 생성
- CSS 애니메이션 및 호버 효과
- 반응형 그리드 레이아웃 (lg:grid-cols-2)
- 아이콘 정렬 및 스타일링
Expected Result:
✅ 진행 중 이슈 입력이 훨씬 편리해짐
✅ 시각적으로 구분되는 정보 영역
✅ 카드별 독립적인 작업 공간 제공
✅ 완료됨은 기존 테이블 형태 유지
🐛 Debug Enhancement:
- 프론트엔드: 요청/응답 상세 로그 추가
- 백엔드: 각 단계별 디버그 로그 추가
- 에러 메시지 개선 (JSON 파싱 포함)
🔍 Frontend Debugging:
- console.log로 전송 데이터 확인
- response.text()로 원본 에러 메시지 확인
- JSON 파싱 실패 시 원본 텍스트 표시
🔧 Backend Debugging:
- 요청 데이터 로그 출력
- 각 필드 처리 과정 로그
- 데이터베이스 커밋 과정 로그
- 상세한 에러 메시지 제공
Expected Result:
✅ 422 오류의 정확한 원인 파악 가능
✅ 프론트엔드에서 전송하는 데이터 확인
✅ 백엔드에서 처리 과정 추적
✅ 구체적인 에러 메시지로 빠른 문제 해결
🎯 Tab-Specific Interface Design:
- 진행 중 탭: 편집 가능한 테이블 형태 (11개 컬럼)
- 완료됨 탭: 입력 여부 표시 + 클릭으로 상세보기 (13개 컬럼)
- 탭별 다른 헤더 구조로 최적화된 정보 표시
✅ 완료됨 탭 - 입력 여부 표시:
- ✅ 입력됨 (초록색 체크)
- ❌ 미입력 (회색 X)
- 사진: ✅ 2장 형태로 개수 표시
- 클릭 시 상세보기 모달 팝업
🔧 진행 중 탭 최적화:
- 완료 처리 버튼 한 줄로 표시 (white-space: nowrap)
- 불필요한 컬럼 제거 (완료확인일, 확인자, 원인부서, 의견, 조치결과, 완료사진)
- 핵심 편집 필드만 표시로 깔끔한 인터페이스
📋 완료된 이슈 상세보기 모달:
- 2컬럼 레이아웃 (읽기전용 vs 편집가능)
- 읽기전용: 프로젝트, 내용, 원인, 확인자, 업로드사진
- 편집가능: 해결방안, 담당부서, 담당자, 조치예상일, 원인부서, 의견, 완료사진
- 완료 사진 업로드 기능 포함
🎨 Enhanced UX Features:
- 완료됨 행 호버 효과 (hover:bg-blue-50)
- 모달 내 사진 클릭으로 확대보기
- 파일 업로드 → Base64 변환 → API 전송
- 저장 후 자동 목록 새로고침
🔄 Dynamic Header Generation:
- createTableHeader() 함수로 탭별 헤더 동적 생성
- 진행 중: 11개 컬럼 (편집 중심)
- 완료됨: 13개 컬럼 (검토 중심)
📊 Status Icon System:
- getStatusIcon(): 입력 여부를 시각적으로 표시
- getPhotoStatusIcon(): 사진 개수와 함께 상태 표시
- 일관된 ✅/❌ 아이콘으로 직관적 인식
🚀 Technical Implementation:
- openIssueDetailModal(): 완료된 이슈 상세보기
- createModalContent(): 동적 모달 내용 생성
- saveModalChanges(): 편집된 내용 저장
- fileToBase64(): 파일 업로드 처리
Expected Result:
✅ 진행 중: 편집 중심의 간소화된 테이블
✅ 완료됨: 입력 여부 확인 + 상세 편집 모달
✅ 완료 처리 버튼 한 줄로 깔끔한 표시
✅ 권한별 필드 구분으로 명확한 워크플로우
🎯 Major Management Page Overhaul:
- 테이블 최소 너비 2000px로 확장 (좌우 스크롤 최적화)
- 컬럼별 개별 너비 설정으로 내용에 맞는 크기 조정
- 편집 가능한 필드들 (해결방안, 담당부서, 담당자, 조치예상일, 원인부서, 의견)
- 진행 중 → 완료됨 처리 버튼 추가
📊 Enhanced Table Structure:
- 업로드 사진 2장 표시 (photo_path, photo_path2)
- 완료 사진 별도 컬럼으로 표시
- 작업 컬럼 추가 (저장 버튼)
- 완료 확인 컬럼 (진행 중: 완료 처리 버튼, 완료됨: 완료일)
✏️ Editable Fields Implementation:
- createEditableField() 함수로 동적 입력 필드 생성
- textarea, select, date, text 타입 지원
- 부서 선택 드롭다운 (생산, 품질, 구매, 설계, 영업)
- 실시간 편집 및 저장 기능
🔧 Backend API Enhancement:
- PUT /api/issues/{issue_id}/management 엔드포인트 추가
- ManagementUpdateRequest 스키마 활용
- 관리함 페이지 권한 검증
- 완료 사진 업로드 지원
📈 Smart Sequencing System:
- 수신함에서 넘어온 순서대로 No. 할당 (reviewed_at 기준)
- 프로젝트별 그룹화 후 순번 재할당
- 진행 중 A → 진행 중 B → 완료됨 C → 진행 중 D = 1, 2, 3, 4
🎨 UI/UX Improvements:
- 컬럼별 CSS 클래스로 일관된 스타일링
- 편집 가능한 필드 포커스 효과
- 사진 컨테이너로 2장 사진 깔끔한 배치
- 버튼 크기 최적화 (btn-sm 클래스)
🚀 Functional Features:
- completeIssue(): 진행 중 → 완료됨 처리
- saveIssueChanges(): 편집된 필드들 일괄 저장
- 실시간 목록 새로고침
- 확인 다이얼로그로 안전한 작업 처리
Expected Result:
✅ 좌우 스크롤로 모든 정보 편리하게 확인
✅ 관리함에서 필요한 정보 직접 입력/수정
✅ 진행 중에서 완료 처리 원클릭
✅ 수신함 순서 기반 체계적인 No. 관리
✅ 업로드 사진 2장 + 완료 사진 명확한 구분
🐛 Error Fix:
- 제거된 DOM 요소를 참조하는 기존 updateStatistics() 함수 제거
- needActionCount, processingCount 등 존재하지 않는 요소 참조 오류 해결
- TypeError: null is not an object 오류 완전 해결
🧹 Code Cleanup:
- 중복된 updateStatistics 함수 제거 (올바른 버전만 유지)
- selectedIssues 관련 불필요한 코드 제거
- toggleIssueSelection, toggleSelectAll 함수 제거
- selectedIssues 변수 선언 제거
🔧 Technical Details:
- 기존 통계 함수가 제거된 DOM 요소 참조로 인한 런타임 오류
- 새로운 통계 시스템과 충돌하는 레거시 코드 정리
- 선택 기능 미사용으로 인한 불필요한 코드 제거
✅ Result:
- 관리함 페이지 정상 로드
- 통계 기능 올바른 동작
- 깔끔한 코드베이스 유지
- 런타임 오류 완전 해결
Expected Behavior:
✅ 페이지 로드 시 오류 없음
✅ 프로젝트별 통계 정상 표시
✅ 탭 전환 시 통계 업데이트 정상 동작
📊 Statistics Section Redesign:
- 기존 5개 통계 카드에서 3개로 단순화
- 총 부적합 | 진행 중 | 완료됨 구조로 변경
- 프로젝트 선택 아래로 통계 섹션 이동
- 프로젝트별 필터링에 따른 동적 통계 업데이트
🗑️ Unnecessary Features Removal:
- 일괄 처리 버튼 제거 (다른 페이지에서 구현 예정)
- 엑셀 내보내기 버튼 제거 (다른 페이지에서 구현 예정)
- bulkAction, exportData 함수 제거
🎯 Enhanced User Experience:
- 프로젝트 선택 시 해당 프로젝트의 통계만 표시
- 탭 전환 시에도 통계 자동 업데이트
- 선택된 프로젝트 기준으로 정확한 카운트 제공
🔧 Technical Implementation:
- updateStatistics() 함수 추가
- filterIssues()에 통계 업데이트 로직 통합
- 프로젝트 필터와 탭 상태에 따른 조건부 카운팅
- 실시간 통계 반영으로 사용자 편의성 향상
💡 Logical Flow:
1. 프로젝트 선택 → 해당 프로젝트 통계 표시
2. 상태 탭 전환 → 선택된 프로젝트 내에서 상태별 필터링
3. 통계는 항상 선택된 프로젝트 기준으로 계산
Expected Result:
✅ 프로젝트별 정확한 통계 표시
✅ 총 부적합, 진행 중, 완료됨 3개 카드로 단순화
✅ 불필요한 버튼 제거로 깔끔한 UI
✅ 실시간 통계 업데이트로 향상된 UX
📅 Date Grouping Logic Improvement:
- 진행 중 탭: 업로드한 날짜(report_date) 기준으로 그룹화
- 완료됨 탭: 완료된 날짜(actual_completion_date) 기준으로 그룹화
- 완료일이 없는 경우 업로드일로 폴백
🎨 Visual Indicator Enhancement:
- 날짜 헤더에 기준 표시 추가
- 진행 중: '업로드일' 파란색 배지
- 완료됨: '완료일' 초록색 배지
- 사용자가 어떤 기준으로 그룹화되었는지 명확히 인지 가능
🔧 Technical Implementation:
- currentTab 상태에 따른 조건부 날짜 선택
- 동적 배지 색상 및 텍스트 적용
- 완료일 없는 경우 안전한 폴백 처리
💡 User Experience:
- 진행 중: 언제 업로드되었는지 시간순 확인
- 완료됨: 언제 완료되었는지 완료순 확인
- 각 탭의 목적에 맞는 날짜 기준으로 체계적 관리
Expected Result:
✅ 진행 중 탭에서는 업로드일 기준 그룹화
✅ 완료됨 탭에서는 완료일 기준 그룹화
✅ 날짜 헤더에 기준 표시로 명확한 구분
✅ 상태별 목적에 맞는 시간순 관리
📊 Complete Issue Display Redesign:
- 기존 카드 형태에서 테이블 형태로 완전 변경
- No.부터 완료 사진까지 모든 정보를 일렬로 표시
- 좌우 스크롤 가능한 테이블 구조 (min-width: 1200px)
📅 Date-based Grouping:
- 날짜별로 이슈들을 그룹화하여 표시
- 각 날짜 그룹마다 접기/펼치기 기능 구현
- 날짜 헤더 클릭으로 해당 그룹 토글 가능
- 부드러운 애니메이션 효과 적용
🗂️ Comprehensive Data Display:
- No. (프로젝트별 순번)
- 프로젝트명
- 내용 (final_description 우선, 없으면 description)
- 원인 (카테고리)
- 해결방안 (solution)
- 담당부서 (responsible_department)
- 담당자 (responsible_person)
- 조치예상일 (expected_completion_date)
- 완료확인일 (actual_completion_date)
- 확인자 (신고자 + 중복 신고자들)
- 원인부서 (cause_department)
- 의견 (management_comment)
- 조치결과 (진행 중/완료됨)
- 업로드 사진 (photo_path, photo_path2)
- 완료 사진 (completion_photo_path)
🎨 Enhanced UI/UX:
- 좌우 스크롤로 모든 정보 확인 가능
- 사진 클릭 시 확대 모달 표시
- 텍스트 오버플로우 시 툴팁으로 전체 내용 표시
- 상태별 색상 구분 (진행 중: 파란색, 완료됨: 초록색)
- 호버 효과로 행 강조
🔧 Technical Implementation:
- CSS 그리드 및 테이블 스타일링
- 반응형 스크롤 컨테이너
- 날짜 그룹 토글 애니메이션
- 사진 모달 팝업 기능
- 유틸리티 함수로 데이터 변환
🚀 User Experience:
- 한 화면에서 모든 정보 확인 가능
- 날짜별 정리로 체계적인 관리
- 접기/펼치기로 필요한 정보만 표시
- 직관적인 테이블 형태로 데이터 비교 용이
Expected Result:
✅ No.부터 사진까지 모든 정보가 테이블 형태로 표시
✅ 좌우 스크롤로 긴 데이터도 편리하게 확인
✅ 날짜별 그룹화로 체계적인 관리
✅ 접기/펼치기로 필요한 정보만 선택적 표시
✅ 사진 클릭으로 확대 보기 가능
📊 Data Filtering Improvements:
- 관리함에서 수신함에서 처리된 항목만 표시 (in_progress, completed)
- 수신함의 pending_review, disposed 상태 제외
- 올바른 워크플로우 데이터만 관리함에서 처리
🎨 UI Simplification:
- 복잡한 필터 제거 (상태, 우선순위, 담당자, 검색)
- 프로젝트 필터만 유지하여 핵심 기능에 집중
- 더 깔끔하고 직관적인 인터페이스
📋 Status Tabs Implementation:
- 프로젝트 선택 아래에 진행 중/완료됨 탭 추가
- 탭 클릭으로 상태별 이슈 분리 표시
- 진행 중(파란색), 완료됨(초록색) 시각적 구분
- 부드러운 전환 애니메이션 적용
🔧 JavaScript Logic Updates:
- currentTab 변수로 현재 선택된 탭 상태 관리
- switchTab() 함수로 탭 전환 및 스타일 업데이트
- filterIssues() 함수에서 review_status 기반 필터링
- 불필요한 필터링 로직 제거로 성능 개선
🚀 User Experience:
- 프로젝트 선택 → 상태 탭 선택으로 단순한 워크플로우
- 진행 중과 완료됨 항목을 명확히 분리
- 관리함 본연의 목적에 맞는 기능 집중
Expected Result:
✅ 수신함에서 처리된 항목만 관리함에 표시
✅ 프로젝트별 진행 중/완료됨 탭으로 분리
✅ 불필요한 필터 제거로 단순화된 UI
✅ 직관적인 탭 기반 상태 관리
📅 Sorting Order Improvements:
- 모든 이슈 목록에서 최신 항목이 위로 오도록 정렬 순서 통일
- report_date 기준 내림차순(DESC) 정렬로 일관성 확보
🔧 Backend API Updates:
- GET /api/issues/: order_by(Issue.report_date.desc()) 추가
- GET /api/issues/admin/all: order_by(Issue.report_date.desc()) 추가
- GET /api/reports/issues: order_by(Issue.report_date.desc()) 변경
🎨 Frontend Sorting Updates:
- issues-inbox.html: created_at → report_date 기준 정렬
- issues-management.html: created_at → report_date 기준 정렬
- issues-archive.html: updated_at/created_at → report_date 기준 정렬
- 폐기함 'completed' 정렬: disposed_at 우선, 없으면 report_date 사용
📋 Consistency Improvements:
- 수신함, 관리함, 폐기함 모든 페이지에서 동일한 정렬 기준 적용
- 백엔드 API와 프론트엔드 정렬 로직 일치
- 사용자 경험 향상: 최신 이슈를 먼저 확인 가능
🚀 User Experience:
- 최신 부적합 사항을 즉시 확인 가능
- 시간순 정렬로 업무 우선순위 파악 용이
- 일관된 정렬 순서로 사용자 혼란 방지
Expected Result:
✅ 모든 이슈 목록에서 최신 항목이 맨 위에 표시
✅ 백엔드 API와 프론트엔드 정렬 로직 일치
✅ 수신함/관리함/폐기함 정렬 순서 통일
✅ 사용자가 최신 이슈를 우선적으로 확인 가능
🏢 Department Management System:
- 5개 부서 지원: 생산, 품질, 구매, 설계, 영업
- 사용자 생성/수정 시 부서 선택 가능
- 부서별 사용자 분류 및 표시
📊 Database Schema Updates:
- department_type ENUM 추가 (production, quality, purchasing, design, sales)
- users 테이블에 department 컬럼 추가
- idx_users_department 인덱스 생성 (성능 최적화)
- 014_add_user_department.sql 마이그레이션 실행
🔧 Backend Enhancements:
- DepartmentType ENUM 클래스 추가 (models.py, schemas.py)
- User 모델에 department 필드 추가
- UserBase, UserUpdate 스키마에 department 필드 포함
- 기존 API 엔드포인트 자동 호환
🎨 Frontend UI Improvements:
- 사용자 추가 폼에 부서 선택 드롭다운 추가
- 사용자 목록에 부서 정보 배지 표시 (녹색 배경)
- 사용자 편집 모달 새로 구현
- 부서명 한글 변환 함수 (AuthAPI.getDepartmentLabel)
✨ User Management Features:
- 편집 버튼으로 사용자 정보 수정 가능
- 부서, 이름, 권한 실시간 변경
- 사용자 ID는 수정 불가 (읽기 전용)
- 모달 기반 직관적 UI
🔍 Visual Enhancements:
- 부서 정보 아이콘 (fas fa-building)
- 색상 코딩: 부서(녹색), 권한(빨강/파랑)
- 반응형 레이아웃 (flex-1, gap-3)
- 호버 효과 및 트랜지션
🚀 API Integration:
- AuthAPI.getDepartments() - 부서 목록 반환
- AuthAPI.getDepartmentLabel() - 부서명 변환
- AuthAPI.updateUser() - 부서 정보 포함 업데이트
- 기존 createUser API 확장 지원
Expected Result:
✅ 사용자 생성 시 부서 선택 가능
✅ 사용자 목록에 부서 정보 표시
✅ 편집 버튼으로 부서 변경 가능
✅ 5개 부서 분류 시스템 완성
✅ 직관적인 사용자 관리 UI
수신함, 관리함, 폐기함 페이지를 실제로 구현하여 완전한 목록 관리 시스템 완성
Pages Created:
- issues-inbox.html: 수신함 페이지
* 새로 등록된 부적합 확인
* 읽음/안읽음 상태 관리
* 실시간 통계 대시보드
* 필터링 및 정렬 기능
- issues-management.html: 관리함 페이지
* 부적합 상태 변경 및 처리
* 일괄 처리 기능
* 담당자 배정 (향후 구현)
* 우선순위 관리
- issues-archive.html: 폐기함 페이지
* 완료/폐기된 부적합 보관
* 통계 차트 및 분석
* 기간별 필터링
* 데이터 내보내기 기능
Common Features:
- 공통 헤더 및 권한 시스템 통합
- 반응형 모바일 최적화 디자인
- 실시간 데이터 로딩 및 필터링
- 프로젝트별 분류 및 검색
- 사용자 친화적 UI/UX
Technical:
- 각 페이지별 고유한 기능과 UI
- 권한 기반 접근 제어
- API 연동 및 에러 처리
- 로컬 스토리지 활용 (읽음 상태 등)
- 성능 최적화된 렌더링
