SamProject/sam-manage
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: [equipment] 설비관리 도움말 페이지 추가

Browse Source 
- /equipment/guide 라우트 및 컨트롤러 메서드 추가
- guide.blade.php 신규 생성 (히어로+TOC+5섹션+FAQ)
- academy-glossary에 equipment 도메인 용어 20개 추가
- 품질인정심사(ISO 9001) 대응 가이드, 보전 기초지식 포함
This commit is contained in:
김보곤
2026-02-25 22:02:33 +09:00
parent 02e8b36a7a
commit 8c24b0ae24
4 changed files with 1033 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
app/Http/Controllers/EquipmentController.php Normal file
View File

@@ -0,0 +1,115 @@
<?php
namespace App\Http\Controllers;
use App\Services\EquipmentInspectionService;
use App\Services\EquipmentRepairService;
use App\Services\EquipmentService;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\View\View;
class EquipmentController extends Controller
{
public function __construct(
private EquipmentService $equipmentService,
private EquipmentInspectionService $inspectionService,
private EquipmentRepairService $repairService
) {}
public function dashboard(Request $request): View|Response
{
if ($request->header('HX-Request')) {
return response('', 200)->header('HX-Redirect', route('equipment.dashboard'));
}
$stats = $this->equipmentService->getDashboardStats();
$typeStats = $this->equipmentService->getTypeStats();
$inspectionStats = $this->inspectionService->getMonthlyStats(now()->format('Y-m'));
$recentRepairs = $this->repairService->getRecentRepairs(5);
return view('equipment.dashboard', compact('stats', 'typeStats', 'inspectionStats', 'recentRepairs'));
}
public function index(Request $request): View|Response
{
if ($request->header('HX-Request')) {
return response('', 200)->header('HX-Redirect', route('equipment.index'));
}
return view('equipment.index');
}
public function create(): View
{
$users = \App\Models\User::orderBy('name')->get(['id', 'name']);
return view('equipment.create', compact('users'));
}
public function show(int $id): View
{
$equipment = $this->equipmentService->getEquipmentById($id);
if (! $equipment) {
abort(404, '설비를 찾을 수 없습니다.');
}
return view('equipment.show', compact('equipment'));
}
public function edit(int $id): View
{
$users = \App\Models\User::orderBy('name')->get(['id', 'name']);
return view('equipment.edit', compact('id', 'users'));
}
public function inspections(Request $request): View|Response
{
if ($request->header('HX-Request')) {
return response('', 200)->header('HX-Redirect', route('equipment.inspections'));
}
$equipmentList = $this->equipmentService->getEquipmentList();
return view('equipment.inspections.index', compact('equipmentList'));
}
public function repairs(Request $request): View|Response
{
if ($request->header('HX-Request')) {
return response('', 200)->header('HX-Redirect', route('equipment.repairs'));
}
$equipmentList = $this->equipmentService->getEquipmentList();
return view('equipment.repairs.index', compact('equipmentList'));
}
public function repairCreate(): View
{
$equipmentList = $this->equipmentService->getEquipmentList();
$users = \App\Models\User::orderBy('name')->get(['id', 'name']);
return view('equipment.repairs.create', compact('equipmentList', 'users'));
}
public function import(Request $request): View|Response
{
if ($request->header('HX-Request')) {
return response('', 200)->header('HX-Redirect', route('equipment.import'));
}
return view('equipment.import');
}
public function guide(Request $request): View|Response
{
if ($request->header('HX-Request')) {
return response('', 200)->header('HX-Redirect', route('equipment.guide'));
}
return view('equipment.guide');
}
}

23
resources/views/components/academy-glossary.blade.php
View File

@@ -440,6 +440,29 @@
"Conflict": "같은 파일의 같은 부분을 두 사람이 다르게 수정했을 때 발생하는 충돌. 수동으로 해결해야 한다.",
"3-way Merge": "공통 조상, 현재 브랜치, 대상 브랜치 세 가지를 비교하여 충돌을 해결하는 Merge 방식."
};
@elseif($domain === 'equipment')
window.__GLOSSARY_DATA['equipment'] = {
"BM": "Breakdown Maintenance(사후보전). 설비가 고장난 후에 수리하는 보전 방식. 가장 기본적이지만 비용과 손실이 크다.",
"PM": "Preventive Maintenance(예방보전). 고장이 발생하기 전에 정기적으로 점검·교체하는 보전 방식.",
"PdM": "Predictive Maintenance(예지보전). 센서 데이터로 고장 징후를 사전에 감지하여 적시에 보전하는 방식.",
"OEE": "Overall Equipment Effectiveness(설비종합효율). 가동률 x 성능효율 x 양품률로 계산하며, 설비 생산성의 핵심 지표.",
"MTBF": "Mean Time Between Failures(평균 고장 간격). 고장 없이 가동한 평균 시간. 값이 클수록 신뢰성이 높다.",
"MTTR": "Mean Time To Repair(평균 수리 시간). 고장 발생부터 복구까지 걸리는 평균 시간. 값이 작을수록 보전 역량이 높다.",
"TPM": "Total Productive Maintenance(전원참여 생산보전). 생산부서와 보전부서가 함께 설비 효율을 극대화하는 활동.",
"가동률": "설비가 실제로 가동된 시간의 비율. 계획 가동시간 대비 실제 가동시간으로 계산한다.",
"성능효율": "설비가 정상 속도로 가동된 비율. 이론 사이클타임 대비 실제 생산 속도를 나타낸다.",
"양품률": "생산된 제품 중 양품의 비율. 불량품을 제외한 실제 합격품 비율이다.",
"ISO 9001": "품질경영시스템 국제 표준. 조직이 고객 요구사항을 충족하고 지속적으로 개선하는 체계를 인증한다.",
"IATF 16949": "자동차 산업 품질경영시스템 표준. ISO 9001을 기반으로 자동차 산업 고유 요구사항을 추가한다.",
"예방보전": "Preventive Maintenance. 설비 고장을 예방하기 위해 계획적으로 수행하는 점검·정비·교체 활동.",
"사후보전": "Breakdown Maintenance. 설비가 고장난 후에 수리하는 방식. 비계획 정지가 발생하여 손실이 크다.",
"예지보전": "Predictive Maintenance. 설비 상태를 모니터링하여 고장을 사전 예측하고 최적 시점에 보전하는 방식.",
"파레토 분석": "고장 원인을 빈도순으로 정렬하여 상위 20%의 원인이 80%의 문제를 유발한다는 법칙을 활용하는 분석 기법.",
"Why-Why 분석": "왜(Why)를 5번 반복하여 고장의 근본 원인을 파악하는 분석 기법. 5 Whys라고도 한다.",
"교정": "측정 장비의 정확도를 기준 장비와 비교하여 확인·조정하는 활동. 품질 관리의 기본 요소.",
"보전구분": "수리 작업의 수행 주체 분류. 사내보전(자체 인력)과 외주보전(협력업체)으로 구분한다.",
"설비이력": "설비의 등록부터 점검, 수리, 폐기까지 전체 생애주기 동안의 기록. 이력 관리는 품질 심사의 핵심 증빙."
};
@endif
</script>
<script src="{{ asset('js/academy-glossary.js') }}" defer></script>

