feat: 3-System 분리 프로젝트 초기 코드 작성

TK-FB(공장관리+신고)와 M-Project(부적합관리)를 3개 독립 시스템으로
분리하기 위한 전체 코드 구조 작성.
- SSO 인증 서비스 (bcrypt + pbkdf2 이중 해시 지원)
- System 1: 공장관리 (TK-FB 기반, 신고 코드 제거)
- System 2: 신고 (TK-FB에서 workIssue 코드 추출)
- System 3: 부적합관리 (M-Project 기반)
- Gateway 포털 (path-based 라우팅)
- 통합 docker-compose.yml 및 배포 스크립트

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

system2-report/api/Dockerfile

@@ -0,0 +1,19 @@
+FROM node:18-alpine
+
+WORKDIR /usr/src/app
+
+COPY package*.json ./
+RUN npm ci --only=production
+
+COPY . .
+
+RUN mkdir -p logs uploads
+RUN chown -R node:node /usr/src/app
+USER node
+
+EXPOSE 3005
+
+HEALTHCHECK --interval=30s --timeout=3s --start-period=20s --retries=3 \
+  CMD node -e "require('http').get('http://localhost:3005/api/health', (res) => { process.exit(res.statusCode === 200 ? 0 : 1); })"
+
+CMD ["node", "index.js"]

system2-report/api/config/database.js

@@ -0,0 +1,79 @@
+/**
+ * 데이터베이스 연결 설정
+ *
+ * MySQL/MariaDB 커넥션 풀 관리
+ * - 환경 변수 기반 설정
+ * - 자동 재연결 (최대 5회 재시도)
+ * - UTF-8MB4 문자셋 지원
+ *
+ * @author TK-FB-Project
+ * @since 2025-12-11
+ */
+
+require('dotenv').config();
+const mysql = require('mysql2/promise');
+const retry = require('async-retry');
+const logger = require('../utils/logger');
+
+let pool = null;
+
+async function initPool() {
+  if (pool) return pool;
+
+  const {
+    DB_HOST, DB_PORT, DB_USER,
+    DB_PASSWORD, DB_NAME,
+    DB_SOCKET, DB_CONN_LIMIT = '10'
+  } = process.env;
+
+  if (!DB_USER || !DB_PASSWORD || !DB_NAME) {
+    throw new Error('필수 환경변수(DB_USER, DB_PASSWORD, DB_NAME)가 없습니다.');
+  }
+  if (!DB_SOCKET && !DB_HOST) {
+    throw new Error('DB_SOCKET이 없으면 DB_HOST가 반드시 필요합니다.');
+  }
+
+  await retry(async () => {
+    const config = {
+      user: DB_USER,
+      password: DB_PASSWORD,
+      database: DB_NAME,
+      waitForConnections: true,
+      connectionLimit: parseInt(DB_CONN_LIMIT, 10),
+      queueLimit: 0,
+      charset: 'utf8mb4'
+    };
+    if (DB_SOCKET) {
+      config.socketPath = DB_SOCKET;
+    } else {
+      config.host = DB_HOST;
+      config.port = parseInt(DB_PORT, 10);
+    }
+
+    pool = mysql.createPool(config);
+
+    // 첫 연결 검증
+    const conn = await pool.getConnection();
+    await conn.query('SET NAMES utf8mb4');
+    conn.release();
+
+    const connectionInfo = DB_SOCKET ? `socket=${DB_SOCKET}` : `${DB_HOST}:${DB_PORT}`;
+    logger.info('MariaDB 연결 성공', {
+      connection: connectionInfo,
+      database: DB_NAME,
+      connectionLimit: parseInt(DB_CONN_LIMIT, 10)
+    });
+  }, {
+    retries: 5,
+    factor: 2,
+    minTimeout: 1000
+  });
+
+  return pool;
+}
+
+async function getDb() {
+  return initPool();
+}
+
+module.exports = { getDb };

system2-report/api/controllers/workIssueController.js

@@ -0,0 +1,674 @@
+/**
+ * 작업 중 문제 신고 컨트롤러
+ */
+
+const workIssueModel = require('../models/workIssueModel');
+const imageUploadService = require('../services/imageUploadService');
+
+// ==================== 신고 카테고리 관리 ====================
+
+/**
+ * 모든 카테고리 조회
+ */
+exports.getAllCategories = (req, res) => {
+  workIssueModel.getAllCategories((err, categories) => {
+    if (err) {
+      console.error('카테고리 조회 실패:', err);
+      return res.status(500).json({ success: false, error: '카테고리 조회 실패' });
+    }
+    res.json({ success: true, data: categories });
+  });
+};
+
+/**
+ * 타입별 카테고리 조회
+ */
+exports.getCategoriesByType = (req, res) => {
+  const { type } = req.params;
+
+  if (!['nonconformity', 'safety'].includes(type)) {
+    return res.status(400).json({ success: false, error: '유효하지 않은 카테고리 타입입니다.' });
+  }
+
+  workIssueModel.getCategoriesByType(type, (err, categories) => {
+    if (err) {
+      console.error('카테고리 조회 실패:', err);
+      return res.status(500).json({ success: false, error: '카테고리 조회 실패' });
+    }
+    res.json({ success: true, data: categories });
+  });
+};
+
+/**
+ * 카테고리 생성
+ */
+exports.createCategory = (req, res) => {
+  const { category_type, category_name, description, display_order } = req.body;
+
+  if (!category_type || !category_name) {
+    return res.status(400).json({ success: false, error: '카테고리 타입과 이름은 필수입니다.' });
+  }
+
+  workIssueModel.createCategory(
+    { category_type, category_name, description, display_order },
+    (err, categoryId) => {
+      if (err) {
+        console.error('카테고리 생성 실패:', err);
+        return res.status(500).json({ success: false, error: '카테고리 생성 실패' });
+      }
+      res.status(201).json({
+        success: true,
+        message: '카테고리가 생성되었습니다.',
+        data: { category_id: categoryId }
+      });
+    }
+  );
+};
+
+/**
+ * 카테고리 수정
+ */
+exports.updateCategory = (req, res) => {
+  const { id } = req.params;
+  const { category_name, description, display_order, is_active } = req.body;
+
+  workIssueModel.updateCategory(
+    id,
+    { category_name, description, display_order, is_active },
+    (err, result) => {
+      if (err) {
+        console.error('카테고리 수정 실패:', err);
+        return res.status(500).json({ success: false, error: '카테고리 수정 실패' });
+      }
+      res.json({ success: true, message: '카테고리가 수정되었습니다.' });
+    }
+  );
+};
+
+/**
+ * 카테고리 삭제
+ */
+exports.deleteCategory = (req, res) => {
+  const { id } = req.params;
+
+  workIssueModel.deleteCategory(id, (err, result) => {
+    if (err) {
+      console.error('카테고리 삭제 실패:', err);
+      return res.status(500).json({ success: false, error: '카테고리 삭제 실패' });
+    }
+    res.json({ success: true, message: '카테고리가 삭제되었습니다.' });
+  });
+};
+
+// ==================== 사전 정의 항목 관리 ====================
+
+/**
+ * 카테고리별 항목 조회
+ */
+exports.getItemsByCategory = (req, res) => {
+  const { categoryId } = req.params;
+
+  workIssueModel.getItemsByCategory(categoryId, (err, items) => {
+    if (err) {
+      console.error('항목 조회 실패:', err);
+      return res.status(500).json({ success: false, error: '항목 조회 실패' });
+    }
+    res.json({ success: true, data: items });
+  });
+};
+
+/**
+ * 모든 항목 조회
+ */
+exports.getAllItems = (req, res) => {
+  workIssueModel.getAllItems((err, items) => {
+    if (err) {
+      console.error('항목 조회 실패:', err);
+      return res.status(500).json({ success: false, error: '항목 조회 실패' });
+    }
+    res.json({ success: true, data: items });
+  });
+};
+
+/**
+ * 항목 생성
+ */
+exports.createItem = (req, res) => {
+  const { category_id, item_name, description, severity, display_order } = req.body;
+
+  if (!category_id || !item_name) {
+    return res.status(400).json({ success: false, error: '카테고리 ID와 항목명은 필수입니다.' });
+  }
+
+  workIssueModel.createItem(
+    { category_id, item_name, description, severity, display_order },
+    (err, itemId) => {
+      if (err) {
+        console.error('항목 생성 실패:', err);
+        return res.status(500).json({ success: false, error: '항목 생성 실패' });
+      }
+      res.status(201).json({
+        success: true,
+        message: '항목이 생성되었습니다.',
+        data: { item_id: itemId }
+      });
+    }
+  );
+};
+
+/**
+ * 항목 수정
+ */
+exports.updateItem = (req, res) => {
+  const { id } = req.params;
+  const { item_name, description, severity, display_order, is_active } = req.body;
+
+  workIssueModel.updateItem(
+    id,
+    { item_name, description, severity, display_order, is_active },
+    (err, result) => {
+      if (err) {
+        console.error('항목 수정 실패:', err);
+        return res.status(500).json({ success: false, error: '항목 수정 실패' });
+      }
+      res.json({ success: true, message: '항목이 수정되었습니다.' });
+    }
+  );
+};
+
+/**
+ * 항목 삭제
+ */
+exports.deleteItem = (req, res) => {
+  const { id } = req.params;
+
+  workIssueModel.deleteItem(id, (err, result) => {
+    if (err) {
+      console.error('항목 삭제 실패:', err);
+      return res.status(500).json({ success: false, error: '항목 삭제 실패' });
+    }
+    res.json({ success: true, message: '항목이 삭제되었습니다.' });
+  });
+};
+
+// ==================== 문제 신고 관리 ====================
+
+/**
+ * 신고 생성
+ */
+exports.createReport = async (req, res) => {
+  try {
+    const {
+      factory_category_id,
+      workplace_id,
+      custom_location,
+      tbm_session_id,
+      visit_request_id,
+      issue_category_id,
+      issue_item_id,
+      custom_item_name, // 직접 입력한 항목명
+      additional_description,
+      photos = []
+    } = req.body;
+
+    const reporter_id = req.user.user_id;
+
+    if (!issue_category_id) {
+      return res.status(400).json({ success: false, error: '신고 카테고리는 필수입니다.' });
+    }
+
+    // 위치 정보 검증 (지도 선택 또는 기타 위치)
+    if (!factory_category_id && !custom_location) {
+      return res.status(400).json({ success: false, error: '위치 정보는 필수입니다.' });
+    }
+
+    // 항목 검증 (기존 항목 또는 직접 입력)
+    if (!issue_item_id && !custom_item_name) {
+      return res.status(400).json({ success: false, error: '신고 항목은 필수입니다.' });
+    }
+
+    // 직접 입력한 항목이 있으면 DB에 저장
+    let finalItemId = issue_item_id;
+    if (custom_item_name && !issue_item_id) {
+      try {
+        finalItemId = await new Promise((resolve, reject) => {
+          workIssueModel.createItem(
+            {
+              category_id: issue_category_id,
+              item_name: custom_item_name,
+              description: '사용자 직접 입력',
+              severity: 'medium',
+              display_order: 999 // 마지막에 표시
+            },
+            (err, itemId) => {
+              if (err) reject(err);
+              else resolve(itemId);
+            }
+          );
+        });
+      } catch (itemErr) {
+        console.error('커스텀 항목 생성 실패:', itemErr);
+        return res.status(500).json({ success: false, error: '항목 저장 실패' });
+      }
+    }
+
+    // 사진 저장 (최대 5장)
+    const photoPaths = {
+      photo_path1: null,
+      photo_path2: null,
+      photo_path3: null,
+      photo_path4: null,
+      photo_path5: null
+    };
+
+    for (let i = 0; i < Math.min(photos.length, 5); i++) {
+      if (photos[i]) {
+        const savedPath = await imageUploadService.saveBase64Image(photos[i], 'issue');
+        if (savedPath) {
+          photoPaths[`photo_path${i + 1}`] = savedPath;
+        }
+      }
+    }
+
+    const reportData = {
+      reporter_id,
+      factory_category_id: factory_category_id || null,
+      workplace_id: workplace_id || null,
+      custom_location: custom_location || null,
+      tbm_session_id: tbm_session_id || null,
+      visit_request_id: visit_request_id || null,
+      issue_category_id,
+      issue_item_id: finalItemId || null,
+      additional_description: additional_description || null,
+      ...photoPaths
+    };
+
+    workIssueModel.createReport(reportData, (err, reportId) => {
+      if (err) {
+        console.error('신고 생성 실패:', err);
+        return res.status(500).json({ success: false, error: '신고 생성 실패' });
+      }
+      res.status(201).json({
+        success: true,
+        message: '문제 신고가 등록되었습니다.',
+        data: { report_id: reportId }
+      });
+    });
+  } catch (error) {
+    console.error('신고 생성 에러:', error);
+    res.status(500).json({ success: false, error: '서버 오류가 발생했습니다.' });
+  }
+};
+
+/**
+ * 신고 목록 조회
+ */
+exports.getAllReports = (req, res) => {
+  const filters = {
+    status: req.query.status,
+    category_type: req.query.category_type,
+    issue_category_id: req.query.issue_category_id,
+    factory_category_id: req.query.factory_category_id,
+    workplace_id: req.query.workplace_id,
+    assigned_user_id: req.query.assigned_user_id,
+    start_date: req.query.start_date,
+    end_date: req.query.end_date,
+    search: req.query.search,
+    limit: req.query.limit,
+    offset: req.query.offset
+  };
+
+  // 일반 사용자는 자신의 신고만 조회 (관리자 제외)
+  const userLevel = req.user.access_level;
+  if (!['admin', 'system', 'support_team'].includes(userLevel)) {
+    filters.reporter_id = req.user.user_id;
+  }
+
+  workIssueModel.getAllReports(filters, (err, reports) => {
+    if (err) {
+      console.error('신고 목록 조회 실패:', err);
+      return res.status(500).json({ success: false, error: '신고 목록 조회 실패' });
+    }
+    res.json({ success: true, data: reports });
+  });
+};
+
+/**
+ * 신고 상세 조회
+ */
+exports.getReportById = (req, res) => {
+  const { id } = req.params;
+
+  workIssueModel.getReportById(id, (err, report) => {
+    if (err) {
+      console.error('신고 상세 조회 실패:', err);
+      return res.status(500).json({ success: false, error: '신고 상세 조회 실패' });
+    }
+
+    if (!report) {
+      return res.status(404).json({ success: false, error: '신고를 찾을 수 없습니다.' });
+    }
+
+    // 권한 확인: 본인, 담당자, 또는 관리자
+    const userLevel = req.user.access_level;
+    const isOwner = report.reporter_id === req.user.user_id;
+    const isAssignee = report.assigned_user_id === req.user.user_id;
+    const isManager = ['admin', 'system', 'support_team'].includes(userLevel);
+
+    if (!isOwner && !isAssignee && !isManager) {
+      return res.status(403).json({ success: false, error: '권한이 없습니다.' });
+    }
+
+    res.json({ success: true, data: report });
+  });
+};
+
+/**
+ * 신고 수정
+ */
+exports.updateReport = async (req, res) => {
+  try {
+    const { id } = req.params;
+
+    // 기존 신고 확인
+    workIssueModel.getReportById(id, async (err, report) => {
+      if (err) {
+        console.error('신고 조회 실패:', err);
+        return res.status(500).json({ success: false, error: '신고 조회 실패' });
+      }
+
+      if (!report) {
+        return res.status(404).json({ success: false, error: '신고를 찾을 수 없습니다.' });
+      }
+
+      // 권한 확인
+      const userLevel = req.user.access_level;
+      const isOwner = report.reporter_id === req.user.user_id;
+      const isManager = ['admin', 'system'].includes(userLevel);
+
+      if (!isOwner && !isManager) {
+        return res.status(403).json({ success: false, error: '수정 권한이 없습니다.' });
+      }
+
+      // 상태 확인: reported 상태에서만 수정 가능 (관리자 제외)
+      if (!isManager && report.status !== 'reported') {
+        return res.status(400).json({ success: false, error: '이미 접수된 신고는 수정할 수 없습니다.' });
+      }
+
+      const {
+        factory_category_id,
+        workplace_id,
+        custom_location,
+        issue_category_id,
+        issue_item_id,
+        additional_description,
+        photos = []
+      } = req.body;
+
+      // 사진 업데이트 처리
+      const photoPaths = {};
+      for (let i = 0; i < Math.min(photos.length, 5); i++) {
+        if (photos[i]) {
+          // 기존 사진 삭제
+          const oldPath = report[`photo_path${i + 1}`];
+          if (oldPath) {
+            await imageUploadService.deleteFile(oldPath);
+          }
+          // 새 사진 저장
+          const savedPath = await imageUploadService.saveBase64Image(photos[i], 'issue');
+          if (savedPath) {
+            photoPaths[`photo_path${i + 1}`] = savedPath;
+          }
+        }
+      }
+
+      const updateData = {
+        factory_category_id,
+        workplace_id,
+        custom_location,
+        issue_category_id,
+        issue_item_id,
+        additional_description,
+        ...photoPaths
+      };
+
+      workIssueModel.updateReport(id, updateData, req.user.user_id, (updateErr, result) => {
+        if (updateErr) {
+          console.error('신고 수정 실패:', updateErr);
+          return res.status(500).json({ success: false, error: '신고 수정 실패' });
+        }
+        res.json({ success: true, message: '신고가 수정되었습니다.' });
+      });
+    });
+  } catch (error) {
+    console.error('신고 수정 에러:', error);
+    res.status(500).json({ success: false, error: '서버 오류가 발생했습니다.' });
+  }
+};
+
+/**
+ * 신고 삭제
+ */
+exports.deleteReport = async (req, res) => {
+  const { id } = req.params;
+
+  workIssueModel.getReportById(id, async (err, report) => {
+    if (err) {
+      console.error('신고 조회 실패:', err);
+      return res.status(500).json({ success: false, error: '신고 조회 실패' });
+    }
+
+    if (!report) {
+      return res.status(404).json({ success: false, error: '신고를 찾을 수 없습니다.' });
+    }
+
+    // 권한 확인
+    const userLevel = req.user.access_level;
+    const isOwner = report.reporter_id === req.user.user_id;
+    const isManager = ['admin', 'system'].includes(userLevel);
+
+    if (!isOwner && !isManager) {
+      return res.status(403).json({ success: false, error: '삭제 권한이 없습니다.' });
+    }
+
+    workIssueModel.deleteReport(id, async (deleteErr, { result, photos }) => {
+      if (deleteErr) {
+        console.error('신고 삭제 실패:', deleteErr);
+        return res.status(500).json({ success: false, error: '신고 삭제 실패' });
+      }
+
+      // 사진 파일 삭제
+      if (photos) {
+        const allPhotos = [
+          photos.photo_path1, photos.photo_path2, photos.photo_path3,
+          photos.photo_path4, photos.photo_path5,
+          photos.resolution_photo_path1, photos.resolution_photo_path2
+        ].filter(Boolean);
+        await imageUploadService.deleteMultipleFiles(allPhotos);
+      }
+
+      res.json({ success: true, message: '신고가 삭제되었습니다.' });
+    });
+  });
+};
+
+// ==================== 상태 관리 ====================
+
+/**
+ * 신고 접수
+ */
+exports.receiveReport = (req, res) => {
+  const { id } = req.params;
+
+  workIssueModel.receiveReport(id, req.user.user_id, (err, result) => {
+    if (err) {
+      console.error('신고 접수 실패:', err);
+      return res.status(400).json({ success: false, error: err.message || '신고 접수 실패' });
+    }
+    res.json({ success: true, message: '신고가 접수되었습니다.' });
+  });
+};
+
+/**
+ * 담당자 배정
+ */
+exports.assignReport = (req, res) => {
+  const { id } = req.params;
+  const { assigned_department, assigned_user_id } = req.body;
+
+  if (!assigned_user_id) {
+    return res.status(400).json({ success: false, error: '담당자는 필수입니다.' });
+  }
+
+  workIssueModel.assignReport(id, {
+    assigned_department,
+    assigned_user_id,
+    assigned_by: req.user.user_id
+  }, (err, result) => {
+    if (err) {
+      console.error('담당자 배정 실패:', err);
+      return res.status(400).json({ success: false, error: err.message || '담당자 배정 실패' });
+    }
+    res.json({ success: true, message: '담당자가 배정되었습니다.' });
+  });
+};
+
+/**
+ * 처리 시작
+ */
+exports.startProcessing = (req, res) => {
+  const { id } = req.params;
+
+  workIssueModel.startProcessing(id, req.user.user_id, (err, result) => {
+    if (err) {
+      console.error('처리 시작 실패:', err);
+      return res.status(400).json({ success: false, error: err.message || '처리 시작 실패' });
+    }
+    res.json({ success: true, message: '처리가 시작되었습니다.' });
+  });
+};
+
+/**
+ * 처리 완료
+ */
+exports.completeReport = async (req, res) => {
+  try {
+    const { id } = req.params;
+    const { resolution_notes, resolution_photos = [] } = req.body;
+
+    // 완료 사진 저장
+    let resolution_photo_path1 = null;
+    let resolution_photo_path2 = null;
+
+    if (resolution_photos[0]) {
+      resolution_photo_path1 = await imageUploadService.saveBase64Image(resolution_photos[0], 'resolution');
+    }
+    if (resolution_photos[1]) {
+      resolution_photo_path2 = await imageUploadService.saveBase64Image(resolution_photos[1], 'resolution');
+    }
+
+    workIssueModel.completeReport(id, {
+      resolution_notes,
+      resolution_photo_path1,
+      resolution_photo_path2,
+      resolved_by: req.user.user_id
+    }, (err, result) => {
+      if (err) {
+        console.error('처리 완료 실패:', err);
+        return res.status(400).json({ success: false, error: err.message || '처리 완료 실패' });
+      }
+      res.json({ success: true, message: '처리가 완료되었습니다.' });
+    });
+  } catch (error) {
+    console.error('처리 완료 에러:', error);
+    res.status(500).json({ success: false, error: '서버 오류가 발생했습니다.' });
+  }
+};
+
+/**
+ * 신고 종료
+ */
+exports.closeReport = (req, res) => {
+  const { id } = req.params;
+
+  workIssueModel.closeReport(id, req.user.user_id, (err, result) => {
+    if (err) {
+      console.error('신고 종료 실패:', err);
+      return res.status(400).json({ success: false, error: err.message || '신고 종료 실패' });
+    }
+    res.json({ success: true, message: '신고가 종료되었습니다.' });
+  });
+};
+
+/**
+ * 상태 변경 이력 조회
+ */
+exports.getStatusLogs = (req, res) => {
+  const { id } = req.params;
+
+  workIssueModel.getStatusLogs(id, (err, logs) => {
+    if (err) {
+      console.error('상태 이력 조회 실패:', err);
+      return res.status(500).json({ success: false, error: '상태 이력 조회 실패' });
+    }
+    res.json({ success: true, data: logs });
+  });
+};
+
+// ==================== 통계 ====================
+
+/**
+ * 통계 요약
+ */
+exports.getStatsSummary = (req, res) => {
+  const filters = {
+    start_date: req.query.start_date,
+    end_date: req.query.end_date,
+    factory_category_id: req.query.factory_category_id
+  };
+
+  workIssueModel.getStatsSummary(filters, (err, stats) => {
+    if (err) {
+      console.error('통계 조회 실패:', err);
+      return res.status(500).json({ success: false, error: '통계 조회 실패' });
+    }
+    res.json({ success: true, data: stats });
+  });
+};
+
+/**
+ * 카테고리별 통계
+ */
+exports.getStatsByCategory = (req, res) => {
+  const filters = {
+    start_date: req.query.start_date,
+    end_date: req.query.end_date
+  };
+
+  workIssueModel.getStatsByCategory(filters, (err, stats) => {
+    if (err) {
+      console.error('카테고리별 통계 조회 실패:', err);
+      return res.status(500).json({ success: false, error: '통계 조회 실패' });
+    }
+    res.json({ success: true, data: stats });
+  });
+};
+
+/**
+ * 작업장별 통계
+ */
+exports.getStatsByWorkplace = (req, res) => {
+  const filters = {
+    start_date: req.query.start_date,
+    end_date: req.query.end_date,
+    factory_category_id: req.query.factory_category_id
+  };
+
+  workIssueModel.getStatsByWorkplace(filters, (err, stats) => {
+    if (err) {
+      console.error('작업장별 통계 조회 실패:', err);
+      return res.status(500).json({ success: false, error: '통계 조회 실패' });
+    }
+    res.json({ success: true, data: stats });
+  });
+};

system2-report/api/dbPool.js

@@ -0,0 +1,11 @@
+/**
+ * 데이터베이스 풀 (호환성 레거시 파일)
+ *
+ * @deprecated 이 파일은 하위 호환성을 위해 유지됩니다.
+ * 새로운 코드에서는 './config/database'를 직접 import하세요.
+ *
+ * @author TK-FB-Project
+ * @since 2025-12-11
+ */
+
+module.exports = require('./config/database');

system2-report/api/index.js

@@ -0,0 +1,99 @@
+/**
+ * System 2 - 신고 시스템 API Server
+ *
+ * TK-FB-Project에서 추출한 workIssue(신고) 전용 서비스
+ */
+
+require('dotenv').config();
+const express = require('express');
+const cors = require('cors');
+const rateLimit = require('express-rate-limit');
+const path = require('path');
+const logger = require('./utils/logger');
+const { AuthenticationError, ForbiddenError } = require('./utils/errors');
+
+const app = express();
+const PORT = process.env.PORT || 3005;
+
+app.set('trust proxy', 1);
+
+// CORS
+app.use(cors({
+  origin: true,
+  credentials: true
+}));
+
+// Body parser
+app.use(express.json({ limit: '10mb' }));
+app.use(express.urlencoded({ extended: true }));
+
+// Static files (uploads)
+app.use('/uploads', express.static(path.join(__dirname, 'uploads')));
+
+// Rate limiter
+const apiLimiter = rateLimit({
+  windowMs: 1 * 60 * 1000,
+  max: 500,
+  message: 'API 요청 한도를 초과했습니다.',
+  standardHeaders: true,
+  legacyHeaders: false
+});
+app.use('/api/', apiLimiter);
+
+// Health check
+app.get('/api/health', (req, res) => {
+  res.json({ status: 'ok', service: 'system2-report', timestamp: new Date().toISOString() });
+});
+
+// JWT Auth middleware (SSO 공유 시크릿)
+const jwt = require('jsonwebtoken');
+const requireAuth = (req, res, next) => {
+  try {
+    const authHeader = req.headers['authorization'];
+    if (!authHeader) {
+      throw new AuthenticationError('Authorization 헤더가 필요합니다');
+    }
+    const token = authHeader.split(' ')[1];
+    if (!token) {
+      throw new AuthenticationError('Bearer 토큰이 필요합니다');
+    }
+    const decoded = jwt.verify(token, process.env.JWT_SECRET);
+    req.user = decoded;
+    next();
+  } catch (err) {
+    if (err.name === 'JsonWebTokenError' || err.name === 'TokenExpiredError') {
+      return res.status(401).json({ success: false, error: '유효하지 않은 토큰입니다' });
+    }
+    if (err instanceof AuthenticationError) {
+      return res.status(401).json({ success: false, error: err.message });
+    }
+    next(err);
+  }
+};
+
+// Routes
+const workIssueRoutes = require('./routes/workIssueRoutes');
+
+// 인증이 필요한 API
+app.use('/api/work-issues', requireAuth, workIssueRoutes);
+
+// Error handler
+app.use((err, req, res, next) => {
+  const statusCode = err.statusCode || 500;
+  logger.error('API Error:', { error: err.message, path: req.path });
+  res.status(statusCode).json({
+    success: false,
+    error: err.message || 'Internal Server Error'
+  });
+});
+
+// 404
+app.use((req, res) => {
+  res.status(404).json({ success: false, error: 'Not Found', path: req.originalUrl });
+});
+
+app.listen(PORT, () => {
+  console.log(`System 2 (신고) API running on port ${PORT}`);
+});
+
+module.exports = app;

