security: 보안 강제 시스템 구축 + 하드코딩 비밀번호 제거

보안 감사 결과 CRITICAL 2건, HIGH 5건 발견 → 수정 완료 + 자동화 구축. [보안 수정] - issue-view.js: 하드코딩 비밀번호 → crypto.getRandomValues() 랜덤 생성 - pushSubscriptionController.js: ntfy 비밀번호 → process.env.NTFY_SUB_PASSWORD - DEPLOY-GUIDE.md/PROGRESS.md/migration SQL: 평문 비밀번호 → placeholder - docker-compose.yml/.env.example: NTFY_SUB_PASSWORD 환경변수 추가 [보안 강제 시스템 - 신규] - scripts/security-scan.sh: 8개 규칙 (CRITICAL 2, HIGH 4, MEDIUM 2) 3모드(staged/all/diff), severity, .securityignore, MEDIUM 임계값 - .githooks/pre-commit: 로컬 빠른 피드백 - .githooks/pre-receive-server.sh: Gitea 서버 최종 차단 bypass 거버넌스([SECURITY-BYPASS: 사유] + 사용자 제한 + 로그) - SECURITY-CHECKLIST.md: 10개 카테고리 자동/수동 구분 - docs/SECURITY-GUIDE.md: 운영자 가이드 (워크플로우, bypass, FAQ) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-10 09:44:21 +09:00
parent bbffa47a9d
commit ba9ef32808
257 changed files with 786 additions and 18 deletions
--- a/system3-nonconformance/web/public/static/css/tkqc-common.css
+++ b/system3-nonconformance/web/public/static/css/tkqc-common.css
@@ -0,0 +1,404 @@
+/* tkqc-common.css — 부적합 관리 시스템 공통 스타일 */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* ===== 로딩 오버레이 ===== */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.9);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.loading-overlay.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* ===== 날짜 그룹 ===== */
+.date-group {
+    margin-bottom: 1.5rem;
+}
+
+.date-header {
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.date-header:hover {
+    background-color: #f3f4f6 !important;
+}
+
+.collapse-content {
+    transition: all 0.3s ease;
+}
+
+.collapse-content.collapsed {
+    display: none;
+}
+
+/* ===== 우선순위 표시 ===== */
+.priority-high { border-left-color: #ef4444 !important; }
+.priority-medium { border-left-color: #f59e0b !important; }
+.priority-low { border-left-color: #10b981 !important; }
+
+/* ===== 상태 배지 ===== */
+.badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.badge-new { background: #dbeafe; color: #1e40af; }
+.badge-processing { background: #fef3c7; color: #92400e; }
+.badge-pending { background: #fef3c7; color: #92400e; }
+.badge-completed { background: #d1fae5; color: #065f46; }
+.badge-archived { background: #f3f4f6; color: #374151; }
+.badge-cancelled { background: #fee2e2; color: #991b1b; }
+
+/* ===== 이슈 카드 ===== */
+.issue-card {
+    transition: all 0.2s ease;
+    border-left: 4px solid transparent;
+}
+
+.issue-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+}
+
+/* ===== 사진 프리뷰 ===== */
+.photo-preview {
+    max-width: 150px;
+    max-height: 100px;
+    object-fit: cover;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+.photo-preview:hover {
+    transform: scale(1.05);
+}
+
+.photo-gallery {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-top: 8px;
+}
+
+/* ===== 사진 모달 ===== */
+.photo-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10000;
+}
+
+.photo-modal-content {
+    position: relative;
+    max-width: 90%;
+    max-height: 90vh;
+}
+
+.photo-modal-content img {
+    max-width: 100%;
+    max-height: 90vh;
+    object-fit: contain;
+    border-radius: 8px;
+}
+
+.photo-modal-close {
+    position: absolute;
+    top: -12px;
+    right: -12px;
+    background: rgba(255, 255, 255, 0.9);
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+}
+
+.photo-modal-close:hover {
+    background: white;
+}
+
+/* ===== 페이드인 애니메이션 ===== */
+.fade-in {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+
+.fade-in.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.header-fade-in {
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
+}
+
+.header-fade-in.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.content-fade-in {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
+    transition-delay: 0.2s;
+}
+
+.content-fade-in.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* ===== 프로그레스바 ===== */
+.progress-bar {
+    background: #475569;
+    transition: width 0.8s ease;
+}
+
+/* ===== 모달 공통 ===== */
+.modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 50;
+}
+
+/* ===== 이슈 테이블 ===== */
+.issue-table-container {
+    overflow-x: auto;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.issue-table {
+    min-width: 2000px;
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.issue-table th,
+.issue-table td {
+    padding: 0.75rem;
+    text-align: left;
+    border-bottom: 1px solid #f3f4f6;
+    vertical-align: top;
+}
+
+/* ===== 상태 보더 ===== */
+.status-new { border-left-color: #3b82f6; }
+.status-processing { border-left-color: #f59e0b; }
+.status-pending { border-left-color: #8b5cf6; }
+.status-completed { border-left-color: #10b981; }
+
+/* ===== 탭 스크롤 인디케이터 ===== */
+.tab-scroll-container {
+    position: relative;
+    overflow: hidden;
+}
+
+.tab-scroll-container::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 40px;
+    background: linear-gradient(to right, transparent, white);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.tab-scroll-container.has-overflow::after {
+    opacity: 1;
+}
+
+.tab-scroll-inner {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+}
+
+.tab-scroll-inner::-webkit-scrollbar {
+    display: none;
+}
+
+/* ===== 모바일 하단 네비게이션 ===== */
+.tkqc-mobile-nav {
+    display: none;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 64px;
+    background: #ffffff;
+    border-top: 1px solid #e5e7eb;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+.tkqc-mobile-nav-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    height: 100%;
+    text-decoration: none;
+    color: #6b7280;
+    font-size: 0.6875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: color 0.2s;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.tkqc-mobile-nav-item i {
+    font-size: 1.25rem;
+    margin-bottom: 0.25rem;
+}
+
+.tkqc-mobile-nav-item:active {
+    background: #f3f4f6;
+}
+
+.tkqc-mobile-nav-item.active {
+    color: #2563eb;
+    font-weight: 600;
+}
+
+.tkqc-mobile-nav-item.active i {
+    transform: scale(1.1);
+}
+
+/* ===== 모바일 반응형 ===== */
+@media (max-width: 768px) {
+    /* 터치 타겟 최소 44px */
+    button, a, [onclick], select {
+        min-height: 44px;
+        min-width: 44px;
+    }
+
+    .tab-btn {
+        padding: 12px 16px;
+        font-size: 14px;
+    }
+
+    .photo-preview {
+        max-width: 80px;
+        max-height: 60px;
+    }
+
+    .photo-modal-content {
+        max-width: 95%;
+    }
+
+    .badge {
+        font-size: 0.65rem;
+        padding: 0.2rem 0.5rem;
+    }
+
+    /* 하단 네비게이션 표시 */
+    .tkqc-mobile-nav {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+    }
+
+    body {
+        padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
+    }
+
+    /* 테이블 → 카드 변환 */
+    .issue-table {
+        min-width: unset;
+    }
+
+    .issue-table thead {
+        display: none;
+    }
+
+    .issue-table tr {
+        display: block;
+        margin-bottom: 1rem;
+        border-radius: 0.5rem;
+        padding: 0.75rem;
+        background: white;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        border-left: 4px solid #3b82f6;
+    }
+
+    .issue-table td {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.25rem 0;
+        border-bottom: none;
+    }
+
+    .issue-table td::before {
+        content: attr(data-label);
+        font-weight: 600;
+        color: #374151;
+        margin-right: 1rem;
+        flex-shrink: 0;
+    }
+
+    /* 대시보드 그리드 모바일 */
+    .dashboard-grid {
+        grid-template-columns: 1fr;
+    }
+
+    /* 2x2 그리드를 1열로 */
+    .grid-cols-2 {
+        grid-template-columns: 1fr !important;
+    }
+
+    /* 이슈 카드 터치 최적화 */
+    .issue-card {
+        padding: 1rem;
+    }
+
+    .issue-card:hover {
+        transform: none;
+    }
+}