fix: 부적합 제출 버그 수정 및 UI 개선

- 부적합 API 호출 형식 수정 (카테고리/아이템 추가 시) - 부적합 저장 시 내부 플래그 제거 후 백엔드 전송 - 기본 부적합 객체 구조 수정 (category_id, item_id 추가) - 날씨 API 시간대 수정 (UTC → KST 변환) - 신고 카테고리 관리 페이지 추가 (/pages/admin/issue-categories.html) - 부적합 입력 UI 개선 (대분류→소분류 캐스케이딩 선택) - 저장된 부적합 분리 표시 및 수정/삭제 기능 - 디버깅 로그 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-03 09:31:26 +09:00
parent 4b158de1eb
commit c42c9f4fa3
29 changed files with 7042 additions and 809 deletions
--- a/CODING_GUIDE.md
+++ b/CODING_GUIDE.md
@@ -310,6 +310,96 @@ Synology NAS(MySQL 8.0)의 `Strict Mode`로 인해 `db.execute()` 사용 시 `In

 ---

+## 🕐 시간대(Timezone) 처리 가이드
+
+### 핵심 원칙
+이 프로젝트는 **한국 시간(KST, UTC+9)** 기준으로 운영됩니다.
+
+### 문제 상황
+서버가 UTC 시간대로 설정된 경우, `NOW()`, `CURRENT_TIMESTAMP`, `new Date()`를 사용하면 **한국 시간과 9시간 차이**가 발생합니다.
+
+```
+예시: 한국 시간 2026-02-03 08:00 AM에 신고 등록
+- UTC 시간: 2026-02-02 11:00 PM
+- DB 저장: 2026-02-02 (잘못된 날짜!)
+```
+
+### 해결 방법
+
+#### 백엔드 (Node.js)
+**공용 유틸리티 사용** (`utils/dateUtils.js`):
+
+```javascript
+const { getKoreaDatetime, getKoreaDateString } = require('../utils/dateUtils');
+
+// 비즈니스 날짜 저장 시
+const reportDate = getKoreaDatetime();  // '2026-02-03 08:00:00'
+await db.query('INSERT INTO reports (report_date, ...) VALUES (?, ...)', [reportDate, ...]);
+
+// 날짜만 필요한 경우
+const today = getKoreaDateString();  // '2026-02-03'
+```
+
+**제공되는 함수들**:
+| 함수 | 반환값 | 용도 |
+|------|--------|------|
+| `getKoreaDatetime()` | `'2026-02-03 08:00:00'` | DB DATETIME 저장 |
+| `getKoreaDateString()` | `'2026-02-03'` | DB DATE 저장 |
+| `getKoreaTimeString()` | `'08:00:00'` | DB TIME 저장 |
+| `getKoreaYear()` | `2026` | 연도 |
+| `getKoreaMonth()` | `2` | 월 (1-12) |
+| `toKoreaDatetime(date)` | `'2026-02-03 08:00:00'` | Date 객체 변환 |
+
+#### 프론트엔드 (JavaScript)
+```javascript
+// 로컬 시간대 기준 날짜 문자열
+function getLocalDateString() {
+  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');
+  return `${year}-${month}-${day}`;
+}
+
+// ❌ 잘못된 방법 (UTC 변환됨)
+const today = new Date().toISOString().split('T')[0];
+
+// ✅ 올바른 방법 (로컬 시간)
+const today = getLocalDateString();
+```
+
+### 컬럼별 적용 기준
+
+| 컬럼 유형 | 처리 방법 | 비고 |
+|-----------|-----------|------|
+| `created_at`, `updated_at` | `NOW()` 또는 `CURRENT_TIMESTAMP` 사용 가능 | 감사용 메타데이터, UTC로 저장해도 무방 |
+| `report_date`, `session_date` | **반드시 `getKoreaDatetime()` 사용** | 비즈니스 날짜, 사용자에게 표시됨 |
+| `visit_date`, `attendance_date` | **반드시 한국 시간 기준** | 필터링/조회에 사용됨 |
+| API 응답 `timestamp` | `new Date().toISOString()` 사용 가능 | 디버깅용 |
+
+### 마이그레이션 주의사항
+새 테이블 생성 시 비즈니스 날짜 컬럼은 **default 값을 사용하지 말고** 애플리케이션에서 명시적으로 설정:
+
+```javascript
+// ❌ 잘못된 방법
+table.datetime('report_date').defaultTo(knex.fn.now());
+
+// ✅ 올바른 방법
+table.datetime('report_date').notNullable();  // default 없음
+// 애플리케이션에서 getKoreaDatetime()으로 값 설정
+```
+
+### 기존 데이터 보정 (필요시)
+UTC로 잘못 저장된 데이터를 한국 시간으로 보정:
+```sql
+-- 주의: 백업 후 실행
+UPDATE work_issue_reports
+SET report_date = DATE_ADD(report_date, INTERVAL 9 HOUR)
+WHERE report_date < '2026-02-03';
+```
+
+---
+
 ## 🧪 테스트 가이드 (Jest)

 ### 중요도
--- a/api.hyungi.net/controllers/workIssueController.js
+++ b/api.hyungi.net/controllers/workIssueController.js
@@ -206,6 +206,7 @@ exports.createReport = async (req, res) => {
      visit_request_id,
      issue_category_id,
      issue_item_id,
+      custom_item_name, // 직접 입력한 항목명
      additional_description,
      photos = []
    } = req.body;
@@ -221,6 +222,36 @@ exports.createReport = async (req, res) => {
      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,
@@ -247,7 +278,7 @@ exports.createReport = async (req, res) => {
      tbm_session_id: tbm_session_id || null,
      visit_request_id: visit_request_id || null,
      issue_category_id,
-      issue_item_id: issue_item_id || null,
+      issue_item_id: finalItemId || null,
      additional_description: additional_description || null,
      ...photoPaths
    };
--- a/api.hyungi.net/db/migrations/20260203090000_add_category_to_defects.js
+++ b/api.hyungi.net/db/migrations/20260203090000_add_category_to_defects.js
@@ -0,0 +1,43 @@
+/**
+ * 작업보고서 부적합에 카테고리/아이템 컬럼 추가
+ *
+ * 변경사항:
+ * 1. work_report_defects 테이블에 category_id, item_id 컬럼 추가
+ * 2. issue_report_categories, issue_report_items 테이블 참조
+ */
+
+exports.up = function(knex) {
+  return knex.schema
+    .alterTable('work_report_defects', function(table) {
+      // 카테고리 ID 추가
+      table.integer('category_id').unsigned().nullable()
+        .comment('issue_report_categories의 category_id (직접 입력 시)')
+        .after('issue_report_id');
+
+      // 아이템 ID 추가
+      table.integer('item_id').unsigned().nullable()
+        .comment('issue_report_items의 item_id (직접 입력 시)')
+        .after('category_id');
+
+      // 외래키 추가
+      table.foreign('category_id')
+        .references('category_id')
+        .inTable('issue_report_categories')
+        .onDelete('SET NULL');
+
+      table.foreign('item_id')
+        .references('item_id')
+        .inTable('issue_report_items')
+        .onDelete('SET NULL');
+    });
+};
+
+exports.down = function(knex) {
+  return knex.schema
+    .alterTable('work_report_defects', function(table) {
+      table.dropForeign('category_id');
+      table.dropForeign('item_id');
+      table.dropColumn('category_id');
+      table.dropColumn('item_id');
+    });
+};
--- a/api.hyungi.net/db/migrations/20260203100000_link_defects_to_issues.js
+++ b/api.hyungi.net/db/migrations/20260203100000_link_defects_to_issues.js
@@ -0,0 +1,85 @@
+/**
+ * 작업보고서 부적합을 신고 시스템과 연동
+ *
+ * 변경사항:
+ * 1. work_report_defects 테이블에 issue_report_id 컬럼 추가
+ * 2. error_type_id를 NULL 허용으로 변경 (신고 연동 시 불필요)
+ * 3. work_issue_reports.report_id (unsigned int)와 타입 일치 필요
+ */
+
+exports.up = function(knex) {
+  return knex.schema
+    .alterTable('work_report_defects', function(table) {
+      // 1. issue_report_id 컬럼 추가 (unsigned int로 work_issue_reports.report_id와 타입 일치)
+      table.integer('issue_report_id').unsigned().nullable()
+        .comment('work_issue_reports의 report_id (신고된 이슈 연결)')
+        .after('error_type_id');
+
+      // 2. 외래키 추가 (work_issue_reports.report_id 참조)
+      table.foreign('issue_report_id')
+        .references('report_id')
+        .inTable('work_issue_reports')
+        .onDelete('SET NULL');
+
+      // 3. 인덱스 추가
+      table.index('issue_report_id');
+    })
+    // 4. error_type_id를 NULL 허용으로 변경
+    .then(function() {
+      return knex.raw(`
+        ALTER TABLE work_report_defects
+        MODIFY COLUMN error_type_id INT NULL
+        COMMENT 'error_types의 id (부적합 원인) - 레거시, issue_report_id 사용 권장'
+      `);
+    })
+    // 5. 유니크 제약 수정 (issue_report_id도 고려)
+    .then(function() {
+      // 기존 유니크 제약 삭제
+      return knex.raw(`
+        ALTER TABLE work_report_defects
+        DROP INDEX work_report_defects_report_id_error_type_id_unique
+      `).catch(() => {
+        // 인덱스가 없을 수 있음 - 무시
+      });
+    })
+    .then(function() {
+      // 새 유니크 제약 추가 (report_id + issue_report_id 조합)
+      return knex.raw(`
+        ALTER TABLE work_report_defects
+        ADD UNIQUE INDEX work_report_defects_report_issue_unique (report_id, issue_report_id)
+      `).catch(() => {
+        // 이미 존재할 수 있음 - 무시
+      });
+    });
+};
+
+exports.down = function(knex) {
+  return knex.schema
+    .alterTable('work_report_defects', function(table) {
+      // 외래키 및 인덱스 삭제
+      table.dropForeign('issue_report_id');
+      table.dropIndex('issue_report_id');
+      table.dropColumn('issue_report_id');
+    })
+    // error_type_id를 다시 NOT NULL로 변경
+    .then(function() {
+      return knex.raw(`
+        ALTER TABLE work_report_defects
+        MODIFY COLUMN error_type_id INT NOT NULL
+        COMMENT 'error_types의 id (부적합 원인)'
+      `);
+    })
+    // 기존 유니크 제약 복원
+    .then(function() {
+      return knex.raw(`
+        ALTER TABLE work_report_defects
+        DROP INDEX IF EXISTS work_report_defects_report_issue_unique
+      `).catch(() => {});
+    })
+    .then(function() {
+      return knex.raw(`
+        ALTER TABLE work_report_defects
+        ADD UNIQUE INDEX work_report_defects_report_id_error_type_id_unique (report_id, error_type_id)
+      `).catch(() => {});
+    });
+};
--- a/api.hyungi.net/models/workIssueModel.js
+++ b/api.hyungi.net/models/workIssueModel.js
@@ -200,6 +200,9 @@ const deleteItem = async (itemId, callback) => {

 // ==================== 문제 신고 관리 ====================

+// 한국 시간 유틸리티 import
+const { getKoreaDatetime } = require('../utils/dateUtils');
+
 /**
 * 신고 생성
 */
@@ -223,13 +226,16 @@ const createReport = async (reportData, callback) => {
      photo_path5 = null
    } = reportData;

+    // 한국 시간 기준으로 신고 일시 설정
+    const reportDate = getKoreaDatetime();
+
    const [result] = await db.query(
      `INSERT INTO work_issue_reports
-       (reporter_id, factory_category_id, workplace_id, custom_location,
+       (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, factory_category_id, workplace_id, custom_location,
+       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]
    );
--- a/api.hyungi.net/routes/dailyWorkReportRoutes.js
+++ b/api.hyungi.net/routes/dailyWorkReportRoutes.js
@@ -2,6 +2,7 @@
 const express = require('express');
 const router = express.Router();
 const dailyWorkReportController = require('../controllers/dailyWorkReportController');
+const workReportController = require('../controllers/workReportController');

 // 📋 마스터 데이터 조회 라우트들 (모든 인증된 사용자)
 router.get('/work-types', dailyWorkReportController.getWorkTypes);