877
resources/views/equipment/guide.blade.php Normal file
View File

@@ -0,0 +1,877 @@
@extends('layouts.app')
@section('title', '설비관리 도움말')
@push('styles')
<style>
/* FAQ 아코디언 chevron 회전 */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary .chevron-icon {
transition: transform 0.2s ease;
}
details[open] summary .chevron-icon {
transform: rotate(180deg);
}
/* 클릭 라이트박스 */
#lightbox {
display: none;
position: fixed;
inset: 0;
z-index: 50;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(4px);
}
#lightbox.is-open {
display: flex;
}
#lightbox img {
max-height: 90vh;
max-width: 90vw;
border-radius: 0.5rem;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}
</style>
@endpush
@section('content')
<div class="max-w-6xl mx-auto">
{{-- ============================================================ --}}
{{-- 히어로 배너 --}}
{{-- ============================================================ --}}
<div class="rounded-2xl overflow-hidden mb-8 shadow-lg" style="background: linear-gradient(135deg, #134e4a 0%, #0f172a 100%);">
<div class="flex items-center" style="flex-wrap: wrap;">
<div style="flex: 1 1 300px; padding: 2rem 2.5rem;">
<div class="flex items-center gap-2 text-sm mb-2" style="color: #99f6e4;">
<span>설비관리</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
<span style="color: #ffffff;">도움말</span>
</div>
<h1 class="text-3xl font-bold mb-2" style="color: #ffffff;">설비관리 도움말</h1>
<p class="text-sm" style="color: #cbd5e1;">설비 등록부터 점검, 수리이력, 품질인정심사 대응까지 — 친절한 가이드</p>
</div>
<div class="shrink-0" style="width: 200px; padding: 1.5rem;">
{{-- 기어/렌치 인라인 SVG 일러스트 --}}
<svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full">
{{-- 큰 기어 --}}
<g transform="translate(100,100)">
<circle cx="0" cy="0" r="32" stroke="#5eead4" stroke-width="3" fill="none" opacity="0.7"/>
<circle cx="0" cy="0" r="14" stroke="#5eead4" stroke-width="2.5" fill="none" opacity="0.5"/>
@for($i = 0; $i < 8; $i++)
<rect x="-5" y="-44" width="10" height="14" rx="2" fill="#5eead4" opacity="0.6" transform="rotate({{ $i * 45 }})"/>
@endfor
</g>
{{-- 작은 기어 --}}
<g transform="translate(150,60)">
<circle cx="0" cy="0" r="18" stroke="#2dd4bf" stroke-width="2.5" fill="none" opacity="0.6"/>
<circle cx="0" cy="0" r="8" stroke="#2dd4bf" stroke-width="2" fill="none" opacity="0.4"/>
@for($i = 0; $i < 6; $i++)
<rect x="-4" y="-26" width="8" height="10" rx="2" fill="#2dd4bf" opacity="0.5" transform="rotate({{ $i * 60 }})"/>
@endfor
</g>
{{-- 렌치 --}}
<g transform="translate(55,145) rotate(-30)">
<rect x="0" y="-4" width="50" height="8" rx="4" fill="#99f6e4" opacity="0.5"/>
<circle cx="55" cy="0" r="12" stroke="#99f6e4" stroke-width="2.5" fill="none" opacity="0.5"/>
</g>
{{-- 체크마크 뱃지 --}}
<circle cx="160" cy="150" r="16" fill="#14b8a6" opacity="0.25"/>
<path d="M152 150l5 5 11-11" stroke="#5eead4" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"/>
</svg>
</div>
</div>
</div>
<div class="flex gap-8">
{{-- ============================================================ --}}
{{-- 좌측 고정 목차 (TOC) --}}
{{-- ============================================================ --}}
<nav class="hidden lg:block shrink-0" style="width: 220px;">
<div class="sticky top-24">
<div class="bg-teal-50 border border-teal-200 rounded-xl p-5">
<h2 class="font-semibold text-teal-800 mb-3 flex items-center gap-2 text-sm">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" /></svg>
목차
</h2>
<div class="space-y-0.5 text-xs">
<a href="#intro" class="block text-teal-700 hover:text-teal-900 py-1 font-medium">1. SAM 설비관리 소개</a>
<a href="#intro-definition" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">모듈 정의</a>
<a href="#intro-features" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">주요 기능</a>
<a href="#intro-flow" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">기능 흐름도</a>
<a href="#usage" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">2. 기능별 사용 가이드</a>
<a href="#usage-registry" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">설비 등록/수정</a>
<a href="#usage-inspection" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">일상점검표</a>
<a href="#usage-repair" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">수리이력</a>
<a href="#usage-dashboard" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">대시보드</a>
<a href="#audit" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">3. 품질인정심사 대응</a>
<a href="#audit-iso" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">ISO 9001 요구사항</a>
<a href="#audit-evidence" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">자동 생성 증빙</a>
<a href="#audit-compare" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">전산화 vs 수기</a>
<a href="#knowledge" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">4. 보전 기초 지식</a>
<a href="#knowledge-types" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">보전 유형</a>
<a href="#knowledge-oee" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">OEE 공식</a>
<a href="#knowledge-analysis" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">고장 분석 기법</a>
<a href="#faq" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">5. 자주 묻는 질문</a>
</div>
</div>
</div>
</nav>
{{-- ============================================================ --}}
{{-- 우측 콘텐츠 --}}
{{-- ============================================================ --}}
<div class="flex-1 min-w-0 space-y-10">
{{-- 모바일 목차 --}}
<div class="lg:hidden bg-teal-50 border border-teal-200 rounded-xl p-4 mb-6">
<details>
<summary class="font-semibold text-teal-800 text-sm cursor-pointer flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" /></svg>
목차 보기
</summary>
<nav class="mt-3 space-y-1 text-sm">
<a href="#intro" class="block text-teal-700 hover:text-teal-900 py-1">1. SAM 설비관리 소개</a>
<a href="#usage" class="block text-teal-700 hover:text-teal-900 py-1">2. 기능별 사용 가이드</a>
<a href="#audit" class="block text-teal-700 hover:text-teal-900 py-1">3. 품질인정심사 대응</a>
<a href="#knowledge" class="block text-teal-700 hover:text-teal-900 py-1">4. 보전 기초 지식</a>
<a href="#faq" class="block text-teal-700 hover:text-teal-900 py-1">5. 자주 묻는 질문</a>
</nav>
</details>
</div>
{{-- ============================================================ --}}
{{-- 섹션 1: SAM 설비관리 소개 --}}
{{-- ============================================================ --}}
<section id="intro" class="scroll-mt-20">
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
<span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">1</span>
SAM 설비관리 소개
</h2>
{{-- 모듈 정의 --}}
<div id="intro-definition" class="scroll-mt-20 mb-8">
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
모듈 정의
</h3>
<div class="bg-teal-50 border border-teal-100 rounded-lg p-5">
<p class="text-sm text-teal-900 leading-relaxed">
<strong>SAM 설비관리</strong>는 공장 내 모든 설비의 생애주기를 체계적으로 관리하는 모듈입니다.
설비 등록부터 일상점검, 수리이력, 통계 분석까지 한 곳에서 관리하며,
<strong>품질인정심사(ISO 9001, IATF 16949)</strong>에 필요한 증빙 자료를 자동으로 생성합니다.
</p>
<p class="text-sm text-teal-800 mt-3 leading-relaxed">
기존 엑셀·종이 기반의 관리 방식을 전산화하여 <strong>데이터 유실 방지</strong>,
<strong>즉시 조회</strong>, <strong>사진 증빙 자동 연결</strong>을 실현합니다.
</p>
</div>
</div>
{{-- 주요 기능 카드 6개 --}}
<div id="intro-features" class="scroll-mt-20 mb-8">
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
주요 기능
</h3>
<div class="flex gap-3" style="flex-wrap: wrap;">
{{-- 설비 등록대장 --}}
<div class="bg-gray-50 border border-gray-200 rounded-lg p-4" style="flex: 1 1 180px; max-width: 280px;">
<div class="flex items-center gap-2 mb-2">
<svg class="w-5 h-5 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
<span class="text-sm font-semibold text-gray-800">설비 등록대장</span>
</div>
<p class="text-xs text-gray-600 leading-relaxed">설비코드, 설비명, 제조사, 설치일, 담당자 등 기본 정보를 체계적으로 등록·관리합니다.</p>
</div>
{{-- 일상점검표 --}}
<div class="bg-gray-50 border border-gray-200 rounded-lg p-4" style="flex: 1 1 180px; max-width: 280px;">
<div class="flex items-center gap-2 mb-2">
<svg class="w-5 h-5 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" /></svg>
<span class="text-sm font-semibold text-gray-800">일상점검표</span>
</div>
<p class="text-xs text-gray-600 leading-relaxed">설비별 일상점검 항목을 날짜별로 기록합니다. 월별 필터와 그리드 뷰로 한눈에 확인합니다.</p>
</div>
{{-- 수리이력 --}}
<div class="bg-gray-50 border border-gray-200 rounded-lg p-4" style="flex: 1 1 180px; max-width: 280px;">
<div class="flex items-center gap-2 mb-2">
<svg class="w-5 h-5 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
<span class="text-sm font-semibold text-gray-800">수리이력</span>
</div>
<p class="text-xs text-gray-600 leading-relaxed">고장 내용, 수리 일자, 보전구분(사내/외주), 비용을 기록하여 설비별 수리 이력을 추적합니다.</p>
</div>
{{-- 대시보드 --}}
<div class="bg-gray-50 border border-gray-200 rounded-lg p-4" style="flex: 1 1 180px; max-width: 280px;">
<div class="flex items-center gap-2 mb-2">
<svg class="w-5 h-5 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
<span class="text-sm font-semibold text-gray-800">대시보드</span>
</div>
<p class="text-xs text-gray-600 leading-relaxed">등록 설비 수, 설비 유형별 분포, 월간 점검 현황, 최근 수리 내역을 통계 차트로 제공합니다.</p>
</div>
{{-- 엑셀 Import --}}
<div class="bg-gray-50 border border-gray-200 rounded-lg p-4" style="flex: 1 1 180px; max-width: 280px;">
<div class="flex items-center gap-2 mb-2">
<svg class="w-5 h-5 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>
<span class="text-sm font-semibold text-gray-800">엑셀 Import</span>
</div>
<p class="text-xs text-gray-600 leading-relaxed">기존 엑셀 파일의 설비 데이터를 일괄 등록합니다. 템플릿 다운로드 후 데이터를 채워 업로드합니다.</p>
</div>
{{-- 사진관리 --}}
<div class="bg-gray-50 border border-gray-200 rounded-lg p-4" style="flex: 1 1 180px; max-width: 280px;">
<div class="flex items-center gap-2 mb-2">
<svg class="w-5 h-5 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
<span class="text-sm font-semibold text-gray-800">사진관리</span>
</div>
<p class="text-xs text-gray-600 leading-relaxed">설비 사진을 드래그&드롭 또는 클립보드 붙여넣기(Ctrl+V)로 첨부합니다. 심사 증빙용으로 활용됩니다.</p>
</div>
</div>
</div>
{{-- 기능 흐름도 --}}
<div id="intro-flow" class="scroll-mt-20">
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
기능 흐름도
</h3>
<div class="bg-gray-50 border border-gray-200 rounded-lg p-6 overflow-x-auto">
<svg viewBox="0 0 720 120" fill="none" xmlns="http://www.w3.org/2000/svg" class="mx-auto" style="max-width: 720px; width: 100%; height: auto;">
{{-- Step 1: 설비 등록 --}}
<rect x="10" y="20" width="140" height="70" rx="12" fill="#f0fdfa" stroke="#14b8a6" stroke-width="2"/>
<text x="80" y="48" text-anchor="middle" fill="#0f766e" font-size="13" font-weight="600">설비 등록</text>
<text x="80" y="68" text-anchor="middle" fill="#5eead4" font-size="10">기본정보 + 사진</text>
{{-- Arrow 1→2 --}}
<path d="M155 55 L195 55" stroke="#14b8a6" stroke-width="2" marker-end="url(#arrowTeal)"/>
{{-- Step 2: 일상점검 --}}
<rect x="195" y="20" width="140" height="70" rx="12" fill="#f0fdfa" stroke="#14b8a6" stroke-width="2"/>
<text x="265" y="48" text-anchor="middle" fill="#0f766e" font-size="13" font-weight="600">일상점검</text>
<text x="265" y="68" text-anchor="middle" fill="#5eead4" font-size="10">날짜별 체크리스트</text>
{{-- Arrow 2→3 --}}
<path d="M340 55 L380 55" stroke="#14b8a6" stroke-width="2" marker-end="url(#arrowTeal)"/>
{{-- Step 3: 수리이력 --}}
<rect x="380" y="20" width="140" height="70" rx="12" fill="#f0fdfa" stroke="#14b8a6" stroke-width="2"/>
<text x="450" y="48" text-anchor="middle" fill="#0f766e" font-size="13" font-weight="600">수리이력</text>
<text x="450" y="68" text-anchor="middle" fill="#5eead4" font-size="10">고장/수리 기록</text>
{{-- Arrow 3→4 --}}
<path d="M525 55 L565 55" stroke="#14b8a6" stroke-width="2" marker-end="url(#arrowTeal)"/>
{{-- Step 4: 이력관리 --}}
<rect x="565" y="20" width="140" height="70" rx="12" fill="#0d9488" stroke="#0d9488" stroke-width="2"/>
<text x="635" y="48" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="600">이력관리</text>
<text x="635" y="68" text-anchor="middle" fill="#ccfbf1" font-size="10">통계 + 심사 증빙</text>
{{-- 화살표 마커 --}}
<defs>
<marker id="arrowTeal" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
<path d="M0 0 L8 4 L0 8 Z" fill="#14b8a6"/>
</marker>
</defs>
{{-- 단계 번호 --}}
<circle cx="30" cy="15" r="10" fill="#14b8a6"/>
<text x="30" y="19" text-anchor="middle" fill="#ffffff" font-size="10" font-weight="700">1</text>
<circle cx="215" cy="15" r="10" fill="#14b8a6"/>
<text x="215" y="19" text-anchor="middle" fill="#ffffff" font-size="10" font-weight="700">2</text>
<circle cx="400" cy="15" r="10" fill="#14b8a6"/>
<text x="400" y="19" text-anchor="middle" fill="#ffffff" font-size="10" font-weight="700">3</text>
<circle cx="585" cy="15" r="10" fill="#14b8a6"/>
<text x="585" y="19" text-anchor="middle" fill="#ffffff" font-size="10" font-weight="700">4</text>
</svg>
</div>
</div>
</div>
</section>
{{-- ============================================================ --}}
{{-- 섹션 2: 기능별 사용 가이드 --}}
{{-- ============================================================ --}}
<section id="usage" class="scroll-mt-20">
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
<span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">2</span>
기능별 사용 가이드
</h2>
{{-- 2-1. 설비 등록/수정 --}}
<div id="usage-registry" class="scroll-mt-20 mb-8">
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
설비 등록/수정
</h3>
<div class="space-y-4">
<div>
<h4 class="text-sm font-semibold text-gray-700 mb-2">필수 입력 항목</h4>
<div class="bg-gray-50 rounded-lg p-4 text-xs text-gray-700">
<div class="flex gap-6" style="flex-wrap: wrap;">
<ul class="space-y-1 list-disc list-inside">
<li><strong>설비코드</strong> — 고유 식별번호 (중복 불가)</li>
<li><strong>설비명</strong> — 설비의 이름</li>
<li><strong>설비유형</strong> — 생산/검사/유틸리티 등 분류</li>
</ul>
<ul class="space-y-1 list-disc list-inside">
<li><strong>설치일</strong> — 설비를 설치한 날짜</li>
<li><strong>설치위치</strong> — 공장 내 위치</li>
<li><strong>담당자</strong> — 설비 관리 책임자</li>
</ul>
</div>
</div>
</div>
<div>
<h4 class="text-sm font-semibold text-gray-700 mb-2">사진 첨부 방법</h4>
<div class="bg-blue-50 border border-blue-100 rounded-lg p-4 text-xs text-blue-800 leading-relaxed">
<p class="font-semibold mb-1">사진 첨부 3가지 방법:</p>
<ol class="list-decimal list-inside space-y-1">
<li><strong>파일 선택</strong> — "파일 선택" 버튼 클릭 후 이미지 파일 선택</li>
<li><strong>드래그 & 드롭</strong> — 파일 탐색기에서 이미지를 사진 영역에 끌어다 놓기</li>
<li><strong>클립보드 붙여넣기</strong> — 스크린샷 후 <kbd class="bg-blue-100 px-1 rounded">Ctrl</kbd>+<kbd class="bg-blue-100 px-1 rounded">V</kbd>로 바로 붙여넣기</li>
</ol>
</div>
</div>
<div>
<h4 class="text-sm font-semibold text-gray-700 mb-2">엑셀 Import로 대량 등록</h4>
<div class="bg-gray-50 rounded-lg p-4 text-xs text-gray-700 leading-relaxed">
<ol class="list-decimal list-inside space-y-1">
<li><strong>템플릿 다운로드</strong> — 설비 Import 페이지에서 엑셀 템플릿을 다운로드합니다.</li>
<li><strong>데이터 입력</strong> — 템플릿 양식에 맞춰 설비 데이터를 입력합니다.</li>
<li><strong>파일 업로드</strong> — 작성한 엑셀 파일을 업로드하면 자동으로 설비가 등록됩니다.</li>
</ol>
</div>
</div>
<div class="bg-amber-50 border border-amber-100 rounded-lg p-4 text-xs text-amber-800">
<p class="font-semibold mb-1">Tip: 설비코드 규칙</p>
<p>설비코드는 한번 등록하면 변경할 수 없습니다. 회사의 설비코드 체계에 맞춰 등록하세요. 예: <code class="bg-amber-100 px-1 rounded">EQ-PR-001</code> (설비-생산-001)</p>
</div>
</div>
</div>
{{-- 2-2. 일상점검표 --}}
<div id="usage-inspection" class="scroll-mt-20 mb-8">
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
일상점검표
</h3>
<div class="space-y-4">
<div class="bg-gray-50 rounded-lg p-4 text-xs text-gray-700 leading-relaxed">
<p class="mb-2">일상점검표는 <strong>설비별 그리드(표) 형태</strong>로 구성됩니다. 행은 날짜, 열은 점검 항목입니다.</p>
<ul class="list-disc list-inside space-y-1">
<li><strong>점검 기록</strong> — 각 셀을 클릭하면 양호(O), 불량(X), 해당없음(-) 등을 선택합니다.</li>
<li><strong>월별 필터</strong> — 상단 월 선택으로 해당 월의 점검 현황만 조회합니다.</li>
<li><strong>설비 선택</strong> — 드롭다운에서 설비를 선택하면 해당 설비의 점검표가 표시됩니다.</li>
<li><strong>항목 관리</strong> — 점검 항목은 설비별로 독립적으로 설정할 수 있습니다.</li>
</ul>
</div>
<div class="bg-amber-50 border border-amber-100 rounded-lg p-4 text-xs text-amber-800">
<p class="font-semibold mb-1">Tip: 점검 빈도</p>
<p>ISO 9001에서 요구하는 일상점검은 <strong>매일 작업 시작 전</strong>에 수행하는 것이 원칙입니다. SAM에서는 날짜별로 자동 기록되므로 누락 여부를 쉽게 확인할 수 있습니다.</p>
</div>
</div>
</div>
{{-- 2-3. 수리이력 --}}
<div id="usage-repair" class="scroll-mt-20 mb-8">
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
수리이력
</h3>
<div class="space-y-4">
<div class="bg-gray-50 rounded-lg p-4 text-xs text-gray-700 leading-relaxed">
<p class="mb-2">설비 고장 발생 시 수리 내역을 기록하고 추적합니다.</p>
<ul class="list-disc list-inside space-y-1">
<li><strong>수리일</strong> — 수리를 수행한 날짜</li>
<li><strong>고장 내용</strong> — 어떤 고장이 발생했는지 상세 기술</li>
<li><strong>수리 내용</strong> — 어떻게 수리했는지 조치 내역</li>
<li><strong>보전구분</strong> — 사내보전(자체 인력) 또는 외주보전(협력업체)</li>
<li><strong>수리 비용</strong> — 부품비, 인건비, 외주비 등 수리에 소요된 비용</li>
<li><strong>설비 선택</strong> — 수리 대상 설비를 선택하면 해당 설비의 이력에 자동 연결됩니다.</li>
</ul>
</div>
<div class="bg-blue-50 border border-blue-100 rounded-lg p-4 text-xs text-blue-800">
<p class="font-semibold mb-1">수리이력 활용</p>
<p>수리이력은 설비 상세 페이지에서 <strong>설비별 수리 이력 탭</strong>으로 자동 연결됩니다. 심사관이 특정 설비의 수리 내역을 요청하면 즉시 조회할 수 있습니다.</p>
</div>
</div>
</div>
{{-- 2-4. 대시보드 --}}
<div id="usage-dashboard" class="scroll-mt-20">
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
대시보드
</h3>
<div class="bg-gray-50 rounded-lg p-4 text-xs text-gray-700 leading-relaxed">
<p class="mb-2">설비관리 대시보드는 다음 통계 지표를 제공합니다:</p>
<div class="flex gap-6" style="flex-wrap: wrap;">
<ul class="space-y-1 list-disc list-inside">
<li><strong>총 설비 수</strong> — 등록된 전체 설비 수량</li>
<li><strong>설비유형별 분포</strong> — 생산/검사/유틸리티 등 비율</li>
</ul>
<ul class="space-y-1 list-disc list-inside">
<li><strong>월간 점검 현황</strong> — 이번 달 점검 완료율</li>
<li><strong>최근 수리 내역</strong> — 최근 5건의 수리 기록</li>
</ul>
</div>
</div>
</div>
</div>
</section>
{{-- ============================================================ --}}
{{-- 섹션 3: 품질인정심사 대응 --}}
{{-- ============================================================ --}}
<section id="audit" class="scroll-mt-20">
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
<span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">3</span>
품질인정심사 대응
</h2>
{{-- 3-1. ISO 9001 요구사항 --}}
<div id="audit-iso" class="scroll-mt-20 mb-8">
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
ISO 9001 설비관리 요구사항
</h3>
<div class="bg-gray-50 rounded-lg p-4 text-xs text-gray-700 leading-relaxed space-y-3">
<p>ISO 9001:2015 <strong>7.1.3항 (인프라)</strong>과 <strong>7.1.5항 (모니터링 및 측정 자원)</strong>에서 설비관리를 요구합니다:</p>
<ul class="list-disc list-inside space-y-1">
<li><strong>설비 대장</strong> — 제조에 사용되는 모든 설비의 목록 및 상태 관리</li>
<li><strong>예방보전 계획</strong> — 고장을 사전에 방지하기 위한 정기 점검 계획 수립</li>
<li><strong>점검 기록</strong> — 일상/정기 점검 결과의 문서화된 기록</li>
<li><strong>수리/보수 이력</strong> — 고장 발생 및 조치 내역의 추적 가능한 기록</li>
<li><strong>교정 관리</strong> — 측정 장비의 정기적 교정 및 교정 성적서 보관</li>
</ul>
<p class="text-gray-500">IATF 16949(자동차 산업)는 이에 더해 TPM 활동, OEE 관리, 예비 부품 관리를 추가로 요구합니다.</p>
</div>
</div>
{{-- 3-2. SAM 자동 생성 증빙 --}}
<div id="audit-evidence" class="scroll-mt-20 mb-8">
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
SAM이 자동으로 생성하는 증빙 자료
</h3>
<div class="bg-green-50 border border-green-100 rounded-lg p-5 text-xs text-green-800 leading-relaxed">
<p class="font-semibold text-green-900 mb-3">SAM 설비관리를 사용하면 다음 증빙이 자동으로 관리됩니다:</p>
<div class="flex gap-4" style="flex-wrap: wrap;">
<div class="space-y-1" style="flex: 1 1 200px;">
<div class="flex items-center gap-1"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> 설비 등록대장 (목록+상세)</div>
<div class="flex items-center gap-1"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> 일상점검 기록표</div>
<div class="flex items-center gap-1"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> 수리/보수 이력대장</div>
</div>
<div class="space-y-1" style="flex: 1 1 200px;">
<div class="flex items-center gap-1"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> 설비별 사진 증빙</div>
<div class="flex items-center gap-1"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> 설비유형별 통계 현황</div>
<div class="flex items-center gap-1"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> 수리 비용 추적 데이터</div>
</div>
</div>
</div>
</div>
{{-- 3-3. 전산화 vs 수기 비교 --}}
<div id="audit-compare" class="scroll-mt-20">
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
전산화 vs 수기 관리 비교
</h3>
<div class="overflow-x-auto rounded-lg border border-gray-200">
<table class="w-full text-xs">
<thead>
<tr class="bg-gray-50 border-b border-gray-200">
<th class="text-left p-3 font-semibold text-gray-700" style="width: 25%;">항목</th>
<th class="text-left p-3 font-semibold text-red-600" style="width: 37%;">수기 방식</th>
<th class="text-left p-3 font-semibold text-teal-700" style="width: 38%;">SAM 전산화</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100 text-gray-700">
<tr>
<td class="p-3 font-medium">설비대장 관리</td>
<td class="p-3">엑셀/종이 → 분실 위험, 버전 혼동</td>
<td class="p-3 text-teal-700">DB 영구보관 + 자동 백업</td>
</tr>
<tr class="bg-gray-50">
<td class="p-3 font-medium">점검 기록</td>
<td class="p-3">체크시트 수기 작성 → 판독 어려움</td>
<td class="p-3 text-teal-700">클릭 한 번으로 기록, 즉시 조회</td>
</tr>
<tr>
<td class="p-3 font-medium">수리이력</td>
<td class="p-3">별도 파일 관리 → 연결성 없음</td>
<td class="p-3 text-teal-700">설비별 자동 연결, 이력 추적</td>
</tr>
<tr class="bg-gray-50">
<td class="p-3 font-medium">심사 준비 시간</td>
<td class="p-3">서류 찾느라 수일~수주 소요</td>
<td class="p-3 text-teal-700">즉시 조회, 클릭 한 번으로 출력</td>
</tr>
<tr>
<td class="p-3 font-medium">사진 증빙</td>
<td class="p-3">별도 폴더 관리 → 설비와 연결 안됨</td>
<td class="p-3 text-teal-700">설비에 직접 첨부, 자동 연결</td>
</tr>
<tr class="bg-gray-50">
<td class="p-3 font-medium">데이터 분석</td>
<td class="p-3">수동 집계 → 오류 가능성 높음</td>
<td class="p-3 text-teal-700">대시보드 자동 통계, 실시간 현황</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
{{-- ============================================================ --}}
{{-- 섹션 4: 설비 보전 기초 지식 --}}
{{-- ============================================================ --}}
<section id="knowledge" class="scroll-mt-20">
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
<span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">4</span>
설비 보전 기초 지식
</h2>
{{-- 4-1. 보전 유형 비교 --}}
<div id="knowledge-types" class="scroll-mt-20 mb-8">
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
보전 유형 비교
</h3>
<div class="bg-gray-50 border border-gray-200 rounded-lg p-6 overflow-x-auto">
<svg viewBox="0 0 700 180" fill="none" xmlns="http://www.w3.org/2000/svg" class="mx-auto" style="max-width: 700px; width: 100%; height: auto;">
{{-- BM (사후보전) --}}
<rect x="10" y="40" width="190" height="90" rx="12" fill="#fef2f2" stroke="#fca5a5" stroke-width="2"/>
<text x="105" y="65" text-anchor="middle" fill="#dc2626" font-size="14" font-weight="700">BM (사후보전)</text>
<text x="105" y="85" text-anchor="middle" fill="#7f1d1d" font-size="10">고장 발생 후 수리</text>
<text x="105" y="102" text-anchor="middle" fill="#991b1b" font-size="9">비용 높음 / 손실 큼</text>
<text x="105" y="120" text-anchor="middle" fill="#b91c1c" font-size="9">비계획 정지 발생</text>
{{-- Arrow BM→PM --}}
<path d="M205 85 L250 85" stroke="#94a3b8" stroke-width="2" stroke-dasharray="4" marker-end="url(#arrowGray)"/>
<text x="228" y="78" text-anchor="middle" fill="#94a3b8" font-size="9">진화</text>
{{-- PM (예방보전) --}}
<rect x="250" y="40" width="190" height="90" rx="12" fill="#fefce8" stroke="#fde047" stroke-width="2"/>
<text x="345" y="65" text-anchor="middle" fill="#a16207" font-size="14" font-weight="700">PM (예방보전)</text>
<text x="345" y="85" text-anchor="middle" fill="#713f12" font-size="10">정기 점검/교체</text>
<text x="345" y="102" text-anchor="middle" fill="#854d0e" font-size="9">계획적 보전 수행</text>
<text x="345" y="120" text-anchor="middle" fill="#a16207" font-size="9">비계획 정지 감소</text>
{{-- Arrow PM→PdM --}}
<path d="M445 85 L490 85" stroke="#94a3b8" stroke-width="2" stroke-dasharray="4" marker-end="url(#arrowGray)"/>
<text x="468" y="78" text-anchor="middle" fill="#94a3b8" font-size="9">진화</text>
{{-- PdM (예지보전) --}}
<rect x="490" y="40" width="190" height="90" rx="12" fill="#f0fdfa" stroke="#14b8a6" stroke-width="2"/>
<text x="585" y="65" text-anchor="middle" fill="#0f766e" font-size="14" font-weight="700">PdM (예지보전)</text>
<text x="585" y="85" text-anchor="middle" fill="#134e4a" font-size="10">데이터 기반 예측</text>
<text x="585" y="102" text-anchor="middle" fill="#115e59" font-size="9">최적 시점에 보전</text>
<text x="585" y="120" text-anchor="middle" fill="#0f766e" font-size="9">비용 최소화</text>
{{-- 상단 레이블 --}}
<text x="105" y="25" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="600">Level 1</text>
<text x="345" y="25" text-anchor="middle" fill="#eab308" font-size="11" font-weight="600">Level 2</text>
<text x="585" y="25" text-anchor="middle" fill="#14b8a6" font-size="11" font-weight="600">Level 3</text>
{{-- SAM 위치 표시 --}}
<rect x="250" y="145" width="190" height="24" rx="6" fill="#14b8a6"/>
<text x="345" y="161" text-anchor="middle" fill="#ffffff" font-size="10" font-weight="600">SAM: PM 레벨 지원</text>
<defs>
<marker id="arrowGray" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
<path d="M0 0 L8 4 L0 8 Z" fill="#94a3b8"/>
</marker>
</defs>
</svg>
</div>
<p class="text-xs text-gray-500 mt-2 text-center">SAM 설비관리는 PM(예방보전) 레벨을 지원하며, 축적된 데이터를 기반으로 PdM 전환을 준비할 수 있습니다.</p>
</div>
{{-- 4-2. OEE 공식 --}}
<div id="knowledge-oee" class="scroll-mt-20 mb-8">
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
OEE (설비종합효율) 공식
</h3>
<div class="bg-teal-50 border border-teal-100 rounded-lg p-5">
<div class="text-center mb-4">
<p class="text-lg font-bold text-teal-800">OEE = 가동률 x 성능효율 x 양품률</p>
</div>
<div class="flex gap-3 text-xs" style="flex-wrap: wrap;">
<div class="bg-white border border-teal-200 rounded-lg p-3" style="flex: 1 1 150px;">
<p class="font-semibold text-teal-700 mb-1">가동률 (Availability)</p>
<p class="text-gray-600">실제 가동시간 / 계획 가동시간</p>
<p class="text-gray-500 mt-1">설비가 실제로 돌아간 비율</p>
</div>
<div class="bg-white border border-teal-200 rounded-lg p-3" style="flex: 1 1 150px;">
<p class="font-semibold text-teal-700 mb-1">성능효율 (Performance)</p>
<p class="text-gray-600">이론 사이클타임 x 생산량 / 가동시간</p>
<p class="text-gray-500 mt-1">정상 속도로 돌아간 비율</p>
</div>
<div class="bg-white border border-teal-200 rounded-lg p-3" style="flex: 1 1 150px;">
<p class="font-semibold text-teal-700 mb-1">양품률 (Quality)</p>
<p class="text-gray-600">양품 수 / 총 생산량</p>
<p class="text-gray-500 mt-1">불량 없이 생산한 비율</p>
</div>
</div>
<div class="mt-4 text-xs text-teal-700">
<p><strong>세계적 수준:</strong> OEE 85% 이상 | <strong>일반 제조업:</strong> 60~75% | <strong>개선 필요:</strong> 60% 미만</p>
</div>
</div>
</div>
{{-- 4-3. 고장 분석 기법 --}}
<div id="knowledge-analysis" class="scroll-mt-20">
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
고장 분석 기법
</h3>
<div class="space-y-4">
{{-- Why-Why 분석 --}}
<div>
<h4 class="text-sm font-semibold text-gray-700 mb-2">Why-Why 분석 (5 Whys)</h4>
<div class="bg-gray-50 rounded-lg p-4 text-xs text-gray-700 leading-relaxed">
<p class="mb-3">"왜?"를 5번 반복하여 고장의 <strong>근본 원인</strong>을 찾는 기법입니다.</p>
<div class="bg-white border border-gray-200 rounded-lg p-3 space-y-2">
<p><strong class="text-red-600">현상:</strong> 모터가 과열된다</p>
<p class="pl-3"><strong>Why 1:</strong> 왜 과열되는가? → 냉각팬이 작동하지 않는다</p>
<p class="pl-6"><strong>Why 2:</strong> 왜 작동하지 않는가? → 팬 벨트가 끊어졌다</p>
<p class="pl-9"><strong>Why 3:</strong> 왜 끊어졌는가? → 벨트가 마모되었다</p>
<p class="pl-12"><strong>Why 4:</strong> 왜 마모되었는가? → 교체 주기를 넘겼다</p>
<p class="pl-12"><strong class="text-teal-600">Why 5:</strong> 왜 넘겼는가? → <strong class="text-teal-600">예방보전 계획이 없었다 (근본 원인)</strong></p>
</div>
<p class="mt-3 text-teal-700 font-medium">→ SAM 일상점검표로 벨트 마모 상태를 정기적으로 확인하면 예방 가능합니다.</p>
</div>
</div>
{{-- 파레토 분석 --}}
<div>
<h4 class="text-sm font-semibold text-gray-700 mb-2">파레토 분석 (80/20 법칙)</h4>
<div class="bg-gray-50 rounded-lg p-4 text-xs text-gray-700 leading-relaxed">
<p class="mb-2">고장 원인을 빈도순으로 정렬하면, <strong>상위 20%의 원인이 80%의 고장을 유발</strong>한다는 법칙입니다.</p>
<ul class="list-disc list-inside space-y-1">
<li>SAM 수리이력 데이터를 축적하면 고장 유형별 빈도를 분석할 수 있습니다.</li>
<li>빈도가 높은 고장 원인부터 집중적으로 개선하면 효율적으로 고장률을 줄일 수 있습니다.</li>
<li>품질 심사에서도 "데이터 기반 개선 활동"의 증빙으로 활용됩니다.</li>
</ul>
</div>
</div>
{{-- MTBF/MTTR --}}
<div class="bg-teal-50 border border-teal-100 rounded-lg p-4 text-xs text-teal-800">
<p class="font-semibold mb-2">핵심 지표: MTBF & MTTR</p>
<div class="flex gap-4" style="flex-wrap: wrap;">
<div style="flex: 1 1 200px;">
<p><strong>MTBF</strong> (평균 고장 간격) = 총 가동시간 / 고장 횟수</p>
<p class="text-teal-600 mt-1">값이 클수록 설비 신뢰성이 높음</p>
</div>
<div style="flex: 1 1 200px;">
<p><strong>MTTR</strong> (평균 수리 시간) = 총 수리시간 / 고장 횟수</p>
<p class="text-teal-600 mt-1">값이 작을수록 보전 역량이 높음</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{-- ============================================================ --}}
{{-- 섹션 5: 자주 묻는 질문 (FAQ) --}}
{{-- ============================================================ --}}
<section id="faq" class="scroll-mt-20">
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
<span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">5</span>
자주 묻는 질문 (FAQ)
</h2>
<div class="space-y-3">
{{-- FAQ 1 --}}
<details class="bg-gray-50 rounded-lg border border-gray-200">
<summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
<span>Q. 설비코드는 어떤 체계로 만들어야 하나요?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</summary>
<div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
<p><strong>A.</strong> 회사 내부 규정에 따르되, 일반적인 체계는 다음과 같습니다:</p>
<ul class="list-disc list-inside mt-2 space-y-1">
<li><code class="bg-gray-100 px-1 rounded">EQ-PR-001</code> — 설비(EQ) + 생산(PR) + 일련번호(001)</li>
<li><code class="bg-gray-100 px-1 rounded">EQ-IS-001</code> — 설비(EQ) + 검사(IS) + 일련번호(001)</li>
<li><code class="bg-gray-100 px-1 rounded">EQ-UT-001</code> — 설비(EQ) + 유틸리티(UT) + 일련번호(001)</li>
</ul>
<p class="mt-2 text-gray-500">설비코드는 한번 등록하면 변경할 수 없으므로 신중하게 결정하세요.</p>
</div>
</details>
{{-- FAQ 2 --}}
<details class="bg-gray-50 rounded-lg border border-gray-200">
<summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
<span>Q. 설비 사진은 몇 장까지 등록할 수 있나요?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</summary>
<div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
<p><strong>A.</strong> 설비 1건당 사진 수에는 제한이 없습니다. 다만 개별 파일 크기는 10MB 이하를 권장합니다. 설비 전면, 측면, 명판 등 심사에 필요한 사진을 모두 등록하세요.</p>
</div>
</details>
{{-- FAQ 3 --}}
<details class="bg-gray-50 rounded-lg border border-gray-200">
<summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
<span>Q. 엑셀 Import 시 설비코드가 중복되면 어떻게 되나요?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</summary>
<div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
<p><strong>A.</strong> 이미 등록된 설비코드와 동일한 코드가 엑셀에 포함되어 있으면 해당 행은 <strong>건너뛰기(skip)</strong> 처리됩니다. Import 완료 후 결과 요약에서 건너뛴 항목을 확인할 수 있습니다.</p>
</div>
</details>
{{-- FAQ 4 --}}
<details class="bg-gray-50 rounded-lg border border-gray-200">
<summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
<span>Q. 이미 기록한 점검 데이터를 수정할 수 있나요?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</summary>
<div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
<p><strong>A.</strong> 네, 점검 그리드에서 해당 셀을 다시 클릭하면 값을 변경할 수 있습니다. 단, 수정 이력이 기록되므로 심사 시 투명성이 유지됩니다.</p>
</div>
</details>
{{-- FAQ 5 --}}
<details class="bg-gray-50 rounded-lg border border-gray-200">
<summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
<span>Q. 삭제한 설비를 복구할 수 있나요?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</summary>
<div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
<p><strong>A.</strong> SAM에서는 설비를 완전 삭제하지 않고 <strong>비활성화(소프트 삭제)</strong> 처리합니다. 비활성화된 설비는 목록에서 숨겨지지만 데이터는 보존되어, 관리자가 복구할 수 있습니다.</p>
</div>
</details>
{{-- FAQ 6 --}}
<details class="bg-gray-50 rounded-lg border border-gray-200">
<summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
<span>Q. 수리이력에서 보전구분(사내/외주)은 왜 구분하나요?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</summary>
<div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
<p><strong>A.</strong> 보전구분은 비용 분석과 보전 역량 평가에 필요합니다:</p>
<ul class="list-disc list-inside mt-2 space-y-1">
<li><strong>사내보전</strong> — 자체 기술 인력이 수리. 인건비만 발생하며 즉시 대응 가능</li>
<li><strong>외주보전</strong> — 외부 협력업체에 의뢰. 전문성은 높지만 비용과 시간이 더 소요</li>
</ul>
<p class="mt-2">품질 심사에서도 자체 보전 역량과 외주 관리 체계를 확인합니다.</p>
</div>
</details>
{{-- FAQ 7 --}}
<details class="bg-gray-50 rounded-lg border border-gray-200">
<summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
<span>Q. 설비 담당자를 변경하려면 어떻게 하나요?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</summary>
<div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
<p><strong>A.</strong> 설비 상세 페이지에서 "수정" 버튼을 클릭한 뒤, 담당자 항목을 변경하고 저장하면 됩니다. 변경 이력이 자동으로 기록됩니다.</p>
</div>
</details>
{{-- FAQ 8 --}}
<details class="bg-gray-50 rounded-lg border border-gray-200">
<summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
<span>Q. 점검 항목을 설비마다 다르게 설정할 수 있나요?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</summary>
<div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
<p><strong>A.</strong> 네, 점검 항목은 설비별로 독립적으로 관리됩니다. 설비 특성에 맞는 점검 항목(온도 확인, 소음 점검, 오일 상태 등)을 각각 설정할 수 있습니다.</p>
</div>
</details>
{{-- FAQ 9 --}}
<details class="bg-gray-50 rounded-lg border border-gray-200">
<summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
<span>Q. 대시보드 통계는 실시간으로 업데이트되나요?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</summary>
<div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
<p><strong>A.</strong> 네, 대시보드에 접속할 때마다 최신 데이터를 기반으로 통계가 계산됩니다. 설비 등록, 점검 기록, 수리이력을 입력하면 즉시 대시보드에 반영됩니다.</p>
</div>
</details>
{{-- FAQ 10 --}}
<details class="bg-gray-50 rounded-lg border border-gray-200">
<summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
<span>Q. 설비관리 데이터를 엑셀로 내보낼 수 있나요?</span>
<svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</summary>
<div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
<p><strong>A.</strong> 설비 목록 페이지에서 엑셀 다운로드 기능을 제공합니다. 등록된 전체 설비 정보를 엑셀 파일로 내보내어 보고서 작성이나 심사 자료로 활용할 수 있습니다.</p>
</div>
</details>
</div>
{{-- 핵심 정리 --}}
<div class="mt-6 bg-teal-50 rounded-lg p-5 border border-teal-100">
<h4 class="font-semibold text-teal-800 mb-2 text-sm">핵심 정리</h4>
<p class="text-xs text-teal-700 leading-relaxed">
SAM 설비관리는 <strong>설비 등록 → 일상점검 → 수리이력 → 통계/증빙</strong>의 일관된 흐름으로 운영됩니다.
모든 데이터는 설비별로 자동 연결되어 품질인정심사 시 <strong>즉시 조회 가능한 증빙 자료</strong>가 됩니다.
기존 수기 관리 대비 <strong>데이터 유실 방지, 심사 준비 시간 단축, 이력 추적성 확보</strong>가 핵심 이점입니다.
</p>
</div>
</div>
</section>
</div>
</div>
</div>
{{-- 클릭 라이트박스 --}}
<div id="lightbox" onclick="closeLightbox()">
<button onclick="closeLightbox()" style="position:absolute; top:1rem; right:1rem; background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.8); padding:0.5rem;">
<svg style="width:2rem; height:2rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
<img id="lightbox-img" onclick="event.stopPropagation()">
</div>
<script>
(function() {
window.openLightbox = function(el) {
var lb = document.getElementById('lightbox');
var img = document.getElementById('lightbox-img');
img.src = el.src;
img.alt = el.alt;
lb.classList.add('is-open');
document.body.style.overflow = 'hidden';
};
window.closeLightbox = function() {
var lb = document.getElementById('lightbox');
lb.classList.remove('is-open');
document.body.style.overflow = '';
};
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeLightbox();
}
});
})();
</script>
@include('components.academy-glossary', ['domain' => 'equipment'])
@endsection

