20ebf530f9ceac28f7cd5eb9208e33af44741bd6
📊 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.부터 사진까지 모든 정보가 테이블 형태로 표시 ✅ 좌우 스크롤로 긴 데이터도 편리하게 확인 ✅ 날짜별 그룹화로 체계적인 관리 ✅ 접기/펼치기로 필요한 정보만 선택적 표시 ✅ 사진 클릭으로 확대 보기 가능
M-Project - 작업보고서 시스템
간단하고 효율적인 부적합 사항 관리 및 공수 계산 시스템
🚀 빠른 시작
Docker를 사용한 실행 (권장)
- Docker 컨테이너 실행:
cd M-Project
docker-compose up -d
- 브라우저에서 접속:
http://localhost:16080
- 로그인:
- 관리자:
hyungi/djg3-jj34-X3Q3 - 검사자1:
inspector1/pass123 - 검사자2:
inspector2/pass456
간단한 웹 서버 실행 (개발용)
cd M-Project
python3 -m http.server 16080
📱 주요 기능
1. 프로젝트 관리 (신규 추가 ✨)
- Job No. 기반 프로젝트 생성
- 관리자 전용 프로젝트 생성 배너
- 프로젝트 목록 조회 및 관리
2. 부적합 등록 (모바일 최적화)
- 사진 촬영 또는 업로드 (최대 2장)
- 카테고리별 분류 (자재누락, 설계미스, 입고자재 불량, 검사미스)
- 상세 설명 입력
3. 목록 관리
- 등록된 부적합 사항 조회
- 작업 시간 입력
- 상태 변경 (신규→진행중→완료)
- 추가 메모 작성
4. 일일 공수 관리
- 작업자 수 및 정규/야근 시간 입력
- 날짜별 공수 추적
- 자동 계산 기능
5. 보고서
- 작업 기간 및 총 공수 자동 계산
- 카테고리별 통계
- 부적합 사항 상세 내역
- 인쇄 가능한 형식
📁 파일 구조
M-Project/
├── index.html # 메인 애플리케이션
├── Rules.md # 시스템 규칙 및 요구사항
└── README.md # 이 파일
🛠️ 기술 스택
- Backend: FastAPI (Python), SQLAlchemy, PostgreSQL
- Frontend: HTML5, Tailwind CSS, JavaScript (Vanilla)
- Database: PostgreSQL 15
- Container: Docker & Docker Compose
- Web Server: Nginx
- Authentication: JWT (JSON Web Token)
- Icons: Font Awesome
📋 데이터 구조
부적합 사항은 다음과 같은 형식으로 저장됩니다:
{
id: 1234567890, // 타임스탬프
photo: "data:image/jpeg;base64...", // Base64 이미지
location: "2층 회의실", // 위치
category: "safety", // 카테고리
description: "안전 장비 미착용", // 설명
urgency: "high", // 긴급도
status: "new", // 상태
reporter: "inspector1", // 보고자 ID
reporterName: "검사자1", // 보고자 이름
reportDate: "2025-09-17T10:30:00", // 보고 일시
workHours: 2.5, // 작업 시간
detailNotes: "추가 메모..." // 상세 메모
}
⚡ 특징
- 모바일 우선: 현장에서 스마트폰으로 쉽게 입력
- 실시간 데이터: PostgreSQL 데이터베이스로 실시간 동기화
- 권한 관리: 관리자/일반 사용자 역할 기반 접근 제어
- Docker 기반: 간편한 배포 및 확장성
- RESTful API: 표준 API 설계로 확장 가능
🔒 보안 기능
- JWT 인증: 토큰 기반 보안 인증 시스템
- 비밀번호 암호화: bcrypt 해시를 사용한 안전한 비밀번호 저장
- 권한 기반 접근: 역할별 API 접근 제어
- SQL 인젝션 방지: SQLAlchemy ORM 사용
📚 문서
- DATABASE_SCHEMA.md: 데이터베이스 스키마 상세 문서
- API_DOCUMENTATION.md: API 엔드포인트 문서
- PROJECT_OVERVIEW.md: 프로젝트 전체 구조 및 가이드
📝 라이선스
내부 사용 목적으로 제작됨
최종 업데이트: 2024-10-24
버전: 1.0.0 (프로젝트 관리 기능 추가)
Description
Languages
HTML
66.2%
Python
13.6%
JavaScript
13.4%
PLpgSQL
5%
Shell
1.3%
Other
0.5%