feat: [academy] 방화셔터 백과사전 페이지 구축

- AcademyController 신규 생성 (HX-Redirect 처리)
- /academy/fire-shutter 라우트 등록
- 방화셔터 백과사전 Blade 뷰 (개요/구성품/제조공정/설치/유지보수)
This commit is contained in:
김보곤
2026-02-22 19:42:23 +09:00
parent 0f948e67e7
commit 27b20e451f
3 changed files with 996 additions and 0 deletions

View File

@@ -0,0 +1,19 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\View\View;
class AcademyController extends Controller
{
public function fireShutter(Request $request): View|Response
{
if ($request->header('HX-Request')) {
return response('', 200)->header('HX-Redirect', route('academy.fire-shutter'));
}
return view('academy.fire-shutter');
}
}

View File

@@ -0,0 +1,968 @@
@extends('layouts.app')
@section('title', '방화셔터 백과사전')
@section('content')
<div class="max-w-5xl mx-auto">
<!-- 페이지 헤더 -->
<div class="mb-8">
<div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
<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 class="text-gray-700">방화셔터</span>
</div>
<h1 class="text-2xl font-bold text-gray-800">방화셔터 백과사전</h1>
<p class="text-sm text-gray-500 mt-1">방화셔터의 정의부터 구성품, 제조공정, 설치, 유지보수까지 총체적 학습 자료</p>
</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-red-50 border border-red-200 rounded-xl p-5">
<h2 class="font-semibold text-red-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="#overview" class="block text-red-700 hover:text-red-900 py-1 font-medium">1. 개요</a>
<a href="#overview-definition" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">정의 용도</a>
<a href="#overview-types" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">종류</a>
<a href="#overview-diff" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">차이점 비교</a>
<a href="#overview-law" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">관련 법규</a>
<a href="#overview-grade" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">내화성능 등급</a>
<a href="#components" class="block text-red-700 hover:text-red-900 py-1 font-medium mt-2">2. 구성품</a>
<a href="#comp-diagram" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">전체 구성도</a>
<a href="#comp-slat" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">슬랫</a>
<a href="#comp-guide" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">가이드레일</a>
<a href="#comp-barrel" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">권취축</a>
<a href="#comp-electric" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">전장부품</a>
<a href="#comp-etc" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">기타 부품</a>
<a href="#manufacturing" class="block text-red-700 hover:text-red-900 py-1 font-medium mt-2">3. 제조 공정</a>
<a href="#install" class="block text-red-700 hover:text-red-900 py-1 font-medium mt-2">4. 설치 시공</a>
<a href="#maintenance" class="block text-red-700 hover:text-red-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-red-50 border border-red-200 rounded-xl p-4 mb-6">
<details>
<summary class="font-semibold text-red-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="#overview" class="block text-red-700 hover:text-red-900 py-1">1. 개요</a>
<a href="#components" class="block text-red-700 hover:text-red-900 py-1">2. 구성품</a>
<a href="#manufacturing" class="block text-red-700 hover:text-red-900 py-1">3. 제조 공정</a>
<a href="#install" class="block text-red-700 hover:text-red-900 py-1">4. 설치 시공</a>
<a href="#maintenance" class="block text-red-700 hover:text-red-900 py-1">5. 유지보수</a>
</nav>
</details>
</div>
{{-- ============================================================ --}}
{{-- 1. 개요 --}}
{{-- ============================================================ --}}
<section id="overview" 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-red-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">1</span>
개요
</h2>
<!-- 1-1. 정의 용도 -->
<div id="overview-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-red-400 rounded-full"></span>
정의 용도
</h3>
<div class="bg-red-50 rounded-lg p-5 border border-red-100 mb-4">
<p class="text-sm text-red-900 leading-relaxed">
<strong>방화셔터(Fire Shutter)</strong> 건축물의 방화구획에 설치되어, 화재 발생 연기감지기 열감지기의 신호에 따라 <strong>자동으로 폐쇄</strong>되어 화재와 연기의 확산을 차단하는 방화설비이다.
</p>
</div>
<div class="text-sm text-gray-700 space-y-2">
<p>공항, 대형마트, 지하상가, 체육관 <strong>넓은 개방 공간</strong>에서 내화구조 벽을 설치하기 어려운 경우 벽체를 대신하여 방화구획을 형성한다.</p>
<p>평상시에는 천장 케이스 안에 감겨 있어 통행에 지장을 주지 않으며, 화재 시에만 자동으로 하강하여 구획을 차단한다.</p>
</div>
</div>
<!-- 1-2. 종류 -->
<div id="overview-types" 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-red-400 rounded-full"></span>
종류
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gray-50 rounded-lg p-4 border">
<h4 class="font-semibold text-gray-800 mb-2 text-sm">강판형 (Steel Plate)</h4>
<ul class="text-xs text-gray-600 space-y-1">
<li>- 강판 슬랫을 인터록킹 방식으로 연결</li>
<li>- 가장 보편적이며 내구성 우수</li>
<li>- 슬랫 두께: 0.8~1.6mm (KS F 4510)</li>
<li>- 최대 15m까지 제작 가능</li>
</ul>
</div>
<div class="bg-gray-50 rounded-lg p-4 border">
<h4 class="font-semibold text-gray-800 mb-2 text-sm">스크린형 (Screen / Fabric)</h4>
<ul class="text-xs text-gray-600 space-y-1">
<li>- 내열 유리섬유 직물로 제작</li>
<li>- 경량으로 대형 개구부에 유리</li>
<li>- 반투명 소재로 시야 확보 가능</li>
<li>- 에스컬레이터 주변 등에 사용</li>
</ul>
</div>
<div class="bg-gray-50 rounded-lg p-4 border">
<h4 class="font-semibold text-gray-800 mb-2 text-sm">분리형 (Separate)</h4>
<ul class="text-xs text-gray-600 space-y-1">
<li>- 방화셔터와 방화문이 분리 설치</li>
<li>- 셔터 옆에 별도 비상문(방화문) 설치</li>
<li>- 피난 동선 확보에 유리</li>
<li>- 대부분의 신축 건물에서 채택</li>
</ul>
</div>
<div class="bg-gray-50 rounded-lg p-4 border">
<h4 class="font-semibold text-gray-800 mb-2 text-sm">복합형 (Integrated)</h4>
<ul class="text-xs text-gray-600 space-y-1">
<li>- 셔터 내에 비상문(도어) 일체화</li>
<li>- 공간 효율성 높음</li>
<li>- 리모델링, 기존 건물 보강에 적합</li>
<li>- 설치 공간 절약</li>
</ul>
</div>
</div>
</div>
<!-- 1-3. 차이점 비교 -->
<div id="overview-diff" 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-red-400 rounded-full"></span>
일반셔터 / 방화문 / 방화셔터 비교
</h3>
<div class="overflow-x-auto">
<table class="w-full text-sm border-collapse">
<thead>
<tr class="border-b-2 border-gray-200 bg-gray-50">
<th class="text-left py-2 px-3 font-medium text-gray-600">구분</th>
<th class="text-center py-2 px-3 font-medium text-gray-600">일반셔터</th>
<th class="text-center py-2 px-3 font-medium text-blue-600">방화문</th>
<th class="text-center py-2 px-3 font-medium text-red-600">방화셔터</th>
</tr>
</thead>
<tbody class="text-gray-700 text-xs">
<tr class="border-b border-gray-100">
<td class="py-2 px-3 font-medium"> 용도</td>
<td class="py-2 px-3 text-center">보안/방범</td>
<td class="py-2 px-3 text-center">방화구획 (출입구)</td>
<td class="py-2 px-3 text-center">방화구획 (대형 개구부)</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 px-3 font-medium">내화성능</td>
<td class="py-2 px-3 text-center">없음</td>
<td class="py-2 px-3 text-center">비차열 1시간 이상</td>
<td class="py-2 px-3 text-center">비차열 1시간 이상</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 px-3 font-medium">차연성능</td>
<td class="py-2 px-3 text-center">없음</td>
<td class="py-2 px-3 text-center">있음</td>
<td class="py-2 px-3 text-center">있음 (연기차단)</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 px-3 font-medium">작동방식</td>
<td class="py-2 px-3 text-center">수동/전동</td>
<td class="py-2 px-3 text-center">수동 개폐</td>
<td class="py-2 px-3 text-center">감지기 연동 자동폐쇄</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 px-3 font-medium">설치 </td>
<td class="py-2 px-3 text-center">제한 없음</td>
<td class="py-2 px-3 text-center"> 3m 이내</td>
<td class="py-2 px-3 text-center">15m 이상 가능</td>
</tr>
<tr>
<td class="py-2 px-3 font-medium">법적 근거</td>
<td class="py-2 px-3 text-center">-</td>
<td class="py-2 px-3 text-center">건축법 시행령 제46조</td>
<td class="py-2 px-3 text-center">건축법 시행령 제46조</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 1-4. 관련 법규 -->
<div id="overview-law" 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-red-400 rounded-full"></span>
관련 법규
</h3>
<div class="space-y-3">
<div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
<h4 class="font-semibold text-blue-800 text-sm mb-2">건축법 시행령 제46조 (방화구획 등의 설치)</h4>
<ul class="text-xs text-blue-900 space-y-1">
<li>- 주요구조부가 내화구조인 건축물로서 <strong>연면적 1,000m&sup2;</strong> 넘는 경우 방화구획 의무</li>
<li>- 10 이하: 바닥면적 <strong>1,000m&sup2;</strong> 이내마다 구획 (스프링클러 3,000m&sup2;)</li>
<li>- 11 이상: 바닥면적 <strong>200m&sup2;</strong> 이내마다 구획 (스프링클러 600m&sup2;)</li>
</ul>
</div>
<div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
<h4 class="font-semibold text-blue-800 text-sm mb-2">자동방화셔터 방화문의 기준 (국토교통부 고시)</h4>
<ul class="text-xs text-blue-900 space-y-1">
<li>- 연기감지기에 의한 <strong>일부폐쇄</strong> + 열감지기에 의한 <strong>완전폐쇄</strong> 2단계 구조</li>
<li>- 셔터 하강 경보음 발생 의무</li>
<li>- 분리형: 별도 방화문 설치, 복합형: 셔터 비상문 일체화</li>
</ul>
</div>
<div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
<h4 class="font-semibold text-blue-800 text-sm mb-2">소방시설법 (유지관리)</h4>
<ul class="text-xs text-blue-900 space-y-1">
<li>- <strong>작동기능점검</strong>: 1 이상 (인위적 작동 확인)</li>
<li>- <strong>종합정밀점검</strong>: 1 이상 (구성 부품 구조기준 적합성)</li>
<li>- 방화셔터 훼손/철거 중대위반사항으로 즉시 조치 의무</li>
</ul>
</div>
</div>
</div>
<!-- 1-5. 내화성능 등급 -->
<div id="overview-grade" 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-red-400 rounded-full"></span>
내화성능 등급
</h3>
<div class="overflow-x-auto">
<table class="w-full text-sm border-collapse">
<thead>
<tr class="border-b-2 border-gray-200 bg-gray-50">
<th class="text-left py-2 px-3 font-medium text-gray-600">등급</th>
<th class="text-center py-2 px-3 font-medium text-gray-600">내화시간</th>
<th class="text-left py-2 px-3 font-medium text-gray-600">적용 대상</th>
<th class="text-left py-2 px-3 font-medium text-gray-600">시험 기준</th>
</tr>
</thead>
<tbody class="text-gray-700 text-xs">
<tr class="border-b border-gray-100">
<td class="py-2 px-3"><span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">1시간</span></td>
<td class="py-2 px-3 text-center">60</td>
<td class="py-2 px-3">일반 방화구획</td>
<td class="py-2 px-3">KS F 2268-1</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 px-3"><span class="px-2 py-0.5 bg-orange-100 text-orange-800 rounded-full text-xs font-medium">2시간</span></td>
<td class="py-2 px-3 text-center">120</td>
<td class="py-2 px-3">고층 건축물, 특수 구역</td>
<td class="py-2 px-3">KS F 2268-1</td>
</tr>
<tr>
<td class="py-2 px-3"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded-full text-xs font-medium">3시간</span></td>
<td class="py-2 px-3 text-center">180</td>
<td class="py-2 px-3">위험물 저장소, 특수 시설</td>
<td class="py-2 px-3">KS F 2268-1</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-3 bg-amber-50 rounded-lg p-3 border border-amber-100">
<p class="text-xs text-amber-800">
<strong>참고:</strong> 비차열 성능이란 화염이 관통하지 않는 성능을 의미하며, 차열 성능은 이면 온도 상승까지 제한하는 높은 기준이다. 국내 방화셔터는 대부분 <strong>비차열 1시간</strong> 기준을 적용한다.
</p>
</div>
</div>
</div>
</section>
{{-- ============================================================ --}}
{{-- 2. 구성품 --}}
{{-- ============================================================ --}}
<section id="components" 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-red-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">2</span>
구성품
</h2>
<!-- 전체 구성도 -->
<div id="comp-diagram" 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-red-400 rounded-full"></span>
전체 구성도
</h3>
<div class="bg-gray-900 rounded-lg p-5 font-mono text-xs text-green-400 overflow-x-auto leading-relaxed">
<pre class="whitespace-pre">
천장 슬래브
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┌─────────────────────────────────────────┐
케이스 / 헤드박스
┌───────────────────────────────────┐
[밸런스 스프링] [권취축/Barrel]
[브라켓] [감속기]
[전동모터] [전자브레이크]
└───────────────────────────────────┘
└─────────────────────────────────────────┘
가이드레일 가이드레일
(Guide Rail) (Guide Rail)
═══════════════════════════════════ 슬랫 (Slat)
═══════════════════════════════════ 인터록킹
═══════════════════════════════════ 연결 구조
═══════════════════════════════════
═══════════════════════════════════
═══════════════════════════════════
═══════════════════════════════════
┌─────────────────────────────────┐
하단바 (Bottom Bar)
└─────────────────────────────────┘
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
바닥
[연동제어기] ←─ [연기감지기] / [열감지기]
├─→ [자동폐쇄기] 셔터 하강 제어
├─→ [리밋스위치] /하한 위치 감지
└─→ [수동조작함] 비상 수동 조작
</pre>
</div>
</div>
<!-- 슬랫 -->
<div id="comp-slat" class="scroll-mt-20 mb-6">
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
<span class="w-2 h-2 bg-red-400 rounded-full"></span>
슬랫 (Slat)
</h3>
<div class="bg-gray-50 rounded-lg p-4 border">
<p class="text-sm text-gray-700 mb-3">셔터의 <strong>커튼면</strong> 구성하는 강판 단위 부재. 롤포밍으로 성형된 슬랫을 서로 끼워 맞추는(인터록킹) 방식으로 연결하여 유연한 커튼을 형성한다.</p>
<div class="grid grid-cols-2 gap-3 text-xs">
<div><span class="font-medium text-gray-600">재질:</span> 용융아연도금강판 (SGCC)</div>
<div><span class="font-medium text-gray-600">두께:</span> 0.8mm ~ 1.6mm</div>
<div><span class="font-medium text-gray-600">(피치):</span> 75mm ~ 100mm</div>
<div><span class="font-medium text-gray-600">기준:</span> KS F 4510</div>
</div>
</div>
</div>
<!-- 가이드레일 -->
<div id="comp-guide" class="scroll-mt-20 mb-6">
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
<span class="w-2 h-2 bg-red-400 rounded-full"></span>
가이드레일 (Guide Rail)
</h3>
<div class="bg-gray-50 rounded-lg p-4 border">
<p class="text-sm text-gray-700 mb-3">셔터 양쪽 벽면에 수직으로 설치되어 슬랫의 <strong>승강을 안내</strong>하는 레일. 내부에 차연재(연기차단재) 장착하여 연기 누출을 방지한다.</p>
<div class="grid grid-cols-2 gap-3 text-xs">
<div><span class="font-medium text-gray-600">재질:</span> 열간압연강판 (SPHC) 2.3mm 이상</div>
<div><span class="font-medium text-gray-600">고정:</span> 앵커볼트 (400mm 간격)</div>
<div><span class="font-medium text-gray-600">차연재:</span> 내열 실리콘 / 세라믹 패킹</div>
<div><span class="font-medium text-gray-600">형태:</span> ㄷ자 형강 + 연기차단부</div>
</div>
</div>
</div>
<!-- 권취축 -->
<div id="comp-barrel" class="scroll-mt-20 mb-6">
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
<span class="w-2 h-2 bg-red-400 rounded-full"></span>
권취축 (Barrel / Shaft)
</h3>
<div class="bg-gray-50 rounded-lg p-4 border">
<p class="text-sm text-gray-700 mb-3">슬랫 커튼을 <strong>감아올리는 원통형 </strong>. 케이스(헤드박스) 내부에 위치하며 브라켓으로 지지된다. 셔터의 폭과 높이에 따라 직경이 결정된다.</p>
<div class="grid grid-cols-2 gap-3 text-xs">
<div><span class="font-medium text-gray-600">재질:</span> 강관 (STK 400 이상)</div>
<div><span class="font-medium text-gray-600">직경:</span> 100mm ~ 300mm (/높이에 따라)</div>
<div><span class="font-medium text-gray-600">지지:</span> 양측 브라켓 + 베어링</div>
<div><span class="font-medium text-gray-600">관련:</span> 밸런스 스프링 내장</div>
</div>
</div>
</div>
<!-- 전장부품 (일괄) -->
<div id="comp-electric" class="scroll-mt-20 mb-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
<span class="w-2 h-2 bg-red-400 rounded-full"></span>
전장 부품
</h3>
<div class="space-y-3">
<!-- 감속기 -->
<div class="bg-gray-50 rounded-lg p-4 border">
<h4 class="font-semibold text-gray-800 text-sm mb-1">감속기 (Gear Box)</h4>
<p class="text-xs text-gray-600">모터의 고속 회전을 <strong>저속 고토크</strong> 변환하여 권취축에 전달. 웜기어(Worm Gear) 방식이 주류로, 셀프록킹 기능으로 역회전을 방지한다.</p>
</div>
<!-- 전동모터 -->
<div class="bg-gray-50 rounded-lg p-4 border">
<h4 class="font-semibold text-gray-800 text-sm mb-1">전동모터 (Motor)</h4>
<p class="text-xs text-gray-600">셔터를 <strong>전동으로 개폐</strong>하는 구동원. 단상 220V 또는 삼상 380V 사용. 화재 시에는 모터가 아닌 자동폐쇄기(중력 하강) 폐쇄된다.</p>
</div>
<!-- 전자브레이크 -->
<div class="bg-gray-50 rounded-lg p-4 border">
<h4 class="font-semibold text-gray-800 text-sm mb-1">전자브레이크 (Electromagnetic Brake)</h4>
<p class="text-xs text-gray-600">통전 브레이크 해제, 정전 스프링 힘으로 <strong>자동 제동</strong>. 화재 정전 상황에서 셔터가 급격히 낙하하는 것을 방지한다.</p>
</div>
<!-- 연동제어기 -->
<div class="bg-gray-50 rounded-lg p-4 border">
<h4 class="font-semibold text-gray-800 text-sm mb-1">연동제어기 (Controller / 연동제어반)</h4>
<p class="text-xs text-gray-600">감지기 신호를 수신하여 <strong>셔터 폐쇄를 제어</strong>하는 핵심 장치. 연기감지기 신호 일부폐쇄(바닥 1.5m), 열감지기 신호 완전폐쇄 2단계 동작을 수행한다.</p>
</div>
<!-- 자동폐쇄기 -->
<div class="bg-gray-50 rounded-lg p-4 border">
<h4 class="font-semibold text-gray-800 text-sm mb-1">자동폐쇄기 (Auto Closer)</h4>
<p class="text-xs text-gray-600">연동제어기의 신호를 받아 브레이크를 해제하고 셔터를 <strong>중력으로 하강</strong>시키는 장치. 거버너(속도조절기) 내장으로 하강 속도를 제한(0.15m/s 이하)한다.</p>
</div>
<!-- 리밋스위치 -->
<div class="bg-gray-50 rounded-lg p-4 border">
<h4 class="font-semibold text-gray-800 text-sm mb-1">리밋스위치 (Limit Switch)</h4>
<p class="text-xs text-gray-600">셔터의 <strong>상한/하한 위치를 감지</strong>하여 모터를 자동 정지시키는 스위치. 마이크로 스위치 또는 근접 센서 방식 사용.</p>
</div>
<!-- 감지기 연동 시스템 -->
<div class="bg-gray-50 rounded-lg p-4 border">
<h4 class="font-semibold text-gray-800 text-sm mb-1">감지기 연동 시스템</h4>
<p class="text-xs text-gray-600"><strong>연기감지기(광전식)</strong>: 연기 감지 1 신호 셔터 일부폐쇄(바닥 1.5m 정지). <strong>열감지기(정온식/차동식)</strong>: 감지 2 신호 셔터 완전폐쇄. 수신기와 연동하여 방재실에 상태를 전송한다.</p>
</div>
</div>
</div>
<!-- 기타 부품 -->
<div id="comp-etc" 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-red-400 rounded-full"></span>
기타 부품
</h3>
<div class="space-y-3">
<div class="bg-gray-50 rounded-lg p-4 border">
<h4 class="font-semibold text-gray-800 text-sm mb-1">브라켓 (Bracket)</h4>
<p class="text-xs text-gray-600">권취축을 벽체/천장에 <strong>고정 지지</strong>하는 철물. 양측 벽에 앵커로 고정하며 베어링을 통해 권취축을 회전 가능하게 지지한다.</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 border">
<h4 class="font-semibold text-gray-800 text-sm mb-1">하단바 (Bottom Bar)</h4>
<p class="text-xs text-gray-600">슬랫 커튼의 <strong>최하단에 부착되는 마감 </strong>. 바닥과의 밀착을 돕고 커튼의 무게 균형을 잡는다. 고무 패킹으로 바닥 밀폐성을 확보한다.</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 border">
<h4 class="font-semibold text-gray-800 text-sm mb-1">밸런스 스프링 (Balance Spring)</h4>
<p class="text-xs text-gray-600">권취축 내부에 장착되어 슬랫 커튼의 <strong>무게를 상쇄</strong>하는 토션 스프링. 모터 부하를 줄이고 수동 개폐 조작력을 경감시킨다.</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 border">
<h4 class="font-semibold text-gray-800 text-sm mb-1">수동조작함</h4>
<p class="text-xs text-gray-600">정전 또는 비상 셔터를 <strong>수동으로 개폐</strong> 있는 조작함. 체인 또는 핸들 방식으로 벽면에 설치. 열쇠로 잠금 관리한다.</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 border">
<h4 class="font-semibold text-gray-800 text-sm mb-1">케이스 / 헤드박스</h4>
<p class="text-xs text-gray-600">권취축, 감속기, 모터 등을 <strong>보호하는 외함</strong>. 천장 내부에 매립되거나 노출 설치된다. 점검구가 있어 유지보수 접근이 가능하다.</p>
</div>
</div>
</div>
</div>
</section>
{{-- ============================================================ --}}
{{-- 3. 제조 공정 --}}
{{-- ============================================================ --}}
<section id="manufacturing" 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-red-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">3</span>
제조 공정
</h2>
<!-- 전체 공정 흐름도 -->
<div class="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-red-400 rounded-full"></span>
전체 공정 흐름도
</h3>
<div class="flex flex-wrap items-center gap-2 text-xs font-medium">
<span class="px-3 py-2 bg-blue-100 text-blue-800 rounded-lg">1. 원자재 입고</span>
<svg class="w-4 h-4 text-gray-400" 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 class="px-3 py-2 bg-blue-100 text-blue-800 rounded-lg">2. 슬랫 롤포밍</span>
<svg class="w-4 h-4 text-gray-400" 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 class="px-3 py-2 bg-blue-100 text-blue-800 rounded-lg">3. 가이드레일 가공</span>
<svg class="w-4 h-4 text-gray-400" 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 class="px-3 py-2 bg-blue-100 text-blue-800 rounded-lg">4. 권취축/브라켓</span>
<svg class="w-4 h-4 text-gray-400" 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 class="px-3 py-2 bg-green-100 text-green-800 rounded-lg">5. 표면처리</span>
<svg class="w-4 h-4 text-gray-400" 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 class="px-3 py-2 bg-orange-100 text-orange-800 rounded-lg">6. 조립</span>
<svg class="w-4 h-4 text-gray-400" 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 class="px-3 py-2 bg-purple-100 text-purple-800 rounded-lg">7. 검사</span>
<svg class="w-4 h-4 text-gray-400" 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 class="px-3 py-2 bg-gray-200 text-gray-800 rounded-lg">8. 포장/출하</span>
</div>
</div>
<!-- 공정별 상세 -->
<div class="space-y-4">
<div class="bg-gray-50 rounded-lg p-4 border">
<div class="flex items-center gap-2 mb-2">
<span class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
<h4 class="font-semibold text-gray-800 text-sm">슬랫 롤포밍 공정</h4>
</div>
<p class="text-xs text-gray-600 mb-2">용융아연도금강판 코일을 언코일러에 장착 롤포밍 라인을 통과시켜 슬랫 단면 형상으로 연속 성형한다.</p>
<div class="flex flex-wrap gap-2 text-xs">
<span class="px-2 py-1 bg-white border rounded">언코일링</span>
<span class="text-gray-400">&rarr;</span>
<span class="px-2 py-1 bg-white border rounded">레벨링(평탄화)</span>
<span class="text-gray-400">&rarr;</span>
<span class="px-2 py-1 bg-white border rounded">롤포밍(성형)</span>
<span class="text-gray-400">&rarr;</span>
<span class="px-2 py-1 bg-white border rounded">절단(정척)</span>
<span class="text-gray-400">&rarr;</span>
<span class="px-2 py-1 bg-white border rounded">인터록킹 검사</span>
</div>
</div>
<div class="bg-gray-50 rounded-lg p-4 border">
<div class="flex items-center gap-2 mb-2">
<span class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
<h4 class="font-semibold text-gray-800 text-sm">가이드레일 가공</h4>
</div>
<p class="text-xs text-gray-600">열간압연강판(SPHC) 프레스 브레이크 또는 롤포밍으로 ㄷ자 형강으로 성형. 앵커볼트 구멍 천공, 차연재 삽입 가공, 정척 절단을 수행한다.</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 border">
<div class="flex items-center gap-2 mb-2">
<span class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
<h4 class="font-semibold text-gray-800 text-sm">권취축 / 브라켓 가공</h4>
</div>
<p class="text-xs text-gray-600">강관을 정척 절단 슬랫 고정용 슬롯 가공. 브라켓은 후판을 레이저 절단 또는 프레스 가공하여 제작. 베어링 자리 가공, 앵커 구멍 천공을 포함한다.</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 border">
<div class="flex items-center gap-2 mb-2">
<span class="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
<h4 class="font-semibold text-gray-800 text-sm">표면처리 (도장/도금)</h4>
</div>
<p class="text-xs text-gray-600">가이드레일, 브라켓, 하단바 강재 부품에 방청 처리를 수행한다.</p>
<div class="mt-2 grid grid-cols-2 gap-2 text-xs">
<div class="bg-white p-2 rounded border">
<strong>분체도장:</strong> 탈지 인산피막 건조 분체 도포 소부(180~200&deg;C)
</div>
<div class="bg-white p-2 rounded border">
<strong>용융아연도금:</strong> 탈지 산세 플럭스 도금조 침적(450&deg;C) 냉각
</div>
</div>
</div>
<div class="bg-gray-50 rounded-lg p-4 border">
<div class="flex items-center gap-2 mb-2">
<span class="w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">5</span>
<h4 class="font-semibold text-gray-800 text-sm">조립 공정</h4>
</div>
<p class="text-xs text-gray-600 mb-2">부품 가공이 완료되면 다음 순서로 조립한다:</p>
<ol class="text-xs text-gray-600 space-y-1 pl-4 list-decimal">
<li>권취축에 밸런스 스프링 장착 텐션 조정</li>
<li>권취축에 슬랫 커튼 번째 고정</li>
<li>슬랫 상호 인터록킹 결합 (커튼 조립)</li>
<li>하단바 부착 고무 패킹 삽입</li>
<li>감속기 + 전동모터 + 전자브레이크 장착</li>
<li>자동폐쇄기, 리밋스위치 설치</li>
<li>연동제어기 배선 결선</li>
</ol>
</div>
<div class="bg-gray-50 rounded-lg p-4 border">
<div class="flex items-center gap-2 mb-2">
<span class="w-6 h-6 bg-purple-500 text-white rounded-full flex items-center justify-center text-xs font-bold">6</span>
<h4 class="font-semibold text-gray-800 text-sm">완성품 검사</h4>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs text-gray-600">
<div class="bg-white p-2 rounded border">외관 검사: 도장 상태, 슬랫 정렬, 용접부</div>
<div class="bg-white p-2 rounded border">치수 검사: , 높이, 가이드레일 간격</div>
<div class="bg-white p-2 rounded border">작동 검사: 전동 개폐, 자동폐쇄 시험</div>
<div class="bg-white p-2 rounded border">전장 검사: 연동제어기, 리밋스위치 동작</div>
</div>
</div>
<div class="bg-gray-50 rounded-lg p-4 border">
<div class="flex items-center gap-2 mb-2">
<span class="w-6 h-6 bg-gray-500 text-white rounded-full flex items-center justify-center text-xs font-bold">7</span>
<h4 class="font-semibold text-gray-800 text-sm">포장 출하</h4>
</div>
<p class="text-xs text-gray-600">슬랫 커튼은 권취축에 감은 상태로, 가이드레일/브라켓/전장부품은 별도 포장. 운송 변형 방지를 위해 목재 팔레트에 적재하여 출하한다.</p>
</div>
</div>
</div>
</section>
{{-- ============================================================ --}}
{{-- 4. 설치 시공 --}}
{{-- ============================================================ --}}
<section id="install" 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-red-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">4</span>
설치 시공
</h2>
<!-- 현장 설치 공정 -->
<div class="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-red-400 rounded-full"></span>
현장 설치 공정
</h3>
<div class="space-y-3">
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border">
<span class="w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">1</span>
<div>
<strong class="text-sm text-gray-800">현장 실측 먹매김</strong>
<p class="text-xs text-gray-600 mt-0.5">개구부 , 높이, 천장 내부 공간을 실측하고 설치 위치를 먹줄로 표시한다. 수평/수직 기준선을 설정한다.</p>
</div>
</div>
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border">
<span class="w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">2</span>
<div>
<strong class="text-sm text-gray-800">브라켓 설치</strong>
<p class="text-xs text-gray-600 mt-0.5">양쪽 벽체 또는 천장 슬래브에 앵커볼트로 브라켓을 고정. 수평을 정밀하게 조정한다 (허용 오차 &plusmn;2mm).</p>
</div>
</div>
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border">
<span class="w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">3</span>
<div>
<strong class="text-sm text-gray-800">가이드레일 설치</strong>
<p class="text-xs text-gray-600 mt-0.5">양쪽 벽면에 가이드레일을 수직으로 고정. 앵커볼트 간격 400mm 이내, 수직도 확인 차연재를 삽입한다.</p>
</div>
</div>
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border">
<span class="w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">4</span>
<div>
<strong class="text-sm text-gray-800">권취축 거치</strong>
<p class="text-xs text-gray-600 mt-0.5">슬랫 커튼이 감긴 권취축을 브라켓 베어링에 안착. 감속기/모터 측과 반대측 베어링 정렬을 확인한다.</p>
</div>
</div>
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border">
<span class="w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">5</span>
<div>
<strong class="text-sm text-gray-800">슬랫 커튼 가이드레일 삽입</strong>
<p class="text-xs text-gray-600 mt-0.5">커튼을 풀어 내리면서 슬랫 끝을 가이드레일 홈에 삽입. 원활한 승강 여부를 확인한다.</p>
</div>
</div>
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border">
<span class="w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">6</span>
<div>
<strong class="text-sm text-gray-800">전장 설치 배선</strong>
<p class="text-xs text-gray-600 mt-0.5">자동폐쇄기, 연동제어기, 리밋스위치, 수동조작함 설치. 감지기 연동 배선, 전원 배선, 접지 작업을 수행한다.</p>
</div>
</div>
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border">
<span class="w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">7</span>
<div>
<strong class="text-sm text-gray-800">케이스(헤드박스) 설치</strong>
<p class="text-xs text-gray-600 mt-0.5">권취축 주변을 감싸는 케이스를 설치하고, 천장 마감재와 접합부를 정리한다. 점검구 위치를 확보한다.</p>
</div>
</div>
</div>
</div>
<!-- 시운전 점검 -->
<div class="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-red-400 rounded-full"></span>
시운전 점검 절차
</h3>
<div class="overflow-x-auto">
<table class="w-full text-sm border-collapse">
<thead>
<tr class="border-b-2 border-gray-200 bg-gray-50">
<th class="text-left py-2 px-3 font-medium text-gray-600 text-xs">순서</th>
<th class="text-left py-2 px-3 font-medium text-gray-600 text-xs">점검 항목</th>
<th class="text-left py-2 px-3 font-medium text-gray-600 text-xs">기준</th>
</tr>
</thead>
<tbody class="text-xs text-gray-700">
<tr class="border-b border-gray-100">
<td class="py-2 px-3">1</td>
<td class="py-2 px-3">전동 개폐 시험</td>
<td class="py-2 px-3"> 행정 원활하게 개폐, 이음/진동 없음</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 px-3">2</td>
<td class="py-2 px-3">리밋스위치 동작</td>
<td class="py-2 px-3">상한/하한에서 정확히 정지</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 px-3">3</td>
<td class="py-2 px-3">연기감지기 연동 (1)</td>
<td class="py-2 px-3">감지기 작동 셔터 바닥 1.5m 위치 정지</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 px-3">4</td>
<td class="py-2 px-3">열감지기 연동 (2)</td>
<td class="py-2 px-3">감지기 작동 셔터 완전 폐쇄</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 px-3">5</td>
<td class="py-2 px-3">하강 속도</td>
<td class="py-2 px-3">0.15 m/s 이하 (거버너 조정)</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 px-3">6</td>
<td class="py-2 px-3">경보음 발생</td>
<td class="py-2 px-3">하강 경보음 정상 출력</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 px-3">7</td>
<td class="py-2 px-3">수동 개폐 시험</td>
<td class="py-2 px-3">수동조작함으로 개폐 가능</td>
</tr>
<tr>
<td class="py-2 px-3">8</td>
<td class="py-2 px-3">바닥 밀착도</td>
<td class="py-2 px-3">하단바-바닥 간극 최소화 (차연 확보)</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 소방 준공검사 -->
<div>
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
<span class="w-2 h-2 bg-red-400 rounded-full"></span>
소방 준공검사
</h3>
<div class="bg-orange-50 rounded-lg p-4 border border-orange-100">
<p class="text-sm text-orange-900 mb-3">건축물 사용승인(준공) 소방서의 <strong>소방시설 완공검사</strong> 통과해야 한다. 방화셔터 관련 주요 검사 항목:</p>
<ul class="text-xs text-orange-800 space-y-1.5">
<li class="flex items-start gap-2">
<svg class="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
<span>방화구획 도면과 실제 설치 위치 일치 여부</span>
</li>
<li class="flex items-start gap-2">
<svg class="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
<span>내화성능 인정서(한국건설기술연구원 발급) 확인</span>
</li>
<li class="flex items-start gap-2">
<svg class="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
<span>감지기 연동 2단계 동작 시험 (연기 일부폐쇄, 완전폐쇄)</span>
</li>
<li class="flex items-start gap-2">
<svg class="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
<span>셔터 상부-천장 슬래브 틈새 방화구획 처리 확인</span>
</li>
<li class="flex items-start gap-2">
<svg class="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
<span>분리형: 방화문 설치 여부, 복합형: 비상문 정상 작동 확인</span>
</li>
</ul>
</div>
</div>
</div>
</section>
{{-- ============================================================ --}}
{{-- 5. 유지보수 --}}
{{-- ============================================================ --}}
<section id="maintenance" 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-red-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">5</span>
유지보수
</h2>
<!-- 법정 점검 -->
<div class="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-red-400 rounded-full"></span>
법정 점검
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
<h4 class="font-semibold text-blue-800 text-sm mb-2">작동기능점검</h4>
<ul class="text-xs text-blue-900 space-y-1">
<li>- <strong>주기</strong>: 1 이상</li>
<li>- <strong>내용</strong>: 소방시설을 인위적으로 조작하여 정상 작동 여부 확인</li>
<li>- <strong>대상</strong>: 모든 소방시설 설치 건축물</li>
<li>- <strong>보고</strong>: 점검 완료 15 이내 소방관서 보고</li>
</ul>
</div>
<div class="bg-purple-50 rounded-lg p-4 border border-purple-100">
<h4 class="font-semibold text-purple-800 text-sm mb-2">종합정밀점검</h4>
<ul class="text-xs text-purple-900 space-y-1">
<li>- <strong>주기</strong>: 1 이상 (특급: 반기 1)</li>
<li>- <strong>내용</strong>: 작동점검 + 구성 부품의 구조기준 적합성 확인</li>
<li>- <strong>대상</strong>: 스프링클러, 물분무소화설비 설치 건축물</li>
<li>- <strong>보고</strong>: 점검 완료 15 이내 소방관서 보고</li>
</ul>
</div>
</div>
<div class="mt-3 bg-red-50 rounded-lg p-3 border border-red-100">
<p class="text-xs text-red-800">
<strong>중대위반:</strong> 방화셔터가 훼손되거나 철거되어 본래 기능을 못하는 경우, 지체 없이 수리 필요한 조치를 해야 한다. 미조치 과태료 부과 대상이다.
</p>
</div>
</div>
<!-- 정기점검 항목 -->
<div class="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-red-400 rounded-full"></span>
정기점검 항목
</h3>
<div class="overflow-x-auto">
<table class="w-full text-sm border-collapse">
<thead>
<tr class="border-b-2 border-gray-200 bg-gray-50">
<th class="text-center py-2 px-3 font-medium text-gray-600 text-xs">주기</th>
<th class="text-left py-2 px-3 font-medium text-gray-600 text-xs">점검 항목</th>
</tr>
</thead>
<tbody class="text-xs text-gray-700">
<tr class="border-b border-gray-100">
<td class="py-2 px-3 text-center align-top">
<span class="px-2 py-0.5 bg-green-100 text-green-800 rounded-full text-xs font-medium">월간</span>
</td>
<td class="py-2 px-3">
<ul class="space-y-0.5">
<li>- 육안 검사: 슬랫 변형/파손, 가이드레일 이물질</li>
<li>- 전동 개폐 시험 (1 행정)</li>
<li>- 경보음 출력 확인</li>
<li>- 수동조작함 열쇠 관리 상태</li>
</ul>
</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 px-3 text-center align-top">
<span class="px-2 py-0.5 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">분기</span>
</td>
<td class="py-2 px-3">
<ul class="space-y-0.5">
<li>- 감지기 연동 시험 (연기/ 2단계)</li>
<li>- 리밋스위치 동작 확인</li>
<li>- 하단바 바닥 밀착도 확인</li>
<li>- 가이드레일 차연재 상태 확인</li>
</ul>
</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 px-3 text-center align-top">
<span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">반기</span>
</td>
<td class="py-2 px-3">
<ul class="space-y-0.5">
<li>- 감속기 주유(그리스) 상태 확인</li>
<li>- 전자브레이크 마모 상태 점검</li>
<li>- 배선 접속부 풀림/발열 확인</li>
<li>- 밸런스 스프링 텐션 확인</li>
</ul>
</td>
</tr>
<tr>
<td class="py-2 px-3 text-center align-top">
<span class="px-2 py-0.5 bg-red-100 text-red-800 rounded-full text-xs font-medium">연간</span>
</td>
<td class="py-2 px-3">
<ul class="space-y-0.5">
<li>- 슬랫 커튼 전체 인터록킹 상태 점검</li>
<li>- 가이드레일 앵커볼트 체결력 확인</li>
<li>- 도장/도금 상태 ( 발생 여부)</li>
<li>- 내화충전재(상부 틈새) 상태 확인</li>
<li>- 연동제어기 회로 종합 점검</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 주요 고장 유형 대처 -->
<div>
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
<span class="w-2 h-2 bg-red-400 rounded-full"></span>
주요 고장 유형 대처
</h3>
<div class="space-y-3">
<details class="group bg-gray-50 rounded-lg border">
<summary class="flex items-center justify-between p-4 cursor-pointer">
<span class="font-medium text-gray-800 text-sm">슬랫 이탈 / 변형</span>
<svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" 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-600 space-y-1">
<p><strong>원인:</strong> 외부 충격, 가이드레일 변형, 인터록킹 마모</p>
<p><strong>증상:</strong> 개폐 이음 발생, 커튼 불균일, 가이드레일에서 슬랫 벗어남</p>
<p><strong>대처:</strong> 이탈 슬랫 재삽입 또는 교체, 가이드레일 정렬 확인, 변형 슬랫 교체</p>
</div>
</details>
<details class="group bg-gray-50 rounded-lg border">
<summary class="flex items-center justify-between p-4 cursor-pointer">
<span class="font-medium text-gray-800 text-sm">전동모터 소손 / 과부하</span>
<svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" 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-600 space-y-1">
<p><strong>원인:</strong> 과부하 운전, 밸런스 스프링 파손, 가이드레일 이물질로 인한 과도한 마찰</p>
<p><strong>증상:</strong> 모터 이상 발열, 전동 개폐 불가, 차단기 트립</p>
<p><strong>대처:</strong> 모터 교체, 과부하 원인 제거 (스프링 조정, 이물질 제거), 전기 배선 점검</p>
</div>
</details>
<details class="group bg-gray-50 rounded-lg border">
<summary class="flex items-center justify-between p-4 cursor-pointer">
<span class="font-medium text-gray-800 text-sm">전자브레이크 이상</span>
<svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" 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-600 space-y-1">
<p><strong>원인:</strong> 브레이크 패드 마모, 코일 단선, 전원 불량</p>
<p><strong>증상:</strong> 셔터 자중 하강(슬립), 정지 위치 부정확, 이상 소음</p>
<p><strong>대처:</strong> 브레이크 패드 교체, 코일 저항 측정 교체, 전원 확인</p>
</div>
</details>
<details class="group bg-gray-50 rounded-lg border">
<summary class="flex items-center justify-between p-4 cursor-pointer">
<span class="font-medium text-gray-800 text-sm">연동제어기 / 감지기 오작동</span>
<svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" 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-600 space-y-1">
<p><strong>원인:</strong> 감지기 오염/노후, 배선 단선/단락, 제어기 기판 불량</p>
<p><strong>증상:</strong> 비화재보 셔터 오하강, 화재 미동작, 1/2 구분 동작 불가</p>
<p><strong>대처:</strong> 감지기 청소/교체, 배선 절연저항 측정, 연동제어기 기판 교체, 연동 시험 재실시</p>
</div>
</details>
<details class="group bg-gray-50 rounded-lg border">
<summary class="flex items-center justify-between p-4 cursor-pointer">
<span class="font-medium text-gray-800 text-sm">자동폐쇄기 속도 이상</span>
<svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" 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-600 space-y-1">
<p><strong>원인:</strong> 거버너(속도조절기) 고장, 윤활유 부족/변질</p>
<p><strong>증상:</strong> 하강 속도 과다(0.15m/s 초과) 또는 하강 불가</p>
<p><strong>대처:</strong> 거버너 분해 점검, 윤활유 보충/교체, 자동폐쇄기 교체</p>
</div>
</details>
<details class="group bg-gray-50 rounded-lg border">
<summary class="flex items-center justify-between p-4 cursor-pointer">
<span class="font-medium text-gray-800 text-sm">차연성능 저하</span>
<svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" 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-600 space-y-1">
<p><strong>원인:</strong> 가이드레일 차연재 탈락/노후, 하단바 고무 패킹 경화, 상부 내화충전재 손상</p>
<p><strong>증상:</strong> 폐쇄 연기 누출, 차연성능 시험 미달</p>
<p><strong>대처:</strong> 차연재 교체, 고무 패킹 교체, 내화충전재 보수</p>
</div>
</details>
</div>
</div>
</div>
</section>
<!-- 페이지 하단 -->
<div class="bg-gray-50 border border-gray-200 rounded-xl p-6 text-center text-sm text-gray-500">
<p> 자료는 사내 교육 목적으로 작성되었습니다. 법규 관련 내용은 최신 법령을 반드시 확인하세요.</p>
<p class="mt-1 text-xs text-gray-400">관련 법령: 건축법 시행령 제46조, 자동방화셔터 방화문의 기준(국토교통부 고시), 소방시설법</p>
</div>
</div>
</div>
</div>
@endsection

View File

@@ -1416,6 +1416,15 @@
});
/*
|--------------------------------------------------------------------------
| 아카데미 (Academy)
|--------------------------------------------------------------------------
*/
Route::middleware('auth')->prefix('academy')->name('academy.')->group(function () {
Route::get('/fire-shutter', [\App\Http\Controllers\AcademyController::class, 'fireShutter'])->name('fire-shutter');
});
// SAM E-Sign - 인증 필요
Route::middleware('auth')->prefix('esign')->name('esign.')->group(function () {
// 화면 라우트