11b03348f9
🎯 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: ✅ 진행 중: 편집 중심의 간소화된 테이블 ✅ 완료됨: 입력 여부 확인 + 상세 편집 모달 ✅ 완료 처리 버튼 한 줄로 깔끔한 표시 ✅ 권한별 필드 구분으로 명확한 워크플로우
56 KiB
56 KiB