18
routes/web.php
View File

@@ -1592,6 +1592,24 @@
Route::delete('/history', [\App\Http\Controllers\Video\TutorialVideoController::class, 'destroy'])->name('destroy');
});
/*
|--------------------------------------------------------------------------
| 설비관리 (Equipment Management)
|--------------------------------------------------------------------------
*/
Route::prefix('equipment')->name('equipment.')->middleware(['auth', 'hq.member', 'password.changed'])->group(function () {
Route::get('/', [\App\Http\Controllers\EquipmentController::class, 'dashboard'])->name('dashboard');
Route::get('/registry', [\App\Http\Controllers\EquipmentController::class, 'index'])->name('index');
Route::get('/registry/create', [\App\Http\Controllers\EquipmentController::class, 'create'])->name('create');
Route::get('/registry/{id}', [\App\Http\Controllers\EquipmentController::class, 'show'])->whereNumber('id')->name('show');
Route::get('/registry/{id}/edit', [\App\Http\Controllers\EquipmentController::class, 'edit'])->whereNumber('id')->name('edit');
Route::get('/inspections', [\App\Http\Controllers\EquipmentController::class, 'inspections'])->name('inspections');
Route::get('/repairs', [\App\Http\Controllers\EquipmentController::class, 'repairs'])->name('repairs');
Route::get('/repairs/create', [\App\Http\Controllers\EquipmentController::class, 'repairCreate'])->name('repairs.create');
Route::get('/import', [\App\Http\Controllers\EquipmentController::class, 'import'])->name('import');
Route::get('/guide', [\App\Http\Controllers\EquipmentController::class, 'guide'])->name('guide');
});
/*
|--------------------------------------------------------------------------
| SAM E-Sign Public Routes (인증 불필요 - 서명자용)