system2-report/api/middlewares/auth.js

@@ -0,0 +1,357 @@
+/**
+ * 통합 인증/인가 미들웨어
+ *
+ * JWT 토큰 검증 및 권한 체크를 위한 미들웨어 모음
+ *
+ * @author TK-FB-Project
+ * @since 2025-12-11
+ */
+
+const jwt = require('jsonwebtoken');
+const { AuthenticationError, ForbiddenError } = require('../utils/errors');
+const logger = require('../utils/logger');
+
+/**
+ * 권한 레벨 계층 구조
+ * 숫자가 높을수록 상위 권한
+ */
+const ACCESS_LEVELS = {
+  worker: 1,
+  group_leader: 2,
+  support_team: 3,
+  admin: 4,
+  system: 5
+};
+
+/**
+ * JWT 토큰 검증 미들웨어
+ *
+ * Authorization 헤더에서 Bearer 토큰을 추출하고 검증합니다.
+ * 검증 성공 시 req.user에 디코딩된 사용자 정보를 저장합니다.
+ *
+ * @throws {AuthenticationError} 토큰이 없거나 유효하지 않을 때
+ *
+ * @example
+ * router.get('/profile', requireAuth, getProfile);
+ */
+const requireAuth = (req, res, next) => {
+  try {
+    const authHeader = req.headers['authorization'];
+
+    if (!authHeader) {
+      logger.warn('인증 실패: Authorization 헤더 없음', {
+        path: req.path,
+        method: req.method,
+        ip: req.ip
+      });
+      throw new AuthenticationError('Authorization 헤더가 필요합니다');
+    }
+
+    const token = authHeader.split(' ')[1];
+
+    if (!token) {
+      logger.warn('인증 실패: Bearer 토큰 누락', {
+        path: req.path,
+        method: req.method,
+        ip: req.ip
+      });
+      throw new AuthenticationError('Bearer 토큰이 필요합니다');
+    }
+
+    // JWT 검증
+    const decoded = jwt.verify(token, process.env.JWT_SECRET);
+    req.user = decoded;
+
+    logger.debug('인증 성공', {
+      user_id: decoded.user_id || decoded.id,
+      username: decoded.username,
+      role: decoded.role,
+      access_level: decoded.access_level
+    });
+
+    next();
+  } catch (err) {
+    if (err.name === 'JsonWebTokenError') {
+      logger.warn('인증 실패: 유효하지 않은 토큰', {
+        error: err.message,
+        path: req.path,
+        ip: req.ip
+      });
+      throw new AuthenticationError('유효하지 않은 토큰입니다');
+    } else if (err.name === 'TokenExpiredError') {
+      logger.warn('인증 실패: 만료된 토큰', {
+        error: err.message,
+        path: req.path,
+        ip: req.ip
+      });
+      throw new AuthenticationError('토큰이 만료되었습니다');
+    } else if (err instanceof AuthenticationError) {
+      // 이미 AuthenticationError인 경우 그대로 throw
+      throw err;
+    } else {
+      logger.error('인증 처리 중 예상치 못한 오류', {
+        error: err.message,
+        stack: err.stack
+      });
+      throw new AuthenticationError('인증 처리 중 오류가 발생했습니다');
+    }
+  }
+};
+
+/**
+ * 특정 역할(들) 권한 체크 미들웨어
+ *
+ * 사용자가 지정된 역할 중 하나를 가지고 있는지 확인합니다.
+ * requireAuth 미들웨어가 먼저 실행되어야 합니다.
+ *
+ * @param {...string} roles - 허용할 역할 목록
+ * @returns {Function} Express 미들웨어 함수
+ * @throws {AuthenticationError} 인증되지 않은 경우
+ * @throws {ForbiddenError} 권한이 없는 경우
+ *
+ * @example
+ * // 단일 역할
+ * router.post('/admin/users', requireAuth, requireRole('admin'), createUser);
+ *
+ * // 여러 역할
+ * router.get('/reports', requireAuth, requireRole('admin', 'support_team'), getReports);
+ */
+const requireRole = (...roles) => {
+  return (req, res, next) => {
+    try {
+      if (!req.user) {
+        logger.warn('권한 체크 실패: 인증되지 않은 요청', {
+          path: req.path,
+          method: req.method,
+          ip: req.ip
+        });
+        throw new AuthenticationError('인증이 필요합니다');
+      }
+
+      const userRole = req.user.role;
+      const userRoleLower = userRole ? userRole.toLowerCase() : '';
+      const rolesLower = roles.map(r => r.toLowerCase());
+
+      if (!rolesLower.includes(userRoleLower)) {
+        logger.warn('권한 체크 실패: 역할 불일치', {
+          user_id: req.user.user_id || req.user.id,
+          username: req.user.username,
+          current_role: userRole,
+          required_roles: roles,
+          path: req.path
+        });
+        throw new ForbiddenError(
+          `이 기능을 사용하려면 ${roles.join(' 또는 ')} 권한이 필요합니다`
+        );
+      }
+
+      logger.debug('역할 권한 확인 성공', {
+        user_id: req.user.user_id || req.user.id,
+        username: req.user.username,
+        role: userRole,
+        required_roles: roles
+      });
+
+      next();
+    } catch (err) {
+      next(err);
+    }
+  };
+};
+
+/**
+ * 최소 권한 레벨 체크 미들웨어 (계층적)
+ *
+ * 사용자가 요구되는 최소 권한 레벨 이상인지 확인합니다.
+ * worker(1) < group_leader(2) < support_team(3) < admin(4) < system(5)
+ * requireAuth 미들웨어가 먼저 실행되어야 합니다.
+ *
+ * @param {string} minLevel - 최소 권한 레벨 (worker, group_leader, support_team, admin, system)
+ * @returns {Function} Express 미들웨어 함수
+ * @throws {AuthenticationError} 인증되지 않은 경우
+ * @throws {ForbiddenError} 권한이 부족한 경우
+ *
+ * @example
+ * // admin 이상 필요 (admin, system만 허용)
+ * router.delete('/users/:id', requireAuth, requireMinLevel('admin'), deleteUser);
+ *
+ * // group_leader 이상 필요 (group_leader, support_team, admin, system 허용)
+ * router.get('/team-reports', requireAuth, requireMinLevel('group_leader'), getTeamReports);
+ */
+const requireMinLevel = (minLevel) => {
+  return (req, res, next) => {
+    try {
+      if (!req.user) {
+        logger.warn('권한 레벨 체크 실패: 인증되지 않은 요청', {
+          path: req.path,
+          method: req.method,
+          ip: req.ip
+        });
+        throw new AuthenticationError('인증이 필요합니다');
+      }
+
+      const userLevel = ACCESS_LEVELS[req.user.access_level] || 0;
+      const requiredLevel = ACCESS_LEVELS[minLevel] || 999;
+
+      if (userLevel < requiredLevel) {
+        logger.warn('권한 레벨 체크 실패: 권한 부족', {
+          user_id: req.user.user_id || req.user.id,
+          username: req.user.username,
+          current_level: req.user.access_level,
+          current_level_value: userLevel,
+          required_level: minLevel,
+          required_level_value: requiredLevel,
+          path: req.path
+        });
+        throw new ForbiddenError(
+          `이 기능을 사용하려면 ${minLevel} 이상의 권한이 필요합니다 (현재: ${req.user.access_level})`
+        );
+      }
+
+      logger.debug('권한 레벨 확인 성공', {
+        user_id: req.user.user_id || req.user.id,
+        username: req.user.username,
+        access_level: req.user.access_level,
+        required_level: minLevel
+      });
+
+      next();
+    } catch (err) {
+      next(err);
+    }
+  };
+};
+
+/**
+ * 리소스 소유자 또는 관리자 권한 체크 미들웨어
+ *
+ * 요청한 사용자가 리소스의 소유자이거나 관리자 권한이 있는지 확인합니다.
+ * requireAuth 미들웨어가 먼저 실행되어야 합니다.
+ *
+ * @param {Object} options - 옵션 객체
+ * @param {string} options.resourceField - 리소스 ID를 가져올 req 필드 (예: 'params.user_id', 'body.worker_id')
+ * @param {string} options.userField - 사용자 ID 필드명 (기본값: 'user_id', 'id'도 자동 시도)
+ * @param {string[]} options.adminRoles - 관리자로 인정할 역할들 (기본값: ['admin', 'system'])
+ * @returns {Function} Express 미들웨어 함수
+ * @throws {AuthenticationError} 인증되지 않은 경우
+ * @throws {ForbiddenError} 소유자도 아니고 관리자도 아닌 경우
+ *
+ * @example
+ * // URL 파라미터의 user_id로 체크
+ * router.put('/users/:user_id', requireAuth, requireOwnerOrAdmin({
+ *   resourceField: 'params.user_id'
+ * }), updateUser);
+ *
+ * // 요청 body의 worker_id로 체크, support_team도 관리자로 인정
+ * router.delete('/reports/:id', requireAuth, requireOwnerOrAdmin({
+ *   resourceField: 'body.worker_id',
+ *   adminRoles: ['admin', 'system', 'support_team']
+ * }), deleteReport);
+ */
+const requireOwnerOrAdmin = (options = {}) => {
+  const {
+    resourceField = 'params.id',
+    userField = 'user_id',
+    adminRoles = ['admin', 'system']
+  } = options;
+
+  return (req, res, next) => {
+    try {
+      if (!req.user) {
+        logger.warn('소유자/관리자 체크 실패: 인증되지 않은 요청', {
+          path: req.path,
+          method: req.method,
+          ip: req.ip
+        });
+        throw new AuthenticationError('인증이 필요합니다');
+      }
+
+      // 관리자 권한 체크
+      const userRole = req.user.role;
+      const isAdmin = adminRoles.includes(userRole);
+
+      if (isAdmin) {
+        logger.debug('관리자 권한으로 접근 허용', {
+          user_id: req.user.user_id || req.user.id,
+          username: req.user.username,
+          role: userRole,
+          path: req.path
+        });
+        return next();
+      }
+
+      // 리소스 ID 추출
+      const fieldParts = resourceField.split('.');
+      let resourceId = req;
+      for (const part of fieldParts) {
+        resourceId = resourceId[part];
+        if (resourceId === undefined) break;
+      }
+
+      // 사용자 ID (user_id 또는 id)
+      const userId = req.user[userField] || req.user.id || req.user.user_id;
+
+      // 소유자 체크
+      const isOwner = resourceId && String(resourceId) === String(userId);
+
+      if (!isOwner) {
+        logger.warn('소유자/관리자 체크 실패: 권한 부족', {
+          user_id: userId,
+          username: req.user.username,
+          role: userRole,
+          resource_id: resourceId,
+          resource_field: resourceField,
+          is_admin: isAdmin,
+          is_owner: isOwner,
+          path: req.path
+        });
+        throw new ForbiddenError('본인의 리소스이거나 관리자 권한이 필요합니다');
+      }
+
+      logger.debug('리소스 소유자로 접근 허용', {
+        user_id: userId,
+        username: req.user.username,
+        resource_id: resourceId,
+        path: req.path
+      });
+
+      next();
+    } catch (err) {
+      next(err);
+    }
+  };
+};
+
+/**
+ * 레거시 호환성을 위한 별칭
+ * @deprecated requireAuth를 사용하세요
+ */
+const verifyToken = requireAuth;
+
+/**
+ * 레거시 호환성을 위한 별칭
+ * @deprecated requireRole('admin', 'system')을 사용하세요
+ */
+const requireAdmin = requireRole('admin', 'system');
+
+/**
+ * 레거시 호환성을 위한 별칭
+ * @deprecated requireRole('system')을 사용하세요
+ */
+const requireSystem = requireRole('system');
+
+module.exports = {
+  // 주요 미들웨어
+  requireAuth,
+  requireRole,
+  requireMinLevel,
+  requireOwnerOrAdmin,
+
+  // 레거시 호환성
+  verifyToken,
+  requireAdmin,
+  requireSystem,
+
+  // 상수
+  ACCESS_LEVELS
+};

system2-report/api/models/workIssueModel.js