@@ -88,4 +89,9 @@ router.delete('/date/:date/worker/:worker_id', dailyWorkReportController.removeD
 // 🗑️ 특정 작업보고서 삭제 (항상 가장 마지막에 정의)
 router.delete('/:id', dailyWorkReportController.removeDailyWorkReport);

+// 📋 부적합 관리 (workReportController 사용)
+router.get('/:reportId/defects', workReportController.getReportDefects);
+router.put('/:reportId/defects', workReportController.saveReportDefects);
+router.post('/:reportId/defects', workReportController.addReportDefect);
+
 module.exports = router;
--- a/api.hyungi.net/services/mProjectService.js
+++ b/api.hyungi.net/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://localhost:16080',
+  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,
+};
--- a/api.hyungi.net/services/weatherService.js
+++ b/api.hyungi.net/services/weatherService.js
@@ -58,10 +58,8 @@ async function getCurrentWeather(nx = WEATHER_API.defaultLocation.nx, ny = WEATH
  }

  try {
-    // 현재 시간 기준으로 base_date, base_time 계산
-    const now = new Date();
-    const baseDate = formatDate(now);
-    const baseTime = getBaseTime(now);
+    // 한국 시간 기준으로 base_date, base_time 계산
+    const { baseDate, baseTime } = getBaseDateTime();

    logger.info('날씨 API 호출', { baseDate, baseTime, nx, ny });

@@ -322,7 +320,45 @@ function getDefaultWeatherData() {
 }

 /**
- * 날짜 포맷 (YYYYMMDD)
+ * 기상청 API용 기준 날짜/시간 계산
+ * 한국 시간(KST, UTC+9) 기준으로 계산
+ * 매시간 정각에 생성되고 10분 후에 제공됨
+ * @returns {{ baseDate: string, baseTime: string }}
+ */
+function getBaseDateTime() {
+  // 한국 시간으로 변환 (UTC + 9시간)
+  const now = new Date();
+  const kstOffset = 9 * 60 * 60 * 1000; // 9시간을 밀리초로
+  const kstDate = new Date(now.getTime() + kstOffset);
+
+  let year = kstDate.getUTCFullYear();
+  let month = kstDate.getUTCMonth() + 1;
+  let day = kstDate.getUTCDate();
+  let hours = kstDate.getUTCHours();
+  let minutes = kstDate.getUTCMinutes();
+
+  // 10분 이전이면 이전 시간 데이터 사용
+  if (minutes < 10) {
+    hours = hours - 1;
+    if (hours < 0) {
+      hours = 23;
+      // 전날로 변경
+      const prevDay = new Date(kstDate.getTime() - 24 * 60 * 60 * 1000);
+      year = prevDay.getUTCFullYear();
+      month = prevDay.getUTCMonth() + 1;
+      day = prevDay.getUTCDate();
+    }
+  }
+
+  const baseDate = `${year}${String(month).padStart(2, '0')}${String(day).padStart(2, '0')}`;
+  const baseTime = String(hours).padStart(2, '0') + '00';
+
+  return { baseDate, baseTime };
+}
+
+/**
+ * 날짜 포맷 (YYYYMMDD) - 호환성 유지용
+ * @deprecated getBaseDateTime() 사용 권장
 */
 function formatDate(date) {
  const year = date.getFullYear();
@@ -332,14 +368,12 @@ function formatDate(date) {
 }

 /**
- * 초단기실황 API용 기준시간 계산
- * 매시간 정각에 생성되고 10분 후에 제공됨
+ * @deprecated getBaseDateTime() 사용 권장
 */
 function getBaseTime(date) {
  let hours = date.getHours();
  let minutes = date.getMinutes();

-  // 10분 이전이면 이전 시간 데이터 사용
  if (minutes < 10) {
    hours = hours - 1;
    if (hours < 0) hours = 23;
--- a/api.hyungi.net/services/workReportService.js
+++ b/api.hyungi.net/services/workReportService.js
@@ -274,6 +274,7 @@ const getSummaryService = async (year, month) => {

 /**
 * 작업 보고서의 부적합 원인 목록 조회
+ * - error_type_id 또는 issue_report_id 중 하나로 연결
 */
 const getReportDefectsService = async (reportId) => {
  const db = await getDb();
@@ -283,13 +284,22 @@ const getReportDefectsService = async (reportId) => {
        d.defect_id,
        d.report_id,
        d.error_type_id,
+        d.issue_report_id,
        d.defect_hours,
        d.note,
        d.created_at,
        et.name as error_type_name,
-        et.severity
+        et.severity as error_severity,
+        ir.content as issue_content,
+        ir.status as issue_status,
+        irc.category_name as issue_category_name,
+        irc.severity as issue_severity,
+        iri.item_name as issue_item_name
      FROM work_report_defects d
-      JOIN error_types et ON d.error_type_id = et.id
+      LEFT JOIN error_types et ON d.error_type_id = et.id
+      LEFT JOIN work_issue_reports ir ON d.issue_report_id = ir.report_id
+      LEFT JOIN issue_report_categories irc ON ir.category_id = irc.category_id
+      LEFT JOIN issue_report_items iri ON ir.item_id = iri.item_id
      WHERE d.report_id = ?
      ORDER BY d.created_at
    `, [reportId]);
@@ -303,6 +313,9 @@ const getReportDefectsService = async (reportId) => {

 /**
 * 부적합 원인 저장 (전체 교체)
+ * - error_type_id 또는 issue_report_id 중 하나 사용 가능
+ * - issue_report_id: 신고된 이슈와 연결
+ * - error_type_id: 기존 오류 유형 (레거시)
 */
 const saveReportDefectsService = async (reportId, defects) => {
  const db = await getDb();
@@ -315,10 +328,19 @@ const saveReportDefectsService = async (reportId, defects) => {
    // 새 부적합 원인 추가
    if (defects && defects.length > 0) {
      for (const defect of defects) {
+        // issue_report_id > category_id/item_id > error_type_id 순으로 우선
        await db.execute(`
-          INSERT INTO work_report_defects (report_id, error_type_id, defect_hours, note)
-          VALUES (?, ?, ?, ?)
-        `, [reportId, defect.error_type_id, defect.defect_hours || 0, defect.note || null]);
+          INSERT INTO work_report_defects (report_id, error_type_id, issue_report_id, category_id, item_id, defect_hours, note)
+          VALUES (?, ?, ?, ?, ?, ?, ?)
+        `, [
+          reportId,
+          (defect.issue_report_id || defect.category_id) ? null : (defect.error_type_id || null),
+          defect.issue_report_id || null,
+          defect.category_id || null,
+          defect.item_id || null,
+          defect.defect_hours || 0,
+          defect.note || null
+        ]);
      }
    }

@@ -327,6 +349,11 @@ const saveReportDefectsService = async (reportId, defects) => {
      ? defects.reduce((sum, d) => sum + (parseFloat(d.defect_hours) || 0), 0)
      : 0;

+    // 첫 번째 defect의 error_type_id를 대표값으로 (레거시 호환)
+    const firstErrorTypeId = defects && defects.length > 0
+      ? (defects.find(d => d.error_type_id)?.error_type_id || null)
+      : null;
+
    await db.execute(`
      UPDATE daily_work_reports
      SET error_hours = ?,
@@ -335,7 +362,7 @@ const saveReportDefectsService = async (reportId, defects) => {
      WHERE id = ?
    `, [
      totalErrorHours,
-      defects && defects.length > 0 ? defects[0].error_type_id : null,
+      firstErrorTypeId,
      totalErrorHours > 0 ? 2 : 1,
      reportId
    ]);
@@ -353,14 +380,21 @@ const saveReportDefectsService = async (reportId, defects) => {

 /**
 * 부적합 원인 추가 (단일)
+ * - issue_report_id 또는 error_type_id 중 하나 사용
 */
 const addReportDefectService = async (reportId, defectData) => {
  const db = await getDb();
  try {
    const [result] = await db.execute(`
-      INSERT INTO work_report_defects (report_id, error_type_id, defect_hours, note)
-      VALUES (?, ?, ?, ?)
-    `, [reportId, defectData.error_type_id, defectData.defect_hours || 0, defectData.note || null]);
+      INSERT INTO work_report_defects (report_id, error_type_id, issue_report_id, defect_hours, note)
+      VALUES (?, ?, ?, ?, ?)
+    `, [
+      reportId,
+      defectData.issue_report_id ? null : (defectData.error_type_id || null),
+      defectData.issue_report_id || null,
+      defectData.defect_hours || 0,
+      defectData.note || null
+    ]);

    // 총 부적합 시간 업데이트
    await updateTotalErrorHours(reportId);
@@ -404,6 +438,7 @@ const removeReportDefectService = async (defectId) => {

 /**
 * 총 부적합 시간 업데이트 헬퍼
+ * - issue_report_id가 있는 경우도 고려
 */
 const updateTotalErrorHours = async (reportId) => {
  const db = await getDb();
@@ -415,9 +450,12 @@ const updateTotalErrorHours = async (reportId) => {

  const totalErrorHours = result[0].total || 0;

-  // 첫 번째 부적합 원인의 error_type_id를 대표값으로 사용
+  // 첫 번째 부적합 원인의 error_type_id를 대표값으로 사용 (레거시 호환)
+  // issue_report_id만 있는 경우 error_type_id는 null
  const [firstDefect] = await db.execute(`
-    SELECT error_type_id FROM work_report_defects WHERE report_id = ? ORDER BY created_at LIMIT 1
+    SELECT error_type_id FROM work_report_defects
+    WHERE report_id = ? AND error_type_id IS NOT NULL
+    ORDER BY created_at LIMIT 1
  `, [reportId]);

  await db.execute(`
--- a/api.hyungi.net/utils/dateUtils.js
+++ b/api.hyungi.net/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,
+};
--- a/web-ui/components/navbar.html
+++ b/web-ui/components/navbar.html
@@ -32,6 +32,11 @@
        <span class="btn-text">대시보드</span>
      </a>

+      <a href="/pages/safety/report.html" class="report-btn">
+        <span class="btn-icon">&#9888;</span>
+        <span class="btn-text">신고</span>
+      </a>
+
      <div class="user-profile" id="userProfile">
        <div class="user-avatar">
          <span class="avatar-text" id="userInitial">사</span>
@@ -340,6 +345,37 @@ body {
  font-family: inherit;
 }

+/* 신고 버튼 */
+.report-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-5);
+  background: rgba(239, 68, 68, 0.9);
+  color: white;
+  text-decoration: none;
+  border-radius: var(--radius-lg);
+  font-weight: var(--font-semibold);
+  font-size: var(--text-sm);
+  transition: var(--transition-slow);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(10px);
+}
+
+.report-btn:hover {
+  background: rgba(220, 38, 38, 1);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.report-btn .btn-icon {
+  font-size: var(--text-lg);
+}
+
+.report-btn .btn-text {
+  font-family: inherit;
+}
+
 /* 반응형 디자인 */
@media (max-width: 768px) {
  .dashboard-header {
@@ -362,11 +398,13 @@ body {
    display: none;
  }

-  .dashboard-btn .btn-text {
+  .dashboard-btn .btn-text,
+  .report-btn .btn-text {
    display: none;
  }

-  .dashboard-btn {
+  .dashboard-btn,
+  .report-btn {
    padding: var(--space-2) var(--space-3);
  }
 }
--- a/web-ui/components/sidebar-nav.html
+++ b/web-ui/components/sidebar-nav.html
@@ -32,6 +32,9 @@
        <a href="/pages/work/analysis.html" class="nav-item admin-only" data-page-key="work.analysis">
          <span class="nav-text">작업 분석</span>
        </a>
+        <a href="/pages/work/nonconformity.html" class="nav-item" data-page-key="work.nonconformity">
+          <span class="nav-text">부적합 현황</span>
+        </a>
      </div>
    </div>

@@ -43,11 +46,8 @@
        <span class="nav-arrow">&#9662;</span>
      </button>
      <div class="nav-category-items">
-        <a href="/pages/safety/issue-report.html" class="nav-item" data-page-key="safety.issue_report">
-          <span class="nav-text">이슈 신고</span>
-        </a>
-        <a href="/pages/safety/issue-list.html" class="nav-item" data-page-key="safety.issue_list">
-          <span class="nav-text">이슈 목록</span>
+        <a href="/pages/safety/report-status.html" class="nav-item" data-page-key="safety.report_status">
+          <span class="nav-text">안전신고 현황</span>
        </a>
        <a href="/pages/safety/visit-request.html" class="nav-item" data-page-key="safety.visit_request">
          <span class="nav-text">출입 신청</span>
@@ -122,6 +122,9 @@
        <a href="/pages/admin/codes.html" class="nav-item" data-page-key="admin.codes">
          <span class="nav-text">코드 관리</span>
        </a>
+        <a href="/pages/admin/issue-categories.html" class="nav-item" data-page-key="admin.issue_categories">
+          <span class="nav-text">신고 카테고리 관리</span>
+        </a>
        <a href="/pages/admin/attendance-report.html" class="nav-item" data-page-key="admin.attendance_report">
          <span class="nav-text">출퇴근-보고서 대조</span>
        </a>
--- a/web-ui/css/daily-work-report.css
+++ b/web-ui/css/daily-work-report.css
@@ -8,6 +8,144 @@
  margin-bottom: 1.5rem;
 }

+/* 날짜 그룹 스타일 (접기/펼치기) */
+.date-group {
+  margin-bottom: 1.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  overflow: hidden;
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.date-group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-bottom: 1px solid #e5e7eb;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  user-select: none;
+}
+
+.date-group-header:hover {
+  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+}
+
+.date-group-header.has-issues {
+  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
+  border-bottom-color: #fde047;
+}
+
+.date-group-header.has-issues:hover {
+  background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
+}
+
+.date-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.date-toggle-icon {
+  font-size: 0.75rem;
+  color: #64748b;
+  width: 1rem;
+  text-align: center;
+}
+
+.date-title {
+  font-weight: 600;
+  font-size: 1.1rem;
+  color: #1e293b;
+}
+
+.today-badge {
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  color: white;
+  padding: 0.2rem 0.6rem;
+  border-radius: 10px;
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
+.date-header-center {
+  display: flex;
+  gap: 1rem;
+}
+
+.date-stat {
+  font-size: 0.85rem;
+  color: #64748b;
+}
+
+.date-header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.date-issue-summary {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.issue-badge {
+  padding: 0.25rem 0.6rem;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.issue-badge.nonconformity {
+  background: #fef2f2;
+  color: #dc2626;
+  border: 1px solid #fecaca;
+}
+
+.issue-badge.safety {
+  background: #fefce8;
+  color: #ca8a04;
+  border: 1px solid #fde047;
+}
+
+.no-issues {
+  font-size: 0.8rem;
+  color: #94a3b8;
+}
+
+.date-group-content {
+  padding: 1rem;
+  background: #fafafa;
+}
+
+.date-group.collapsed .date-group-content {
+  display: none;
+}
+
+/* 부적합 버튼 강조 (관련 이슈 있을 때) */
+.btn-defect-toggle.has-related-issue {
+  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
+  border-color: #f87171;
+  color: #dc2626;
+  animation: pulse-attention 2s infinite;
+}
+
+.btn-defect-toggle.has-related-issue:hover {
+  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
+}
+
+@keyframes pulse-attention {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0);
+  }
+}
+
 /* TBM 세션 그룹 스타일 */
 .tbm-session-group {
  margin-bottom: 2rem;
@@ -55,6 +193,153 @@
  font-size: 0.875rem;
 }

+/* 당일 신고 리마인더 스타일 */
+.issue-reminder-section {
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  border: 1px solid #f59e0b;
+  border-top: none;
+  padding: 1rem 1.5rem;
+}
+
+.issue-reminder-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.issue-reminder-icon {
+  font-size: 1.25rem;
+}
+
+.issue-reminder-title {
+  font-weight: 600;
+  color: #92400e;
+  font-size: 0.9375rem;
+}
+
+.issue-reminder-count {
+  background: #f59e0b;
+  color: white;
+  padding: 0.125rem 0.5rem;
+  border-radius: 10px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.issue-reminder-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.issue-reminder-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: white;
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.issue-reminder-item.nonconformity {
+  border-left: 3px solid #f59e0b;
+}
+
+.issue-reminder-item.safety {
+  border-left: 3px solid #ef4444;
+}
+
+.issue-type-badge {
+  padding: 0.125rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.issue-reminder-item.nonconformity .issue-type-badge {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.issue-reminder-item.safety .issue-type-badge {
+  background: #fee2e2;
+  color: #b91c1c;
+}
+
+.issue-category {
+  color: #6b7280;
+  font-size: 0.75rem;
+  flex-shrink: 0;
+}
+
+.issue-item {
+  flex: 1;
+  color: #374151;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.issue-location {
+  color: #6b7280;
+  font-size: 0.75rem;
+  flex-shrink: 0;
+}
+
+.issue-status {
+  padding: 0.125rem 0.375rem;
+  border-radius: 4px;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.issue-status.status-reported {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.issue-status.status-received {
+  background: #fed7aa;
+  color: #c2410c;
+}
+
+.issue-status.status-in_progress {
+  background: #e9d5ff;
+  color: #7c3aed;
+}
+
+.issue-status.status-completed {
+  background: #d1fae5;
+  color: #047857;
+}
+
+.issue-status.status-closed {
+  background: #f3f4f6;
+  color: #4b5563;
+}
+
+.issue-reminder-more {
+  text-align: center;
+  color: #92400e;
+  font-size: 0.75rem;
+  font-style: italic;
+}
+
+.issue-reminder-hint {
+  background: rgba(255, 255, 255, 0.7);
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  color: #78350f;
+}
+
 /* TBM 작업 테이블 스타일 */
 .tbm-table-container {
  overflow-x: auto;
@@ -1183,3 +1468,551 @@
 .btn-add-defect-inline:hover {
  background: #d97706;
 }
+
+/* =================================================================
+   이슈 기반 부적합 선택 UI
+   ================================================================= */
+
+/* 이슈 섹션 전체 */
+.defect-issue-section {
+  margin-bottom: 0.75rem;
+}
+
+.defect-issue-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  background: #fef3c7;
+  border-radius: 6px 6px 0 0;
+  border: 1px solid #fcd34d;
+  border-bottom: none;
+}
+
+.defect-issue-title {
+  font-weight: 600;
+  color: #92400e;
+  font-size: 0.8125rem;
+}
+
+.defect-issue-count {
+  background: #f59e0b;
+  color: white;
+  padding: 0.125rem 0.375rem;
+  border-radius: 8px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+
+/* 이슈 목록 */
+.defect-issue-list {
+  border: 1px solid #e5e7eb;
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+  overflow: hidden;
+}
+
+/* 개별 이슈 아이템 - 가벼운 인라인 스타일 */
+.defect-issue-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  background: white;
+  border-bottom: 1px solid #f3f4f6;
+  transition: all 0.2s ease;
+  font-size: 0.8125rem;
+}
+
+.defect-issue-item:last-child {
+  border-bottom: none;
+}
+
+.defect-issue-item:hover {
+  background: #f9fafb;
+}
+
+.defect-issue-item.selected {
+  background: #fef2f2;
+  border-left: 3px solid #ef4444;
+}
+
+/* 체크박스 영역 */
+.defect-issue-checkbox {
+  flex-shrink: 0;
+}
+
+.defect-issue-checkbox input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  accent-color: #ef4444;
+}
+
+/* 이슈 정보 영역 - 인라인 */
+.defect-issue-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.defect-issue-category {
+  font-size: 0.75rem;
+  color: #6b7280;
+  flex-shrink: 0;
+}
+
+.defect-issue-item-name {
+  font-weight: 500;
+  color: #374151;
+  font-size: 0.8125rem;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.defect-issue-location {
+  font-size: 0.75rem;
+  color: #9ca3af;
+  flex-shrink: 0;
+}
+
+/* 시간 입력 영역 */
+.defect-issue-time {
+  flex-shrink: 0;
+}
+
+.defect-issue-time .defect-time-input {
+  background: #f3f4f6;
+  opacity: 0.5;
+  cursor: not-allowed;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+}
+
+.defect-issue-time.active .defect-time-input {
+  background: #fee2e2;
+  opacity: 1;
+  cursor: pointer;
+  border-color: #ef4444;
+}
+
+.defect-issue-time.active .defect-time-input:hover {
+  background: #fecaca;
+}
+
+/* 레거시 부적합 섹션 */
+.defect-legacy-section {
+  margin-top: 1rem;
+}
+
+.btn-add-legacy-defect {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.875rem;
+  background: #f3f4f6;
+  color: #374151;
+  border: 1px dashed #d1d5db;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  margin-bottom: 0.5rem;
+}
+
+.btn-add-legacy-defect:hover {
+  background: #e5e7eb;
+  border-color: #9ca3af;
+}
+
+.defect-legacy-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* =================================================================
+   순차 입력 부적합 UI (대분류 → 소분류 → 추가내용)
+   ================================================================= */
+
+.defect-cascading-item {
+  background: #fefce8;
+  border: 1px solid #fde047;
+  border-radius: 8px;
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.defect-cascading-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.defect-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 100px;
+}
+
+.defect-field-label {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: #92400e;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.defect-select-wrapper {
+  position: relative;
+}
+
+.defect-category-select,
+.defect-item-select {
+  width: 100%;
+  min-width: 120px;
+  max-width: none;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #fde047;
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  background: white;
+  cursor: pointer;
+}
+
+.defect-category-select:focus,
+.defect-item-select:focus {
+  outline: none;
+  border-color: #f59e0b;
+  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
+}
+
+.defect-category-select:disabled,
+.defect-item-select:disabled {
+  background: #f3f4f6;
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.defect-field-time {
+  min-width: 70px;
+  flex-shrink: 0;
+}
+
+.defect-field-time .defect-time-input {
+  background: white;
+  border-color: #fde047;
+}
+
+.defect-note-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.defect-note-input {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  background: white;
+}
+
+.defect-note-input:focus {
+  outline: none;
+  border-color: #f59e0b;
+  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.1);
+}
+
+.defect-note-input::placeholder {
+  color: #9ca3af;
+}
+
+.defect-preview {
+  padding: 0.375rem 0.625rem;
+  background: rgba(245, 158, 11, 0.1);
+  border-radius: 4px;
+}
+
+.defect-preview-text {
+  font-size: 0.75rem;
+  color: #92400e;
+  font-weight: 500;
+}
+
+/* 부적합 액션 버튼 영역 */
+.defect-action-buttons {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  align-items: center;
+}
+
+.btn-save-defects {
+  padding: 0.5rem 1.25rem;
+  background: #16a34a;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 600;
+  transition: all 0.2s ease;
+}
+
+.btn-save-defects:hover {
+  background: #15803d;
+}
+
+.btn-save-defects.saved {
+  background: #22c55e;
+  cursor: default;
+}
+
+.btn-save-defects:disabled {
+  opacity: 0.8;
+}
+
+/* 저장 완료 메시지 */
+.defect-save-message {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: #dcfce7;
+  border: 1px solid #86efac;
+  border-radius: 6px;
+  animation: fadeIn 0.3s ease;
+}
+
+.save-message-text {
+  font-size: 0.8125rem;
+  color: #166534;
+  font-weight: 500;
+}
+
+.save-message-text::before {
+  content: '✓ ';
+}
+
+/* 저장 하이라이트 애니메이션 */
+.defect-legacy-list.saved-highlight .defect-cascading-item {
+  animation: highlightPulse 0.5s ease;
+}
+
+@keyframes highlightPulse {
+  0% { background-color: #fefce8; }
+  50% { background-color: #dcfce7; }
+  100% { background-color: #fefce8; }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* =================================================================
+   저장된 부적합 섹션
+   ================================================================= */
+
+.defect-saved-section {
+  background: #f0fdf4;
+  border: 1px solid #86efac;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  overflow: hidden;
+}
+
+.defect-saved-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.625rem 1rem;
+  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
+  border-bottom: 1px solid #86efac;
+}
+
+.defect-saved-title {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #166534;
+}
+
+.defect-saved-count {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: white;
+  background: #16a34a;
+  padding: 0.125rem 0.5rem;
+  border-radius: 10px;
+}
+
+.defect-saved-list {
+  padding: 0.5rem;
+}
+
+.defect-saved-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.625rem 0.75rem;
+  background: white;
+  border: 1px solid #d1fae5;
+  border-radius: 6px;
+  margin-bottom: 0.375rem;
+  gap: 0.75rem;
+}
+
+.defect-saved-item:last-child {
+  margin-bottom: 0;
+}
+
+.defect-saved-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.defect-saved-category {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #16a34a;
+}
+
+.defect-saved-detail {
+  font-size: 0.8125rem;
+  color: #374151;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.defect-saved-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.defect-saved-hours {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #dc2626;
+  background: #fee2e2;
+  padding: 0.25rem 0.625rem;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+
+.btn-edit-defect {
+  padding: 0.25rem 0.625rem;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.btn-edit-defect:hover {
+  background: #2563eb;
+}
+
+.btn-delete-defect {
+  padding: 0.25rem 0.625rem;
+  background: #ef4444;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.btn-delete-defect:hover {
+  background: #dc2626;
+}
+
+/* 입력 중 섹션 */
+.defect-editing-section {
+  margin-top: 0.5rem;
+}
+
+/* 반응형 - 저장된 부적합 */
+@media (max-width: 640px) {
+  .defect-saved-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  .defect-saved-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+
+/* 반응형 - 모바일 */
+@media (max-width: 640px) {
+  .defect-cascading-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .defect-field {
+    width: 100%;
+    max-width: none;
+  }
+
+  .defect-category-select,
+  .defect-item-select {
+    max-width: none;
+  }
+
+  .defect-field-time {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .defect-field-time .defect-field-label {
+    min-width: 40px;
+  }
+
+  .btn-remove-defect {
+    align-self: flex-end;
+    margin-top: 0.5rem;
+  }
+}
+
+/* 이슈 없음 상태 */
+.defect-no-issues {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  background: #f9fafb;
+  border: 1px dashed #d1d5db;
+  border-radius: 8px;
+  margin-bottom: 0.5rem;
+}
+
+.no-issues-text {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
--- a/web-ui/js/code-management.js
+++ b/web-ui/js/code-management.js
@@ -120,16 +120,16 @@ function setupLogoutButton() {
 async function loadAllCodes() {
  try {
    console.log('📊 모든 코드 데이터 로딩 시작');
-    
+
    await Promise.all([
      loadWorkStatusTypes(),
-      loadErrorTypes(),
+      // loadErrorTypes(), // 오류 유형은 신고 시스템으로 대체됨
      loadWorkTypes()
    ]);
-    
+
    // 현재 활성 탭 렌더링
    renderCurrentTab();
-    
+
  } catch (error) {
    console.error('코드 데이터 로딩 오류:', error);
    showToast('코드 데이터를 불러오는데 실패했습니다.', 'error');
@@ -229,9 +229,9 @@ function renderCurrentTab() {
    case 'work-status':
      renderWorkStatusTypes();
      break;
-    case 'error-types':
-      renderErrorTypes();
-      break;
+    // case 'error-types': // 오류 유형은 신고 시스템으로 대체됨
+    //   renderErrorTypes();
+    //   break;
    case 'work-types':
      renderWorkTypes();
      break;
--- a/web-ui/js/daily-work-report.js
+++ b/web-ui/js/daily-work-report.js
--- a/web-ui/js/issue-category-manage.js
+++ b/web-ui/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);
+  }
+};
--- a/web-ui/js/issue-detail.js
+++ b/web-ui/js/issue-detail.js
@@ -0,0 +1,680 @@
+/**
+ * 신고 상세 페이지 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'
+    });
+  };
+
+  container.innerHTML = `
+    <div class="info-item">
+      <div class="info-label">신고 유형</div>
+      <div class="info-value">
+        <span class="type-badge ${d.category_type}">${typeNames[d.category_type] || 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">${d.reporter_full_name || d.reporter_name || '-'}</div>
+    </div>
+    <div class="info-item">
+      <div class="info-label">위치</div>
+      <div class="info-value">${d.custom_location || d.workplace_name || '-'}${d.factory_name ? ` (${d.factory_name})` : ''}</div>
+    </div>
+  `;
+}
+
+/**
+ * 신고 내용 렌더링
+ */
+function renderIssueContent(d) {
+  const container = document.getElementById('issueContent');
+
+  let html = `
+    <div class="info-grid" style="margin-bottom: 1rem;">
+      <div class="info-item">
+        <div class="info-label">카테고리</div>
+        <div class="info-value">${d.issue_category_name || '-'}</div>
+      </div>
+      <div class="info-item">
+        <div class="info-label">항목</div>
+        <div class="info-value">
+          ${d.issue_item_name || '-'}
+          ${d.severity ? `<span class="severity-badge ${d.severity}">${severityNames[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">${d.assigned_full_name || d.assigned_user_name || '-'}</div>
+      </div>
+      <div class="info-item">
+        <div class="info-label">담당 부서</div>
+        <div class="info-value">${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">${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]} → ` : ''}${statusNames[log.new_status]}
+      </div>
+      <div class="timeline-meta">
+        ${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 => {
+          select.innerHTML += `<option value="${user.user_id}">${user.name} (${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;
--- a/web-ui/js/issue-report.js
+++ b/web-ui/js/issue-report.js
@@ -0,0 +1,920 @@
+/**
+ * 신고 등록 페이지 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';
+    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 = '';
+
+  // 기존 항목들 렌더링
+  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;
--- a/web-ui/js/nonconformity-list.js
+++ b/web-ui/js/nonconformity-list.js
@@ -1,8 +1,10 @@
 /**
- * 문제 신고 목록 페이지 JavaScript
+ * 부적합 현황 페이지 JavaScript
+ * category_type=nonconformity 고정 필터
 */

 const API_BASE = window.API_BASE_URL || 'http://localhost:20005/api';
+const CATEGORY_TYPE = 'nonconformity';

 // 상태 한글 변환
 const STATUS_LABELS = {
@@ -13,27 +15,19 @@ const STATUS_LABELS = {
  closed: '종료'
 };

-// 유형 한글 변환
-const TYPE_LABELS = {
-  nonconformity: '부적합',
-  safety: '안전'
-};
-
 // DOM 요소
 let issueList;
-let filterStatus, filterType, filterStartDate, filterEndDate;
+let filterStatus, filterStartDate, filterEndDate;

 // 초기화
 document.addEventListener('DOMContentLoaded', async () => {
  issueList = document.getElementById('issueList');
  filterStatus = document.getElementById('filterStatus');
-  filterType = document.getElementById('filterType');
  filterStartDate = document.getElementById('filterStartDate');
  filterEndDate = document.getElementById('filterEndDate');

  // 필터 이벤트 리스너
  filterStatus.addEventListener('change', loadIssues);
-  filterType.addEventListener('change', loadIssues);
  filterStartDate.addEventListener('change', loadIssues);
  filterEndDate.addEventListener('change', loadIssues);

@@ -42,16 +36,15 @@ document.addEventListener('DOMContentLoaded', async () => {
 });

 /**
- * 통계 로드
+ * 통계 로드 (부적합만)
 */
 async function loadStats() {
  try {
-    const response = await fetch(`${API_BASE}/work-issues/stats/summary`, {
+    const response = await fetch(`${API_BASE}/work-issues/stats/summary?category_type=${CATEGORY_TYPE}`, {
      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
    });

    if (!response.ok) {
-      // 권한이 없는 경우 (일반 사용자)
      document.getElementById('statsGrid').style.display = 'none';
      return;
    }
@@ -70,15 +63,15 @@ async function loadStats() {
 }

 /**
- * 신고 목록 로드
+ * 부적합 목록 로드
 */
 async function loadIssues() {
  try {
-    // 필터 파라미터 구성
+    // 필터 파라미터 구성 (category_type 고정)
    const params = new URLSearchParams();
+    params.append('category_type', CATEGORY_TYPE);

    if (filterStatus.value) params.append('status', filterStatus.value);
-    if (filterType.value) params.append('category_type', filterType.value);
    if (filterStartDate.value) params.append('start_date', filterStartDate.value);
    if (filterEndDate.value) params.append('end_date', filterEndDate.value);

@@ -93,7 +86,7 @@ async function loadIssues() {
      renderIssues(data.data || []);
    }
  } catch (error) {
-    console.error('신고 목록 로드 실패:', error);
+    console.error('부적합 목록 로드 실패:', error);
    issueList.innerHTML = `
      <div class="empty-state">
        <div class="empty-state-title">목록을 불러올 수 없습니다</div>
@@ -104,14 +97,14 @@ async function loadIssues() {
 }

 /**
- * 신고 목록 렌더링
+ * 부적합 목록 렌더링
 */
 function renderIssues(issues) {
  if (issues.length === 0) {
    issueList.innerHTML = `
      <div class="empty-state">
-        <div class="empty-state-title">등록된 신고가 없습니다</div>
-        <p>새로운 문제를 신고하려면 '새 신고' 버튼을 클릭하세요.</p>
+        <div class="empty-state-title">등록된 부적합 신고가 없습니다</div>
+        <p>새로운 부적합을 신고하려면 '부적합 신고' 버튼을 클릭하세요.</p>
      </div>
    `;
    return;
@@ -138,7 +131,7 @@ function renderIssues(issues) {
    }

    // 신고 제목 (항목명 또는 카테고리명)
-    const title = issue.issue_item_name || issue.issue_category_name || '신고';
+    const title = issue.issue_item_name || issue.issue_category_name || '부적합 신고';

    // 사진 목록
    const photos = [
@@ -157,7 +150,7 @@ function renderIssues(issues) {
        </div>

        <div class="issue-title">
-          <span class="issue-type-badge ${issue.category_type}">${TYPE_LABELS[issue.category_type] || ''}</span>
+          <span class="issue-category-badge">${issue.issue_category_name || '부적합'}</span>
          ${title}
        </div>

@@ -214,8 +207,8 @@ function renderIssues(issues) {
 }

 /**
- * 신고 상세 보기
+ * 상세 보기
 */
 function viewIssue(reportId) {
-  window.location.href = `/pages/safety/issue-detail.html?id=${reportId}`;
+  window.location.href = `/pages/safety/issue-detail.html?id=${reportId}&from=nonconformity`;
 }
--- a/web-ui/js/safety-report-list.js
+++ b/web-ui/js/safety-report-list.js
@@ -0,0 +1,214 @@
+/**
+ * 안전신고 현황 페이지 JavaScript
+ * category_type=safety 고정 필터
+ */
+
+const API_BASE = window.API_BASE_URL || 'http://localhost:20005/api';
+const CATEGORY_TYPE = 'safety';
+
+// 상태 한글 변환
+const STATUS_LABELS = {
+  reported: '신고',
+  received: '접수',
+  in_progress: '처리중',
+  completed: '완료',
+  closed: '종료'
+};
+
+// DOM 요소
+let issueList;
+let filterStatus, filterStartDate, filterEndDate;
+
+// 초기화
+document.addEventListener('DOMContentLoaded', async () => {
+  issueList = document.getElementById('issueList');
+  filterStatus = document.getElementById('filterStatus');
+  filterStartDate = document.getElementById('filterStartDate');
+  filterEndDate = document.getElementById('filterEndDate');
+
+  // 필터 이벤트 리스너
+  filterStatus.addEventListener('change', loadIssues);
+  filterStartDate.addEventListener('change', loadIssues);
+  filterEndDate.addEventListener('change', loadIssues);
+
+  // 데이터 로드
+  await Promise.all([loadStats(), loadIssues()]);
+});
+
+/**
+ * 통계 로드 (안전만)
+ */
+async function loadStats() {
+  try {
+    const response = await fetch(`${API_BASE}/work-issues/stats/summary?category_type=${CATEGORY_TYPE}`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (!response.ok) {
+      document.getElementById('statsGrid').style.display = 'none';
+      return;
+    }
+
+    const data = await response.json();
+    if (data.success && data.data) {
+      document.getElementById('statReported').textContent = data.data.reported || 0;
+      document.getElementById('statReceived').textContent = data.data.received || 0;
+      document.getElementById('statProgress').textContent = data.data.in_progress || 0;
+      document.getElementById('statCompleted').textContent = data.data.completed || 0;
+    }
+  } catch (error) {
+    console.error('통계 로드 실패:', error);
+    document.getElementById('statsGrid').style.display = 'none';
+  }
+}
+
+/**
+ * 안전신고 목록 로드
+ */
+async function loadIssues() {
+  try {
+    // 필터 파라미터 구성 (category_type 고정)
+    const params = new URLSearchParams();
+    params.append('category_type', CATEGORY_TYPE);
+
+    if (filterStatus.value) params.append('status', filterStatus.value);
+    if (filterStartDate.value) params.append('start_date', filterStartDate.value);
+    if (filterEndDate.value) params.append('end_date', filterEndDate.value);
+
+    const response = await fetch(`${API_BASE}/work-issues?${params.toString()}`, {
+      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+    });
+
+    if (!response.ok) throw new Error('목록 조회 실패');
+
+    const data = await response.json();
+    if (data.success) {
+      renderIssues(data.data || []);
+    }
+  } catch (error) {
+    console.error('안전신고 목록 로드 실패:', error);
+    issueList.innerHTML = `
+      <div class="empty-state">
+        <div class="empty-state-title">목록을 불러올 수 없습니다</div>
+        <p>잠시 후 다시 시도해주세요.</p>
+      </div>
+    `;
+  }
+}
+
+/**
+ * 안전신고 목록 렌더링
+ */
+function renderIssues(issues) {
+  if (issues.length === 0) {
+    issueList.innerHTML = `
+      <div class="empty-state">
+        <div class="empty-state-title">등록된 안전 신고가 없습니다</div>
+        <p>새로운 안전 문제를 신고하려면 '안전 신고' 버튼을 클릭하세요.</p>
+      </div>
+    `;
+    return;
+  }
+
+  const baseUrl = (window.API_BASE_URL || 'http://localhost:20005').replace('/api', '');
+
+  issueList.innerHTML = issues.map(issue => {
+    const reportDate = new Date(issue.report_date).toLocaleString('ko-KR', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+
+    // 위치 정보
+    let location = issue.custom_location || '';
+    if (issue.factory_name) {
+      location = issue.factory_name;
+      if (issue.workplace_name) {
+        location += ` - ${issue.workplace_name}`;
+      }
+    }
+
+    // 신고 제목 (항목명 또는 카테고리명)
+    const title = issue.issue_item_name || issue.issue_category_name || '안전 신고';
+
+    // 사진 목록
+    const photos = [
+      issue.photo_path1,
+      issue.photo_path2,
+      issue.photo_path3,
+      issue.photo_path4,
+      issue.photo_path5
+    ].filter(Boolean);
+
+    return `
+      <div class="issue-card" onclick="viewIssue(${issue.report_id})">
+        <div class="issue-header">
+          <span class="issue-id">#${issue.report_id}</span>
+          <span class="issue-status ${issue.status}">${STATUS_LABELS[issue.status] || issue.status}</span>
+        </div>
+
+        <div class="issue-title">
+          <span class="issue-category-badge">${issue.issue_category_name || '안전'}</span>
+          ${title}
+        </div>
+
+        <div class="issue-meta">
+          <span class="issue-meta-item">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+              <circle cx="12" cy="7" r="4"/>
+            </svg>
+            ${issue.reporter_full_name || issue.reporter_name}
+          </span>
+          <span class="issue-meta-item">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+              <line x1="16" y1="2" x2="16" y2="6"/>
+              <line x1="8" y1="2" x2="8" y2="6"/>
+              <line x1="3" y1="10" x2="21" y2="10"/>
+            </svg>
+            ${reportDate}
+          </span>
+          ${location ? `
+          <span class="issue-meta-item">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
+              <circle cx="12" cy="10" r="3"/>
+            </svg>
+            ${location}
+          </span>
+          ` : ''}
+          ${issue.assigned_full_name ? `
+          <span class="issue-meta-item">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+              <circle cx="9" cy="7" r="4"/>
+              <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+              <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+            </svg>
+            담당: ${issue.assigned_full_name}
+          </span>
+          ` : ''}
+        </div>
+
+        ${photos.length > 0 ? `
+        <div class="issue-photos">
+          ${photos.slice(0, 3).map(p => `
+            <img src="${baseUrl}${p}" alt="신고 사진" loading="lazy">
+          `).join('')}
+          ${photos.length > 3 ? `<span style="display: flex; align-items: center; color: var(--gray-500);">+${photos.length - 3}</span>` : ''}
+        </div>
+        ` : ''}
+      </div>
+    `;
+  }).join('');
+}
+
+/**
+ * 상세 보기
+ */
+function viewIssue(reportId) {
+  window.location.href = `/pages/safety/issue-detail.html?id=${reportId}&from=safety`;
+}
--- a/web-ui/js/workplace-status.js
+++ b/web-ui/js/workplace-status.js
@@ -158,7 +158,14 @@ async function loadMapImage() {
 // ==================== 금일 데이터 로드 ====================

 async function loadTodayData() {
-  const today = new Date().toISOString().split('T')[0];
+  // 로컬 시간대 기준으로 오늘 날짜 구하기 (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);

  // TBM 작업자 데이터 로드
  await loadTodayWorkers(today);
@@ -213,7 +220,13 @@ async function loadTodayVisitors(date) {

      // 금일 날짜와 승인된 요청 필터링
      todayVisitors = requests.filter(req => {
-        const visitDate = new Date(req.visit_date).toISOString().split('T')[0];
+        // UTC 변환 없이 로컬 날짜로 비교
+        const visitDateObj = new Date(req.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 === formattedDate &&
               (req.status === 'approved' || req.status === 'training_completed');
      }).map(req => ({
--- a/web-ui/pages/admin/codes.html
+++ b/web-ui/pages/admin/codes.html
@@ -22,7 +22,7 @@
        <div class="page-header">
            <div class="page-title-section">
                <h1 class="page-title">코드 관리</h1>
-                <p class="page-description">작업 상태, 오류 유형, 작업 유형 등 시스템에서 사용하는 코드를 관리합니다</p>
+                <p class="page-description">작업 상태, 작업 유형 등 시스템에서 사용하는 코드를 관리합니다</p>
            </div>

            <div class="page-actions">
@@ -33,7 +33,6 @@
        <!-- 코드 유형 탭 -->
        <div class="code-tabs">
            <button class="tab-btn active" data-tab="work-status" onclick="switchCodeTab('work-status')">작업 상태 유형</button>
-            <button class="tab-btn" data-tab="error-types" onclick="switchCodeTab('error-types')">오류 유형</button>
            <button class="tab-btn" data-tab="work-types" onclick="switchCodeTab('work-types')">작업 유형</button>
        </div>

@@ -59,30 +58,6 @@
            </div>
        </div>

-        <!-- 오류 유형 관리 -->
-        <div id="error-types-tab" class="code-tab-content">
-            <div class="code-section">
-                <div class="section-header">
-                    <h2 class="section-title">오류 유형 관리</h2>
-                    <div class="section-actions">
-                        <button class="btn btn-primary" onclick="openCodeModal('error-types')">새 오류 유형 추가</button>
-                    </div>
-                </div>
-
-                <div class="code-stats">
-                    <span class="stat-item">총 <span id="errorTypesCount">0</span>개</span>
-                    <span class="stat-item critical-stat">심각 <span id="criticalErrorsCount">0</span>개</span>
-                    <span class="stat-item high-stat">높음 <span id="highErrorsCount">0</span>개</span>
-                    <span class="stat-item medium-stat">보통 <span id="mediumErrorsCount">0</span>개</span>
-                    <span class="stat-item low-stat">낮음 <span id="lowErrorsCount">0</span>개</span>
-                </div>
-                
-                <div class="code-grid" id="errorTypesGrid">
-                    <!-- 오류 유형 카드들이 여기에 동적으로 생성됩니다 -->
-                </div>
-            </div>
-        </div>
-
        <!-- 작업 유형 관리 -->
        <div id="work-types-tab" class="code-tab-content">
            <div class="code-section">
@@ -139,22 +114,6 @@
                        <small class="form-help">체크하면 이 상태는 오류로 간주됩니다</small>
                    </div>
                    
-                    <!-- 오류 유형 전용 필드 -->
-                    <div class="form-group" id="severityGroup" style="display: none;">
-                        <label class="form-label">심각도 *</label>
-                        <select id="severity" class="form-control">
-                            <option value="low">낮음 (Low)</option>
-                            <option value="medium" selected>보통 (Medium)</option>
-                            <option value="high">높음 (High)</option>
-                            <option value="critical">심각 (Critical)</option>
-                        </select>
-                    </div>
-                    
-                    <div class="form-group" id="solutionGuideGroup" style="display: none;">
-                        <label class="form-label">해결 가이드</label>
-                        <textarea id="solutionGuide" class="form-control" rows="4" placeholder="이 오류 발생 시 해결 방법을 입력하세요"></textarea>
-                    </div>
-                    
                    <!-- 작업 유형 전용 필드 -->
                    <div class="form-group" id="categoryGroup" style="display: none;">
                        <label class="form-label">카테고리</label>
--- a/web-ui/pages/admin/issue-categories.html
+++ b/web-ui/pages/admin/issue-categories.html
@@ -0,0 +1,322 @@
+<!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/admin-pages.css?v=7">
+    <link rel="icon" type="image/png" href="/img/favicon.png">
+    <script src="/js/auth-check.js?v=1" defer></script>
+    <script type="module" src="/js/api-config.js?v=3"></script>
+    <style>
+        .type-tabs {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 24px;
+        }
+        .type-tab {
+            padding: 12px 24px;
+            background: var(--gray-100);
+            border: 2px solid var(--gray-200);
+            border-radius: var(--radius-md);
+            cursor: pointer;
+            font-weight: 600;
+            color: var(--gray-600);
+            transition: all 0.2s;
+        }
+        .type-tab:hover {
+            background: var(--gray-200);
+        }
+        .type-tab.active {
+            background: var(--primary-600);
+            border-color: var(--primary-600);
+            color: white;
+        }
+        .type-tab.safety.active {
+            background: var(--yellow-500);
+            border-color: var(--yellow-500);
+        }
+
+        .category-section {
+            margin-bottom: 32px;
+        }
+        .category-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 16px 20px;
+            background: var(--gray-100);
+            border-radius: var(--radius-md);
+            cursor: pointer;
+        }
+        .category-header:hover {
+            background: var(--gray-200);
+        }
+        .category-name {
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: var(--gray-800);
+        }
+        .category-badge {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .severity-badge {
+            padding: 4px 10px;
+            border-radius: var(--radius-full);
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+        .severity-badge.low { background: var(--gray-200); color: var(--gray-700); }
+        .severity-badge.medium { background: var(--yellow-100); color: var(--yellow-700); }
+        .severity-badge.high { background: var(--orange-100); color: var(--orange-700); }
+        .severity-badge.critical { background: var(--red-100); color: var(--red-700); }
+
+        .item-count {
+            font-size: 0.875rem;
+            color: var(--gray-500);
+        }
+
+        .category-items {
+            display: none;
+            padding: 16px;
+            border: 1px solid var(--gray-200);
+            border-top: none;
+            border-radius: 0 0 var(--radius-md) var(--radius-md);
+        }
+        .category-section.expanded .category-items {
+            display: block;
+        }
+        .category-section.expanded .category-header {
+            border-radius: var(--radius-md) var(--radius-md) 0 0;
+        }
+
+        .item-list {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        .item-card {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 12px 16px;
+            background: white;
+            border: 1px solid var(--gray-200);
+            border-radius: var(--radius-md);
+        }
+        .item-info {
+            flex: 1;
+        }
+        .item-name {
+            font-weight: 500;
+            color: var(--gray-800);
+        }
+        .item-desc {
+            font-size: 0.85rem;
+            color: var(--gray-500);
+            margin-top: 4px;
+        }
+        .item-actions {
+            display: flex;
+            gap: 8px;
+        }
+
+        .add-item-form {
+            display: flex;
+            gap: 8px;
+            margin-top: 12px;
+            padding-top: 12px;
+            border-top: 1px dashed var(--gray-300);
+        }
+        .add-item-form input {
+            flex: 1;
+            padding: 8px 12px;
+            border: 1px solid var(--gray-300);
+            border-radius: var(--radius-md);
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 48px;
+            color: var(--gray-500);
+        }
+
+        /* 모달 */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+        }
+        .modal-container {
+            background: white;
+            border-radius: var(--radius-lg);
+            width: 90%;
+            max-width: 500px;
+            max-height: 90vh;
+            overflow-y: auto;
+        }
+        .modal-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 20px 24px;
+            border-bottom: 1px solid var(--gray-200);
+        }
+        .modal-header h2 {
+            margin: 0;
+            font-size: 1.25rem;
+        }
+        .modal-body {
+            padding: 24px;
+        }
+        .modal-footer {
+            display: flex;
+            justify-content: flex-end;
+            gap: 12px;
+            padding: 16px 24px;
+            border-top: 1px solid var(--gray-200);
+        }
+
+        .form-group {
+            margin-bottom: 16px;
+        }
+        .form-label {
+            display: block;
+            margin-bottom: 6px;
+            font-weight: 500;
+            color: var(--gray-700);
+        }
+        .form-control {
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid var(--gray-300);
+            border-radius: var(--radius-md);
+            font-size: 0.95rem;
+        }
+        .form-control:focus {
+            outline: none;
+            border-color: var(--primary-500);
+            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+        }
+    </style>
+</head>
+<body>
+  <div id="navbar-container"></div>
+
+  <div class="page-container">
+    <main class="main-content">
+      <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 class="page-actions">
+                <button class="btn btn-primary" onclick="openCategoryModal()">새 카테고리 추가</button>
+            </div>
+        </div>
+
+        <!-- 유형 탭 -->
+        <div class="type-tabs">
+            <button class="type-tab active" data-type="nonconformity" onclick="switchType('nonconformity')">부적합</button>
+            <button class="type-tab safety" data-type="safety" onclick="switchType('safety')">안전</button>
+        </div>
+
+        <!-- 카테고리 목록 -->
+        <div id="categoryList">
+            <div class="empty-state">카테고리를 불러오는 중...</div>
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <!-- 카테고리 추가/수정 모달 -->
+  <div id="categoryModal" class="modal-overlay" style="display: none;">
+    <div class="modal-container">
+        <div class="modal-header">
+            <h2 id="categoryModalTitle">새 카테고리</h2>
+            <button class="btn btn-secondary btn-sm" onclick="closeCategoryModal()">&times;</button>
+        </div>
+        <div class="modal-body">
+            <form id="categoryForm" onsubmit="event.preventDefault(); saveCategory();">
+                <input type="hidden" id="categoryId">
+                <div class="form-group">
+                    <label class="form-label">카테고리 이름 *</label>
+                    <input type="text" id="categoryName" class="form-control" placeholder="예: 자재 불량" required>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">설명</label>
+                    <textarea id="categoryDescription" class="form-control" rows="3" placeholder="카테고리 설명"></textarea>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">심각도</label>
+                    <select id="categorySeverity" class="form-control">
+                        <option value="low">낮음</option>
+                        <option value="medium">보통</option>
+                        <option value="high">높음</option>
+                        <option value="critical">심각</option>
+                    </select>
+                </div>
+            </form>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" onclick="closeCategoryModal()">취소</button>
+            <button type="button" class="btn btn-danger" id="deleteCategoryBtn" onclick="deleteCategory()" style="display: none;">삭제</button>
+            <button type="button" class="btn btn-primary" onclick="saveCategory()">저장</button>
+        </div>
+    </div>
+  </div>
+
+  <!-- 항목 추가/수정 모달 -->
+  <div id="itemModal" class="modal-overlay" style="display: none;">
+    <div class="modal-container">
+        <div class="modal-header">
+            <h2 id="itemModalTitle">새 항목</h2>
+            <button class="btn btn-secondary btn-sm" onclick="closeItemModal()">&times;</button>
+        </div>
+        <div class="modal-body">
+            <form id="itemForm" onsubmit="event.preventDefault(); saveItem();">
+                <input type="hidden" id="itemId">
+                <input type="hidden" id="itemCategoryId">
+                <div class="form-group">
+                    <label class="form-label">항목 이름 *</label>
+                    <input type="text" id="itemName" class="form-control" placeholder="예: 용접봉 품질 미달" required>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">설명</label>
+                    <textarea id="itemDescription" class="form-control" rows="3" placeholder="항목 설명"></textarea>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">심각도</label>
+                    <select id="itemSeverity" class="form-control">
+                        <option value="low">낮음</option>
+                        <option value="medium">보통</option>
+                        <option value="high">높음</option>
+                        <option value="critical">심각</option>
+                    </select>
+                </div>
+            </form>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" onclick="closeItemModal()">취소</button>
+            <button type="button" class="btn btn-danger" id="deleteItemBtn" onclick="deleteItem()" style="display: none;">삭제</button>
+            <button type="button" class="btn btn-primary" onclick="saveItem()">저장</button>
+        </div>
+    </div>
+  </div>
+
+  <script type="module" src="/js/load-navbar.js?v=5"></script>
+  <script type="module" src="/js/load-sidebar.js"></script>
+  <script type="module" src="/js/issue-category-manage.js"></script>
+</body>
+</html>
--- a/web-ui/pages/safety/issue-detail.html
+++ b/web-ui/pages/safety/issue-detail.html
@@ -11,213 +11,136 @@
    <script src="/js/auth-check.js?v=1" defer></script>
    <script type="module" src="/js/api-config.js?v=3"></script>
    <style>
-        .detail-container {
-            max-width: 900px;
-            margin: 0 auto;
-        }
-
-        .detail-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            margin-bottom: 24px;
-        }
-
-        .detail-title {
-            font-size: 24px;
-            font-weight: 600;
-        }
-
-        .detail-id {
-            font-size: var(--text-sm);
-            color: var(--gray-500);
-            margin-bottom: 8px;
-        }
-
+        /* 상태 배지 */
        .status-badge {
-            padding: 8px 20px;
+            display: inline-block;
+            padding: 0.375rem 1rem;
            border-radius: 9999px;
-            font-size: var(--text-sm);
+            font-size: 0.875rem;
            font-weight: 600;
        }

-        .status-badge.reported { background: var(--blue-100); color: var(--blue-700); }
-        .status-badge.received { background: var(--orange-100); color: var(--orange-700); }
-        .status-badge.in_progress { background: var(--purple-100); color: var(--purple-700); }
-        .status-badge.completed { background: var(--green-100); color: var(--green-700); }
-        .status-badge.closed { background: var(--gray-100); color: var(--gray-700); }
+        .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: var(--radius-lg);
-            padding: 24px;
-            margin-bottom: 20px;
-            box-shadow: var(--shadow-sm);
-            border: 1px solid var(--gray-200);
+            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: var(--text-lg);
+            font-size: 1rem;
            font-weight: 600;
-            margin-bottom: 16px;
-            padding-bottom: 12px;
-            border-bottom: 1px solid var(--gray-200);
+            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: 16px;
+            gap: 1rem;
        }

        .info-item {
-            padding: 12px;
-            background: var(--gray-50);
-            border-radius: var(--radius-md);
+            padding: 0.875rem;
+            background: #f9fafb;
+            border-radius: 0.5rem;
        }

        .info-label {
-            font-size: var(--text-xs);
-            color: var(--gray-500);
-            margin-bottom: 4px;
+            font-size: 0.75rem;
+            color: #6b7280;
+            margin-bottom: 0.25rem;
            text-transform: uppercase;
        }

        .info-value {
-            font-size: var(--text-base);
+            font-size: 0.9375rem;
            font-weight: 500;
+            color: #1f2937;
        }

-        .type-badge {
-            display: inline-block;
-            padding: 4px 12px;
-            border-radius: 4px;
-            font-size: var(--text-sm);
-            font-weight: 500;
-        }
-
-        .type-badge.nonconformity {
-            background: var(--orange-100);
-            color: var(--orange-700);
-        }
-
-        .type-badge.safety {
-            background: var(--red-100);
-            color: var(--red-700);
-        }
-
-        .severity-badge {
-            display: inline-block;
-            padding: 2px 8px;
-            border-radius: 4px;
-            font-size: var(--text-xs);
-            font-weight: 600;
-        }
-
-        .severity-badge.critical { background: var(--red-100); color: var(--red-700); }
-        .severity-badge.high { background: var(--orange-100); color: var(--orange-700); }
-        .severity-badge.medium { background: var(--yellow-100); color: var(--yellow-700); }
-        .severity-badge.low { background: var(--gray-100); color: var(--gray-700); }
-
+        /* 사진 갤러리 */
        .photo-gallery {
            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-            gap: 12px;
+            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+            gap: 0.75rem;
        }

        .photo-item {
            aspect-ratio: 1;
-            border-radius: var(--radius-md);
+            border-radius: 0.5rem;
            overflow: hidden;
            cursor: pointer;
-            border: 1px solid var(--gray-200);
+            border: 1px solid #e5e7eb;
        }

        .photo-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
+            transition: transform 0.2s;
        }

-        .description-text {
-            padding: 16px;
-            background: var(--gray-50);
-            border-radius: var(--radius-md);
-            white-space: pre-wrap;
-            line-height: 1.6;
+        .photo-item:hover img {
+            transform: scale(1.05);
        }

-        .action-buttons {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 12px;
-            margin-top: 24px;
-        }
-
-        .action-btn {
-            padding: 12px 24px;
-            border-radius: var(--radius-md);
-            font-size: var(--text-sm);
-            font-weight: 600;
-            cursor: pointer;
-            border: 1px solid var(--gray-300);
-            background: white;
-            transition: all var(--transition-fast);
-        }
-
-        .action-btn:hover {
-            background: var(--gray-50);
-        }
-
-        .action-btn.primary {
-            background: var(--primary-500);
-            color: white;
-            border-color: var(--primary-500);
-        }
-
-        .action-btn.primary:hover {
-            background: var(--primary-600);
-        }
-
-        .action-btn.success {
-            background: var(--green-500);
-            color: white;
-            border-color: var(--green-500);
-        }
-
-        .action-btn.success:hover {
-            background: var(--green-600);
-        }
-
-        .action-btn.danger {
-            background: var(--red-500);
-            color: white;
-            border-color: var(--red-500);
-        }
-
-        .action-btn.danger:hover {
-            background: var(--red-600);
-        }
-
-        /* 상태 변경 이력 */
+        /* 상태 타임라인 */
        .status-timeline {
            position: relative;
-            padding-left: 24px;
+            padding-left: 1.5rem;
        }

        .status-timeline::before {
            content: '';
            position: absolute;
-            left: 6px;
+            left: 0.375rem;
            top: 0;
            bottom: 0;
            width: 2px;
-            background: var(--gray-200);
+            background: #e5e7eb;
        }

        .timeline-item {
            position: relative;
-            padding-bottom: 16px;
+            padding-bottom: 1rem;
        }

        .timeline-item:last-child {
@@ -227,25 +150,53 @@
        .timeline-item::before {
            content: '';
            position: absolute;
-            left: -18px;
-            top: 4px;
-            width: 10px;
-            height: 10px;
+            left: -1.125rem;
+            top: 0.25rem;
+            width: 0.625rem;
+            height: 0.625rem;
            border-radius: 50%;
-            background: var(--primary-500);
+            background: #3b82f6;
        }

        .timeline-status {
            font-weight: 600;
-            margin-bottom: 4px;
+            margin-bottom: 0.25rem;
+            color: #1f2937;
        }

        .timeline-meta {
-            font-size: var(--text-sm);
-            color: var(--gray-500);
+            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;
@@ -259,48 +210,57 @@
            justify-content: center;
        }

-        .modal-overlay.visible {
-            display: flex;
-        }
+        .modal-overlay.visible { display: flex; }

        .modal-content {
            background: white;
-            padding: 24px;
-            border-radius: var(--radius-lg);
+            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: var(--text-lg);
+            font-size: 1.125rem;
            font-weight: 600;
-            margin-bottom: 20px;
+            margin-bottom: 1.25rem;
        }

        .modal-form-group {
-            margin-bottom: 16px;
+            margin-bottom: 1rem;
        }

        .modal-form-group label {
            display: block;
            font-weight: 500;
-            margin-bottom: 8px;
+            margin-bottom: 0.5rem;
+            font-size: 0.875rem;
        }

        .modal-form-group input,
        .modal-form-group select,
        .modal-form-group textarea {
            width: 100%;
-            padding: 12px;
-            border: 1px solid var(--gray-300);
-            border-radius: var(--radius-md);
+            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: 12px;
-            margin-top: 20px;
+            gap: 0.75rem;
+            margin-top: 1.25rem;
        }

        /* 사진 확대 모달 */
@@ -317,9 +277,7 @@
            justify-content: center;
        }

-        .photo-modal.visible {
-            display: flex;
-        }
+        .photo-modal.visible { display: flex; }

        .photo-modal img {
            max-width: 90%;
@@ -329,13 +287,49 @@

        .photo-modal-close {
            position: absolute;
-            top: 20px;
-            right: 20px;
+            top: 1.25rem;
+            right: 1.25rem;
            color: white;
-            font-size: 32px;
+            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;
@@ -343,7 +337,7 @@

            .detail-header {
                flex-direction: column;
-                gap: 16px;
+                gap: 1rem;
            }

            .action-buttons {
@@ -358,101 +352,103 @@
    </style>
 </head>
 <body>
-    <div id="navbar-container"></div>
+    <div class="work-report-container">
+        <div id="navbar-container"></div>

-    <main class="main-content">
-        <div class="detail-container">
-            <a href="/pages/safety/issue-list.html" style="color: var(--primary-600); text-decoration: none; margin-bottom: 16px; display: inline-block;">
-                &#8592; 목록으로
-            </a>
+        <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 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>
-                <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 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">
+                    <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="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" 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="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="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 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>

-    <!-- 처리 완료 모달 -->
-    <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 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>

-    <!-- 사진 확대 모달 -->
-    <div class="photo-modal" id="photoModal" onclick="closePhotoModal()">
-        <span class="photo-modal-close">&times;</span>
-        <img id="photoModalImg" src="" alt="">
+        <!-- 사진 확대 모달 -->
+        <div class="photo-modal" id="photoModal" onclick="closePhotoModal()">
+            <span class="photo-modal-close">&times;</span>
+            <img id="photoModalImg" src="" alt="">
+        </div>
    </div>

    <script type="module" src="/js/load-navbar.js"></script>
    <script type="module" src="/js/load-sidebar.js"></script>
-    <script src="/js/work-issue-detail.js?v=1"></script>
+    <script src="/js/issue-detail.js?v=1"></script>
 </body>
 </html>
--- a/web-ui/pages/safety/issue-list.html
+++ b/web-ui/pages/safety/issue-list.html
@@ -1,302 +0,0 @@
-<!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/auth-check.js?v=1" defer></script>
-    <script type="module" src="/js/api-config.js?v=3"></script>
-    <style>
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-            gap: 16px;
-            margin-bottom: 24px;
-        }
-
-        .stat-card {
-            background: white;
-            padding: 20px;
-            border-radius: var(--radius-lg);
-            box-shadow: var(--shadow-sm);
-            text-align: center;
-            border: 1px solid var(--gray-200);
-        }
-
-        .stat-number {
-            font-size: 32px;
-            font-weight: 700;
-            margin-bottom: 4px;
-        }
-
-        .stat-label {
-            font-size: var(--text-sm);
-            color: var(--gray-500);
-        }
-
-        .stat-card.reported .stat-number { color: var(--blue-600); }
-        .stat-card.received .stat-number { color: var(--orange-600); }
-        .stat-card.in_progress .stat-number { color: var(--purple-600); }
-        .stat-card.completed .stat-number { color: var(--green-600); }
-
-        .filter-bar {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 12px;
-            margin-bottom: 24px;
-            padding: 16px;
-            background: white;
-            border-radius: var(--radius-lg);
-            box-shadow: var(--shadow-sm);
-        }
-
-        .filter-bar select,
-        .filter-bar input {
-            padding: 10px 14px;
-            border: 1px solid var(--gray-300);
-            border-radius: var(--radius-md);
-            font-size: var(--text-sm);
-        }
-
-        .filter-bar select:focus,
-        .filter-bar input:focus {
-            outline: none;
-            border-color: var(--primary-500);
-        }
-
-        .btn-new-report {
-            margin-left: auto;
-            padding: 10px 20px;
-            background: var(--primary-500);
-            color: white;
-            border: none;
-            border-radius: var(--radius-md);
-            font-size: var(--text-sm);
-            font-weight: 600;
-            cursor: pointer;
-            text-decoration: none;
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .btn-new-report:hover {
-            background: var(--primary-600);
-        }
-
-        .issue-list {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        .issue-card {
-            background: white;
-            border-radius: var(--radius-lg);
-            padding: 20px;
-            box-shadow: var(--shadow-sm);
-            border: 1px solid var(--gray-200);
-            cursor: pointer;
-            transition: all var(--transition-fast);
-        }
-
-        .issue-card:hover {
-            box-shadow: var(--shadow-md);
-            border-color: var(--primary-300);
-        }
-
-        .issue-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            margin-bottom: 12px;
-        }
-
-        .issue-id {
-            font-size: var(--text-sm);
-            color: var(--gray-500);
-        }
-
-        .issue-status {
-            padding: 4px 12px;
-            border-radius: 9999px;
-            font-size: var(--text-xs);
-            font-weight: 600;
-        }
-
-        .issue-status.reported {
-            background: var(--blue-100);
-            color: var(--blue-700);
-        }
-
-        .issue-status.received {
-            background: var(--orange-100);
-            color: var(--orange-700);
-        }
-
-        .issue-status.in_progress {
-            background: var(--purple-100);
-            color: var(--purple-700);
-        }
-
-        .issue-status.completed {
-            background: var(--green-100);
-            color: var(--green-700);
-        }
-
-        .issue-status.closed {
-            background: var(--gray-100);
-            color: var(--gray-700);
-        }
-
-        .issue-title {
-            font-size: var(--text-base);
-            font-weight: 600;
-            margin-bottom: 8px;
-        }
-
-        .issue-type-badge {
-            display: inline-block;
-            padding: 2px 8px;
-            border-radius: 4px;
-            font-size: var(--text-xs);
-            font-weight: 500;
-            margin-right: 8px;
-        }
-
-        .issue-type-badge.nonconformity {
-            background: var(--orange-100);
-            color: var(--orange-700);
-        }
-
-        .issue-type-badge.safety {
-            background: var(--red-100);
-            color: var(--red-700);
-        }
-
-        .issue-meta {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 16px;
-            font-size: var(--text-sm);
-            color: var(--gray-500);
-        }
-
-        .issue-meta-item {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .issue-photos {
-            display: flex;
-            gap: 8px;
-            margin-top: 12px;
-        }
-
-        .issue-photos img {
-            width: 60px;
-            height: 60px;
-            object-fit: cover;
-            border-radius: var(--radius-sm);
-            border: 1px solid var(--gray-200);
-        }
-
-        .empty-state {
-            text-align: center;
-            padding: 60px 20px;
-            color: var(--gray-500);
-        }
-
-        .empty-state-title {
-            font-size: var(--text-lg);
-            font-weight: 600;
-            margin-bottom: 8px;
-        }
-
-        @media (max-width: 768px) {
-            .filter-bar {
-                flex-direction: column;
-            }
-
-            .btn-new-report {
-                width: 100%;
-                justify-content: center;
-            }
-
-            .stats-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="navbar-container"></div>
-
-    <main class="main-content">
-        <div class="page-header">
-            <h1 class="page-title">문제 신고 목록</h1>
-        </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>
-
-            <select id="filterType">
-                <option value="">전체 유형</option>
-                <option value="nonconformity">부적합</option>
-                <option value="safety">안전</option>
-            </select>
-
-            <input type="date" id="filterStartDate" title="시작일">
-            <input type="date" id="filterEndDate" title="종료일">
-
-            <a href="/pages/safety/issue-report.html" class="btn-new-report">
-                + 새 신고
-            </a>
-        </div>
-
-        <!-- 신고 목록 -->
-        <div class="issue-list" id="issueList">
-            <div class="empty-state">
-                <div class="empty-state-title">로딩 중...</div>
-            </div>
-        </div>
-    </main>
-
-    <script type="module" src="/js/load-navbar.js"></script>
-    <script type="module" src="/js/load-sidebar.js"></script>
-    <script src="/js/work-issue-list.js?v=1"></script>
-</body>
-</html>
--- a/web-ui/pages/safety/report-status.html
+++ b/web-ui/pages/safety/report-status.html
@@ -0,0 +1,307 @@
+<!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/auth-check.js?v=1" defer></script>
+    <script type="module" src="/js/api-config.js?v=3"></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 type="module" src="/js/load-navbar.js"></script>
+    <script type="module" src="/js/load-sidebar.js"></script>
+    <script src="/js/safety-report-list.js?v=2"></script>
+</body>
+</html>
--- a/web-ui/pages/safety/report.html
+++ b/web-ui/pages/safety/report.html
@@ -0,0 +1,779 @@
+<!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/auth-check.js?v=1" defer></script>
+    <script type="module" src="/js/api-config.js?v=3"></script>
+    <style>
+        /* 스텝 인디케이터 */
+        .step-indicator {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 0;
+            margin-bottom: 2rem;
+            padding: 1.5rem;
+            background: white;
+            border-radius: 0.75rem;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+
+        .step {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: #9ca3af;
+            font-size: 0.875rem;
+        }
+
+        .step-connector {
+            width: 60px;
+            height: 2px;
+            background: #e5e7eb;
+            margin: 0 1rem;
+        }
+
+        .step.active .step-connector,
+        .step.completed .step-connector {
+            background: #3b82f6;
+        }
+
+        .step.active {
+            color: #3b82f6;
+        }
+
+        .step.completed {
+            color: #10b981;
+        }
+
+        .step-number {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: #f3f4f6;
+            border: 2px solid #e5e7eb;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            font-size: 0.875rem;
+        }
+
+        .step.active .step-number {
+            background: #3b82f6;
+            border-color: #3b82f6;
+            color: white;
+        }
+
+        .step.completed .step-number {
+            background: #10b981;
+            border-color: #10b981;
+            color: white;
+        }
+
+        .step-text {
+            font-weight: 500;
+        }
+
+        /* 폼 섹션 */
+        .form-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);
+        }
+
+        .form-section-title {
+            font-size: 1rem;
+            font-weight: 600;
+            color: #1f2937;
+            margin-bottom: 1.25rem;
+            padding-bottom: 0.75rem;
+            border-bottom: 1px solid #e5e7eb;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .form-section-title .section-number {
+            width: 24px;
+            height: 24px;
+            background: #3b82f6;
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.75rem;
+            font-weight: 700;
+        }
+
+        /* 지도 컨테이너 */
+        .map-container {
+            position: relative;
+            background: #f9fafb;
+            border: 1px solid #e5e7eb;
+            border-radius: 0.5rem;
+            overflow: hidden;
+        }
+
+        #issueMapCanvas {
+            display: block;
+            cursor: crosshair;
+        }
+
+        .selected-location-info {
+            margin-top: 1rem;
+            padding: 1rem;
+            background: #eff6ff;
+            border: 1px solid #bfdbfe;
+            border-radius: 0.5rem;
+            color: #1e40af;
+            font-weight: 500;
+        }
+
+        .selected-location-info.empty {
+            background: #f9fafb;
+            border-color: #e5e7eb;
+            color: #6b7280;
+            text-align: center;
+        }
+
+        .custom-location-toggle {
+            margin-top: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 0.75rem;
+            background: #f9fafb;
+            border-radius: 0.5rem;
+        }
+
+        .custom-location-toggle input[type="checkbox"] {
+            width: 18px;
+            height: 18px;
+            accent-color: #3b82f6;
+        }
+
+        .custom-location-input {
+            margin-top: 0.75rem;
+            display: none;
+        }
+
+        .custom-location-input.visible {
+            display: block;
+        }
+
+        .custom-location-input input {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border: 1px solid #d1d5db;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+        }
+
+        .custom-location-input input:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+
+        /* 유형 선택 버튼 */
+        .type-buttons {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+        }
+
+        .type-btn {
+            padding: 1.5rem;
+            border: 2px solid #e5e7eb;
+            border-radius: 0.75rem;
+            background: white;
+            cursor: pointer;
+            transition: all 0.2s;
+            text-align: center;
+        }
+
+        .type-btn:hover {
+            border-color: #d1d5db;
+            background: #f9fafb;
+        }
+
+        .type-btn.selected {
+            border-color: #3b82f6;
+            background: #eff6ff;
+        }
+
+        .type-btn.nonconformity.selected {
+            border-color: #f97316;
+            background: #fff7ed;
+        }
+
+        .type-btn.safety.selected {
+            border-color: #ef4444;
+            background: #fef2f2;
+        }
+
+        .type-btn-icon {
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .type-btn-title {
+            font-size: 1rem;
+            font-weight: 600;
+            color: #1f2937;
+            margin-bottom: 0.25rem;
+        }
+
+        .type-btn-desc {
+            font-size: 0.8rem;
+            color: #6b7280;
+        }
+
+        /* 카테고리 선택 */
+        #categoryContainer {
+            margin-top: 1.5rem;
+            padding-top: 1.5rem;
+            border-top: 1px solid #e5e7eb;
+        }
+
+        .category-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+            gap: 0.75rem;
+        }
+
+        .category-btn {
+            padding: 1rem;
+            border: 1px solid #e5e7eb;
+            border-radius: 0.5rem;
+            background: white;
+            cursor: pointer;
+            transition: all 0.2s;
+            text-align: center;
+            font-size: 0.875rem;
+            font-weight: 500;
+        }
+
+        .category-btn:hover {
+            border-color: #3b82f6;
+            background: #f9fafb;
+        }
+
+        .category-btn.selected {
+            border-color: #3b82f6;
+            background: #eff6ff;
+            color: #1d4ed8;
+        }
+
+        /* 항목 선택 */
+        .item-grid {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+
+        .item-btn {
+            padding: 0.625rem 1rem;
+            border: 1px solid #e5e7eb;
+            border-radius: 9999px;
+            background: white;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 0.875rem;
+        }
+
+        .item-btn:hover {
+            border-color: #3b82f6;
+            background: #f9fafb;
+        }
+
+        .item-btn.selected {
+            border-color: #3b82f6;
+            background: #3b82f6;
+            color: white;
+        }
+
+        .item-btn[data-severity="critical"].selected {
+            background: #ef4444;
+            border-color: #ef4444;
+        }
+
+        .item-btn[data-severity="high"].selected {
+            background: #f97316;
+            border-color: #f97316;
+        }
+
+        .item-btn.custom-input-btn {
+            border-style: dashed;
+            color: #6b7280;
+        }
+
+        .item-btn.custom-input-btn:hover {
+            border-color: #3b82f6;
+            color: #3b82f6;
+        }
+
+        .item-btn.custom-input-btn.selected {
+            border-style: solid;
+            background: #dbeafe;
+            color: #1d4ed8;
+        }
+
+        /* 직접 입력 영역 */
+        .custom-item-input {
+            margin-top: 1rem;
+            padding: 1rem;
+            background: #f0f9ff;
+            border: 1px solid #bae6fd;
+            border-radius: 0.5rem;
+            display: flex;
+            gap: 0.5rem;
+            align-items: center;
+        }
+
+        .custom-item-input input {
+            flex: 1;
+            padding: 0.625rem 0.875rem;
+            border: 1px solid #d1d5db;
+            border-radius: 0.375rem;
+            font-size: 0.875rem;
+        }
+
+        .custom-item-input input:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+
+        .btn-confirm-custom {
+            padding: 0.625rem 1rem;
+            background: #3b82f6;
+            color: white;
+            border: none;
+            border-radius: 0.375rem;
+            font-size: 0.875rem;
+            font-weight: 500;
+            cursor: pointer;
+        }
+
+        .btn-confirm-custom:hover {
+            background: #2563eb;
+        }
+
+        .btn-cancel-custom {
+            padding: 0.625rem 1rem;
+            background: white;
+            color: #4b5563;
+            border: 1px solid #d1d5db;
+            border-radius: 0.375rem;
+            font-size: 0.875rem;
+            cursor: pointer;
+        }
+
+        .btn-cancel-custom:hover {
+            background: #f9fafb;
+        }
+
+        /* 사진 업로드 */
+        .photo-upload-grid {
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            gap: 0.75rem;
+        }
+
+        .photo-slot {
+            aspect-ratio: 1;
+            border: 2px dashed #d1d5db;
+            border-radius: 0.5rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.2s;
+            position: relative;
+            overflow: hidden;
+            background: #f9fafb;
+        }
+
+        .photo-slot:hover {
+            border-color: #3b82f6;
+            background: #eff6ff;
+        }
+
+        .photo-slot.has-photo {
+            border-style: solid;
+            border-color: #10b981;
+        }
+
+        .photo-slot img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .photo-slot .add-icon {
+            font-size: 1.5rem;
+            color: #9ca3af;
+        }
+
+        .photo-slot .remove-btn {
+            position: absolute;
+            top: 4px;
+            right: 4px;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            background: #ef4444;
+            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.has-photo .add-icon {
+            display: none;
+        }
+
+        /* 추가 설명 */
+        .additional-textarea {
+            width: 100%;
+            min-height: 100px;
+            padding: 0.75rem 1rem;
+            border: 1px solid #d1d5db;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+            resize: vertical;
+            font-family: inherit;
+        }
+
+        .additional-textarea:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+
+        /* 제출 버튼 */
+        .form-actions {
+            display: flex;
+            justify-content: flex-end;
+            gap: 0.75rem;
+            margin-top: 1.5rem;
+        }
+
+        .btn-submit {
+            padding: 0.875rem 2rem;
+            background: #3b82f6;
+            color: white;
+            border: none;
+            border-radius: 0.5rem;
+            font-size: 0.9375rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .btn-submit:hover {
+            background: #2563eb;
+        }
+
+        .btn-submit:disabled {
+            background: #9ca3af;
+            cursor: not-allowed;
+        }
+
+        .btn-cancel {
+            padding: 0.875rem 1.5rem;
+            background: white;
+            color: #4b5563;
+            border: 1px solid #d1d5db;
+            border-radius: 0.5rem;
+            font-size: 0.9375rem;
+            font-weight: 500;
+            cursor: pointer;
+        }
+
+        .btn-cancel:hover {
+            background: #f9fafb;
+        }
+
+        /* 작업 선택 모달 */
+        .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: 1.5rem;
+            border-radius: 0.75rem;
+            max-width: 500px;
+            width: 90%;
+            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
+        }
+
+        .work-selection-title {
+            font-size: 1.125rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+        }
+
+        .work-option {
+            padding: 1rem;
+            border: 1px solid #e5e7eb;
+            border-radius: 0.5rem;
+            margin-bottom: 0.75rem;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .work-option:hover {
+            border-color: #3b82f6;
+            background: #eff6ff;
+        }
+
+        .work-option-title {
+            font-weight: 600;
+            margin-bottom: 0.25rem;
+        }
+
+        .work-option-desc {
+            font-size: 0.875rem;
+            color: #6b7280;
+        }
+
+        /* 반응형 */
+        @media (max-width: 768px) {
+            .type-buttons {
+                grid-template-columns: 1fr;
+            }
+
+            .photo-upload-grid {
+                grid-template-columns: repeat(3, 1fr);
+            }
+
+            .step-indicator {
+                flex-wrap: wrap;
+                justify-content: center;
+                gap: 0.5rem;
+            }
+
+            .step-connector {
+                display: none;
+            }
+
+            .step-text {
+                display: none;
+            }
+        }
+    </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="step-indicator">
+                    <div class="step active" data-step="1">
+                        <span class="step-number">1</span>
+                        <span class="step-text">위치 선택</span>
+                    </div>
+                    <div class="step-connector"></div>
+                    <div class="step" data-step="2">
+                        <span class="step-number">2</span>
+                        <span class="step-text">유형 선택</span>
+                    </div>
+                    <div class="step-connector"></div>
+                    <div class="step" data-step="3">
+                        <span class="step-number">3</span>
+                        <span class="step-text">항목 선택</span>
+                    </div>
+                    <div class="step-connector"></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">
+                        <span class="section-number">1</span>
+                        발생 위치 선택
+                    </h2>
+
+                    <div class="form-group">
+                        <label class="form-label">공장 선택</label>
+                        <select id="factorySelect" class="form-control">
+                            <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">
+                        <span class="section-number">2</span>
+                        문제 유형 선택
+                    </h2>
+
+                    <div class="type-buttons">
+                        <div class="type-btn nonconformity" data-type="nonconformity">
+                            <div class="type-btn-icon">&#128203;</div>
+                            <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-icon">&#9888;</div>
+                            <div class="type-btn-title">안전 문제</div>
+                            <div class="type-btn-desc">보호구, 위험구역, 안전수칙 관련</div>
+                        </div>
+                    </div>
+
+                    <div id="categoryContainer" style="display: none;">
+                        <label class="form-label">세부 카테고리</label>
+                        <div class="category-grid" id="categoryGrid"></div>
+                    </div>
+                </div>
+
+                <!-- Step 3: 신고 항목 선택 -->
+                <div class="form-section" id="step3Section">
+                    <h2 class="form-section-title">
+                        <span class="section-number">3</span>
+                        신고 항목 선택
+                    </h2>
+                    <p style="color: #6b7280; margin-bottom: 1rem; font-size: 0.875rem;">해당하는 항목을 선택하거나 직접 입력하세요.</p>
+
+                    <div class="item-grid" id="itemGrid">
+                        <p style="color: #9ca3af;">먼저 카테고리를 선택하세요</p>
+                    </div>
+
+                    <!-- 직접 입력 영역 -->
+                    <div class="custom-item-input" id="customItemInput" style="display: none;">
+                        <input type="text" id="customItemName" placeholder="신고 항목을 직접 입력하세요..." maxlength="100">
+                        <button type="button" class="btn-confirm-custom" onclick="confirmCustomItem()">확인</button>
+                        <button type="button" class="btn-cancel-custom" onclick="cancelCustomItem()">취소</button>
+                    </div>
+                </div>
+
+                <!-- Step 4: 사진 및 추가 설명 -->
+                <div class="form-section" id="step4Section">
+                    <h2 class="form-section-title">
+                        <span class="section-number">4</span>
+                        사진 및 추가 설명
+                    </h2>
+
+                    <div class="form-group">
+                        <label class="form-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 class="form-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: 1rem; color: #6b7280; font-size: 0.875rem;">이 위치에 등록된 작업이 있습니다. 연결할 작업을 선택하세요.</p>
+                <div id="workOptionsList"></div>
+                <button type="button" onclick="closeWorkModal()" style="width: 100%; padding: 0.75rem; margin-top: 0.5rem; background: #f3f4f6; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 0.875rem;">
+                    작업 연결 없이 진행
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script type="module" src="/js/load-navbar.js"></script>
+    <script type="module" src="/js/load-sidebar.js"></script>
+    <script src="/js/issue-report.js?v=2"></script>
+</body>
+</html>
--- a/web-ui/pages/work/nonconformity.html
+++ b/web-ui/pages/work/nonconformity.html
@@ -0,0 +1,307 @@
+<!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/auth-check.js?v=1" defer></script>
+    <script type="module" src="/js/api-config.js?v=3"></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: #f97316;
+            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
+        }
+
+        .btn-new-report {
+            margin-left: auto;
+            padding: 0.625rem 1.25rem;
+            background: #f97316;
+            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: #ea580c;
+        }
+
+        /* 신고 목록 */
+        .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: #fed7aa;
+            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: #fff7ed;
+            color: #c2410c;
+        }
+
+        .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=nonconformity" 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 type="module" src="/js/load-navbar.js"></script>
+    <script type="module" src="/js/load-sidebar.js"></script>
+    <script src="/js/nonconformity-list.js?v=2"></script>
+</body>
+</html>
--- a/web-ui/pages/work/report-create.html
+++ b/web-ui/pages/work/report-create.html
@@ -5,7 +5,7 @@
  <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/daily-work-report.css?v=11">
+  <link rel="stylesheet" href="/css/daily-work-report.css?v=12">
  <link rel="icon" type="image/png" href="/img/favicon.png">
  <script src="/js/auth-check.js" defer></script>
  <script type="module" src="/js/api-config.js"></script>
@@ -169,6 +169,6 @@
  <!-- 스크립트 -->
  <script type="module" src="/js/api-config.js?v=3"></script>
  <script type="module" src="/js/load-navbar.js?v=5"></script>
-  <script type="module" src="/js/daily-work-report.js?v=25"></script>
+  <script type="module" src="/js/daily-work-report.js?v=28"></script>
 </body>
 </html>