4b158de1eb
- 모든 페이지에서 이모지 제거 (CODING_GUIDE 준수) - admin/ (9개), safety/ (7개), work/ (4개) - attendance/ (8개), profile/ (2개) - 사이드바 CSS에 누락된 컨테이너 클래스 추가 - work-report-container, analysis-container, dashboard-main - 사이드바 토글 시 메인 콘텐츠 정상 반응하도록 수정 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
303 lines
8.5 KiB
HTML
303 lines
8.5 KiB
HTML
<!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>
|