@@ -0,0 +1,887 @@
+/**
+ * 작업 중 문제 신고 모델
+ * 부적합/안전 신고 관련 DB 쿼리
+ */
+
+const { getDb } = require('../dbPool');
+
+// ==================== 신고 카테고리 관리 ====================
+
+/**
+ * 모든 신고 카테고리 조회
+ */
+const getAllCategories = async (callback) => {
+  try {
+    const db = await getDb();
+    const [rows] = await db.query(
+      `SELECT category_id, category_type, category_name, description, display_order, is_active, created_at
+       FROM issue_report_categories
+       ORDER BY category_type, display_order, category_id`
+    );
+    callback(null, rows);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 타입별 활성 카테고리 조회 (nonconformity/safety)
+ */
+const getCategoriesByType = async (categoryType, callback) => {
+  try {
+    const db = await getDb();
+    const [rows] = await db.query(
+      `SELECT category_id, category_type, category_name, description, display_order
+       FROM issue_report_categories
+       WHERE category_type = ? AND is_active = TRUE
+       ORDER BY display_order, category_id`,
+      [categoryType]
+    );
+    callback(null, rows);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 카테고리 생성
+ */
+const createCategory = async (categoryData, callback) => {
+  try {
+    const db = await getDb();
+    const { category_type, category_name, description = null, display_order = 0 } = categoryData;
+
+    const [result] = await db.query(
+      `INSERT INTO issue_report_categories (category_type, category_name, description, display_order)
+       VALUES (?, ?, ?, ?)`,
+      [category_type, category_name, description, display_order]
+    );
+
+    callback(null, result.insertId);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 카테고리 수정
+ */
+const updateCategory = async (categoryId, categoryData, callback) => {
+  try {
+    const db = await getDb();
+    const { category_name, description, display_order, is_active } = categoryData;
+
+    const [result] = await db.query(
+      `UPDATE issue_report_categories
+       SET category_name = ?, description = ?, display_order = ?, is_active = ?
+       WHERE category_id = ?`,
+      [category_name, description, display_order, is_active, categoryId]
+    );
+
+    callback(null, result);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 카테고리 삭제
+ */
+const deleteCategory = async (categoryId, callback) => {
+  try {
+    const db = await getDb();
+    const [result] = await db.query(
+      `DELETE FROM issue_report_categories WHERE category_id = ?`,
+      [categoryId]
+    );
+    callback(null, result);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+// ==================== 사전 정의 신고 항목 관리 ====================
+
+/**
+ * 카테고리별 활성 항목 조회
+ */
+const getItemsByCategory = async (categoryId, callback) => {
+  try {
+    const db = await getDb();
+    const [rows] = await db.query(
+      `SELECT item_id, category_id, item_name, description, severity, display_order
+       FROM issue_report_items
+       WHERE category_id = ? AND is_active = TRUE
+       ORDER BY display_order, item_id`,
+      [categoryId]
+    );
+    callback(null, rows);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 모든 항목 조회 (관리용)
+ */
+const getAllItems = async (callback) => {
+  try {
+    const db = await getDb();
+    const [rows] = await db.query(
+      `SELECT iri.item_id, iri.category_id, iri.item_name, iri.description,
+              iri.severity, iri.display_order, iri.is_active, iri.created_at,
+              irc.category_name, irc.category_type
+       FROM issue_report_items iri
+       INNER JOIN issue_report_categories irc ON iri.category_id = irc.category_id
+       ORDER BY irc.category_type, irc.display_order, iri.display_order, iri.item_id`
+    );
+    callback(null, rows);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 항목 생성
+ */
+const createItem = async (itemData, callback) => {
+  try {
+    const db = await getDb();
+    const { category_id, item_name, description = null, severity = 'medium', display_order = 0 } = itemData;
+
+    const [result] = await db.query(
+      `INSERT INTO issue_report_items (category_id, item_name, description, severity, display_order)
+       VALUES (?, ?, ?, ?, ?)`,
+      [category_id, item_name, description, severity, display_order]
+    );
+
+    callback(null, result.insertId);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 항목 수정
+ */
+const updateItem = async (itemId, itemData, callback) => {
+  try {
+    const db = await getDb();
+    const { item_name, description, severity, display_order, is_active } = itemData;
+
+    const [result] = await db.query(
+      `UPDATE issue_report_items
+       SET item_name = ?, description = ?, severity = ?, display_order = ?, is_active = ?
+       WHERE item_id = ?`,
+      [item_name, description, severity, display_order, is_active, itemId]
+    );
+
+    callback(null, result);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 항목 삭제
+ */
+const deleteItem = async (itemId, callback) => {
+  try {
+    const db = await getDb();
+    const [result] = await db.query(
+      `DELETE FROM issue_report_items WHERE item_id = ?`,
+      [itemId]
+    );
+    callback(null, result);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+// ==================== 문제 신고 관리 ====================
+
+// 한국 시간 유틸리티 import
+const { getKoreaDatetime } = require('../utils/dateUtils');
+
+/**
+ * 신고 생성
+ */
+const createReport = async (reportData, callback) => {
+  try {
+    const db = await getDb();
+    const {
+      reporter_id,
+      factory_category_id = null,
+      workplace_id = null,
+      custom_location = null,
+      tbm_session_id = null,
+      visit_request_id = null,
+      issue_category_id,
+      issue_item_id = null,
+      additional_description = null,
+      photo_path1 = null,
+      photo_path2 = null,
+      photo_path3 = null,
+      photo_path4 = null,
+      photo_path5 = null
+    } = reportData;
+
+    // 한국 시간 기준으로 신고 일시 설정
+    const reportDate = getKoreaDatetime();
+
+    const [result] = await db.query(
+      `INSERT INTO work_issue_reports
+       (reporter_id, report_date, factory_category_id, workplace_id, custom_location,
+        tbm_session_id, visit_request_id, issue_category_id, issue_item_id,
+        additional_description, photo_path1, photo_path2, photo_path3, photo_path4, photo_path5)
+       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+      [reporter_id, reportDate, factory_category_id, workplace_id, custom_location,
+       tbm_session_id, visit_request_id, issue_category_id, issue_item_id,
+       additional_description, photo_path1, photo_path2, photo_path3, photo_path4, photo_path5]
+    );
+
+    // 상태 변경 로그 기록
+    await db.query(
+      `INSERT INTO work_issue_status_logs (report_id, previous_status, new_status, changed_by)
+       VALUES (?, NULL, 'reported', ?)`,
+      [result.insertId, reporter_id]
+    );
+
+    callback(null, result.insertId);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 신고 목록 조회 (필터 옵션 포함)
+ */
+const getAllReports = async (filters = {}, callback) => {
+  try {
+    const db = await getDb();
+    let query = `
+      SELECT
+        wir.report_id, wir.reporter_id, wir.report_date,
+        wir.factory_category_id, wir.workplace_id, wir.custom_location,
+        wir.tbm_session_id, wir.visit_request_id,
+        wir.issue_category_id, wir.issue_item_id, wir.additional_description,
+        wir.photo_path1, wir.photo_path2, wir.photo_path3, wir.photo_path4, wir.photo_path5,
+        wir.status, wir.assigned_department, wir.assigned_user_id, wir.assigned_at,
+        wir.resolution_notes, wir.resolved_at,
+        wir.created_at, wir.updated_at,
+        u.username as reporter_name, u.name as reporter_full_name,
+        wc.category_name as factory_name,
+        w.workplace_name,
+        irc.category_type, irc.category_name as issue_category_name,
+        iri.item_name as issue_item_name, iri.severity,
+        assignee.username as assigned_user_name, assignee.name as assigned_full_name
+      FROM work_issue_reports wir
+      INNER JOIN users u ON wir.reporter_id = u.user_id
+      LEFT JOIN workplace_categories wc ON wir.factory_category_id = wc.category_id
+      LEFT JOIN workplaces w ON wir.workplace_id = w.workplace_id
+      INNER JOIN issue_report_categories irc ON wir.issue_category_id = irc.category_id
+      LEFT JOIN issue_report_items iri ON wir.issue_item_id = iri.item_id
+      LEFT JOIN users assignee ON wir.assigned_user_id = assignee.user_id
+      WHERE 1=1
+    `;
+
+    const params = [];
+
+    // 필터 적용
+    if (filters.status) {
+      query += ` AND wir.status = ?`;
+      params.push(filters.status);
+    }
+
+    if (filters.category_type) {
+      query += ` AND irc.category_type = ?`;
+      params.push(filters.category_type);
+    }
+
+    if (filters.issue_category_id) {
+      query += ` AND wir.issue_category_id = ?`;
+      params.push(filters.issue_category_id);
+    }
+
+    if (filters.factory_category_id) {
+      query += ` AND wir.factory_category_id = ?`;
+      params.push(filters.factory_category_id);
+    }
+
+    if (filters.workplace_id) {
+      query += ` AND wir.workplace_id = ?`;
+      params.push(filters.workplace_id);
+    }
+
+    if (filters.reporter_id) {
+      query += ` AND wir.reporter_id = ?`;
+      params.push(filters.reporter_id);
+    }
+
+    if (filters.assigned_user_id) {
+      query += ` AND wir.assigned_user_id = ?`;
+      params.push(filters.assigned_user_id);
+    }
+
+    if (filters.start_date && filters.end_date) {
+      query += ` AND DATE(wir.report_date) BETWEEN ? AND ?`;
+      params.push(filters.start_date, filters.end_date);
+    }
+
+    if (filters.search) {
+      query += ` AND (wir.additional_description LIKE ? OR iri.item_name LIKE ? OR wir.custom_location LIKE ?)`;
+      const searchTerm = `%${filters.search}%`;
+      params.push(searchTerm, searchTerm, searchTerm);
+    }
+
+    query += ` ORDER BY wir.report_date DESC, wir.report_id DESC`;
+
+    // 페이지네이션
+    if (filters.limit) {
+      query += ` LIMIT ?`;
+      params.push(parseInt(filters.limit));
+
+      if (filters.offset) {
+        query += ` OFFSET ?`;
+        params.push(parseInt(filters.offset));
+      }
+    }
+
+    const [rows] = await db.query(query, params);
+    callback(null, rows);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 신고 상세 조회
+ */
+const getReportById = async (reportId, callback) => {
+  try {
+    const db = await getDb();
+    const [rows] = await db.query(
+      `SELECT
+        wir.report_id, wir.reporter_id, wir.report_date,
+        wir.factory_category_id, wir.workplace_id, wir.custom_location,
+        wir.tbm_session_id, wir.visit_request_id,
+        wir.issue_category_id, wir.issue_item_id, wir.additional_description,
+        wir.photo_path1, wir.photo_path2, wir.photo_path3, wir.photo_path4, wir.photo_path5,
+        wir.status, wir.assigned_department, wir.assigned_user_id, wir.assigned_at, wir.assigned_by,
+        wir.resolution_notes, wir.resolution_photo_path1, wir.resolution_photo_path2,
+        wir.resolved_at, wir.resolved_by,
+        wir.modification_history,
+        wir.created_at, wir.updated_at,
+        u.username as reporter_name, u.name as reporter_full_name,
+        wc.category_name as factory_name,
+        w.workplace_name,
+        irc.category_type, irc.category_name as issue_category_name,
+        iri.item_name as issue_item_name, iri.severity,
+        assignee.username as assigned_user_name, assignee.name as assigned_full_name,
+        assigner.username as assigned_by_name,
+        resolver.username as resolved_by_name
+      FROM work_issue_reports wir
+      INNER JOIN users u ON wir.reporter_id = u.user_id
+      LEFT JOIN workplace_categories wc ON wir.factory_category_id = wc.category_id
+      LEFT JOIN workplaces w ON wir.workplace_id = w.workplace_id
+      INNER JOIN issue_report_categories irc ON wir.issue_category_id = irc.category_id
+      LEFT JOIN issue_report_items iri ON wir.issue_item_id = iri.item_id
+      LEFT JOIN users assignee ON wir.assigned_user_id = assignee.user_id
+      LEFT JOIN users assigner ON wir.assigned_by = assigner.user_id
+      LEFT JOIN users resolver ON wir.resolved_by = resolver.user_id
+      WHERE wir.report_id = ?`,
+      [reportId]
+    );
+
+    callback(null, rows[0]);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 신고 수정
+ */
+const updateReport = async (reportId, reportData, userId, callback) => {
+  try {
+    const db = await getDb();
+
+    // 기존 데이터 조회
+    const [existing] = await db.query(
+      `SELECT * FROM work_issue_reports WHERE report_id = ?`,
+      [reportId]
+    );
+
+    if (existing.length === 0) {
+      return callback(new Error('신고를 찾을 수 없습니다.'));
+    }
+
+    const current = existing[0];
+
+    // 수정 이력 생성
+    const modifications = [];
+    const now = new Date().toISOString();
+
+    for (const key of Object.keys(reportData)) {
+      if (current[key] !== reportData[key] && reportData[key] !== undefined) {
+        modifications.push({
+          field: key,
+          old_value: current[key],
+          new_value: reportData[key],
+          modified_at: now,
+          modified_by: userId
+        });
+      }
+    }
+
+    // 기존 이력과 병합
+    const existingHistory = current.modification_history ? JSON.parse(current.modification_history) : [];
+    const newHistory = [...existingHistory, ...modifications];
+
+    const {
+      factory_category_id,
+      workplace_id,
+      custom_location,
+      issue_category_id,
+      issue_item_id,
+      additional_description,
+      photo_path1,
+      photo_path2,
+      photo_path3,
+      photo_path4,
+      photo_path5
+    } = reportData;
+
+    const [result] = await db.query(
+      `UPDATE work_issue_reports
+       SET factory_category_id = COALESCE(?, factory_category_id),
+           workplace_id = COALESCE(?, workplace_id),
+           custom_location = COALESCE(?, custom_location),
+           issue_category_id = COALESCE(?, issue_category_id),
+           issue_item_id = COALESCE(?, issue_item_id),
+           additional_description = COALESCE(?, additional_description),
+           photo_path1 = COALESCE(?, photo_path1),
+           photo_path2 = COALESCE(?, photo_path2),
+           photo_path3 = COALESCE(?, photo_path3),
+           photo_path4 = COALESCE(?, photo_path4),
+           photo_path5 = COALESCE(?, photo_path5),
+           modification_history = ?,
+           updated_at = NOW()
+       WHERE report_id = ?`,
+      [factory_category_id, workplace_id, custom_location,
+       issue_category_id, issue_item_id, additional_description,
+       photo_path1, photo_path2, photo_path3, photo_path4, photo_path5,
+       JSON.stringify(newHistory), reportId]
+    );
+
+    callback(null, result);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 신고 삭제
+ */
+const deleteReport = async (reportId, callback) => {
+  try {
+    const db = await getDb();
+
+    // 먼저 사진 경로 조회 (삭제용)
+    const [photos] = await db.query(
+      `SELECT photo_path1, photo_path2, photo_path3, photo_path4, photo_path5,
+              resolution_photo_path1, resolution_photo_path2
+       FROM work_issue_reports WHERE report_id = ?`,
+      [reportId]
+    );
+
+    const [result] = await db.query(
+      `DELETE FROM work_issue_reports WHERE report_id = ?`,
+      [reportId]
+    );
+
+    // 삭제할 사진 경로 반환
+    callback(null, { result, photos: photos[0] });
+  } catch (err) {
+    callback(err);
+  }
+};
+
+// ==================== 상태 관리 ====================
+
+/**
+ * 신고 접수 (reported → received)
+ */
+const receiveReport = async (reportId, userId, callback) => {
+  try {
+    const db = await getDb();
+
+    // 현재 상태 확인
+    const [current] = await db.query(
+      `SELECT status FROM work_issue_reports WHERE report_id = ?`,
+      [reportId]
+    );
+
+    if (current.length === 0) {
+      return callback(new Error('신고를 찾을 수 없습니다.'));
+    }
+
+    if (current[0].status !== 'reported') {
+      return callback(new Error('접수 대기 상태가 아닙니다.'));
+    }
+
+    const [result] = await db.query(
+      `UPDATE work_issue_reports
+       SET status = 'received', updated_at = NOW()
+       WHERE report_id = ?`,
+      [reportId]
+    );
+
+    // 상태 변경 로그
+    await db.query(
+      `INSERT INTO work_issue_status_logs (report_id, previous_status, new_status, changed_by)
+       VALUES (?, 'reported', 'received', ?)`,
+      [reportId, userId]
+    );
+
+    callback(null, result);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 담당자 배정
+ */
+const assignReport = async (reportId, assignData, callback) => {
+  try {
+    const db = await getDb();
+    const { assigned_department, assigned_user_id, assigned_by } = assignData;
+
+    // 현재 상태 확인
+    const [current] = await db.query(
+      `SELECT status FROM work_issue_reports WHERE report_id = ?`,
+      [reportId]
+    );
+
+    if (current.length === 0) {
+      return callback(new Error('신고를 찾을 수 없습니다.'));
+    }
+
+    // 접수 상태 이상이어야 배정 가능
+    const validStatuses = ['received', 'in_progress'];
+    if (!validStatuses.includes(current[0].status)) {
+      return callback(new Error('접수된 상태에서만 담당자 배정이 가능합니다.'));
+    }
+
+    const [result] = await db.query(
+      `UPDATE work_issue_reports
+       SET assigned_department = ?, assigned_user_id = ?,
+           assigned_at = NOW(), assigned_by = ?, updated_at = NOW()
+       WHERE report_id = ?`,
+      [assigned_department, assigned_user_id, assigned_by, reportId]
+    );
+
+    callback(null, result);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 처리 시작 (received → in_progress)
+ */
+const startProcessing = async (reportId, userId, callback) => {
+  try {
+    const db = await getDb();
+
+    // 현재 상태 확인
+    const [current] = await db.query(
+      `SELECT status FROM work_issue_reports WHERE report_id = ?`,
+      [reportId]
+    );
+
+    if (current.length === 0) {
+      return callback(new Error('신고를 찾을 수 없습니다.'));
+    }
+
+    if (current[0].status !== 'received') {
+      return callback(new Error('접수된 상태에서만 처리를 시작할 수 있습니다.'));
+    }
+
+    const [result] = await db.query(
+      `UPDATE work_issue_reports
+       SET status = 'in_progress', updated_at = NOW()
+       WHERE report_id = ?`,
+      [reportId]
+    );
+
+    // 상태 변경 로그
+    await db.query(
+      `INSERT INTO work_issue_status_logs (report_id, previous_status, new_status, changed_by)
+       VALUES (?, 'received', 'in_progress', ?)`,
+      [reportId, userId]
+    );
+
+    callback(null, result);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 처리 완료 (in_progress → completed)
+ */
+const completeReport = async (reportId, completionData, callback) => {
+  try {
+    const db = await getDb();
+    const { resolution_notes, resolution_photo_path1, resolution_photo_path2, resolved_by } = completionData;
+
+    // 현재 상태 확인
+    const [current] = await db.query(
+      `SELECT status FROM work_issue_reports WHERE report_id = ?`,
+      [reportId]
+    );
+
+    if (current.length === 0) {
+      return callback(new Error('신고를 찾을 수 없습니다.'));
+    }
+
+    if (current[0].status !== 'in_progress') {
+      return callback(new Error('처리 중 상태에서만 완료할 수 있습니다.'));
+    }
+
+    const [result] = await db.query(
+      `UPDATE work_issue_reports
+       SET status = 'completed', resolution_notes = ?,
+           resolution_photo_path1 = ?, resolution_photo_path2 = ?,
+           resolved_at = NOW(), resolved_by = ?, updated_at = NOW()
+       WHERE report_id = ?`,
+      [resolution_notes, resolution_photo_path1, resolution_photo_path2, resolved_by, reportId]
+    );
+
+    // 상태 변경 로그
+    await db.query(
+      `INSERT INTO work_issue_status_logs (report_id, previous_status, new_status, changed_by, change_reason)
+       VALUES (?, 'in_progress', 'completed', ?, ?)`,
+      [reportId, resolved_by, resolution_notes]
+    );
+
+    callback(null, result);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 신고 종료 (completed → closed)
+ */
+const closeReport = async (reportId, userId, callback) => {
+  try {
+    const db = await getDb();
+
+    // 현재 상태 확인
+    const [current] = await db.query(
+      `SELECT status FROM work_issue_reports WHERE report_id = ?`,
+      [reportId]
+    );
+
+    if (current.length === 0) {
+      return callback(new Error('신고를 찾을 수 없습니다.'));
+    }
+
+    if (current[0].status !== 'completed') {
+      return callback(new Error('완료된 상태에서만 종료할 수 있습니다.'));
+    }
+
+    const [result] = await db.query(
+      `UPDATE work_issue_reports
+       SET status = 'closed', updated_at = NOW()
+       WHERE report_id = ?`,
+      [reportId]
+    );
+
+    // 상태 변경 로그
+    await db.query(
+      `INSERT INTO work_issue_status_logs (report_id, previous_status, new_status, changed_by)
+       VALUES (?, 'completed', 'closed', ?)`,
+      [reportId, userId]
+    );
+
+    callback(null, result);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 상태 변경 이력 조회
+ */
+const getStatusLogs = async (reportId, callback) => {
+  try {
+    const db = await getDb();
+    const [rows] = await db.query(
+      `SELECT wisl.log_id, wisl.report_id, wisl.previous_status, wisl.new_status,
+              wisl.changed_by, wisl.change_reason, wisl.changed_at,
+              u.username as changed_by_name, u.name as changed_by_full_name
+       FROM work_issue_status_logs wisl
+       INNER JOIN users u ON wisl.changed_by = u.user_id
+       WHERE wisl.report_id = ?
+       ORDER BY wisl.changed_at ASC`,
+      [reportId]
+    );
+    callback(null, rows);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+// ==================== 통계 ====================
+
+/**
+ * 신고 통계 요약
+ */
+const getStatsSummary = async (filters = {}, callback) => {
+  try {
+    const db = await getDb();
+
+    let whereClause = '1=1';
+    const params = [];
+
+    if (filters.start_date && filters.end_date) {
+      whereClause += ` AND DATE(report_date) BETWEEN ? AND ?`;
+      params.push(filters.start_date, filters.end_date);
+    }
+
+    if (filters.factory_category_id) {
+      whereClause += ` AND factory_category_id = ?`;
+      params.push(filters.factory_category_id);
+    }
+
+    const [rows] = await db.query(
+      `SELECT
+        COUNT(*) as total,
+        SUM(CASE WHEN status = 'reported' THEN 1 ELSE 0 END) as reported,
+        SUM(CASE WHEN status = 'received' THEN 1 ELSE 0 END) as received,
+        SUM(CASE WHEN status = 'in_progress' THEN 1 ELSE 0 END) as in_progress,
+        SUM(CASE WHEN status = 'completed' THEN 1 ELSE 0 END) as completed,
+        SUM(CASE WHEN status = 'closed' THEN 1 ELSE 0 END) as closed
+       FROM work_issue_reports
+       WHERE ${whereClause}`,
+      params
+    );
+
+    callback(null, rows[0]);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 카테고리별 통계
+ */
+const getStatsByCategory = async (filters = {}, callback) => {
+  try {
+    const db = await getDb();
+
+    let whereClause = '1=1';
+    const params = [];
+
+    if (filters.start_date && filters.end_date) {
+      whereClause += ` AND DATE(wir.report_date) BETWEEN ? AND ?`;
+      params.push(filters.start_date, filters.end_date);
+    }
+
+    const [rows] = await db.query(
+      `SELECT
+        irc.category_type, irc.category_name,
+        COUNT(*) as count
+       FROM work_issue_reports wir
+       INNER JOIN issue_report_categories irc ON wir.issue_category_id = irc.category_id
+       WHERE ${whereClause}
+       GROUP BY irc.category_id
+       ORDER BY irc.category_type, count DESC`,
+      params
+    );
+
+    callback(null, rows);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+/**
+ * 작업장별 통계
+ */
+const getStatsByWorkplace = async (filters = {}, callback) => {
+  try {
+    const db = await getDb();
+
+    let whereClause = 'wir.workplace_id IS NOT NULL';
+    const params = [];
+
+    if (filters.start_date && filters.end_date) {
+      whereClause += ` AND DATE(wir.report_date) BETWEEN ? AND ?`;
+      params.push(filters.start_date, filters.end_date);
+    }
+
+    if (filters.factory_category_id) {
+      whereClause += ` AND wir.factory_category_id = ?`;
+      params.push(filters.factory_category_id);
+    }
+
+    const [rows] = await db.query(
+      `SELECT
+        wir.factory_category_id, wc.category_name as factory_name,
+        wir.workplace_id, w.workplace_name,
+        COUNT(*) as count
+       FROM work_issue_reports wir
+       INNER JOIN workplace_categories wc ON wir.factory_category_id = wc.category_id
+       INNER JOIN workplaces w ON wir.workplace_id = w.workplace_id
+       WHERE ${whereClause}
+       GROUP BY wir.factory_category_id, wir.workplace_id
+       ORDER BY count DESC`,
+      params
+    );
+
+    callback(null, rows);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+module.exports = {
+  // 카테고리
+  getAllCategories,
+  getCategoriesByType,
+  createCategory,
+  updateCategory,
+  deleteCategory,
+
+  // 항목
+  getItemsByCategory,
+  getAllItems,
+  createItem,
+  updateItem,
+  deleteItem,
+
+  // 신고
+  createReport,
+  getAllReports,
+  getReportById,
+  updateReport,
+  deleteReport,
+
+  // 상태 관리
+  receiveReport,
+  assignReport,
+  startProcessing,
+  completeReport,
+  closeReport,
+  getStatusLogs,
+
+  // 통계
+  getStatsSummary,
+  getStatsByCategory,
+  getStatsByWorkplace
+};

system2-report/api/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "system2-report-api",
+  "version": "1.0.0",
+  "description": "TK Factory Services - System 2 신고 API",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "dev": "node --watch index.js"
+  },
+  "dependencies": {
+    "bcrypt": "^6.0.0",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
+    "express": "^4.18.2",
+    "express-rate-limit": "^7.5.1",
+    "jsonwebtoken": "^9.0.0",
+    "multer": "^1.4.5-lts.1",
+    "mysql2": "^3.14.1",
+    "redis": "^5.9.0"
+  }
+}

system2-report/api/routes/workIssueRoutes.js

@@ -0,0 +1,92 @@
+/**
+ * 작업 중 문제 신고 라우터
+ */
+
+const express = require('express');
+const router = express.Router();
+const workIssueController = require('../controllers/workIssueController');
+const { requireMinLevel } = require('../middlewares/auth');
+
+// ==================== 카테고리 관리 ====================
+
+// 모든 카테고리 조회
+router.get('/categories', workIssueController.getAllCategories);
+
+// 타입별 카테고리 조회 (nonconformity/safety)
+router.get('/categories/type/:type', workIssueController.getCategoriesByType);
+
+// 카테고리 생성 (admin 이상)
+router.post('/categories', requireMinLevel('admin'), workIssueController.createCategory);
+
+// 카테고리 수정 (admin 이상)
+router.put('/categories/:id', requireMinLevel('admin'), workIssueController.updateCategory);
+
+// 카테고리 삭제 (admin 이상)
+router.delete('/categories/:id', requireMinLevel('admin'), workIssueController.deleteCategory);
+
+// ==================== 사전 정의 항목 관리 ====================
+
+// 모든 항목 조회
+router.get('/items', workIssueController.getAllItems);
+
+// 카테고리별 항목 조회
+router.get('/items/category/:categoryId', workIssueController.getItemsByCategory);
+
+// 항목 생성 (admin 이상)
+router.post('/items', requireMinLevel('admin'), workIssueController.createItem);
+
+// 항목 수정 (admin 이상)
+router.put('/items/:id', requireMinLevel('admin'), workIssueController.updateItem);
+
+// 항목 삭제 (admin 이상)
+router.delete('/items/:id', requireMinLevel('admin'), workIssueController.deleteItem);
+
+// ==================== 통계 ====================
+
+// 통계 요약 (support_team 이상)
+router.get('/stats/summary', requireMinLevel('support_team'), workIssueController.getStatsSummary);
+
+// 카테고리별 통계 (support_team 이상)
+router.get('/stats/by-category', requireMinLevel('support_team'), workIssueController.getStatsByCategory);
+
+// 작업장별 통계 (support_team 이상)
+router.get('/stats/by-workplace', requireMinLevel('support_team'), workIssueController.getStatsByWorkplace);
+
+// ==================== 문제 신고 관리 ====================
+
+// 신고 목록 조회
+router.get('/', workIssueController.getAllReports);
+
+// 신고 생성
+router.post('/', workIssueController.createReport);
+
+// 신고 상세 조회
+router.get('/:id', workIssueController.getReportById);
+
+// 신고 수정
+router.put('/:id', workIssueController.updateReport);
+
+// 신고 삭제
+router.delete('/:id', workIssueController.deleteReport);
+
+// ==================== 상태 관리 ====================
+
+// 신고 접수 (support_team 이상)
+router.put('/:id/receive', requireMinLevel('support_team'), workIssueController.receiveReport);
+
+// 담당자 배정 (support_team 이상)
+router.put('/:id/assign', requireMinLevel('support_team'), workIssueController.assignReport);
+
+// 처리 시작
+router.put('/:id/start', workIssueController.startProcessing);
+
+// 처리 완료
+router.put('/:id/complete', workIssueController.completeReport);
+
+// 신고 종료 (admin 이상)
+router.put('/:id/close', requireMinLevel('admin'), workIssueController.closeReport);
+
+// 상태 변경 이력 조회
+router.get('/:id/logs', workIssueController.getStatusLogs);
+
+module.exports = router;

system2-report/api/services/imageUploadService.js

@@ -0,0 +1,217 @@
+/**
+ * 이미지 업로드 서비스
+ * Base64 인코딩된 이미지를 파일로 저장
+ *
+ * 사용 전 sharp 패키지 설치 필요:
+ * npm install sharp
+ */
+
+const path = require('path');
+const fs = require('fs').promises;
+const crypto = require('crypto');
+
+// sharp는 선택적으로 사용 (설치되어 있지 않으면 리사이징 없이 저장)
+let sharp;
+try {
+  sharp = require('sharp');
+} catch (e) {
+  console.warn('sharp 패키지가 설치되어 있지 않습니다. 이미지 리사이징이 비활성화됩니다.');
+  console.warn('이미지 최적화를 위해 npm install sharp 를 실행하세요.');
+}
+
+// 업로드 디렉토리 설정
+const UPLOAD_DIRS = {
+  issues: path.join(__dirname, '../public/uploads/issues'),
+  equipments: path.join(__dirname, '../public/uploads/equipments')
+};
+const UPLOAD_DIR = UPLOAD_DIRS.issues; // 기존 호환성 유지
+const MAX_SIZE = { width: 1920, height: 1920 };
+const QUALITY = 85;
+
+/**
+ * 업로드 디렉토리 확인 및 생성
+ * @param {string} category - 카테고리 ('issues' 또는 'equipments')
+ */
+async function ensureUploadDir(category = 'issues') {
+  const uploadDir = UPLOAD_DIRS[category] || UPLOAD_DIRS.issues;
+  try {
+    await fs.access(uploadDir);
+  } catch {
+    await fs.mkdir(uploadDir, { recursive: true });
+  }
+  return uploadDir;
+}
+
+/**
+ * UUID 생성 (간단한 버전)
+ */
+function generateId() {
+  return crypto.randomBytes(4).toString('hex');
+}
+
+/**
+ * 타임스탬프 문자열 생성
+ */
+function getTimestamp() {
+  const now = new Date();
+  return now.toISOString().replace(/[-:T]/g, '').slice(0, 14);
+}
+
+/**
+ * Base64 문자열에서 이미지 형식 추출
+ * @param {string} base64String - Base64 인코딩된 이미지
+ * @returns {string} 이미지 확장자 (jpg, png, etc)
+ */
+function getImageExtension(base64String) {
+  const match = base64String.match(/^data:image\/(\w+);base64,/);
+  if (match) {
+    const format = match[1].toLowerCase();
+    // jpeg를 jpg로 변환
+    return format === 'jpeg' ? 'jpg' : format;
+  }
+  return 'jpg'; // 기본값
+}
+
+/**
+ * Base64 이미지를 파일로 저장
+ * @param {string} base64String - Base64 인코딩된 이미지 (data:image/...;base64,... 형식)
+ * @param {string} prefix - 파일명 접두사 (예: 'issue', 'resolution', 'equipment')
+ * @param {string} category - 저장 카테고리 ('issues' 또는 'equipments')
+ * @returns {Promise<string|null>} 저장된 파일의 웹 경로 또는 null
+ */
+async function saveBase64Image(base64String, prefix = 'issue', category = 'issues') {
+  try {
+    if (!base64String || typeof base64String !== 'string') {
+      return null;
+    }
+
+    // Base64 헤더가 없는 경우 처리
+    let base64Data = base64String;
+    if (base64String.includes('base64,')) {
+      base64Data = base64String.split('base64,')[1];
+    }
+
+    // Base64 디코딩
+    const buffer = Buffer.from(base64Data, 'base64');
+
+    if (buffer.length === 0) {
+      console.error('이미지 데이터가 비어있습니다.');
+      return null;
+    }
+
+    // 디렉토리 확인
+    const uploadDir = await ensureUploadDir(category);
+
+    // 파일명 생성
+    const timestamp = getTimestamp();
+    const uniqueId = generateId();
+    const extension = 'jpg'; // 모든 이미지를 JPEG로 저장
+    const filename = `${prefix}_${timestamp}_${uniqueId}.${extension}`;
+    const filepath = path.join(uploadDir, filename);
+
+    // sharp가 설치되어 있으면 리사이징 및 최적화
+    if (sharp) {
+      try {
+        await sharp(buffer)
+          .resize(MAX_SIZE.width, MAX_SIZE.height, {
+            fit: 'inside',
+            withoutEnlargement: true
+          })
+          .jpeg({ quality: QUALITY })
+          .toFile(filepath);
+      } catch (sharpError) {
+        console.error('sharp 처리 실패, 원본 저장:', sharpError.message);
+        // sharp 실패 시 원본 저장
+        await fs.writeFile(filepath, buffer);
+      }
+    } else {
+      // sharp가 없으면 원본 그대로 저장
+      await fs.writeFile(filepath, buffer);
+    }
+
+    // 웹 접근 경로 반환
+    return `/uploads/${category}/${filename}`;
+  } catch (error) {
+    console.error('이미지 저장 실패:', error);
+    return null;
+  }
+}
+
+/**
+ * 여러 Base64 이미지를 한번에 저장
+ * @param {string[]} base64Images - Base64 이미지 배열
+ * @param {string} prefix - 파일명 접두사
+ * @returns {Promise<string[]>} 저장된 파일 경로 배열
+ */
+async function saveMultipleImages(base64Images, prefix = 'issue') {
+  const paths = [];
+
+  for (const base64 of base64Images) {
+    if (base64) {
+      const savedPath = await saveBase64Image(base64, prefix);
+      if (savedPath) {
+        paths.push(savedPath);
+      }
+    }
+  }
+
+  return paths;
+}
+
+/**
+ * 파일 삭제
+ * @param {string} webPath - 웹 경로 (예: /uploads/issues/filename.jpg)
+ * @returns {Promise<boolean>} 삭제 성공 여부
+ */
+async function deleteFile(webPath) {
+  try {
+    if (!webPath || typeof webPath !== 'string') {
+      return false;
+    }
+
+    // 보안: uploads 경로만 삭제 허용
+    if (!webPath.startsWith('/uploads/')) {
+      console.error('삭제 불가: uploads 외부 경로', webPath);
+      return false;
+    }
+
+    const filename = path.basename(webPath);
+    const fullPath = path.join(UPLOAD_DIR, filename);
+
+    try {
+      await fs.access(fullPath);
+      await fs.unlink(fullPath);
+      return true;
+    } catch (accessError) {
+      // 파일이 없으면 성공으로 처리
+      if (accessError.code === 'ENOENT') {
+        return true;
+      }
+      throw accessError;
+    }
+  } catch (error) {
+    console.error('파일 삭제 실패:', error);
+    return false;
+  }
+}
+
+/**
+ * 여러 파일 삭제
+ * @param {string[]} webPaths - 웹 경로 배열
+ * @returns {Promise<void>}
+ */
+async function deleteMultipleFiles(webPaths) {
+  for (const webPath of webPaths) {
+    if (webPath) {
+      await deleteFile(webPath);
+    }
+  }
+}
+
+module.exports = {
+  saveBase64Image,
+  saveMultipleImages,
+  deleteFile,
+  deleteMultipleFiles,
+  UPLOAD_DIR
+};

system2-report/api/services/mProjectService.js

@@ -0,0 +1,383 @@
+/**
+ * M-Project API 연동 서비스
+ *
+ * TK-FB-Project의 부적합 신고를 M-Project로 전송하는 서비스
+ *
+ * @author TK-FB-Project
+ * @since 2026-02-03
+ */
+
+const logger = require('../utils/logger');
+
+// M-Project API 설정
+const M_PROJECT_CONFIG = {
+  baseUrl: process.env.M_PROJECT_API_URL || 'http://system3-api:8000',
+  username: process.env.M_PROJECT_USERNAME || 'api_service',
+  password: process.env.M_PROJECT_PASSWORD || '',
+  defaultProjectId: parseInt(process.env.M_PROJECT_DEFAULT_PROJECT_ID) || 1,
+};
+
+// 캐시된 인증 토큰
+let cachedToken = null;
+let tokenExpiry = null;
+
+/**
+ * TK-FB 카테고리를 M-Project 카테고리로 매핑
+ * @param {string} tkCategory - TK-FB-Project 카테고리
+ * @returns {string} M-Project 카테고리
+ */
+function mapCategoryToMProject(tkCategory) {
+  const categoryMap = {
+    // TK-FB 카테고리 → M-Project 카테고리
+    '자재 누락': 'material_missing',
+    '자재누락': 'material_missing',
+    '자재 관련': 'material_missing',
+    '설계 오류': 'design_error',
+    '설계미스': 'design_error',
+    '설계 관련': 'design_error',
+    '입고 불량': 'incoming_defect',
+    '입고자재 불량': 'incoming_defect',
+    '입고 관련': 'incoming_defect',
+    '검사 미스': 'inspection_miss',
+    '검사미스': 'inspection_miss',
+    '검사 관련': 'inspection_miss',
+    '기타': 'etc',
+  };
+
+  // 정확히 매칭되는 경우
+  if (categoryMap[tkCategory]) {
+    return categoryMap[tkCategory];
+  }
+
+  // 부분 매칭 시도
+  const lowerCategory = tkCategory?.toLowerCase() || '';
+  if (lowerCategory.includes('자재') || lowerCategory.includes('material')) {
+    return 'material_missing';
+  }
+  if (lowerCategory.includes('설계') || lowerCategory.includes('design')) {
+    return 'design_error';
+  }
+  if (lowerCategory.includes('입고') || lowerCategory.includes('incoming')) {
+    return 'incoming_defect';
+  }
+  if (lowerCategory.includes('검사') || lowerCategory.includes('inspection')) {
+    return 'inspection_miss';
+  }
+
+  // 기본값
+  return 'etc';
+}
+
+/**
+ * M-Project API 인증 토큰 획득
+ * @returns {Promise<string|null>} JWT 토큰
+ */
+async function getAuthToken() {
+  // 캐시된 토큰이 유효하면 재사용
+  if (cachedToken && tokenExpiry && new Date() < tokenExpiry) {
+    return cachedToken;
+  }
+
+  try {
+    const formData = new URLSearchParams();
+    formData.append('username', M_PROJECT_CONFIG.username);
+    formData.append('password', M_PROJECT_CONFIG.password);
+
+    const response = await fetch(`${M_PROJECT_CONFIG.baseUrl}/api/auth/login`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: formData.toString(),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      logger.error('M-Project 인증 실패', {
+        status: response.status,
+        error: errorText
+      });
+      return null;
+    }
+
+    const data = await response.json();
+    cachedToken = data.access_token;
+
+    // 토큰 만료 시간 설정 (기본 6일, M-Project는 7일 유효)
+    tokenExpiry = new Date(Date.now() + 6 * 24 * 60 * 60 * 1000);
+
+    logger.info('M-Project 인증 성공');
+    return cachedToken;
+  } catch (error) {
+    logger.error('M-Project 인증 요청 오류', { error: error.message });
+    return null;
+  }
+}
+
+/**
+ * 이미지 URL을 Base64로 변환
+ * @param {string} imageUrl - 이미지 URL 또는 경로
+ * @returns {Promise<string|null>} Base64 인코딩된 이미지
+ */
+async function convertImageToBase64(imageUrl) {
+  if (!imageUrl) return null;
+
+  try {
+    // 이미 Base64인 경우 그대로 반환
+    if (imageUrl.startsWith('data:image')) {
+      return imageUrl;
+    }
+
+    // URL인 경우 fetch
+    if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
+      const response = await fetch(imageUrl);
+      if (!response.ok) return null;
+
+      const buffer = await response.arrayBuffer();
+      const base64 = Buffer.from(buffer).toString('base64');
+      const contentType = response.headers.get('content-type') || 'image/jpeg';
+      return `data:${contentType};base64,${base64}`;
+    }
+
+    // 로컬 파일 경로인 경우
+    const fs = require('fs').promises;
+    const path = require('path');
+    const filePath = path.join(process.cwd(), 'uploads', imageUrl);
+
+    try {
+      const fileBuffer = await fs.readFile(filePath);
+      const base64 = fileBuffer.toString('base64');
+      const ext = path.extname(imageUrl).toLowerCase();
+      const mimeTypes = {
+        '.jpg': 'image/jpeg',
+        '.jpeg': 'image/jpeg',
+        '.png': 'image/png',
+        '.gif': 'image/gif',
+        '.webp': 'image/webp',
+      };
+      const contentType = mimeTypes[ext] || 'image/jpeg';
+      return `data:${contentType};base64,${base64}`;
+    } catch {
+      return null;
+    }
+  } catch (error) {
+    logger.warn('이미지 Base64 변환 실패', { imageUrl, error: error.message });
+    return null;
+  }
+}
+
+/**
+ * TK-FB-Project 부적합 신고를 M-Project로 전송
+ *
+ * @param {Object} issueData - 부적합 신고 데이터
+ * @param {string} issueData.category - 카테고리 이름
+ * @param {string} issueData.description - 신고 내용
+ * @param {string} issueData.reporter_name - 신고자 이름
+ * @param {string} issueData.project_name - 프로젝트 이름 (옵션)
+ * @param {number} issueData.tk_issue_id - TK-FB-Project 이슈 ID
+ * @param {string[]} issueData.photos - 사진 URL 배열 (최대 5개)
+ * @returns {Promise<{success: boolean, mProjectId?: number, error?: string}>}
+ */
+async function sendToMProject(issueData) {
+  const {
+    category,
+    description,
+    reporter_name,
+    project_name,
+    tk_issue_id,
+    photos = [],
+  } = issueData;
+
+  logger.info('M-Project 연동 시작', { tk_issue_id, category });
+
+  // 인증 토큰 획득
+  const token = await getAuthToken();
+  if (!token) {
+    return { success: false, error: 'M-Project 인증 실패' };
+  }
+
+  try {
+    // 카테고리 매핑
+    const mProjectCategory = mapCategoryToMProject(category);
+
+    // 설명에 TK-FB 정보 추가
+    const enhancedDescription = [
+      description,
+      '',
+      '---',
+      `[TK-FB-Project 연동]`,
+      `- 원본 이슈 ID: ${tk_issue_id}`,
+      `- 신고자: ${reporter_name || '미상'}`,
+      project_name ? `- 프로젝트: ${project_name}` : null,
+    ].filter(Boolean).join('\n');
+
+    // 사진 변환 (최대 5개)
+    const photoPromises = photos.slice(0, 5).map(convertImageToBase64);
+    const base64Photos = await Promise.all(photoPromises);
+
+    // 요청 본문 구성
+    const requestBody = {
+      category: mProjectCategory,
+      description: enhancedDescription,
+      project_id: M_PROJECT_CONFIG.defaultProjectId,
+    };
+
+    // 사진 추가
+    base64Photos.forEach((photo, index) => {
+      if (photo) {
+        const fieldName = index === 0 ? 'photo' : `photo${index + 1}`;
+        requestBody[fieldName] = photo;
+      }
+    });
+
+    // M-Project API 호출
+    const response = await fetch(`${M_PROJECT_CONFIG.baseUrl}/api/issues`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`,
+      },
+      body: JSON.stringify(requestBody),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      logger.error('M-Project 이슈 생성 실패', {
+        status: response.status,
+        error: errorText,
+        tk_issue_id
+      });
+      return {
+        success: false,
+        error: `M-Project API 오류: ${response.status}`
+      };
+    }
+
+    const createdIssue = await response.json();
+
+    logger.info('M-Project 이슈 생성 성공', {
+      tk_issue_id,
+      m_project_id: createdIssue.id
+    });
+
+    return {
+      success: true,
+      mProjectId: createdIssue.id
+    };
+  } catch (error) {
+    logger.error('M-Project 연동 오류', {
+      tk_issue_id,
+      error: error.message
+    });
+    return {
+      success: false,
+      error: error.message
+    };
+  }
+}
+
+/**
+ * M-Project에서 이슈 상태 조회
+ *
+ * @param {number} mProjectId - M-Project 이슈 ID
+ * @returns {Promise<{success: boolean, status?: string, data?: Object, error?: string}>}
+ */
+async function getIssueStatus(mProjectId) {
+  const token = await getAuthToken();
+  if (!token) {
+    return { success: false, error: 'M-Project 인증 실패' };
+  }
+
+  try {
+    const response = await fetch(
+      `${M_PROJECT_CONFIG.baseUrl}/api/issues/${mProjectId}`,
+      {
+        method: 'GET',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+        },
+      }
+    );
+
+    if (!response.ok) {
+      return {
+        success: false,
+        error: `M-Project API 오류: ${response.status}`
+      };
+    }
+
+    const data = await response.json();
+
+    return {
+      success: true,
+      status: data.review_status || data.status,
+      data
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error.message
+    };
+  }
+}
+
+/**
+ * M-Project 상태를 TK-FB 상태로 매핑
+ * @param {string} mProjectStatus - M-Project 상태
+ * @returns {string} TK-FB-Project 상태
+ */
+function mapStatusFromMProject(mProjectStatus) {
+  const statusMap = {
+    'pending_review': 'received',
+    'in_progress': 'in_progress',
+    'completed': 'completed',
+    'disposed': 'closed',
+  };
+  return statusMap[mProjectStatus] || 'received';
+}
+
+/**
+ * M-Project 연결 테스트
+ * @returns {Promise<{success: boolean, message: string}>}
+ */
+async function testConnection() {
+  try {
+    const token = await getAuthToken();
+    if (!token) {
+      return { success: false, message: 'M-Project 인증 실패' };
+    }
+
+    // /api/auth/me로 연결 테스트
+    const response = await fetch(`${M_PROJECT_CONFIG.baseUrl}/api/auth/me`, {
+      headers: {
+        'Authorization': `Bearer ${token}`,
+      },
+    });
+
+    if (response.ok) {
+      const user = await response.json();
+      return {
+        success: true,
+        message: `M-Project 연결 성공 (사용자: ${user.username})`
+      };
+    } else {
+      return {
+        success: false,
+        message: `M-Project 연결 실패: ${response.status}`
+      };
+    }
+  } catch (error) {
+    return {
+      success: false,
+      message: `M-Project 연결 오류: ${error.message}`
+    };
+  }
+}
+
+module.exports = {
+  sendToMProject,
+  getIssueStatus,
+  mapStatusFromMProject,
+  testConnection,
+  mapCategoryToMProject,
+};

system2-report/api/utils/dateUtils.js

@@ -0,0 +1,131 @@
+/**
+ * 날짜/시간 유틸리티 함수
+ *
+ * 중요: 이 프로젝트는 한국(Asia/Seoul, UTC+9) 시간대 기준으로 운영됩니다.
+ * DB에 저장되는 비즈니스 날짜(report_date, session_date 등)는 반드시 한국 시간 기준이어야 합니다.
+ *
+ * @author TK-FB-Project
+ * @since 2026-02-03
+ */
+
+const KOREA_TIMEZONE_OFFSET = 9; // UTC+9
+
+/**
+ * 한국 시간(KST) 기준 현재 Date 객체 반환
+ * @returns {Date} 한국 시간 기준 Date 객체
+ */
+function getKoreaDate() {
+  const now = new Date();
+  return new Date(now.getTime() + (KOREA_TIMEZONE_OFFSET * 60 * 60 * 1000));
+}
+
+/**
+ * 한국 시간(KST) 기준 현재 날짜 문자열 반환
+ * @returns {string} 'YYYY-MM-DD' 형식
+ */
+function getKoreaDateString() {
+  const koreaDate = getKoreaDate();
+  const year = koreaDate.getUTCFullYear();
+  const month = String(koreaDate.getUTCMonth() + 1).padStart(2, '0');
+  const day = String(koreaDate.getUTCDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+/**
+ * 한국 시간(KST) 기준 현재 datetime 문자열 반환
+ * @returns {string} 'YYYY-MM-DD HH:mm:ss' 형식 (MySQL DATETIME 호환)
+ */
+function getKoreaDatetime() {
+  const koreaDate = getKoreaDate();
+  const year = koreaDate.getUTCFullYear();
+  const month = String(koreaDate.getUTCMonth() + 1).padStart(2, '0');
+  const day = String(koreaDate.getUTCDate()).padStart(2, '0');
+  const hours = String(koreaDate.getUTCHours()).padStart(2, '0');
+  const minutes = String(koreaDate.getUTCMinutes()).padStart(2, '0');
+  const seconds = String(koreaDate.getUTCSeconds()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
+/**
+ * 한국 시간(KST) 기준 현재 시간 문자열 반환
+ * @returns {string} 'HH:mm:ss' 형식
+ */
+function getKoreaTimeString() {
+  const koreaDate = getKoreaDate();
+  const hours = String(koreaDate.getUTCHours()).padStart(2, '0');
+  const minutes = String(koreaDate.getUTCMinutes()).padStart(2, '0');
+  const seconds = String(koreaDate.getUTCSeconds()).padStart(2, '0');
+  return `${hours}:${minutes}:${seconds}`;
+}
+
+/**
+ * UTC Date를 한국 시간 datetime 문자열로 변환
+ * @param {Date} date - UTC 기준 Date 객체
+ * @returns {string} 'YYYY-MM-DD HH:mm:ss' 형식
+ */
+function toKoreaDatetime(date) {
+  if (!date) return null;
+  const koreaDate = new Date(date.getTime() + (KOREA_TIMEZONE_OFFSET * 60 * 60 * 1000));
+  const year = koreaDate.getUTCFullYear();
+  const month = String(koreaDate.getUTCMonth() + 1).padStart(2, '0');
+  const day = String(koreaDate.getUTCDate()).padStart(2, '0');
+  const hours = String(koreaDate.getUTCHours()).padStart(2, '0');
+  const minutes = String(koreaDate.getUTCMinutes()).padStart(2, '0');
+  const seconds = String(koreaDate.getUTCSeconds()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
+/**
+ * UTC Date를 한국 날짜 문자열로 변환
+ * @param {Date} date - UTC 기준 Date 객체
+ * @returns {string} 'YYYY-MM-DD' 형식
+ */
+function toKoreaDateString(date) {
+  if (!date) return null;
+  const koreaDate = new Date(date.getTime() + (KOREA_TIMEZONE_OFFSET * 60 * 60 * 1000));
+  const year = koreaDate.getUTCFullYear();
+  const month = String(koreaDate.getUTCMonth() + 1).padStart(2, '0');
+  const day = String(koreaDate.getUTCDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+/**
+ * 한국 시간 datetime 문자열을 Date 객체로 변환
+ * @param {string} koreaDatetimeStr - 'YYYY-MM-DD HH:mm:ss' 형식
+ * @returns {Date} UTC 기준 Date 객체
+ */
+function fromKoreaDatetime(koreaDatetimeStr) {
+  if (!koreaDatetimeStr) return null;
+  // 한국 시간 문자열을 UTC로 변환
+  const date = new Date(koreaDatetimeStr + '+09:00');
+  return date;
+}
+
+/**
+ * 연도 반환 (한국 시간 기준)
+ * @returns {number} 현재 연도
+ */
+function getKoreaYear() {
+  return getKoreaDate().getUTCFullYear();
+}
+
+/**
+ * 월 반환 (한국 시간 기준, 1-12)
+ * @returns {number} 현재 월 (1-12)
+ */
+function getKoreaMonth() {
+  return getKoreaDate().getUTCMonth() + 1;
+}
+
+module.exports = {
+  KOREA_TIMEZONE_OFFSET,
+  getKoreaDate,
+  getKoreaDateString,
+  getKoreaDatetime,
+  getKoreaTimeString,
+  toKoreaDatetime,
+  toKoreaDateString,
+  fromKoreaDatetime,
+  getKoreaYear,
+  getKoreaMonth,
+};

system2-report/api/utils/errors.js

@@ -0,0 +1,186 @@
+/**
+ * 커스텀 에러 클래스
+ *
+ * 애플리케이션 전체에서 사용하는 표준화된 에러 클래스들
+ *
+ * @author TK-FB-Project
+ * @since 2025-12-11
+ */
+
+/**
+ * 기본 애플리케이션 에러 클래스
+ * 모든 커스텀 에러의 부모 클래스
+ */
+class AppError extends Error {
+  /**
+   * @param {string} message - 에러 메시지
+   * @param {number} statusCode - HTTP 상태 코드
+   * @param {string} code - 에러 코드 (예: 'VALIDATION_ERROR')
+   * @param {object} details - 추가 세부 정보
+   */
+  constructor(message, statusCode = 500, code = 'INTERNAL_ERROR', details = null) {
+    super(message);
+    this.name = this.constructor.name;
+    this.statusCode = statusCode;
+    this.code = code;
+    this.details = details;
+    this.isOperational = true; // 운영 에러 (예상된 에러)
+
+    Error.captureStackTrace(this, this.constructor);
+  }
+
+  /**
+   * JSON 형태로 에러 정보 반환
+   */
+  toJSON() {
+    return {
+      name: this.name,
+      message: this.message,
+      statusCode: this.statusCode,
+      code: this.code,
+      details: this.details
+    };
+  }
+}
+
+/**
+ * 검증 에러 (400 Bad Request)
+ * 입력값 검증 실패 시 사용
+ */
+class ValidationError extends AppError {
+  /**
+   * @param {string} message - 에러 메시지
+   * @param {object} details - 검증 실패 세부 정보
+   */
+  constructor(message = '입력값이 올바르지 않습니다', details = null) {
+    super(message, 400, 'VALIDATION_ERROR', details);
+  }
+}
+
+/**
+ * 인증 에러 (401 Unauthorized)
+ * 인증이 필요하거나 인증 실패 시 사용
+ */
+class AuthenticationError extends AppError {
+  /**
+   * @param {string} message - 에러 메시지
+   */
+  constructor(message = '인증이 필요합니다') {
+    super(message, 401, 'AUTHENTICATION_ERROR');
+  }
+}
+
+/**
+ * 권한 에러 (403 Forbidden)
+ * 권한이 부족할 때 사용
+ */
+class ForbiddenError extends AppError {
+  /**
+   * @param {string} message - 에러 메시지
+   */
+  constructor(message = '권한이 없습니다') {
+    super(message, 403, 'FORBIDDEN');
+  }
+}
+
+/**
+ * 리소스 없음 에러 (404 Not Found)
+ * 요청한 리소스를 찾을 수 없을 때 사용
+ */
+class NotFoundError extends AppError {
+  /**
+   * @param {string} message - 에러 메시지
+   * @param {string} resource - 찾을 수 없는 리소스명
+   */
+  constructor(message = '리소스를 찾을 수 없습니다', resource = null) {
+    super(message, 404, 'NOT_FOUND', resource ? { resource } : null);
+  }
+}
+
+/**
+ * 충돌 에러 (409 Conflict)
+ * 중복된 리소스 등 충돌 발생 시 사용
+ */
+class ConflictError extends AppError {
+  /**
+   * @param {string} message - 에러 메시지
+   * @param {object} details - 충돌 세부 정보
+   */
+  constructor(message = '이미 존재하는 데이터입니다', details = null) {
+    super(message, 409, 'CONFLICT', details);
+  }
+}
+
+/**
+ * 서버 에러 (500 Internal Server Error)
+ * 예상하지 못한 서버 오류 시 사용
+ */
+class InternalServerError extends AppError {
+  /**
+   * @param {string} message - 에러 메시지
+   */
+  constructor(message = '서버 오류가 발생했습니다') {
+    super(message, 500, 'INTERNAL_SERVER_ERROR');
+  }
+}
+
+/**
+ * 데이터베이스 에러 (500 Internal Server Error)
+ * DB 관련 오류 시 사용
+ */
+class DatabaseError extends AppError {
+  /**
+   * @param {string} message - 에러 메시지
+   * @param {Error} originalError - 원본 DB 에러
+   */
+  constructor(message = '데이터베이스 오류가 발생했습니다', originalError = null) {
+    super(
+      message,
+      500,
+      'DATABASE_ERROR',
+      originalError ? { originalMessage: originalError.message } : null
+    );
+    this.originalError = originalError;
+  }
+}
+
+/**
+ * 외부 API 에러 (502 Bad Gateway)
+ * 외부 서비스 호출 실패 시 사용
+ */
+class ExternalApiError extends AppError {
+  /**
+   * @param {string} message - 에러 메시지
+   * @param {string} service - 외부 서비스명
+   */
+  constructor(message = '외부 서비스 호출에 실패했습니다', service = null) {
+    super(message, 502, 'EXTERNAL_API_ERROR', service ? { service } : null);
+  }
+}
+
+/**
+ * 타임아웃 에러 (504 Gateway Timeout)
+ * 요청 처리 시간 초과 시 사용
+ */
+class TimeoutError extends AppError {
+  /**
+   * @param {string} message - 에러 메시지
+   * @param {number} timeout - 타임아웃 시간 (ms)
+   */
+  constructor(message = '요청 처리 시간이 초과되었습니다', timeout = null) {
+    super(message, 504, 'TIMEOUT_ERROR', timeout ? { timeout } : null);
+  }
+}
+
+module.exports = {
+  AppError,
+  ValidationError,
+  AuthenticationError,
+  ForbiddenError,
+  NotFoundError,
+  ConflictError,
+  InternalServerError,
+  DatabaseError,
+  ExternalApiError,
+  TimeoutError
+};

system2-report/api/utils/logger.js

@@ -0,0 +1,197 @@
+/**
+ * 로깅 유틸리티
+ *
+ * 애플리케이션 전체에서 사용하는 통합 로거
+ *
+ * @author TK-FB-Project
+ * @since 2025-12-11
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * 로그 레벨 정의
+ */
+const LogLevel = {
+  ERROR: 'ERROR',
+  WARN: 'WARN',
+  INFO: 'INFO',
+  DEBUG: 'DEBUG'
+};
+
+/**
+ * 로그 레벨별 이모지
+ */
+const LogEmoji = {
+  ERROR: '❌',
+  WARN: '⚠️',
+  INFO: 'ℹ️',
+  DEBUG: '🔍'
+};
+
+/**
+ * 로그 레벨별 색상 (콘솔)
+ */
+const LogColor = {
+  ERROR: '\x1b[31m', // Red
+  WARN: '\x1b[33m',  // Yellow
+  INFO: '\x1b[36m',  // Cyan
+  DEBUG: '\x1b[90m', // Gray
+  RESET: '\x1b[0m'
+};
+
+class Logger {
+  constructor() {
+    this.logDir = path.join(__dirname, '../logs');
+    this.logFile = path.join(this.logDir, 'app.log');
+    this.errorFile = path.join(this.logDir, 'error.log');
+    this.ensureLogDirectory();
+  }
+
+  /**
+   * 로그 디렉토리 생성
+   */
+  ensureLogDirectory() {
+    if (!fs.existsSync(this.logDir)) {
+      fs.mkdirSync(this.logDir, { recursive: true });
+    }
+  }
+
+  /**
+   * 타임스탬프 생성
+   */
+  getTimestamp() {
+    return new Date().toISOString();
+  }
+
+  /**
+   * 로그 포맷팅
+   */
+  formatLog(level, message, context = {}) {
+    const timestamp = this.getTimestamp();
+    const emoji = LogEmoji[level] || '';
+    const contextStr = Object.keys(context).length > 0
+      ? `\n  Context: ${JSON.stringify(context, null, 2)}`
+      : '';
+
+    return `[${timestamp}] [${level}] ${emoji} ${message}${contextStr}`;
+  }
+
+  /**
+   * 콘솔에 컬러 로그 출력
+   */
+  logToConsole(level, message, context = {}) {
+    const color = LogColor[level] || LogColor.RESET;
+    const formattedLog = this.formatLog(level, message, context);
+
+    if (level === LogLevel.ERROR) {
+      console.error(`${color}${formattedLog}${LogColor.RESET}`);
+    } else if (level === LogLevel.WARN) {
+      console.warn(`${color}${formattedLog}${LogColor.RESET}`);
+    } else {
+      console.log(`${color}${formattedLog}${LogColor.RESET}`);
+    }
+  }
+
+  /**
+   * 파일에 로그 기록
+   */
+  logToFile(level, message, context = {}) {
+    const formattedLog = this.formatLog(level, message, context);
+    const logEntry = `${formattedLog}\n`;
+
+    try {
+      // 모든 로그를 app.log에 기록
+      fs.appendFileSync(this.logFile, logEntry, 'utf8');
+
+      // 에러는 error.log에도 기록
+      if (level === LogLevel.ERROR) {
+        fs.appendFileSync(this.errorFile, logEntry, 'utf8');
+      }
+    } catch (err) {
+      console.error('로그 파일 기록 실패:', err);
+    }
+  }
+
+  /**
+   * 로그 기록 메인 함수
+   */
+  log(level, message, context = {}) {
+    // 개발 환경에서는 콘솔에 출력
+    if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV !== 'production') {
+      this.logToConsole(level, message, context);
+    }
+
+    // 프로덕션에서는 파일에만 기록
+    if (process.env.NODE_ENV === 'production') {
+      this.logToFile(level, message, context);
+    }
+  }
+
+  /**
+   * 에러 로그
+   */
+  error(message, context = {}) {
+    this.log(LogLevel.ERROR, message, context);
+  }
+
+  /**
+   * 경고 로그
+   */
+  warn(message, context = {}) {
+    this.log(LogLevel.WARN, message, context);
+  }
+
+  /**
+   * 정보 로그
+   */
+  info(message, context = {}) {
+    this.log(LogLevel.INFO, message, context);
+  }
+
+  /**
+   * 디버그 로그
+   */
+  debug(message, context = {}) {
+    // DEBUG 로그는 개발 환경에서만 출력
+    if (process.env.NODE_ENV === 'development') {
+      this.log(LogLevel.DEBUG, message, context);
+    }
+  }
+
+  /**
+   * HTTP 요청 로그
+   */
+  http(method, url, statusCode, duration, user = 'anonymous') {
+    const level = statusCode >= 400 ? LogLevel.ERROR : LogLevel.INFO;
+    const message = `${method} ${url} - ${statusCode} (${duration}ms)`;
+    const context = {
+      method,
+      url,
+      statusCode,
+      duration,
+      user
+    };
+
+    this.log(level, message, context);
+  }
+
+  /**
+   * 데이터베이스 쿼리 로그
+   */
+  query(sql, params = [], duration = 0) {
+    if (process.env.NODE_ENV === 'development') {
+      this.debug('DB Query', {
+        sql,
+        params,
+        duration: `${duration}ms`
+      });
+    }
+  }
+}
+
+// 싱글톤 인스턴스 생성 및 내보내기
+const logger = new Logger();
+
+module.exports = logger;

system2-report/web/Dockerfile

@@ -0,0 +1,8 @@
+FROM nginx:alpine
+
+COPY . /usr/share/nginx/html/
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

system2-report/web/js/issue-category-manage.js

@@ -0,0 +1,421 @@
+/**
+ * 신고 카테고리 관리 JavaScript
+ */
+
+import { API, getAuthHeaders } from '/js/api-config.js';
+
+let currentType = 'nonconformity';
+let categories = [];
+let items = [];
+
+// 초기화
+document.addEventListener('DOMContentLoaded', async () => {
+  await loadCategories();
+});
+
+/**
+ * 유형 탭 전환
+ */
+window.switchType = async function(type) {
+  currentType = type;
+
+  // 탭 상태 업데이트
+  document.querySelectorAll('.type-tab').forEach(tab => {
+    tab.classList.toggle('active', tab.dataset.type === type);
+  });
+
+  await loadCategories();
+};
+
+/**
+ * 카테고리 로드
+ */
+async function loadCategories() {
+  const container = document.getElementById('categoryList');
+  container.innerHTML = '<div class="empty-state">카테고리를 불러오는 중...</div>';
+
+  try {
+    const response = await fetch(`${API}/work-issues/categories/type/${currentType}`, {
+      headers: getAuthHeaders()
+    });
+
+    if (!response.ok) throw new Error('카테고리 조회 실패');
+
+    const data = await response.json();
+
+    if (data.success && data.data) {
+      categories = data.data;
+
+      // 항목도 로드
+      const itemsResponse = await fetch(`${API}/work-issues/items`, {
+        headers: getAuthHeaders()
+      });
+
+      if (itemsResponse.ok) {
+        const itemsData = await itemsResponse.json();
+        if (itemsData.success) {
+          items = itemsData.data || [];
+        }
+      }
+
+      renderCategories();
+    } else {
+      container.innerHTML = '<div class="empty-state">카테고리가 없습니다.</div>';
+    }
+  } catch (error) {
+    console.error('카테고리 로드 실패:', error);
+    container.innerHTML = '<div class="empty-state">카테고리를 불러오지 못했습니다.</div>';
+  }
+}
+
+/**
+ * 카테고리 렌더링
+ */
+function renderCategories() {
+  const container = document.getElementById('categoryList');
+
+  if (categories.length === 0) {
+    container.innerHTML = '<div class="empty-state">등록된 카테고리가 없습니다.</div>';
+    return;
+  }
+
+  const severityLabel = {
+    low: '낮음',
+    medium: '보통',
+    high: '높음',
+    critical: '심각'
+  };
+
+  container.innerHTML = categories.map(cat => {
+    const catItems = items.filter(item => item.category_id === cat.category_id);
+
+    return `
+      <div class="category-section" data-category-id="${cat.category_id}">
+        <div class="category-header" onclick="toggleCategory(${cat.category_id})">
+          <div class="category-name">${cat.category_name}</div>
+          <div class="category-badge">
+            <span class="severity-badge ${cat.severity || 'medium'}">${severityLabel[cat.severity] || '보통'}</span>
+            <span class="item-count">${catItems.length}개 항목</span>
+            <button class="btn btn-secondary btn-sm" onclick="event.stopPropagation(); openCategoryModal(${cat.category_id})">수정</button>
+          </div>
+        </div>
+        <div class="category-items">
+          <div class="item-list">
+            ${catItems.length > 0 ? catItems.map(item => `
+              <div class="item-card">
+                <div class="item-info">
+                  <div class="item-name">${item.item_name}</div>
+                  ${item.description ? `<div class="item-desc">${item.description}</div>` : ''}
+                </div>
+                <div class="item-actions">
+                  <span class="severity-badge ${item.severity || 'medium'}">${severityLabel[item.severity] || '보통'}</span>
+                  <button class="btn btn-secondary btn-sm" onclick="openItemModal(${cat.category_id}, ${item.item_id})">수정</button>
+                </div>
+              </div>
+            `).join('') : '<div class="empty-state" style="padding: 24px;">등록된 항목이 없습니다.</div>'}
+          </div>
+          <div class="add-item-form">
+            <input type="text" id="newItemName_${cat.category_id}" placeholder="새 항목 이름">
+            <button class="btn btn-primary btn-sm" onclick="quickAddItem(${cat.category_id})">추가</button>
+            <button class="btn btn-secondary btn-sm" onclick="openItemModal(${cat.category_id})">상세 추가</button>
+          </div>
+        </div>
+      </div>
+    `;
+  }).join('');
+}
+
+/**
+ * 카테고리 토글
+ */
+window.toggleCategory = function(categoryId) {
+  const section = document.querySelector(`.category-section[data-category-id="${categoryId}"]`);
+  if (section) {
+    section.classList.toggle('expanded');
+  }
+};
+
+/**
+ * 카테고리 모달 열기
+ */
+window.openCategoryModal = function(categoryId = null) {
+  const modal = document.getElementById('categoryModal');
+  const title = document.getElementById('categoryModalTitle');
+  const deleteBtn = document.getElementById('deleteCategoryBtn');
+
+  document.getElementById('categoryId').value = '';
+  document.getElementById('categoryName').value = '';
+  document.getElementById('categoryDescription').value = '';
+  document.getElementById('categorySeverity').value = 'medium';
+
+  if (categoryId) {
+    const category = categories.find(c => c.category_id === categoryId);
+    if (category) {
+      title.textContent = '카테고리 수정';
+      document.getElementById('categoryId').value = category.category_id;
+      document.getElementById('categoryName').value = category.category_name;
+      document.getElementById('categoryDescription').value = category.description || '';
+      document.getElementById('categorySeverity').value = category.severity || 'medium';
+      deleteBtn.style.display = 'block';
+    }
+  } else {
+    title.textContent = '새 카테고리';
+    deleteBtn.style.display = 'none';
+  }
+
+  modal.style.display = 'flex';
+};
+
+/**
+ * 카테고리 모달 닫기
+ */
+window.closeCategoryModal = function() {
+  document.getElementById('categoryModal').style.display = 'none';
+};
+
+/**
+ * 카테고리 저장
+ */
+window.saveCategory = async function() {
+  const categoryId = document.getElementById('categoryId').value;
+  const name = document.getElementById('categoryName').value.trim();
+  const description = document.getElementById('categoryDescription').value.trim();
+  const severity = document.getElementById('categorySeverity').value;
+
+  if (!name) {
+    alert('카테고리 이름을 입력하세요.');
+    return;
+  }
+
+  try {
+    const url = categoryId
+      ? `${API}/work-issues/categories/${categoryId}`
+      : `${API}/work-issues/categories`;
+
+    const response = await fetch(url, {
+      method: categoryId ? 'PUT' : 'POST',
+      headers: {
+        ...getAuthHeaders(),
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        category_name: name,
+        category_type: currentType,
+        description,
+        severity
+      })
+    });
+
+    const data = await response.json();
+
+    if (response.ok && data.success) {
+      alert(categoryId ? '카테고리가 수정되었습니다.' : '카테고리가 추가되었습니다.');
+      closeCategoryModal();
+      await loadCategories();
+    } else {
+      throw new Error(data.error || '저장 실패');
+    }
+  } catch (error) {
+    console.error('카테고리 저장 실패:', error);
+    alert('카테고리 저장에 실패했습니다: ' + error.message);
+  }
+};
+
+/**
+ * 카테고리 삭제
+ */
+window.deleteCategory = async function() {
+  const categoryId = document.getElementById('categoryId').value;
+
+  if (!categoryId) return;
+
+  const catItems = items.filter(item => item.category_id == categoryId);
+  if (catItems.length > 0) {
+    alert(`이 카테고리에 ${catItems.length}개의 항목이 있습니다. 먼저 항목을 삭제하세요.`);
+    return;
+  }
+
+  if (!confirm('이 카테고리를 삭제하시겠습니까?')) return;
+
+  try {
+    const response = await fetch(`${API}/work-issues/categories/${categoryId}`, {
+      method: 'DELETE',
+      headers: getAuthHeaders()
+    });
+
+    const data = await response.json();
+
+    if (response.ok && data.success) {
+      alert('카테고리가 삭제되었습니다.');
+      closeCategoryModal();
+      await loadCategories();
+    } else {
+      throw new Error(data.error || '삭제 실패');
+    }
+  } catch (error) {
+    console.error('카테고리 삭제 실패:', error);
+    alert('카테고리 삭제에 실패했습니다: ' + error.message);
+  }
+};
+
+/**
+ * 항목 모달 열기
+ */
+window.openItemModal = function(categoryId, itemId = null) {
+  const modal = document.getElementById('itemModal');
+  const title = document.getElementById('itemModalTitle');
+  const deleteBtn = document.getElementById('deleteItemBtn');
+
+  document.getElementById('itemId').value = '';
+  document.getElementById('itemCategoryId').value = categoryId;
+  document.getElementById('itemName').value = '';
+  document.getElementById('itemDescription').value = '';
+  document.getElementById('itemSeverity').value = 'medium';
+
+  if (itemId) {
+    const item = items.find(i => i.item_id === itemId);
+    if (item) {
+      title.textContent = '항목 수정';
+      document.getElementById('itemId').value = item.item_id;
+      document.getElementById('itemName').value = item.item_name;
+      document.getElementById('itemDescription').value = item.description || '';
+      document.getElementById('itemSeverity').value = item.severity || 'medium';
+      deleteBtn.style.display = 'block';
+    }
+  } else {
+    const category = categories.find(c => c.category_id === categoryId);
+    title.textContent = `새 항목 (${category?.category_name || ''})`;
+    deleteBtn.style.display = 'none';
+  }
+
+  modal.style.display = 'flex';
+};
+
+/**
+ * 항목 모달 닫기
+ */
+window.closeItemModal = function() {
+  document.getElementById('itemModal').style.display = 'none';
+};
+
+/**
+ * 항목 저장
+ */
+window.saveItem = async function() {
+  const itemId = document.getElementById('itemId').value;
+  const categoryId = document.getElementById('itemCategoryId').value;
+  const name = document.getElementById('itemName').value.trim();
+  const description = document.getElementById('itemDescription').value.trim();
+  const severity = document.getElementById('itemSeverity').value;
+
+  if (!name) {
+    alert('항목 이름을 입력하세요.');
+    return;
+  }
+
+  try {
+    const url = itemId
+      ? `${API}/work-issues/items/${itemId}`
+      : `${API}/work-issues/items`;
+
+    const response = await fetch(url, {
+      method: itemId ? 'PUT' : 'POST',
+      headers: {
+        ...getAuthHeaders(),
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        category_id: categoryId,
+        item_name: name,
+        description,
+        severity
+      })
+    });
+
+    const data = await response.json();
+
+    if (response.ok && data.success) {
+      alert(itemId ? '항목이 수정되었습니다.' : '항목이 추가되었습니다.');
+      closeItemModal();
+      await loadCategories();
+    } else {
+      throw new Error(data.error || '저장 실패');
+    }
+  } catch (error) {
+    console.error('항목 저장 실패:', error);
+    alert('항목 저장에 실패했습니다: ' + error.message);
+  }
+};
+
+/**
+ * 항목 삭제
+ */
+window.deleteItem = async function() {
+  const itemId = document.getElementById('itemId').value;
+
+  if (!itemId) return;
+  if (!confirm('이 항목을 삭제하시겠습니까?')) return;
+
+  try {
+    const response = await fetch(`${API}/work-issues/items/${itemId}`, {
+      method: 'DELETE',
+      headers: getAuthHeaders()
+    });
+
+    const data = await response.json();
+
+    if (response.ok && data.success) {
+      alert('항목이 삭제되었습니다.');
+      closeItemModal();
+      await loadCategories();
+    } else {
+      throw new Error(data.error || '삭제 실패');
+    }
+  } catch (error) {
+    console.error('항목 삭제 실패:', error);
+    alert('항목 삭제에 실패했습니다: ' + error.message);
+  }
+};
+
+/**
+ * 빠른 항목 추가
+ */
+window.quickAddItem = async function(categoryId) {
+  const input = document.getElementById(`newItemName_${categoryId}`);
+  const name = input.value.trim();
+
+  if (!name) {
+    alert('항목 이름을 입력하세요.');
+    input.focus();
+    return;
+  }
+
+  try {
+    const response = await fetch(`${API}/work-issues/items`, {
+      method: 'POST',
+      headers: {
+        ...getAuthHeaders(),
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        category_id: categoryId,
+        item_name: name,
+        severity: 'medium'
+      })
+    });
+
+    const data = await response.json();
+
+    if (response.ok && data.success) {
+      input.value = '';
+      await loadCategories();
+      // 카테고리 펼침 유지
+      toggleCategory(categoryId);
+    } else {
+      throw new Error(data.error || '추가 실패');
+    }
+  } catch (error) {
+    console.error('항목 추가 실패:', error);
+    alert('항목 추가에 실패했습니다: ' + error.message);
+  }
+};

system2-report/web/js/issue-detail.js

@@ -0,0 +1,690 @@
+/**
+ * 신고 상세 페이지 JavaScript
+ */
+
+const API_BASE = window.API_BASE_URL || 'http://localhost:20005/api';
+
+let reportId = null;
+let reportData = null;
+let currentUser = null;
+
+// 상태 한글명
+const statusNames = {
+  reported: '신고',
+  received: '접수',
+  in_progress: '처리중',
+  completed: '완료',
+  closed: '종료'
+};
+
+// 유형 한글명
+const typeNames = {
+  nonconformity: '부적합',
+  safety: '안전'
+};
+
+// 심각도 한글명
+const severityNames = {
+  critical: '심각',
+  high: '높음',
+  medium: '보통',
+  low: '낮음'
+};
+
+// 초기화
+document.addEventListener('DOMContentLoaded', async () => {
+  // URL에서 ID 가져오기
+  const urlParams = new URLSearchParams(window.location.search);
+  reportId = urlParams.get('id');
+
+  if (!reportId) {
+    alert('신고 ID가 없습니다.');
+    goBackToList();
+    return;
+  }
+
+  // 현재 사용자 정보 로드
+  await loadCurrentUser();
+
+  // 상세 데이터 로드
+  await loadReportDetail();
+});
+
+/**
+ * 현재 사용자 정보 로드
+ */
+async function loadCurrentUser() {
+  try {
+    const response = await fetch(`${API_BASE}/users/me`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      currentUser = data.data;
+    }
+  } catch (error) {
+    console.error('사용자 정보 로드 실패:', error);
+  }
+}
+
+/**
+ * 신고 상세 로드
+ */
+async function loadReportDetail() {
+  try {
+    const response = await fetch(`${API_BASE}/work-issues/${reportId}`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (!response.ok) {
+      throw new Error('신고를 찾을 수 없습니다.');
+    }
+
+    const data = await response.json();
+    if (!data.success) {
+      throw new Error(data.error || '데이터 조회 실패');
+    }
+
+    reportData = data.data;
+    renderDetail();
+    await loadStatusLogs();
+
+  } catch (error) {
+    console.error('상세 로드 실패:', error);
+    alert(error.message);
+    goBackToList();
+  }
+}
+
+/**
+ * 상세 정보 렌더링
+ */
+function renderDetail() {
+  const d = reportData;
+
+  // 헤더
+  document.getElementById('reportId').textContent = `#${d.report_id}`;
+  document.getElementById('reportTitle').textContent = d.issue_item_name || d.issue_category_name || '신고';
+
+  // 상태 배지
+  const statusBadge = document.getElementById('statusBadge');
+  statusBadge.className = `status-badge ${d.status}`;
+  statusBadge.textContent = statusNames[d.status] || d.status;
+
+  // 기본 정보
+  renderBasicInfo(d);
+
+  // 신고 내용
+  renderIssueContent(d);
+
+  // 사진
+  renderPhotos(d);
+
+  // 처리 정보
+  renderProcessInfo(d);
+
+  // 액션 버튼
+  renderActionButtons(d);
+}
+
+/**
+ * 기본 정보 렌더링
+ */
+function renderBasicInfo(d) {
+  const container = document.getElementById('basicInfo');
+
+  const formatDate = (dateStr) => {
+    if (!dateStr) return '-';
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('ko-KR', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  const validTypes = ['nonconformity', 'safety'];
+  const safeType = validTypes.includes(d.category_type) ? d.category_type : '';
+  const reporterName = escapeHtml(d.reporter_full_name || d.reporter_name || '-');
+  const locationText = escapeHtml(d.custom_location || d.workplace_name || '-');
+  const factoryText = d.factory_name ? ` (${escapeHtml(d.factory_name)})` : '';
+
+  container.innerHTML = `
+    <div class="info-item">
+      <div class="info-label">신고 유형</div>
+      <div class="info-value">
+        <span class="type-badge ${safeType}">${typeNames[d.category_type] || escapeHtml(d.category_type || '-')}</span>
+      </div>
+    </div>
+    <div class="info-item">
+      <div class="info-label">신고일시</div>
+      <div class="info-value">${formatDate(d.report_date)}</div>
+    </div>
+    <div class="info-item">
+      <div class="info-label">신고자</div>
+      <div class="info-value">${reporterName}</div>
+    </div>
+    <div class="info-item">
+      <div class="info-label">위치</div>
+      <div class="info-value">${locationText}${factoryText}</div>
+    </div>
+  `;
+}
+
+/**
+ * 신고 내용 렌더링
+ */
+function renderIssueContent(d) {
+  const container = document.getElementById('issueContent');
+
+  const validSeverities = ['critical', 'high', 'medium', 'low'];
+  const safeSeverity = validSeverities.includes(d.severity) ? d.severity : '';
+
+  let html = `
+    <div class="info-grid" style="margin-bottom: 1rem;">
+      <div class="info-item">
+        <div class="info-label">카테고리</div>
+        <div class="info-value">${escapeHtml(d.issue_category_name || '-')}</div>
+      </div>
+      <div class="info-item">
+        <div class="info-label">항목</div>
+        <div class="info-value">
+          ${escapeHtml(d.issue_item_name || '-')}
+          ${d.severity ? `<span class="severity-badge ${safeSeverity}">${severityNames[d.severity] || escapeHtml(d.severity)}</span>` : ''}
+        </div>
+      </div>
+    </div>
+  `;
+
+  if (d.additional_description) {
+    html += `
+      <div style="padding: 1rem; background: #f9fafb; border-radius: 0.5rem; white-space: pre-wrap; line-height: 1.6;">
+        ${escapeHtml(d.additional_description)}
+      </div>
+    `;
+  }
+
+  container.innerHTML = html;
+}
+
+/**
+ * 사진 렌더링
+ */
+function renderPhotos(d) {
+  const section = document.getElementById('photoSection');
+  const gallery = document.getElementById('photoGallery');
+
+  const photos = [d.photo_path1, d.photo_path2, d.photo_path3, d.photo_path4, d.photo_path5].filter(Boolean);
+
+  if (photos.length === 0) {
+    section.style.display = 'none';
+    return;
+  }
+
+  section.style.display = 'block';
+
+  const baseUrl = (API_BASE).replace('/api', '');
+
+  gallery.innerHTML = photos.map(photo => {
+    const fullUrl = photo.startsWith('http') ? photo : `${baseUrl}${photo}`;
+    return `
+      <div class="photo-item" onclick="openPhotoModal('${fullUrl}')">
+        <img src="${fullUrl}" alt="첨부 사진">
+      </div>
+    `;
+  }).join('');
+}
+
+/**
+ * 처리 정보 렌더링
+ */
+function renderProcessInfo(d) {
+  const section = document.getElementById('processSection');
+  const container = document.getElementById('processInfo');
+
+  // 담당자 배정 또는 처리 정보가 있는 경우만 표시
+  if (!d.assigned_user_id && !d.resolution_notes) {
+    section.style.display = 'none';
+    return;
+  }
+
+  section.style.display = 'block';
+
+  const formatDate = (dateStr) => {
+    if (!dateStr) return '-';
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('ko-KR', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  let html = '<div class="info-grid">';
+
+  if (d.assigned_user_id) {
+    html += `
+      <div class="info-item">
+        <div class="info-label">담당자</div>
+        <div class="info-value">${escapeHtml(d.assigned_full_name || d.assigned_user_name || '-')}</div>
+      </div>
+      <div class="info-item">
+        <div class="info-label">담당 부서</div>
+        <div class="info-value">${escapeHtml(d.assigned_department || '-')}</div>
+      </div>
+    `;
+  }
+
+  if (d.resolved_at) {
+    html += `
+      <div class="info-item">
+        <div class="info-label">처리 완료일</div>
+        <div class="info-value">${formatDate(d.resolved_at)}</div>
+      </div>
+      <div class="info-item">
+        <div class="info-label">처리자</div>
+        <div class="info-value">${escapeHtml(d.resolved_by_name || '-')}</div>
+      </div>
+    `;
+  }
+
+  html += '</div>';
+
+  if (d.resolution_notes) {
+    html += `
+      <div style="margin-top: 1rem; padding: 1rem; background: #ecfdf5; border-radius: 0.5rem; border: 1px solid #a7f3d0;">
+        <div style="font-weight: 600; margin-bottom: 0.5rem; color: #047857;">처리 내용</div>
+        <div style="white-space: pre-wrap; line-height: 1.6;">${escapeHtml(d.resolution_notes)}</div>
+      </div>
+    `;
+  }
+
+  container.innerHTML = html;
+}
+
+/**
+ * 액션 버튼 렌더링
+ */
+function renderActionButtons(d) {
+  const container = document.getElementById('actionButtons');
+
+  if (!currentUser) {
+    container.innerHTML = '';
+    return;
+  }
+
+  const isAdmin = ['admin', 'system', 'support_team'].includes(currentUser.access_level);
+  const isOwner = d.reporter_id === currentUser.user_id;
+  const isAssignee = d.assigned_user_id === currentUser.user_id;
+
+  let buttons = [];
+
+  // 관리자 권한 버튼
+  if (isAdmin) {
+    if (d.status === 'reported') {
+      buttons.push(`<button class="action-btn primary" onclick="receiveReport()">접수하기</button>`);
+    }
+
+    if (d.status === 'received' || d.status === 'in_progress') {
+      buttons.push(`<button class="action-btn" onclick="openAssignModal()">담당자 배정</button>`);
+    }
+
+    if (d.status === 'received') {
+      buttons.push(`<button class="action-btn primary" onclick="startProcessing()">처리 시작</button>`);
+    }
+
+    if (d.status === 'in_progress') {
+      buttons.push(`<button class="action-btn success" onclick="openCompleteModal()">처리 완료</button>`);
+    }
+
+    if (d.status === 'completed') {
+      buttons.push(`<button class="action-btn" onclick="closeReport()">종료</button>`);
+    }
+  }
+
+  // 담당자 버튼
+  if (isAssignee && !isAdmin) {
+    if (d.status === 'received') {
+      buttons.push(`<button class="action-btn primary" onclick="startProcessing()">처리 시작</button>`);
+    }
+
+    if (d.status === 'in_progress') {
+      buttons.push(`<button class="action-btn success" onclick="openCompleteModal()">처리 완료</button>`);
+    }
+  }
+
+  // 신고자 버튼 (수정/삭제는 reported 상태에서만)
+  if (isOwner && d.status === 'reported') {
+    buttons.push(`<button class="action-btn danger" onclick="deleteReport()">삭제</button>`);
+  }
+
+  container.innerHTML = buttons.join('');
+}
+
+/**
+ * 상태 변경 이력 로드
+ */
+async function loadStatusLogs() {
+  try {
+    const response = await fetch(`${API_BASE}/work-issues/${reportId}/status-logs`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (!response.ok) return;
+
+    const data = await response.json();
+    if (data.success && data.data) {
+      renderStatusTimeline(data.data);
+    }
+  } catch (error) {
+    console.error('상태 이력 로드 실패:', error);
+  }
+}
+
+/**
+ * 상태 타임라인 렌더링
+ */
+function renderStatusTimeline(logs) {
+  const container = document.getElementById('statusTimeline');
+
+  if (!logs || logs.length === 0) {
+    container.innerHTML = '<p style="color: #6b7280;">상태 변경 이력이 없습니다.</p>';
+    return;
+  }
+
+  const formatDate = (dateStr) => {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('ko-KR', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  container.innerHTML = logs.map(log => `
+    <div class="timeline-item">
+      <div class="timeline-status">
+        ${log.previous_status ? `${statusNames[log.previous_status] || escapeHtml(log.previous_status)} → ` : ''}${statusNames[log.new_status] || escapeHtml(log.new_status)}
+      </div>
+      <div class="timeline-meta">
+        ${escapeHtml(log.changed_by_full_name || log.changed_by_name || '-')} | ${formatDate(log.changed_at)}
+        ${log.change_reason ? `<br><small>${escapeHtml(log.change_reason)}</small>` : ''}
+      </div>
+    </div>
+  `).join('');
+}
+
+// ==================== 액션 함수 ====================
+
+/**
+ * 신고 접수
+ */
+async function receiveReport() {
+  if (!confirm('이 신고를 접수하시겠습니까?')) return;
+
+  try {
+    const response = await fetch(`${API_BASE}/work-issues/${reportId}/receive`, {
+      method: 'POST',
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    const data = await response.json();
+
+    if (data.success) {
+      alert('신고가 접수되었습니다.');
+      location.reload();
+    } else {
+      throw new Error(data.error || '접수 실패');
+    }
+  } catch (error) {
+    alert('접수 실패: ' + error.message);
+  }
+}
+
+/**
+ * 처리 시작
+ */
+async function startProcessing() {
+  if (!confirm('처리를 시작하시겠습니까?')) return;
+
+  try {
+    const response = await fetch(`${API_BASE}/work-issues/${reportId}/start`, {
+      method: 'POST',
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    const data = await response.json();
+
+    if (data.success) {
+      alert('처리가 시작되었습니다.');
+      location.reload();
+    } else {
+      throw new Error(data.error || '처리 시작 실패');
+    }
+  } catch (error) {
+    alert('처리 시작 실패: ' + error.message);
+  }
+}
+
+/**
+ * 신고 종료
+ */
+async function closeReport() {
+  if (!confirm('이 신고를 종료하시겠습니까?')) return;
+
+  try {
+    const response = await fetch(`${API_BASE}/work-issues/${reportId}/close`, {
+      method: 'POST',
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    const data = await response.json();
+
+    if (data.success) {
+      alert('신고가 종료되었습니다.');
+      location.reload();
+    } else {
+      throw new Error(data.error || '종료 실패');
+    }
+  } catch (error) {
+    alert('종료 실패: ' + error.message);
+  }
+}
+
+/**
+ * 신고 삭제
+ */
+async function deleteReport() {
+  if (!confirm('정말 이 신고를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.')) return;
+
+  try {
+    const response = await fetch(`${API_BASE}/work-issues/${reportId}`, {
+      method: 'DELETE',
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    const data = await response.json();
+
+    if (data.success) {
+      alert('신고가 삭제되었습니다.');
+      goBackToList();
+    } else {
+      throw new Error(data.error || '삭제 실패');
+    }
+  } catch (error) {
+    alert('삭제 실패: ' + error.message);
+  }
+}
+
+// ==================== 담당자 배정 모달 ====================
+
+async function openAssignModal() {
+  // 사용자 목록 로드
+  try {
+    const response = await fetch(`${API_BASE}/users`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      const select = document.getElementById('assignUser');
+      select.innerHTML = '<option value="">담당자 선택</option>';
+
+      if (data.success && data.data) {
+        data.data.forEach(user => {
+          const safeUserId = parseInt(user.user_id) || 0;
+          select.innerHTML += `<option value="${safeUserId}">${escapeHtml(user.name || '-')} (${escapeHtml(user.username || '-')})</option>`;
+        });
+      }
+    }
+  } catch (error) {
+    console.error('사용자 목록 로드 실패:', error);
+  }
+
+  document.getElementById('assignModal').classList.add('visible');
+}
+
+function closeAssignModal() {
+  document.getElementById('assignModal').classList.remove('visible');
+}
+
+async function submitAssign() {
+  const department = document.getElementById('assignDepartment').value;
+  const userId = document.getElementById('assignUser').value;
+
+  if (!userId) {
+    alert('담당자를 선택해주세요.');
+    return;
+  }
+
+  try {
+    const response = await fetch(`${API_BASE}/work-issues/${reportId}/assign`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${localStorage.getItem('token')}`
+      },
+      body: JSON.stringify({
+        assigned_department: department,
+        assigned_user_id: parseInt(userId)
+      })
+    });
+
+    const data = await response.json();
+
+    if (data.success) {
+      alert('담당자가 배정되었습니다.');
+      closeAssignModal();
+      location.reload();
+    } else {
+      throw new Error(data.error || '배정 실패');
+    }
+  } catch (error) {
+    alert('담당자 배정 실패: ' + error.message);
+  }
+}
+
+// ==================== 처리 완료 모달 ====================
+
+function openCompleteModal() {
+  document.getElementById('completeModal').classList.add('visible');
+}
+
+function closeCompleteModal() {
+  document.getElementById('completeModal').classList.remove('visible');
+}
+
+async function submitComplete() {
+  const notes = document.getElementById('resolutionNotes').value;
+
+  if (!notes.trim()) {
+    alert('처리 내용을 입력해주세요.');
+    return;
+  }
+
+  try {
+    const response = await fetch(`${API_BASE}/work-issues/${reportId}/complete`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${localStorage.getItem('token')}`
+      },
+      body: JSON.stringify({
+        resolution_notes: notes
+      })
+    });
+
+    const data = await response.json();
+
+    if (data.success) {
+      alert('처리가 완료되었습니다.');
+      closeCompleteModal();
+      location.reload();
+    } else {
+      throw new Error(data.error || '완료 처리 실패');
+    }
+  } catch (error) {
+    alert('처리 완료 실패: ' + error.message);
+  }
+}
+
+// ==================== 사진 모달 ====================
+
+function openPhotoModal(src) {
+  document.getElementById('photoModalImg').src = src;
+  document.getElementById('photoModal').classList.add('visible');
+}
+
+function closePhotoModal() {
+  document.getElementById('photoModal').classList.remove('visible');
+}
+
+// ==================== 유틸리티 ====================
+
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+/**
+ * 목록으로 돌아가기
+ */
+function goBackToList() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const from = urlParams.get('from');
+
+  if (from === 'nonconformity') {
+    window.location.href = '/pages/work/nonconformity.html';
+  } else if (from === 'safety') {
+    window.location.href = '/pages/safety/report-status.html';
+  } else {
+    if (window.history.length > 1) {
+      window.history.back();
+    } else {
+      window.location.href = '/pages/safety/report-status.html';
+    }
+  }
+}
+
+// 전역 함수 노출
+window.goBackToList = goBackToList;
+window.receiveReport = receiveReport;
+window.startProcessing = startProcessing;
+window.closeReport = closeReport;
+window.deleteReport = deleteReport;
+window.openAssignModal = openAssignModal;
+window.closeAssignModal = closeAssignModal;
+window.submitAssign = submitAssign;
+window.openCompleteModal = openCompleteModal;
+window.closeCompleteModal = closeCompleteModal;
+window.submitComplete = submitComplete;
+window.openPhotoModal = openPhotoModal;
+window.closePhotoModal = closePhotoModal;

system2-report/web/js/issue-report.js

@@ -0,0 +1,926 @@
+/**
+ * 신고 등록 페이지 JavaScript
+ * URL 파라미터 ?type=nonconformity 또는 ?type=safety로 유형 사전 선택 지원
+ */
+
+// API 설정
+const API_BASE = window.API_BASE_URL || 'http://localhost:20005/api';
+
+// 상태 변수
+let selectedFactoryId = null;
+let selectedWorkplaceId = null;
+let selectedWorkplaceName = null;
+let selectedType = null; // 'nonconformity' | 'safety'
+let selectedCategoryId = null;
+let selectedCategoryName = null;
+let selectedItemId = null;
+let selectedTbmSessionId = null;
+let selectedVisitRequestId = null;
+let photos = [null, null, null, null, null];
+let customItemName = null; // 직접 입력한 항목명
+
+// 지도 관련 변수
+let canvas, ctx, canvasImage;
+let mapRegions = [];
+let todayWorkers = [];
+let todayVisitors = [];
+
+// DOM 요소
+let factorySelect, issueMapCanvas;
+let photoInput, currentPhotoIndex;
+
+// 초기화
+document.addEventListener('DOMContentLoaded', async () => {
+  factorySelect = document.getElementById('factorySelect');
+  issueMapCanvas = document.getElementById('issueMapCanvas');
+  photoInput = document.getElementById('photoInput');
+
+  canvas = issueMapCanvas;
+  ctx = canvas.getContext('2d');
+
+  // 이벤트 리스너 설정
+  setupEventListeners();
+
+  // 공장 목록 로드
+  await loadFactories();
+
+  // URL 파라미터에서 유형 확인 및 자동 선택
+  const urlParams = new URLSearchParams(window.location.search);
+  const preselectedType = urlParams.get('type');
+  if (preselectedType === 'nonconformity' || preselectedType === 'safety') {
+    onTypeSelect(preselectedType);
+  }
+});
+
+/**
+ * 이벤트 리스너 설정
+ */
+function setupEventListeners() {
+  // 공장 선택
+  factorySelect.addEventListener('change', onFactoryChange);
+
+  // 지도 클릭
+  canvas.addEventListener('click', onMapClick);
+
+  // 기타 위치 토글
+  document.getElementById('useCustomLocation').addEventListener('change', (e) => {
+    const customInput = document.getElementById('customLocationInput');
+    customInput.classList.toggle('visible', e.target.checked);
+
+    if (e.target.checked) {
+      // 지도 선택 초기화
+      selectedWorkplaceId = null;
+      selectedWorkplaceName = null;
+      selectedTbmSessionId = null;
+      selectedVisitRequestId = null;
+      updateLocationInfo();
+    }
+  });
+
+  // 유형 버튼 클릭
+  document.querySelectorAll('.type-btn').forEach(btn => {
+    btn.addEventListener('click', () => onTypeSelect(btn.dataset.type));
+  });
+
+  // 사진 슬롯 클릭
+  document.querySelectorAll('.photo-slot').forEach(slot => {
+    slot.addEventListener('click', (e) => {
+      if (e.target.classList.contains('remove-btn')) return;
+      currentPhotoIndex = parseInt(slot.dataset.index);
+      photoInput.click();
+    });
+  });
+
+  // 사진 삭제 버튼
+  document.querySelectorAll('.photo-slot .remove-btn').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const slot = btn.closest('.photo-slot');
+      const index = parseInt(slot.dataset.index);
+      removePhoto(index);
+    });
+  });
+
+  // 사진 선택
+  photoInput.addEventListener('change', onPhotoSelect);
+}
+
+/**
+ * 공장 목록 로드
+ */
+async function loadFactories() {
+  try {
+    const response = await fetch(`${API_BASE}/workplaces/categories/active/list`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (!response.ok) throw new Error('공장 목록 조회 실패');
+
+    const data = await response.json();
+    if (data.success && data.data) {
+      data.data.forEach(factory => {
+        const option = document.createElement('option');
+        option.value = factory.category_id;
+        option.textContent = factory.category_name;
+        factorySelect.appendChild(option);
+      });
+
+      // 첫 번째 공장 자동 선택
+      if (data.data.length > 0) {
+        factorySelect.value = data.data[0].category_id;
+        onFactoryChange();
+      }
+    }
+  } catch (error) {
+    console.error('공장 목록 로드 실패:', error);
+  }
+}
+
+/**
+ * 공장 변경 시
+ */
+async function onFactoryChange() {
+  selectedFactoryId = factorySelect.value;
+  if (!selectedFactoryId) return;
+
+  // 위치 선택 초기화
+  selectedWorkplaceId = null;
+  selectedWorkplaceName = null;
+  selectedTbmSessionId = null;
+  selectedVisitRequestId = null;
+  updateLocationInfo();
+
+  // 지도 데이터 로드
+  await Promise.all([
+    loadMapImage(),
+    loadMapRegions(),
+    loadTodayData()
+  ]);
+
+  renderMap();
+}
+
+/**
+ * 배치도 이미지 로드
+ */
+async function loadMapImage() {
+  try {
+    const response = await fetch(`${API_BASE}/workplaces/categories`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (!response.ok) return;
+
+    const data = await response.json();
+    if (data.success && data.data) {
+      const selectedCategory = data.data.find(c => c.category_id == selectedFactoryId);
+      if (selectedCategory && selectedCategory.layout_image) {
+        const baseUrl = (window.API_BASE_URL || 'http://localhost:20005').replace('/api', '');
+        const fullImageUrl = selectedCategory.layout_image.startsWith('http')
+          ? selectedCategory.layout_image
+          : `${baseUrl}${selectedCategory.layout_image}`;
+
+        canvasImage = new Image();
+        canvasImage.onload = () => renderMap();
+        canvasImage.src = fullImageUrl;
+      }
+    }
+  } catch (error) {
+    console.error('배치도 이미지 로드 실패:', error);
+  }
+}
+
+/**
+ * 지도 영역 로드
+ */
+async function loadMapRegions() {
+  try {
+    const response = await fetch(`${API_BASE}/workplaces/categories/${selectedFactoryId}/map-regions`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (!response.ok) return;
+
+    const data = await response.json();
+    if (data.success) {
+      mapRegions = data.data || [];
+    }
+  } catch (error) {
+    console.error('지도 영역 로드 실패:', error);
+  }
+}
+
+/**
+ * 오늘 TBM/출입신청 데이터 로드
+ */
+async function loadTodayData() {
+  // 로컬 시간대 기준으로 오늘 날짜 구하기 (UTC가 아닌 한국 시간 기준)
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const day = String(now.getDate()).padStart(2, '0');
+  const today = `${year}-${month}-${day}`;
+
+  console.log('[신고페이지] 조회 날짜 (로컬):', today);
+
+  try {
+    // TBM 세션 로드
+    const tbmResponse = await fetch(`${API_BASE}/tbm/sessions/date/${today}`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (tbmResponse.ok) {
+      const tbmData = await tbmResponse.json();
+      const sessions = tbmData.data || [];
+
+      // TBM 세션 데이터를 가공하여 member_count 계산
+      todayWorkers = sessions.map(session => {
+        const memberCount = session.team_member_count || 0;
+        const leaderCount = session.leader_id ? 1 : 0;
+        return {
+          ...session,
+          member_count: memberCount + leaderCount
+        };
+      });
+
+      console.log('[신고페이지] 로드된 TBM 작업:', todayWorkers.length, '건');
+    }
+
+    // 출입 신청 로드
+    const visitResponse = await fetch(`${API_BASE}/workplace-visits/requests`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (visitResponse.ok) {
+      const visitData = await visitResponse.json();
+      todayVisitors = (visitData.data || []).filter(v => {
+        // 로컬 날짜로 비교
+        const visitDateObj = new Date(v.visit_date);
+        const visitYear = visitDateObj.getFullYear();
+        const visitMonth = String(visitDateObj.getMonth() + 1).padStart(2, '0');
+        const visitDay = String(visitDateObj.getDate()).padStart(2, '0');
+        const visitDate = `${visitYear}-${visitMonth}-${visitDay}`;
+
+        return visitDate === today &&
+          (v.status === 'approved' || v.status === 'training_completed');
+      });
+
+      console.log('[신고페이지] 로드된 방문자:', todayVisitors.length, '건');
+    }
+  } catch (error) {
+    console.error('오늘 데이터 로드 실패:', error);
+  }
+}
+
+/**
+ * 둥근 모서리 사각형 그리기 (Canvas roundRect 폴리필)
+ */
+function drawRoundRect(ctx, x, y, width, height, radius) {
+  ctx.beginPath();
+  ctx.moveTo(x + radius, y);
+  ctx.lineTo(x + width - radius, y);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+  ctx.lineTo(x + width, y + height - radius);
+  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+  ctx.lineTo(x + radius, y + height);
+  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+  ctx.lineTo(x, y + radius);
+  ctx.quadraticCurveTo(x, y, x + radius, y);
+  ctx.closePath();
+}
+
+/**
+ * 지도 렌더링
+ */
+function renderMap() {
+  if (!canvas || !ctx) return;
+
+  // 컨테이너 너비 가져오기
+  const container = canvas.parentElement;
+  const containerWidth = container.clientWidth - 2; // border 고려
+  const maxWidth = Math.min(containerWidth, 800);
+
+  // 이미지가 로드된 경우 이미지 비율에 맞춰 캔버스 크기 설정
+  if (canvasImage && canvasImage.complete && canvasImage.naturalWidth > 0) {
+    const imgWidth = canvasImage.naturalWidth;
+    const imgHeight = canvasImage.naturalHeight;
+
+    // 스케일 계산 (maxWidth에 맞춤)
+    const scale = imgWidth > maxWidth ? maxWidth / imgWidth : 1;
+
+    canvas.width = imgWidth * scale;
+    canvas.height = imgHeight * scale;
+
+    // 이미지 그리기
+    ctx.drawImage(canvasImage, 0, 0, canvas.width, canvas.height);
+  } else {
+    // 이미지가 없는 경우 기본 크기
+    canvas.width = maxWidth;
+    canvas.height = 400;
+
+    // 배경 그리기
+    ctx.fillStyle = '#f3f4f6';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // 이미지 없음 안내
+    ctx.fillStyle = '#9ca3af';
+    ctx.font = '14px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText('배치도 이미지가 없습니다', canvas.width / 2, canvas.height / 2);
+  }
+
+  // 작업장 영역 그리기 (퍼센트 좌표 사용)
+  mapRegions.forEach(region => {
+    const workers = todayWorkers.filter(w => w.workplace_id === region.workplace_id);
+    const visitors = todayVisitors.filter(v => v.workplace_id === region.workplace_id);
+
+    const workerCount = workers.reduce((sum, w) => sum + (w.member_count || 0), 0);
+    const visitorCount = visitors.reduce((sum, v) => sum + (v.visitor_count || 0), 0);
+
+    drawWorkplaceRegion(region, workerCount, visitorCount);
+  });
+}
+
+/**
+ * 작업장 영역 그리기
+ */
+function drawWorkplaceRegion(region, workerCount, visitorCount) {
+  const x1 = (region.x_start / 100) * canvas.width;
+  const y1 = (region.y_start / 100) * canvas.height;
+  const x2 = (region.x_end / 100) * canvas.width;
+  const y2 = (region.y_end / 100) * canvas.height;
+  const width = x2 - x1;
+  const height = y2 - y1;
+
+  // 선택된 작업장 하이라이트
+  const isSelected = region.workplace_id === selectedWorkplaceId;
+
+  // 색상 결정 (더 진하게 조정)
+  let fillColor, strokeColor, textColor;
+  if (isSelected) {
+    fillColor = 'rgba(34, 197, 94, 0.5)'; // 초록색 (선택됨)
+    strokeColor = 'rgb(22, 163, 74)';
+    textColor = '#15803d';
+  } else if (workerCount > 0 && visitorCount > 0) {
+    fillColor = 'rgba(34, 197, 94, 0.4)'; // 초록색 (작업+방문)
+    strokeColor = 'rgb(22, 163, 74)';
+    textColor = '#166534';
+  } else if (workerCount > 0) {
+    fillColor = 'rgba(59, 130, 246, 0.4)'; // 파란색 (작업만)
+    strokeColor = 'rgb(37, 99, 235)';
+    textColor = '#1e40af';
+  } else if (visitorCount > 0) {
+    fillColor = 'rgba(168, 85, 247, 0.4)'; // 보라색 (방문만)
+    strokeColor = 'rgb(147, 51, 234)';
+    textColor = '#7c3aed';
+  } else {
+    fillColor = 'rgba(107, 114, 128, 0.35)'; // 회색 (없음) - 더 진하게
+    strokeColor = 'rgb(75, 85, 99)';
+    textColor = '#374151';
+  }
+
+  ctx.fillStyle = fillColor;
+  ctx.strokeStyle = strokeColor;
+  ctx.lineWidth = isSelected ? 4 : 2.5;
+
+  ctx.beginPath();
+  ctx.rect(x1, y1, width, height);
+  ctx.fill();
+  ctx.stroke();
+
+  // 작업장명 표시 (배경 추가로 가독성 향상)
+  const centerX = x1 + width / 2;
+  const centerY = y1 + height / 2;
+
+  // 텍스트 배경
+  ctx.font = 'bold 13px sans-serif';
+  const textMetrics = ctx.measureText(region.workplace_name);
+  const textWidth = textMetrics.width + 12;
+  const textHeight = 20;
+
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
+  drawRoundRect(ctx, centerX - textWidth / 2, centerY - textHeight / 2, textWidth, textHeight, 4);
+  ctx.fill();
+
+  // 텍스트
+  ctx.fillStyle = textColor;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText(region.workplace_name, centerX, centerY);
+
+  // 인원수 표시
+  const total = workerCount + visitorCount;
+  if (total > 0) {
+    // 인원수 배경
+    ctx.font = 'bold 12px sans-serif';
+    const countText = `${total}명`;
+    const countMetrics = ctx.measureText(countText);
+    const countWidth = countMetrics.width + 10;
+    const countHeight = 18;
+
+    ctx.fillStyle = strokeColor;
+    drawRoundRect(ctx, centerX - countWidth / 2, centerY + 12, countWidth, countHeight, 4);
+    ctx.fill();
+
+    ctx.fillStyle = '#ffffff';
+    ctx.fillText(countText, centerX, centerY + 21);
+  }
+}
+
+/**
+ * 지도 클릭 처리
+ */
+function onMapClick(e) {
+  const rect = canvas.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const y = e.clientY - rect.top;
+
+  // 클릭된 영역 찾기
+  for (const region of mapRegions) {
+    const x1 = (region.x_start / 100) * canvas.width;
+    const y1 = (region.y_start / 100) * canvas.height;
+    const x2 = (region.x_end / 100) * canvas.width;
+    const y2 = (region.y_end / 100) * canvas.height;
+
+    if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
+      selectWorkplace(region);
+      return;
+    }
+  }
+}
+
+/**
+ * 작업장 선택
+ */
+function selectWorkplace(region) {
+  // 기타 위치 체크박스 해제
+  document.getElementById('useCustomLocation').checked = false;
+  document.getElementById('customLocationInput').classList.remove('visible');
+
+  selectedWorkplaceId = region.workplace_id;
+  selectedWorkplaceName = region.workplace_name;
+
+  // 해당 작업장의 TBM/출입신청 확인
+  const workers = todayWorkers.filter(w => w.workplace_id === region.workplace_id);
+  const visitors = todayVisitors.filter(v => v.workplace_id === region.workplace_id);
+
+  if (workers.length > 0 || visitors.length > 0) {
+    // 작업 선택 모달 표시
+    showWorkSelectionModal(workers, visitors);
+  } else {
+    selectedTbmSessionId = null;
+    selectedVisitRequestId = null;
+  }
+
+  updateLocationInfo();
+  renderMap();
+  updateStepStatus();
+}
+
+/**
+ * 작업 선택 모달 표시
+ */
+function showWorkSelectionModal(workers, visitors) {
+  const modal = document.getElementById('workSelectionModal');
+  const optionsList = document.getElementById('workOptionsList');
+
+  optionsList.innerHTML = '';
+
+  // TBM 작업 옵션
+  workers.forEach(w => {
+    const option = document.createElement('div');
+    option.className = 'work-option';
+    const safeTaskName = escapeHtml(w.task_name || '작업');
+    const safeProjectName = escapeHtml(w.project_name || '');
+    const memberCount = parseInt(w.member_count) || 0;
+    option.innerHTML = `
+      <div class="work-option-title">TBM: ${safeTaskName}</div>
+      <div class="work-option-desc">${safeProjectName} - ${memberCount}명</div>
+    `;
+    option.onclick = () => {
+      selectedTbmSessionId = w.session_id;
+      selectedVisitRequestId = null;
+      closeWorkModal();
+      updateLocationInfo();
+    };
+    optionsList.appendChild(option);
+  });
+
+  // 출입신청 옵션
+  visitors.forEach(v => {
+    const option = document.createElement('div');
+    option.className = 'work-option';
+    const safeCompany = escapeHtml(v.visitor_company || '-');
+    const safePurpose = escapeHtml(v.purpose_name || '방문');
+    const visitorCount = parseInt(v.visitor_count) || 0;
+    option.innerHTML = `
+      <div class="work-option-title">출입: ${safeCompany}</div>
+      <div class="work-option-desc">${safePurpose} - ${visitorCount}명</div>
+    `;
+    option.onclick = () => {
+      selectedVisitRequestId = v.request_id;
+      selectedTbmSessionId = null;
+      closeWorkModal();
+      updateLocationInfo();
+    };
+    optionsList.appendChild(option);
+  });
+
+  modal.classList.add('visible');
+}
+
+/**
+ * 작업 선택 모달 닫기
+ */
+function closeWorkModal() {
+  document.getElementById('workSelectionModal').classList.remove('visible');
+}
+
+/**
+ * 선택된 위치 정보 업데이트
+ */
+function updateLocationInfo() {
+  const infoBox = document.getElementById('selectedLocationInfo');
+  const customLocation = document.getElementById('customLocation').value;
+  const useCustom = document.getElementById('useCustomLocation').checked;
+
+  if (useCustom && customLocation) {
+    infoBox.classList.remove('empty');
+    infoBox.innerHTML = `<strong>선택된 위치:</strong> ${escapeHtml(customLocation)}`;
+  } else if (selectedWorkplaceName) {
+    infoBox.classList.remove('empty');
+    let html = `<strong>선택된 위치:</strong> ${escapeHtml(selectedWorkplaceName)}`;
+
+    if (selectedTbmSessionId) {
+      const worker = todayWorkers.find(w => w.session_id === selectedTbmSessionId);
+      if (worker) {
+        html += `<br><span style="color: var(--primary-600);">연결 작업: ${escapeHtml(worker.task_name || '-')} (TBM)</span>`;
+      }
+    } else if (selectedVisitRequestId) {
+      const visitor = todayVisitors.find(v => v.request_id === selectedVisitRequestId);
+      if (visitor) {
+        html += `<br><span style="color: var(--primary-600);">연결 작업: ${escapeHtml(visitor.visitor_company || '-')} (출입)</span>`;
+      }
+    }
+
+    infoBox.innerHTML = html;
+  } else {
+    infoBox.classList.add('empty');
+    infoBox.textContent = '지도에서 작업장을 클릭하여 위치를 선택하세요';
+  }
+}
+
+/**
+ * 유형 선택
+ */
+function onTypeSelect(type) {
+  selectedType = type;
+  selectedCategoryId = null;
+  selectedCategoryName = null;
+  selectedItemId = null;
+
+  // 버튼 상태 업데이트
+  document.querySelectorAll('.type-btn').forEach(btn => {
+    btn.classList.toggle('selected', btn.dataset.type === type);
+  });
+
+  // 카테고리 로드
+  loadCategories(type);
+  updateStepStatus();
+}
+
+/**
+ * 카테고리 로드
+ */
+async function loadCategories(type) {
+  try {
+    const response = await fetch(`${API_BASE}/work-issues/categories/type/${type}`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (!response.ok) throw new Error('카테고리 조회 실패');
+
+    const data = await response.json();
+    if (data.success && data.data) {
+      renderCategories(data.data);
+    }
+  } catch (error) {
+    console.error('카테고리 로드 실패:', error);
+  }
+}
+
+/**
+ * 카테고리 렌더링
+ */
+function renderCategories(categories) {
+  const container = document.getElementById('categoryContainer');
+  const grid = document.getElementById('categoryGrid');
+
+  grid.innerHTML = '';
+
+  categories.forEach(cat => {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'category-btn';
+    btn.textContent = cat.category_name;
+    btn.onclick = () => onCategorySelect(cat);
+    grid.appendChild(btn);
+  });
+
+  container.style.display = 'block';
+}
+
+/**
+ * 카테고리 선택
+ */
+function onCategorySelect(category) {
+  selectedCategoryId = category.category_id;
+  selectedCategoryName = category.category_name;
+  selectedItemId = null;
+
+  // 버튼 상태 업데이트
+  document.querySelectorAll('.category-btn').forEach(btn => {
+    btn.classList.toggle('selected', btn.textContent === category.category_name);
+  });
+
+  // 항목 로드
+  loadItems(category.category_id);
+  updateStepStatus();
+}
+
+/**
+ * 항목 로드
+ */
+async function loadItems(categoryId) {
+  try {
+    const response = await fetch(`${API_BASE}/work-issues/items/category/${categoryId}`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (!response.ok) throw new Error('항목 조회 실패');
+
+    const data = await response.json();
+    if (data.success && data.data) {
+      renderItems(data.data);
+    }
+  } catch (error) {
+    console.error('항목 로드 실패:', error);
+  }
+}
+
+/**
+ * 항목 렌더링
+ */
+function renderItems(items) {
+  const grid = document.getElementById('itemGrid');
+  grid.innerHTML = '';
+
+  // 기존 항목들 렌더링
+  items.forEach(item => {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'item-btn';
+    btn.textContent = item.item_name;
+    btn.dataset.severity = item.severity;
+    btn.onclick = () => onItemSelect(item, btn);
+    grid.appendChild(btn);
+  });
+
+  // 직접 입력 버튼 추가
+  const customBtn = document.createElement('button');
+  customBtn.type = 'button';
+  customBtn.className = 'item-btn custom-input-btn';
+  customBtn.textContent = '+ 직접 입력';
+  customBtn.onclick = () => showCustomItemInput();
+  grid.appendChild(customBtn);
+
+  // 직접 입력 영역 숨기기
+  document.getElementById('customItemInput').style.display = 'none';
+  document.getElementById('customItemName').value = '';
+  customItemName = null;
+}
+
+/**
+ * 항목 선택
+ */
+function onItemSelect(item, btn) {
+  // 단일 선택 (기존 선택 해제)
+  document.querySelectorAll('.item-btn').forEach(b => b.classList.remove('selected'));
+  btn.classList.add('selected');
+
+  selectedItemId = item.item_id;
+  customItemName = null; // 기존 항목 선택 시 직접 입력 초기화
+  document.getElementById('customItemInput').style.display = 'none';
+  updateStepStatus();
+}
+
+/**
+ * 직접 입력 영역 표시
+ */
+function showCustomItemInput() {
+  // 기존 선택 해제
+  document.querySelectorAll('.item-btn').forEach(b => b.classList.remove('selected'));
+  document.querySelector('.custom-input-btn').classList.add('selected');
+
+  selectedItemId = null;
+
+  // 입력 영역 표시
+  document.getElementById('customItemInput').style.display = 'flex';
+  document.getElementById('customItemName').focus();
+}
+
+/**
+ * 직접 입력 확인
+ */
+function confirmCustomItem() {
+  const input = document.getElementById('customItemName');
+  const value = input.value.trim();
+
+  if (!value) {
+    alert('항목명을 입력해주세요.');
+    input.focus();
+    return;
+  }
+
+  customItemName = value;
+  selectedItemId = null; // 커스텀 항목이므로 ID는 null
+
+  // 입력 완료 표시
+  const customBtn = document.querySelector('.custom-input-btn');
+  customBtn.textContent = `✓ ${value}`;
+  customBtn.classList.add('selected');
+
+  updateStepStatus();
+}
+
+/**
+ * 직접 입력 취소
+ */
+function cancelCustomItem() {
+  document.getElementById('customItemInput').style.display = 'none';
+  document.getElementById('customItemName').value = '';
+  customItemName = null;
+
+  // 직접 입력 버튼 원상복구
+  const customBtn = document.querySelector('.custom-input-btn');
+  customBtn.textContent = '+ 직접 입력';
+  customBtn.classList.remove('selected');
+
+  updateStepStatus();
+}
+
+/**
+ * 사진 선택
+ */
+function onPhotoSelect(e) {
+  const file = e.target.files[0];
+  if (!file) return;
+
+  const reader = new FileReader();
+  reader.onload = (event) => {
+    photos[currentPhotoIndex] = event.target.result;
+    updatePhotoSlot(currentPhotoIndex);
+    updateStepStatus(); // 제출 버튼 상태 업데이트
+  };
+  reader.readAsDataURL(file);
+
+  // 입력 초기화
+  e.target.value = '';
+}
+
+/**
+ * 사진 슬롯 업데이트
+ */
+function updatePhotoSlot(index) {
+  const slot = document.querySelector(`.photo-slot[data-index="${index}"]`);
+
+  if (photos[index]) {
+    slot.classList.add('has-photo');
+    let img = slot.querySelector('img');
+    if (!img) {
+      img = document.createElement('img');
+      slot.insertBefore(img, slot.firstChild);
+    }
+    img.src = photos[index];
+  } else {
+    slot.classList.remove('has-photo');
+    const img = slot.querySelector('img');
+    if (img) img.remove();
+  }
+}
+
+/**
+ * 사진 삭제
+ */
+function removePhoto(index) {
+  photos[index] = null;
+  updatePhotoSlot(index);
+  updateStepStatus(); // 제출 버튼 상태 업데이트
+}
+
+/**
+ * 단계 상태 업데이트
+ */
+function updateStepStatus() {
+  const steps = document.querySelectorAll('.step');
+  const customLocation = document.getElementById('customLocation').value;
+  const useCustom = document.getElementById('useCustomLocation').checked;
+
+  // Step 1: 위치
+  const step1Complete = (useCustom && customLocation) || selectedWorkplaceId;
+  steps[0].classList.toggle('completed', step1Complete);
+  steps[1].classList.toggle('active', step1Complete);
+
+  // Step 2: 유형
+  const step2Complete = selectedType && selectedCategoryId;
+  steps[1].classList.toggle('completed', step2Complete);
+  steps[2].classList.toggle('active', step2Complete);
+
+  // Step 3: 항목 (기존 항목 선택 또는 직접 입력)
+  const step3Complete = selectedItemId || customItemName;
+  steps[2].classList.toggle('completed', step3Complete);
+  steps[3].classList.toggle('active', step3Complete);
+
+  // 제출 버튼 활성화
+  const submitBtn = document.getElementById('submitBtn');
+  const hasPhoto = photos.some(p => p !== null);
+  submitBtn.disabled = !(step1Complete && step2Complete && step3Complete && hasPhoto);
+}
+
+/**
+ * 신고 제출
+ */
+async function submitReport() {
+  const submitBtn = document.getElementById('submitBtn');
+  submitBtn.disabled = true;
+  submitBtn.textContent = '제출 중...';
+
+  try {
+    const useCustom = document.getElementById('useCustomLocation').checked;
+    const customLocation = document.getElementById('customLocation').value;
+    const additionalDescription = document.getElementById('additionalDescription').value;
+
+    const requestBody = {
+      factory_category_id: useCustom ? null : selectedFactoryId,
+      workplace_id: useCustom ? null : selectedWorkplaceId,
+      custom_location: useCustom ? customLocation : null,
+      tbm_session_id: selectedTbmSessionId,
+      visit_request_id: selectedVisitRequestId,
+      issue_category_id: selectedCategoryId,
+      issue_item_id: selectedItemId,
+      custom_item_name: customItemName, // 직접 입력한 항목명
+      additional_description: additionalDescription || null,
+      photos: photos.filter(p => p !== null)
+    };
+
+    const response = await fetch(`${API_BASE}/work-issues`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${localStorage.getItem('token')}`
+      },
+      body: JSON.stringify(requestBody)
+    });
+
+    const data = await response.json();
+
+    if (data.success) {
+      alert('신고가 등록되었습니다.');
+      // 유형에 따라 다른 페이지로 리다이렉트
+      if (selectedType === 'nonconformity') {
+        window.location.href = '/pages/work/nonconformity.html';
+      } else if (selectedType === 'safety') {
+        window.location.href = '/pages/safety/report-status.html';
+      } else {
+        // 기본: 뒤로가기
+        history.back();
+      }
+    } else {
+      throw new Error(data.error || '신고 등록 실패');
+    }
+  } catch (error) {
+    console.error('신고 제출 실패:', error);
+    alert('신고 등록에 실패했습니다: ' + error.message);
+  } finally {
+    submitBtn.disabled = false;
+    submitBtn.textContent = '신고 제출';
+  }
+}
+
+// 기타 위치 입력 시 위치 정보 업데이트
+document.addEventListener('DOMContentLoaded', () => {
+  const customLocationInput = document.getElementById('customLocation');
+  if (customLocationInput) {
+    customLocationInput.addEventListener('input', () => {
+      updateLocationInfo();
+      updateStepStatus();
+    });
+  }
+});
+
+// 전역 함수 노출 (HTML onclick에서 호출용)
+window.closeWorkModal = closeWorkModal;
+window.submitReport = submitReport;
+window.showCustomItemInput = showCustomItemInput;
+window.confirmCustomItem = confirmCustomItem;
+window.cancelCustomItem = cancelCustomItem;

system2-report/web/js/work-issue-report.js

@@ -0,0 +1,740 @@
+/**
+ * 문제 신고 등록 페이지 JavaScript
+ */
+
+// API 설정
+const API_BASE = window.API_BASE_URL || 'http://localhost:20005/api';
+
+// 상태 변수
+let selectedFactoryId = null;
+let selectedWorkplaceId = null;
+let selectedWorkplaceName = null;
+let selectedType = null; // 'nonconformity' | 'safety'
+let selectedCategoryId = null;
+let selectedCategoryName = null;
+let selectedItemId = null;
+let selectedTbmSessionId = null;
+let selectedVisitRequestId = null;
+let photos = [null, null, null, null, null];
+
+// 지도 관련 변수
+let canvas, ctx, canvasImage;
+let mapRegions = [];
+let todayWorkers = [];
+let todayVisitors = [];
+
+// DOM 요소
+let factorySelect, issueMapCanvas;
+let photoInput, currentPhotoIndex;
+
+// 초기화
+document.addEventListener('DOMContentLoaded', async () => {
+  factorySelect = document.getElementById('factorySelect');
+  issueMapCanvas = document.getElementById('issueMapCanvas');
+  photoInput = document.getElementById('photoInput');
+
+  canvas = issueMapCanvas;
+  ctx = canvas.getContext('2d');
+
+  // 이벤트 리스너 설정
+  setupEventListeners();
+
+  // 공장 목록 로드
+  await loadFactories();
+});
+
+/**
+ * 이벤트 리스너 설정
+ */
+function setupEventListeners() {
+  // 공장 선택
+  factorySelect.addEventListener('change', onFactoryChange);
+
+  // 지도 클릭
+  canvas.addEventListener('click', onMapClick);
+
+  // 기타 위치 토글
+  document.getElementById('useCustomLocation').addEventListener('change', (e) => {
+    const customInput = document.getElementById('customLocationInput');
+    customInput.classList.toggle('visible', e.target.checked);
+
+    if (e.target.checked) {
+      // 지도 선택 초기화
+      selectedWorkplaceId = null;
+      selectedWorkplaceName = null;
+      selectedTbmSessionId = null;
+      selectedVisitRequestId = null;
+      updateLocationInfo();
+    }
+  });
+
+  // 유형 버튼 클릭
+  document.querySelectorAll('.type-btn').forEach(btn => {
+    btn.addEventListener('click', () => onTypeSelect(btn.dataset.type));
+  });
+
+  // 사진 슬롯 클릭
+  document.querySelectorAll('.photo-slot').forEach(slot => {
+    slot.addEventListener('click', (e) => {
+      if (e.target.classList.contains('remove-btn')) return;
+      currentPhotoIndex = parseInt(slot.dataset.index);
+      photoInput.click();
+    });
+  });
+
+  // 사진 삭제 버튼
+  document.querySelectorAll('.photo-slot .remove-btn').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const slot = btn.closest('.photo-slot');
+      const index = parseInt(slot.dataset.index);
+      removePhoto(index);
+    });
+  });
+
+  // 사진 선택
+  photoInput.addEventListener('change', onPhotoSelect);
+}
+
+/**
+ * 공장 목록 로드
+ */
+async function loadFactories() {
+  try {
+    const response = await fetch(`${API_BASE}/workplaces/categories/active/list`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (!response.ok) throw new Error('공장 목록 조회 실패');
+
+    const data = await response.json();
+    if (data.success && data.data) {
+      data.data.forEach(factory => {
+        const option = document.createElement('option');
+        option.value = factory.category_id;
+        option.textContent = factory.category_name;
+        factorySelect.appendChild(option);
+      });
+
+      // 첫 번째 공장 자동 선택
+      if (data.data.length > 0) {
+        factorySelect.value = data.data[0].category_id;
+        onFactoryChange();
+      }
+    }
+  } catch (error) {
+    console.error('공장 목록 로드 실패:', error);
+  }
+}
+
+/**
+ * 공장 변경 시
+ */
+async function onFactoryChange() {
+  selectedFactoryId = factorySelect.value;
+  if (!selectedFactoryId) return;
+
+  // 위치 선택 초기화
+  selectedWorkplaceId = null;
+  selectedWorkplaceName = null;
+  selectedTbmSessionId = null;
+  selectedVisitRequestId = null;
+  updateLocationInfo();
+
+  // 지도 데이터 로드
+  await Promise.all([
+    loadMapImage(),
+    loadMapRegions(),
+    loadTodayData()
+  ]);
+
+  renderMap();
+}
+
+/**
+ * 배치도 이미지 로드
+ */
+async function loadMapImage() {
+  try {
+    const response = await fetch(`${API_BASE}/workplaces/categories`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (!response.ok) return;
+
+    const data = await response.json();
+    if (data.success && data.data) {
+      const selectedCategory = data.data.find(c => c.category_id == selectedFactoryId);
+      if (selectedCategory && selectedCategory.layout_image) {
+        const baseUrl = (window.API_BASE_URL || 'http://localhost:20005').replace('/api', '');
+        const fullImageUrl = selectedCategory.layout_image.startsWith('http')
+          ? selectedCategory.layout_image
+          : `${baseUrl}${selectedCategory.layout_image}`;
+
+        canvasImage = new Image();
+        canvasImage.onload = () => renderMap();
+        canvasImage.src = fullImageUrl;
+      }
+    }
+  } catch (error) {
+    console.error('배치도 이미지 로드 실패:', error);
+  }
+}
+
+/**
+ * 지도 영역 로드
+ */
+async function loadMapRegions() {
+  try {
+    const response = await fetch(`${API_BASE}/workplaces/categories/${selectedFactoryId}/map-regions`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (!response.ok) return;
+
+    const data = await response.json();
+    if (data.success) {
+      mapRegions = data.data || [];
+    }
+  } catch (error) {
+    console.error('지도 영역 로드 실패:', error);
+  }
+}
+
+/**
+ * 오늘 TBM/출입신청 데이터 로드
+ */
+async function loadTodayData() {
+  const today = new Date().toISOString().split('T')[0];
+
+  try {
+    // TBM 세션 로드
+    const tbmResponse = await fetch(`${API_BASE}/tbm/sessions/date/${today}`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (tbmResponse.ok) {
+      const tbmData = await tbmResponse.json();
+      todayWorkers = tbmData.data || [];
+    }
+
+    // 출입 신청 로드
+    const visitResponse = await fetch(`${API_BASE}/workplace-visits/requests`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (visitResponse.ok) {
+      const visitData = await visitResponse.json();
+      todayVisitors = (visitData.data || []).filter(v =>
+        v.visit_date === today &&
+        (v.status === 'approved' || v.status === 'training_completed')
+      );
+    }
+  } catch (error) {
+    console.error('오늘 데이터 로드 실패:', error);
+  }
+}
+
+/**
+ * 지도 렌더링
+ */
+function renderMap() {
+  if (!canvas || !ctx) return;
+
+  // 캔버스 크기 설정
+  const container = canvas.parentElement;
+  canvas.width = container.clientWidth;
+  canvas.height = 400;
+
+  // 배경 그리기
+  ctx.fillStyle = '#f3f4f6';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  // 배치도 이미지
+  if (canvasImage && canvasImage.complete) {
+    const scale = Math.min(canvas.width / canvasImage.width, canvas.height / canvasImage.height);
+    const x = (canvas.width - canvasImage.width * scale) / 2;
+    const y = (canvas.height - canvasImage.height * scale) / 2;
+    ctx.drawImage(canvasImage, x, y, canvasImage.width * scale, canvasImage.height * scale);
+  }
+
+  // 작업장 영역 그리기
+  mapRegions.forEach(region => {
+    const workers = todayWorkers.filter(w => w.workplace_id === region.workplace_id);
+    const visitors = todayVisitors.filter(v => v.workplace_id === region.workplace_id);
+
+    const workerCount = workers.reduce((sum, w) => sum + (w.member_count || 0), 0);
+    const visitorCount = visitors.reduce((sum, v) => sum + (v.visitor_count || 0), 0);
+
+    drawWorkplaceRegion(region, workerCount, visitorCount);
+  });
+}
+
+/**
+ * 작업장 영역 그리기
+ */
+function drawWorkplaceRegion(region, workerCount, visitorCount) {
+  const x1 = (region.x_start / 100) * canvas.width;
+  const y1 = (region.y_start / 100) * canvas.height;
+  const x2 = (region.x_end / 100) * canvas.width;
+  const y2 = (region.y_end / 100) * canvas.height;
+  const width = x2 - x1;
+  const height = y2 - y1;
+
+  // 선택된 작업장 하이라이트
+  const isSelected = region.workplace_id === selectedWorkplaceId;
+
+  // 색상 결정
+  let fillColor, strokeColor;
+  if (isSelected) {
+    fillColor = 'rgba(34, 197, 94, 0.3)'; // 초록색
+    strokeColor = 'rgb(34, 197, 94)';
+  } else if (workerCount > 0 && visitorCount > 0) {
+    fillColor = 'rgba(34, 197, 94, 0.2)'; // 초록색 (작업+방문)
+    strokeColor = 'rgb(34, 197, 94)';
+  } else if (workerCount > 0) {
+    fillColor = 'rgba(59, 130, 246, 0.2)'; // 파란색 (작업만)
+    strokeColor = 'rgb(59, 130, 246)';
+  } else if (visitorCount > 0) {
+    fillColor = 'rgba(168, 85, 247, 0.2)'; // 보라색 (방문만)
+    strokeColor = 'rgb(168, 85, 247)';
+  } else {
+    fillColor = 'rgba(156, 163, 175, 0.2)'; // 회색 (없음)
+    strokeColor = 'rgb(156, 163, 175)';
+  }
+
+  ctx.fillStyle = fillColor;
+  ctx.strokeStyle = strokeColor;
+  ctx.lineWidth = isSelected ? 3 : 2;
+
+  ctx.beginPath();
+  ctx.rect(x1, y1, width, height);
+  ctx.fill();
+  ctx.stroke();
+
+  // 작업장명 표시
+  const centerX = x1 + width / 2;
+  const centerY = y1 + height / 2;
+
+  ctx.fillStyle = '#374151';
+  ctx.font = '12px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText(region.workplace_name, centerX, centerY);
+
+  // 인원수 표시
+  const total = workerCount + visitorCount;
+  if (total > 0) {
+    ctx.fillStyle = strokeColor;
+    ctx.font = 'bold 14px sans-serif';
+    ctx.fillText(`(${total}명)`, centerX, centerY + 16);
+  }
+}
+
+/**
+ * 지도 클릭 처리
+ */
+function onMapClick(e) {
+  const rect = canvas.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const y = e.clientY - rect.top;
+
+  // 클릭된 영역 찾기
+  for (const region of mapRegions) {
+    const x1 = (region.x_start / 100) * canvas.width;
+    const y1 = (region.y_start / 100) * canvas.height;
+    const x2 = (region.x_end / 100) * canvas.width;
+    const y2 = (region.y_end / 100) * canvas.height;
+
+    if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
+      selectWorkplace(region);
+      return;
+    }
+  }
+}
+
+/**
+ * 작업장 선택
+ */
+function selectWorkplace(region) {
+  // 기타 위치 체크박스 해제
+  document.getElementById('useCustomLocation').checked = false;
+  document.getElementById('customLocationInput').classList.remove('visible');
+
+  selectedWorkplaceId = region.workplace_id;
+  selectedWorkplaceName = region.workplace_name;
+
+  // 해당 작업장의 TBM/출입신청 확인
+  const workers = todayWorkers.filter(w => w.workplace_id === region.workplace_id);
+  const visitors = todayVisitors.filter(v => v.workplace_id === region.workplace_id);
+
+  if (workers.length > 0 || visitors.length > 0) {
+    // 작업 선택 모달 표시
+    showWorkSelectionModal(workers, visitors);
+  } else {
+    selectedTbmSessionId = null;
+    selectedVisitRequestId = null;
+  }
+
+  updateLocationInfo();
+  renderMap();
+  updateStepStatus();
+}
+
+/**
+ * 작업 선택 모달 표시
+ */
+function showWorkSelectionModal(workers, visitors) {
+  const modal = document.getElementById('workSelectionModal');
+  const optionsList = document.getElementById('workOptionsList');
+
+  optionsList.innerHTML = '';
+
+  // TBM 작업 옵션
+  workers.forEach(w => {
+    const option = document.createElement('div');
+    option.className = 'work-option';
+    option.innerHTML = `
+      <div class="work-option-title">TBM: ${w.task_name || '작업'}</div>
+      <div class="work-option-desc">${w.project_name || ''} - ${w.member_count || 0}명</div>
+    `;
+    option.onclick = () => {
+      selectedTbmSessionId = w.session_id;
+      selectedVisitRequestId = null;
+      closeWorkModal();
+      updateLocationInfo();
+    };
+    optionsList.appendChild(option);
+  });
+
+  // 출입신청 옵션
+  visitors.forEach(v => {
+    const option = document.createElement('div');
+    option.className = 'work-option';
+    option.innerHTML = `
+      <div class="work-option-title">출입: ${v.visitor_company}</div>
+      <div class="work-option-desc">${v.purpose_name || '방문'} - ${v.visitor_count || 0}명</div>
+    `;
+    option.onclick = () => {
+      selectedVisitRequestId = v.request_id;
+      selectedTbmSessionId = null;
+      closeWorkModal();
+      updateLocationInfo();
+    };
+    optionsList.appendChild(option);
+  });
+
+  modal.classList.add('visible');
+}
+
+/**
+ * 작업 선택 모달 닫기
+ */
+function closeWorkModal() {
+  document.getElementById('workSelectionModal').classList.remove('visible');
+}
+
+/**
+ * 선택된 위치 정보 업데이트
+ */
+function updateLocationInfo() {
+  const infoBox = document.getElementById('selectedLocationInfo');
+  const customLocation = document.getElementById('customLocation').value;
+  const useCustom = document.getElementById('useCustomLocation').checked;
+
+  if (useCustom && customLocation) {
+    infoBox.classList.remove('empty');
+    infoBox.innerHTML = `<strong>선택된 위치:</strong> ${customLocation}`;
+  } else if (selectedWorkplaceName) {
+    infoBox.classList.remove('empty');
+    let html = `<strong>선택된 위치:</strong> ${selectedWorkplaceName}`;
+
+    if (selectedTbmSessionId) {
+      const worker = todayWorkers.find(w => w.session_id === selectedTbmSessionId);
+      if (worker) {
+        html += `<br><span style="color: var(--primary-600);">연결 작업: ${worker.task_name} (TBM)</span>`;
+      }
+    } else if (selectedVisitRequestId) {
+      const visitor = todayVisitors.find(v => v.request_id === selectedVisitRequestId);
+      if (visitor) {
+        html += `<br><span style="color: var(--primary-600);">연결 작업: ${visitor.visitor_company} (출입)</span>`;
+      }
+    }
+
+    infoBox.innerHTML = html;
+  } else {
+    infoBox.classList.add('empty');
+    infoBox.textContent = '지도에서 작업장을 클릭하여 위치를 선택하세요';
+  }
+}
+
+/**
+ * 유형 선택
+ */
+function onTypeSelect(type) {
+  selectedType = type;
+  selectedCategoryId = null;
+  selectedCategoryName = null;
+  selectedItemId = null;
+
+  // 버튼 상태 업데이트
+  document.querySelectorAll('.type-btn').forEach(btn => {
+    btn.classList.toggle('selected', btn.dataset.type === type);
+  });
+
+  // 카테고리 로드
+  loadCategories(type);
+  updateStepStatus();
+}
+
+/**
+ * 카테고리 로드
+ */
+async function loadCategories(type) {
+  try {
+    const response = await fetch(`${API_BASE}/work-issues/categories/type/${type}`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (!response.ok) throw new Error('카테고리 조회 실패');
+
+    const data = await response.json();
+    if (data.success && data.data) {
+      renderCategories(data.data);
+    }
+  } catch (error) {
+    console.error('카테고리 로드 실패:', error);
+  }
+}
+
+/**
+ * 카테고리 렌더링
+ */
+function renderCategories(categories) {
+  const container = document.getElementById('categoryContainer');
+  const grid = document.getElementById('categoryGrid');
+
+  grid.innerHTML = '';
+
+  categories.forEach(cat => {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'category-btn';
+    btn.textContent = cat.category_name;
+    btn.onclick = () => onCategorySelect(cat);
+    grid.appendChild(btn);
+  });
+
+  container.style.display = 'block';
+}
+
+/**
+ * 카테고리 선택
+ */
+function onCategorySelect(category) {
+  selectedCategoryId = category.category_id;
+  selectedCategoryName = category.category_name;
+  selectedItemId = null;
+
+  // 버튼 상태 업데이트
+  document.querySelectorAll('.category-btn').forEach(btn => {
+    btn.classList.toggle('selected', btn.textContent === category.category_name);
+  });
+
+  // 항목 로드
+  loadItems(category.category_id);
+  updateStepStatus();
+}
+
+/**
+ * 항목 로드
+ */
+async function loadItems(categoryId) {
+  try {
+    const response = await fetch(`${API_BASE}/work-issues/items/category/${categoryId}`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (!response.ok) throw new Error('항목 조회 실패');
+
+    const data = await response.json();
+    if (data.success && data.data) {
+      renderItems(data.data);
+    }
+  } catch (error) {
+    console.error('항목 로드 실패:', error);
+  }
+}
+
+/**
+ * 항목 렌더링
+ */
+function renderItems(items) {
+  const grid = document.getElementById('itemGrid');
+  grid.innerHTML = '';
+
+  if (items.length === 0) {
+    grid.innerHTML = '<p style="color: var(--gray-400);">등록된 항목이 없습니다</p>';
+    return;
+  }
+
+  items.forEach(item => {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'item-btn';
+    btn.textContent = item.item_name;
+    btn.dataset.severity = item.severity;
+    btn.onclick = () => onItemSelect(item, btn);
+    grid.appendChild(btn);
+  });
+}
+
+/**
+ * 항목 선택
+ */
+function onItemSelect(item, btn) {
+  // 단일 선택 (기존 선택 해제)
+  document.querySelectorAll('.item-btn').forEach(b => b.classList.remove('selected'));
+  btn.classList.add('selected');
+
+  selectedItemId = item.item_id;
+  updateStepStatus();
+}
+
+/**
+ * 사진 선택
+ */
+function onPhotoSelect(e) {
+  const file = e.target.files[0];
+  if (!file) return;
+
+  const reader = new FileReader();
+  reader.onload = (event) => {
+    photos[currentPhotoIndex] = event.target.result;
+    updatePhotoSlot(currentPhotoIndex);
+  };
+  reader.readAsDataURL(file);
+
+  // 입력 초기화
+  e.target.value = '';
+}
+
+/**
+ * 사진 슬롯 업데이트
+ */
+function updatePhotoSlot(index) {
+  const slot = document.querySelector(`.photo-slot[data-index="${index}"]`);
+
+  if (photos[index]) {
+    slot.classList.add('has-photo');
+    let img = slot.querySelector('img');
+    if (!img) {
+      img = document.createElement('img');
+      slot.insertBefore(img, slot.firstChild);
+    }
+    img.src = photos[index];
+  } else {
+    slot.classList.remove('has-photo');
+    const img = slot.querySelector('img');
+    if (img) img.remove();
+  }
+}
+
+/**
+ * 사진 삭제
+ */
+function removePhoto(index) {
+  photos[index] = null;
+  updatePhotoSlot(index);
+}
+
+/**
+ * 단계 상태 업데이트
+ */
+function updateStepStatus() {
+  const steps = document.querySelectorAll('.step');
+  const customLocation = document.getElementById('customLocation').value;
+  const useCustom = document.getElementById('useCustomLocation').checked;
+
+  // Step 1: 위치
+  const step1Complete = (useCustom && customLocation) || selectedWorkplaceId;
+  steps[0].classList.toggle('completed', step1Complete);
+  steps[1].classList.toggle('active', step1Complete);
+
+  // Step 2: 유형
+  const step2Complete = selectedType && selectedCategoryId;
+  steps[1].classList.toggle('completed', step2Complete);
+  steps[2].classList.toggle('active', step2Complete);
+
+  // Step 3: 항목
+  const step3Complete = selectedItemId;
+  steps[2].classList.toggle('completed', step3Complete);
+  steps[3].classList.toggle('active', step3Complete);
+
+  // 제출 버튼 활성화
+  const submitBtn = document.getElementById('submitBtn');
+  const hasPhoto = photos.some(p => p !== null);
+  submitBtn.disabled = !(step1Complete && step2Complete && hasPhoto);
+}
+
+/**
+ * 신고 제출
+ */
+async function submitReport() {
+  const submitBtn = document.getElementById('submitBtn');
+  submitBtn.disabled = true;
+  submitBtn.textContent = '제출 중...';
+
+  try {
+    const useCustom = document.getElementById('useCustomLocation').checked;
+    const customLocation = document.getElementById('customLocation').value;
+    const additionalDescription = document.getElementById('additionalDescription').value;
+
+    const requestBody = {
+      factory_category_id: useCustom ? null : selectedFactoryId,
+      workplace_id: useCustom ? null : selectedWorkplaceId,
+      custom_location: useCustom ? customLocation : null,
+      tbm_session_id: selectedTbmSessionId,
+      visit_request_id: selectedVisitRequestId,
+      issue_category_id: selectedCategoryId,
+      issue_item_id: selectedItemId,
+      additional_description: additionalDescription || null,
+      photos: photos.filter(p => p !== null)
+    };
+
+    const response = await fetch(`${API_BASE}/work-issues`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${localStorage.getItem('token')}`
+      },
+      body: JSON.stringify(requestBody)
+    });
+
+    const data = await response.json();
+
+    if (data.success) {
+      alert('문제 신고가 등록되었습니다.');
+      window.location.href = '/pages/safety/issue-list.html';
+    } else {
+      throw new Error(data.error || '신고 등록 실패');
+    }
+  } catch (error) {
+    console.error('신고 제출 실패:', error);
+    alert('신고 등록에 실패했습니다: ' + error.message);
+  } finally {
+    submitBtn.disabled = false;
+    submitBtn.textContent = '신고 제출';
+  }
+}
+
+// 기타 위치 입력 시 위치 정보 업데이트
+document.addEventListener('DOMContentLoaded', () => {
+  const customLocationInput = document.getElementById('customLocation');
+  if (customLocationInput) {
+    customLocationInput.addEventListener('input', () => {
+      updateLocationInfo();
+      updateStepStatus();
+    });
+  }
+});

system2-report/web/nginx.conf

@@ -0,0 +1,37 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index pages/safety/issue-report.html;
+
+    # 정적 파일 캐시
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+        expires 1h;
+        add_header Cache-Control "public, no-transform";
+    }
+
+    # HTML은 캐시하지 않음
+    location ~* \.html$ {
+        expires -1;
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+    }
+
+    # API 프록시 (시스템 2 API)
+    location /api/ {
+        proxy_pass http://system2-api:3005;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    # 업로드 파일
+    location /uploads/ {
+        proxy_pass http://system2-api:3005/uploads/;
+    }
+
+    location / {
+        try_files $uri $uri/ /pages/safety/issue-report.html;
+    }
+}

system2-report/web/pages/safety/issue-detail.html

@@ -0,0 +1,453 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>신고 상세 | (주)테크니컬코리아</title>
+    <link rel="stylesheet" href="/css/design-system.css">
+    <link rel="stylesheet" href="/css/common.css?v=2">
+    <link rel="stylesheet" href="/css/project-management.css?v=3">
+    <link rel="icon" type="image/png" href="/img/favicon.png">
+    <script src="/js/api-base.js"></script>
+    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="https://instant.page/5.2.0" type="module"></script>
+    <style>
+        /* 상태 배지 */
+        .status-badge {
+            display: inline-block;
+            padding: 0.375rem 1rem;
+            border-radius: 9999px;
+            font-size: 0.875rem;
+            font-weight: 600;
+        }
+
+        .status-badge.reported { background: #dbeafe; color: #1d4ed8; }
+        .status-badge.received { background: #fed7aa; color: #c2410c; }
+        .status-badge.in_progress { background: #e9d5ff; color: #7c3aed; }
+        .status-badge.completed { background: #d1fae5; color: #047857; }
+        .status-badge.closed { background: #f3f4f6; color: #4b5563; }
+
+        /* 유형 배지 */
+        .type-badge {
+            display: inline-block;
+            padding: 0.25rem 0.75rem;
+            border-radius: 0.25rem;
+            font-size: 0.875rem;
+            font-weight: 500;
+        }
+
+        .type-badge.nonconformity { background: #fff7ed; color: #c2410c; }
+        .type-badge.safety { background: #fef2f2; color: #b91c1c; }
+
+        /* 심각도 배지 */
+        .severity-badge {
+            display: inline-block;
+            padding: 0.125rem 0.5rem;
+            border-radius: 0.25rem;
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+
+        .severity-badge.critical { background: #fef2f2; color: #b91c1c; }
+        .severity-badge.high { background: #fff7ed; color: #c2410c; }
+        .severity-badge.medium { background: #fefce8; color: #a16207; }
+        .severity-badge.low { background: #f3f4f6; color: #4b5563; }
+
+        /* 상세 섹션 */
+        .detail-section {
+            background: white;
+            border-radius: 0.75rem;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+
+        .section-title {
+            font-size: 1rem;
+            font-weight: 600;
+            color: #1f2937;
+            margin-bottom: 1rem;
+            padding-bottom: 0.75rem;
+            border-bottom: 1px solid #e5e7eb;
+        }
+
+        /* 정보 그리드 */
+        .info-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 1rem;
+        }
+
+        .info-item {
+            padding: 0.875rem;
+            background: #f9fafb;
+            border-radius: 0.5rem;
+        }
+
+        .info-label {
+            font-size: 0.75rem;
+            color: #6b7280;
+            margin-bottom: 0.25rem;
+            text-transform: uppercase;
+        }
+
+        .info-value {
+            font-size: 0.9375rem;
+            font-weight: 500;
+            color: #1f2937;
+        }
+
+        /* 사진 갤러리 */
+        .photo-gallery {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+            gap: 0.75rem;
+        }
+
+        .photo-item {
+            aspect-ratio: 1;
+            border-radius: 0.5rem;
+            overflow: hidden;
+            cursor: pointer;
+            border: 1px solid #e5e7eb;
+        }
+
+        .photo-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: transform 0.2s;
+        }
+
+        .photo-item:hover img {
+            transform: scale(1.05);
+        }
+
+        /* 상태 타임라인 */
+        .status-timeline {
+            position: relative;
+            padding-left: 1.5rem;
+        }
+
+        .status-timeline::before {
+            content: '';
+            position: absolute;
+            left: 0.375rem;
+            top: 0;
+            bottom: 0;
+            width: 2px;
+            background: #e5e7eb;
+        }
+
+        .timeline-item {
+            position: relative;
+            padding-bottom: 1rem;
+        }
+
+        .timeline-item:last-child {
+            padding-bottom: 0;
+        }
+
+        .timeline-item::before {
+            content: '';
+            position: absolute;
+            left: -1.125rem;
+            top: 0.25rem;
+            width: 0.625rem;
+            height: 0.625rem;
+            border-radius: 50%;
+            background: #3b82f6;
+        }
+
+        .timeline-status {
+            font-weight: 600;
+            margin-bottom: 0.25rem;
+            color: #1f2937;
+        }
+
+        .timeline-meta {
+            font-size: 0.875rem;
+            color: #6b7280;
+        }
+
+        /* 액션 버튼 */
+        .action-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.75rem;
+            margin-top: 1.5rem;
+        }
+
+        .action-btn {
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+            font-weight: 600;
+            cursor: pointer;
+            border: 1px solid #d1d5db;
+            background: white;
+            transition: all 0.2s;
+        }
+
+        .action-btn:hover { background: #f9fafb; }
+        .action-btn.primary { background: #3b82f6; color: white; border-color: #3b82f6; }
+        .action-btn.primary:hover { background: #2563eb; }
+        .action-btn.success { background: #10b981; color: white; border-color: #10b981; }
+        .action-btn.success:hover { background: #059669; }
+        .action-btn.danger { background: #ef4444; color: white; border-color: #ef4444; }
+        .action-btn.danger:hover { background: #dc2626; }
+
+        /* 모달 */
+        .modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .modal-overlay.visible { display: flex; }
+
+        .modal-content {
+            background: white;
+            padding: 1.5rem;
+            border-radius: 0.75rem;
+            max-width: 500px;
+            width: 90%;
+            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
+        }
+
+        .modal-title {
+            font-size: 1.125rem;
+            font-weight: 600;
+            margin-bottom: 1.25rem;
+        }
+
+        .modal-form-group {
+            margin-bottom: 1rem;
+        }
+
+        .modal-form-group label {
+            display: block;
+            font-weight: 500;
+            margin-bottom: 0.5rem;
+            font-size: 0.875rem;
+        }
+
+        .modal-form-group input,
+        .modal-form-group select,
+        .modal-form-group textarea {
+            width: 100%;
+            padding: 0.75rem;
+            border: 1px solid #d1d5db;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+        }
+
+        .modal-form-group input:focus,
+        .modal-form-group select:focus,
+        .modal-form-group textarea:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+
+        .modal-actions {
+            display: flex;
+            justify-content: flex-end;
+            gap: 0.75rem;
+            margin-top: 1.25rem;
+        }
+
+        /* 사진 확대 모달 */
+        .photo-modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.9);
+            z-index: 1001;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .photo-modal.visible { display: flex; }
+
+        .photo-modal img {
+            max-width: 90%;
+            max-height: 90%;
+            object-fit: contain;
+        }
+
+        .photo-modal-close {
+            position: absolute;
+            top: 1.25rem;
+            right: 1.25rem;
+            color: white;
+            font-size: 2rem;
+            cursor: pointer;
+        }
+
+        /* 뒤로가기 링크 */
+        .back-link {
+            color: #3b82f6;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+            font-size: 0.875rem;
+        }
+
+        .back-link:hover {
+            text-decoration: underline;
+        }
+
+        /* 헤더 */
+        .detail-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 1.5rem;
+        }
+
+        .detail-id {
+            font-size: 0.875rem;
+            color: #6b7280;
+            margin-bottom: 0.5rem;
+        }
+
+        .detail-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #1f2937;
+        }
+
+        /* 반응형 */
+        @media (max-width: 768px) {
+            .info-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .detail-header {
+                flex-direction: column;
+                gap: 1rem;
+            }
+
+            .action-buttons {
+                flex-direction: column;
+            }
+
+            .action-btn {
+                width: 100%;
+                text-align: center;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="work-report-container">
+        <div id="navbar-container"></div>
+
+        <main class="work-report-main">
+            <div class="dashboard-main">
+                <a href="#" class="back-link" onclick="goBackToList(); return false;">
+                    &#8592; 목록으로
+                </a>
+
+                <div class="detail-header">
+                    <div>
+                        <div class="detail-id" id="reportId"></div>
+                        <h1 class="detail-title" id="reportTitle">로딩 중...</h1>
+                    </div>
+                    <span class="status-badge" id="statusBadge"></span>
+                </div>
+
+                <!-- 기본 정보 -->
+                <div class="detail-section">
+                    <h2 class="section-title">신고 정보</h2>
+                    <div class="info-grid" id="basicInfo"></div>
+                </div>
+
+                <!-- 신고 내용 -->
+                <div class="detail-section">
+                    <h2 class="section-title">신고 내용</h2>
+                    <div id="issueContent"></div>
+                </div>
+
+                <!-- 사진 -->
+                <div class="detail-section" id="photoSection" style="display: none;">
+                    <h2 class="section-title">첨부 사진</h2>
+                    <div class="photo-gallery" id="photoGallery"></div>
+                </div>
+
+                <!-- 처리 정보 -->
+                <div class="detail-section" id="processSection" style="display: none;">
+                    <h2 class="section-title">처리 정보</h2>
+                    <div id="processInfo"></div>
+                </div>
+
+                <!-- 상태 이력 -->
+                <div class="detail-section">
+                    <h2 class="section-title">상태 변경 이력</h2>
+                    <div class="status-timeline" id="statusTimeline"></div>
+                </div>
+
+                <!-- 액션 버튼 -->
+                <div class="action-buttons" id="actionButtons"></div>
+            </div>
+        </main>
+
+        <!-- 담당자 배정 모달 -->
+        <div class="modal-overlay" id="assignModal">
+            <div class="modal-content">
+                <h3 class="modal-title">담당자 배정</h3>
+                <div class="modal-form-group">
+                    <label>담당 부서</label>
+                    <input type="text" id="assignDepartment" placeholder="담당 부서 입력">
+                </div>
+                <div class="modal-form-group">
+                    <label>담당자</label>
+                    <select id="assignUser">
+                        <option value="">담당자 선택</option>
+                    </select>
+                </div>
+                <div class="modal-actions">
+                    <button class="action-btn" onclick="closeAssignModal()">취소</button>
+                    <button class="action-btn primary" onclick="submitAssign()">배정</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 처리 완료 모달 -->
+        <div class="modal-overlay" id="completeModal">
+            <div class="modal-content">
+                <h3 class="modal-title">처리 완료</h3>
+                <div class="modal-form-group">
+                    <label>처리 내용</label>
+                    <textarea id="resolutionNotes" rows="4" placeholder="처리 내용을 입력하세요"></textarea>
+                </div>
+                <div class="modal-actions">
+                    <button class="action-btn" onclick="closeCompleteModal()">취소</button>
+                    <button class="action-btn success" onclick="submitComplete()">완료 처리</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 사진 확대 모달 -->
+        <div class="photo-modal" id="photoModal" onclick="closePhotoModal()">
+            <span class="photo-modal-close">&times;</span>
+            <img id="photoModalImg" src="" alt="">
+        </div>
+    </div>
+
+    <script src="/js/issue-detail.js?v=1"></script>
+</body>
+</html>

system2-report/web/pages/safety/issue-report.html

@@ -0,0 +1,618 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>문제 신고 | (주)테크니컬코리아</title>
+    <link rel="stylesheet" href="/css/design-system.css">
+    <link rel="stylesheet" href="/css/common.css?v=2">
+    <link rel="stylesheet" href="/css/project-management.css?v=3">
+    <link rel="icon" type="image/png" href="/img/favicon.png">
+    <script src="/js/api-base.js"></script>
+    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="https://instant.page/5.2.0" type="module"></script>
+    <style>
+        .issue-form-container {
+            max-width: 900px;
+            margin: 0 auto;
+        }
+
+        .step-indicator {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 32px;
+            padding: 16px;
+            background: var(--gray-50);
+            border-radius: var(--radius-lg);
+        }
+
+        .step {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: var(--gray-400);
+            font-size: var(--text-sm);
+        }
+
+        .step.active {
+            color: var(--primary-600);
+            font-weight: 600;
+        }
+
+        .step.completed {
+            color: var(--green-600);
+        }
+
+        .step-number {
+            width: 28px;
+            height: 28px;
+            border-radius: 50%;
+            background: var(--gray-200);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+        }
+
+        .step.active .step-number {
+            background: var(--primary-500);
+            color: white;
+        }
+
+        .step.completed .step-number {
+            background: var(--green-500);
+            color: white;
+        }
+
+        .form-section {
+            background: white;
+            border-radius: var(--radius-lg);
+            padding: 24px;
+            margin-bottom: 24px;
+            box-shadow: var(--shadow-sm);
+            border: 1px solid var(--gray-200);
+        }
+
+        .form-section-title {
+            font-size: var(--text-lg);
+            font-weight: 600;
+            margin-bottom: 20px;
+            padding-bottom: 12px;
+            border-bottom: 1px solid var(--gray-200);
+        }
+
+        /* 지도 선택 영역 */
+        .map-container {
+            position: relative;
+            min-height: 400px;
+            background: var(--gray-100);
+            border-radius: var(--radius-md);
+            overflow: hidden;
+        }
+
+        #issueMapCanvas {
+            width: 100%;
+            height: 400px;
+            cursor: crosshair;
+        }
+
+        .selected-location-info {
+            margin-top: 16px;
+            padding: 16px;
+            background: var(--primary-50);
+            border-radius: var(--radius-md);
+            border-left: 4px solid var(--primary-500);
+        }
+
+        .selected-location-info.empty {
+            background: var(--gray-50);
+            border-left-color: var(--gray-300);
+            color: var(--gray-500);
+            text-align: center;
+        }
+
+        .custom-location-toggle {
+            margin-top: 16px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .custom-location-toggle input[type="checkbox"] {
+            width: 20px;
+            height: 20px;
+        }
+
+        .custom-location-input {
+            margin-top: 12px;
+            display: none;
+        }
+
+        .custom-location-input.visible {
+            display: block;
+        }
+
+        /* 유형 선택 버튼 */
+        .type-buttons {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+            margin-bottom: 24px;
+        }
+
+        .type-btn {
+            padding: 24px;
+            border: 2px solid var(--gray-200);
+            border-radius: var(--radius-lg);
+            background: white;
+            cursor: pointer;
+            transition: all var(--transition-fast);
+            text-align: center;
+        }
+
+        .type-btn:hover {
+            border-color: var(--primary-300);
+            background: var(--primary-50);
+        }
+
+        .type-btn.selected {
+            border-color: var(--primary-500);
+            background: var(--primary-50);
+        }
+
+        .type-btn.nonconformity.selected {
+            border-color: var(--orange-500);
+            background: var(--orange-50);
+        }
+
+        .type-btn.safety.selected {
+            border-color: var(--red-500);
+            background: var(--red-50);
+        }
+
+        .type-btn-title {
+            font-size: var(--text-lg);
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+
+        .type-btn-desc {
+            font-size: var(--text-sm);
+            color: var(--gray-500);
+        }
+
+        /* 카테고리 선택 */
+        .category-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            gap: 12px;
+        }
+
+        .category-btn {
+            padding: 16px;
+            border: 1px solid var(--gray-200);
+            border-radius: var(--radius-md);
+            background: white;
+            cursor: pointer;
+            transition: all var(--transition-fast);
+            text-align: center;
+            font-size: var(--text-sm);
+        }
+
+        .category-btn:hover {
+            border-color: var(--primary-300);
+            background: var(--gray-50);
+        }
+
+        .category-btn.selected {
+            border-color: var(--primary-500);
+            background: var(--primary-50);
+            font-weight: 600;
+        }
+
+        /* 사전 정의 항목 선택 */
+        .item-grid {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-top: 16px;
+        }
+
+        .item-btn {
+            padding: 12px 20px;
+            border: 1px solid var(--gray-200);
+            border-radius: 9999px;
+            background: white;
+            cursor: pointer;
+            transition: all var(--transition-fast);
+            font-size: var(--text-sm);
+        }
+
+        .item-btn:hover {
+            border-color: var(--primary-300);
+            background: var(--gray-50);
+        }
+
+        .item-btn.selected {
+            border-color: var(--primary-500);
+            background: var(--primary-500);
+            color: white;
+        }
+
+        .item-btn[data-severity="critical"] {
+            border-color: var(--red-300);
+        }
+
+        .item-btn[data-severity="critical"].selected {
+            background: var(--red-500);
+            border-color: var(--red-500);
+        }
+
+        .item-btn[data-severity="high"] {
+            border-color: var(--orange-300);
+        }
+
+        .item-btn[data-severity="high"].selected {
+            background: var(--orange-500);
+            border-color: var(--orange-500);
+        }
+
+        /* 사진 업로드 */
+        .photo-upload-grid {
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            gap: 12px;
+        }
+
+        .photo-slot {
+            aspect-ratio: 1;
+            border: 2px dashed var(--gray-300);
+            border-radius: var(--radius-md);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all var(--transition-fast);
+            position: relative;
+            overflow: hidden;
+            background: var(--gray-50);
+        }
+
+        .photo-slot:hover {
+            border-color: var(--primary-500);
+            background: var(--primary-50);
+        }
+
+        .photo-slot.has-photo {
+            border-style: solid;
+            border-color: var(--green-500);
+        }
+
+        .photo-slot img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .photo-slot .add-icon {
+            font-size: 24px;
+            color: var(--gray-400);
+        }
+
+        .photo-slot .remove-btn {
+            position: absolute;
+            top: 4px;
+            right: 4px;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            background: var(--red-500);
+            color: white;
+            border: none;
+            cursor: pointer;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+        }
+
+        .photo-slot.has-photo .remove-btn {
+            display: flex;
+        }
+
+        .photo-slot .add-icon {
+            display: block;
+        }
+
+        .photo-slot.has-photo .add-icon {
+            display: none;
+        }
+
+        /* 추가 설명 */
+        .additional-textarea {
+            width: 100%;
+            min-height: 100px;
+            padding: 12px;
+            border: 1px solid var(--gray-300);
+            border-radius: var(--radius-md);
+            font-size: var(--text-base);
+            resize: vertical;
+        }
+
+        .additional-textarea:focus {
+            outline: none;
+            border-color: var(--primary-500);
+            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+        }
+
+        /* 제출 버튼 */
+        .form-actions {
+            display: flex;
+            justify-content: flex-end;
+            gap: 16px;
+            margin-top: 32px;
+        }
+
+        .btn-submit {
+            padding: 16px 48px;
+            background: var(--primary-500);
+            color: white;
+            border: none;
+            border-radius: var(--radius-md);
+            font-size: var(--text-base);
+            font-weight: 600;
+            cursor: pointer;
+            transition: all var(--transition-fast);
+        }
+
+        .btn-submit:hover {
+            background: var(--primary-600);
+        }
+
+        .btn-submit:disabled {
+            background: var(--gray-300);
+            cursor: not-allowed;
+        }
+
+        .btn-cancel {
+            padding: 16px 32px;
+            background: white;
+            color: var(--gray-600);
+            border: 1px solid var(--gray-300);
+            border-radius: var(--radius-md);
+            font-size: var(--text-base);
+            cursor: pointer;
+        }
+
+        .btn-cancel:hover {
+            background: var(--gray-50);
+        }
+
+        /* 작업 선택 모달 */
+        .work-selection-modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .work-selection-modal.visible {
+            display: flex;
+        }
+
+        .work-selection-content {
+            background: white;
+            padding: 24px;
+            border-radius: var(--radius-lg);
+            max-width: 500px;
+            width: 90%;
+        }
+
+        .work-selection-title {
+            font-size: var(--text-lg);
+            font-weight: 600;
+            margin-bottom: 16px;
+        }
+
+        .work-option {
+            padding: 16px;
+            border: 1px solid var(--gray-200);
+            border-radius: var(--radius-md);
+            margin-bottom: 12px;
+            cursor: pointer;
+            transition: all var(--transition-fast);
+        }
+
+        .work-option:hover {
+            border-color: var(--primary-500);
+            background: var(--primary-50);
+        }
+
+        .work-option-title {
+            font-weight: 600;
+            margin-bottom: 4px;
+        }
+
+        .work-option-desc {
+            font-size: var(--text-sm);
+            color: var(--gray-500);
+        }
+
+        /* 반응형 */
+        @media (max-width: 768px) {
+            .type-buttons {
+                grid-template-columns: 1fr;
+            }
+
+            .photo-upload-grid {
+                grid-template-columns: repeat(3, 1fr);
+            }
+
+            .step-indicator {
+                flex-wrap: wrap;
+                gap: 12px;
+            }
+
+            .step-text {
+                display: none;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="navbar-container"></div>
+
+    <main class="main-content">
+        <div class="page-header">
+            <h1 class="page-title">문제 신고</h1>
+            <p class="page-description">작업 중 발견된 부적합 사항 또는 안전 문제를 신고합니다.</p>
+        </div>
+
+        <div class="issue-form-container">
+            <!-- 단계 표시 -->
+            <div class="step-indicator">
+                <div class="step active" data-step="1">
+                    <span class="step-number">1</span>
+                    <span class="step-text">위치 선택</span>
+                </div>
+                <div class="step" data-step="2">
+                    <span class="step-number">2</span>
+                    <span class="step-text">유형 선택</span>
+                </div>
+                <div class="step" data-step="3">
+                    <span class="step-number">3</span>
+                    <span class="step-text">항목 선택</span>
+                </div>
+                <div class="step" data-step="4">
+                    <span class="step-number">4</span>
+                    <span class="step-text">사진/설명</span>
+                </div>
+            </div>
+
+            <!-- Step 1: 위치 선택 -->
+            <div class="form-section" id="step1Section">
+                <h2 class="form-section-title">1. 발생 위치 선택</h2>
+
+                <div class="form-group">
+                    <label for="factorySelect">공장 선택</label>
+                    <select id="factorySelect">
+                        <option value="">공장을 선택하세요</option>
+                    </select>
+                </div>
+
+                <div class="map-container">
+                    <canvas id="issueMapCanvas"></canvas>
+                </div>
+
+                <div class="selected-location-info empty" id="selectedLocationInfo">
+                    지도에서 작업장을 클릭하여 위치를 선택하세요
+                </div>
+
+                <div class="custom-location-toggle">
+                    <input type="checkbox" id="useCustomLocation">
+                    <label for="useCustomLocation">지도에 없는 위치 직접 입력</label>
+                </div>
+
+                <div class="custom-location-input" id="customLocationInput">
+                    <input type="text" id="customLocation" placeholder="위치를 입력하세요 (예: 야적장 입구, 주차장 등)">
+                </div>
+            </div>
+
+            <!-- Step 2: 문제 유형 선택 -->
+            <div class="form-section" id="step2Section">
+                <h2 class="form-section-title">2. 문제 유형 선택</h2>
+
+                <div class="type-buttons">
+                    <div class="type-btn nonconformity" data-type="nonconformity">
+                        <div class="type-btn-title">부적합 사항</div>
+                        <div class="type-btn-desc">자재, 설계, 검사 관련 문제</div>
+                    </div>
+                    <div class="type-btn safety" data-type="safety">
+                        <div class="type-btn-title">안전 관련</div>
+                        <div class="type-btn-desc">보호구, 위험구역, 안전수칙 관련</div>
+                    </div>
+                </div>
+
+                <div id="categoryContainer" style="display: none;">
+                    <label style="font-weight: 600; margin-bottom: 12px; display: block;">세부 카테고리</label>
+                    <div class="category-grid" id="categoryGrid"></div>
+                </div>
+            </div>
+
+            <!-- Step 3: 신고 항목 선택 -->
+            <div class="form-section" id="step3Section">
+                <h2 class="form-section-title">3. 신고 항목 선택</h2>
+                <p style="color: var(--gray-500); margin-bottom: 16px;">해당하는 항목을 선택하세요. 여러 개 선택 가능합니다.</p>
+
+                <div class="item-grid" id="itemGrid">
+                    <p style="color: var(--gray-400);">먼저 카테고리를 선택하세요</p>
+                </div>
+            </div>
+
+            <!-- Step 4: 사진 및 추가 설명 -->
+            <div class="form-section" id="step4Section">
+                <h2 class="form-section-title">4. 사진 및 추가 설명</h2>
+
+                <div class="form-group">
+                    <label>사진 첨부 (최대 5장)</label>
+                    <div class="photo-upload-grid">
+                        <div class="photo-slot" data-index="0">
+                            <span class="add-icon">+</span>
+                            <button class="remove-btn" type="button">&times;</button>
+                        </div>
+                        <div class="photo-slot" data-index="1">
+                            <span class="add-icon">+</span>
+                            <button class="remove-btn" type="button">&times;</button>
+                        </div>
+                        <div class="photo-slot" data-index="2">
+                            <span class="add-icon">+</span>
+                            <button class="remove-btn" type="button">&times;</button>
+                        </div>
+                        <div class="photo-slot" data-index="3">
+                            <span class="add-icon">+</span>
+                            <button class="remove-btn" type="button">&times;</button>
+                        </div>
+                        <div class="photo-slot" data-index="4">
+                            <span class="add-icon">+</span>
+                            <button class="remove-btn" type="button">&times;</button>
+                        </div>
+                    </div>
+                    <input type="file" id="photoInput" accept="image/*" capture="environment" style="display: none;">
+                </div>
+
+                <div class="form-group">
+                    <label for="additionalDescription">추가 설명 (선택)</label>
+                    <textarea id="additionalDescription" class="additional-textarea" placeholder="추가로 설명이 필요한 내용을 입력하세요..."></textarea>
+                </div>
+            </div>
+
+            <!-- 제출 버튼 -->
+            <div class="form-actions">
+                <button type="button" class="btn-cancel" onclick="history.back()">취소</button>
+                <button type="button" class="btn-submit" id="submitBtn" onclick="submitReport()">신고 제출</button>
+            </div>
+        </div>
+    </main>
+
+    <!-- 작업 선택 모달 -->
+    <div class="work-selection-modal" id="workSelectionModal">
+        <div class="work-selection-content">
+            <h3 class="work-selection-title">작업 선택</h3>
+            <p style="margin-bottom: 16px; color: var(--gray-600);">이 위치에 등록된 작업이 있습니다. 연결할 작업을 선택하세요.</p>
+            <div id="workOptionsList"></div>
+            <button type="button" onclick="closeWorkModal()" style="width: 100%; padding: 12px; margin-top: 8px; background: var(--gray-100); border: none; border-radius: var(--radius-md); cursor: pointer;">
+                작업 연결 없이 진행
+            </button>
+        </div>
+    </div>
+
+    <script src="/js/work-issue-report.js?v=1"></script>
+</body>
+</html>

system2-report/web/pages/safety/report-status.html

@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>안전신고 현황 | (주)테크니컬코리아</title>
+    <link rel="stylesheet" href="/css/design-system.css">
+    <link rel="stylesheet" href="/css/common.css?v=2">
+    <link rel="stylesheet" href="/css/project-management.css?v=3">
+    <link rel="icon" type="image/png" href="/img/favicon.png">
+    <script src="/js/api-base.js"></script>
+    <script src="/js/app-init.js?v=2" defer></script>
+    <script src="https://instant.page/5.2.0" type="module"></script>
+    <style>
+        /* 통계 카드 */
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 1rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .stat-card {
+            background: white;
+            padding: 1.25rem;
+            border-radius: 0.75rem;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            text-align: center;
+        }
+
+        .stat-number {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 0.25rem;
+        }
+
+        .stat-label {
+            font-size: 0.875rem;
+            color: #6b7280;
+        }
+
+        .stat-card.reported .stat-number { color: #3b82f6; }
+        .stat-card.received .stat-number { color: #f97316; }
+        .stat-card.in_progress .stat-number { color: #8b5cf6; }
+        .stat-card.completed .stat-number { color: #10b981; }
+
+        /* 필터 바 */
+        .filter-bar {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 1.5rem;
+            padding: 1rem 1.25rem;
+            background: white;
+            border-radius: 0.75rem;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+
+        .filter-bar select,
+        .filter-bar input {
+            padding: 0.625rem 0.875rem;
+            border: 1px solid #d1d5db;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+            background: white;
+        }
+
+        .filter-bar select:focus,
+        .filter-bar input:focus {
+            outline: none;
+            border-color: #ef4444;
+            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+        }
+
+        .btn-new-report {
+            margin-left: auto;
+            padding: 0.625rem 1.25rem;
+            background: #ef4444;
+            color: white;
+            border: none;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+            font-weight: 600;
+            cursor: pointer;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            transition: background 0.2s;
+        }
+
+        .btn-new-report:hover {
+            background: #dc2626;
+        }
+
+        /* 신고 목록 */
+        .issue-list {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+        }
+
+        .issue-card {
+            background: white;
+            border-radius: 0.75rem;
+            padding: 1.25rem;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            cursor: pointer;
+            transition: all 0.2s;
+            border: 1px solid transparent;
+        }
+
+        .issue-card:hover {
+            border-color: #fecaca;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+
+        .issue-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 0.75rem;
+        }
+
+        .issue-id {
+            font-size: 0.875rem;
+            color: #9ca3af;
+        }
+
+        .issue-status {
+            padding: 0.25rem 0.75rem;
+            border-radius: 9999px;
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+
+        .issue-status.reported {
+            background: #dbeafe;
+            color: #1d4ed8;
+        }
+
+        .issue-status.received {
+            background: #fed7aa;
+            color: #c2410c;
+        }
+
+        .issue-status.in_progress {
+            background: #e9d5ff;
+            color: #7c3aed;
+        }
+
+        .issue-status.completed {
+            background: #d1fae5;
+            color: #047857;
+        }
+
+        .issue-status.closed {
+            background: #f3f4f6;
+            color: #4b5563;
+        }
+
+        .issue-title {
+            font-size: 1rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: #1f2937;
+        }
+
+        .issue-category-badge {
+            display: inline-block;
+            padding: 0.125rem 0.5rem;
+            border-radius: 0.25rem;
+            font-size: 0.75rem;
+            font-weight: 500;
+            margin-right: 0.5rem;
+            background: #fef2f2;
+            color: #b91c1c;
+        }
+
+        .issue-meta {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            font-size: 0.875rem;
+            color: #6b7280;
+        }
+
+        .issue-meta-item {
+            display: flex;
+            align-items: center;
+            gap: 0.375rem;
+        }
+
+        .issue-photos {
+            display: flex;
+            gap: 0.5rem;
+            margin-top: 0.75rem;
+        }
+
+        .issue-photos img {
+            width: 56px;
+            height: 56px;
+            object-fit: cover;
+            border-radius: 0.375rem;
+            border: 1px solid #e5e7eb;
+        }
+
+        /* 빈 상태 */
+        .empty-state {
+            text-align: center;
+            padding: 4rem 1.5rem;
+            color: #6b7280;
+            background: white;
+            border-radius: 0.75rem;
+        }
+
+        .empty-state-title {
+            font-size: 1.125rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: #374151;
+        }
+
+        @media (max-width: 768px) {
+            .filter-bar {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .btn-new-report {
+                width: 100%;
+                justify-content: center;
+            }
+
+            .stats-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="work-report-container">
+        <div id="navbar-container"></div>
+
+        <main class="work-report-main">
+            <div class="dashboard-main">
+                <div class="page-header">
+                    <div class="page-title-section">
+                        <h1 class="page-title">안전신고 현황</h1>
+                        <p class="page-description">보호구 미착용, 위험구역 출입 등 안전 관련 신고 현황입니다.</p>
+                    </div>
+                </div>
+
+                <!-- 통계 카드 -->
+                <div class="stats-grid" id="statsGrid">
+                    <div class="stat-card reported">
+                        <div class="stat-number" id="statReported">-</div>
+                        <div class="stat-label">신고</div>
+                    </div>
+                    <div class="stat-card received">
+                        <div class="stat-number" id="statReceived">-</div>
+                        <div class="stat-label">접수</div>
+                    </div>
+                    <div class="stat-card in_progress">
+                        <div class="stat-number" id="statProgress">-</div>
+                        <div class="stat-label">처리중</div>
+                    </div>
+                    <div class="stat-card completed">
+                        <div class="stat-number" id="statCompleted">-</div>
+                        <div class="stat-label">완료</div>
+                    </div>
+                </div>
+
+                <!-- 필터 바 -->
+                <div class="filter-bar">
+                    <select id="filterStatus">
+                        <option value="">전체 상태</option>
+                        <option value="reported">신고</option>
+                        <option value="received">접수</option>
+                        <option value="in_progress">처리중</option>
+                        <option value="completed">완료</option>
+                        <option value="closed">종료</option>
+                    </select>
+
+                    <input type="date" id="filterStartDate" title="시작일">
+                    <input type="date" id="filterEndDate" title="종료일">
+
+                    <a href="/pages/safety/report.html?type=safety" class="btn-new-report">
+                        + 안전 신고
+                    </a>
+                </div>
+
+                <!-- 신고 목록 -->
+                <div class="issue-list" id="issueList">
+                    <div class="empty-state">
+                        <div class="empty-state-title">로딩 중...</div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script src="/js/safety-report-list.js?v=2"></script>
+</body>
+</html>