판매취급소 설치 기준 (1종,2종 비교)

위험물 판매취급소 설치기준 인터랙티브 가이드 /* 아바다 테마 내에서 독립적인 스타일 유지를 위한 CSS */ #safety-dashboard-wrapper { font-family: 'Noto Sans KR', sans-serif; background-color: #f8fafc; color: #1e293b; line-height: 1.6; } /* 차트 컨테이너 응답성 설정 - 필수 요구사항 */ .chart-box { position: relative; width: 100%; max-width: 650px; margin-left: auto; margin-right: auto; height: 350px; max-height: 400px; } @media (min-width: 768px) { .chart-box { height: 400px; } } /* 아바다 테마의 버튼 스타일 충돌 방지 */ .custom-toggle-btn { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } /* 스크롤바 디자인 */ #safety-dashboard-wrapper ::-webkit-scrollbar { width: 6px; } #safety-dashboard-wrapper ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } /* 애니메이션 효과 */ .fade-in-content { animation: fadeIn 0.5s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } 핵심 지표 확인 -> 시각적 구조 분석 -> 세부 법령 확인 순으로 설계되었습니다. 아바다 테마 내에서 조화롭게 보일 수 있도록 깔끔한 카드 UI를 채택했습니다. --> 목표: 비교 -> Bar Chart (Chart.js) -> 20배와 40배의 시각적 격차 강조. 2) 구조적 엄격도 -> 목표: 비교 -> Radar Chart (Chart.js) -> 내화구조 vs 불연재료의 수준 차이를 다각도로 표현. 3) 세부 기준 -> 목표: 정보 전달 -> 인터랙티브 카드 -> 사용자가 선택한 등급에 맞는 텍스트 데이터 동적 업데이트. CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. --> 2025 위험물 실무 가이드 판매취급소 설치기준 분석 제1종(20배) 및 제2종(40배) 판매취급소의 법적 설치 기준을 시각화된 데이터와 함께 인터랙티브하게 비교해 보세요. 제1종 (20배 이하) 제2종 (40배 이하) 제1종 판매취급소 중점: 소형 판매 및 1층 설치 지정수량 취급 한계 20배 이하 설치 층수 지상 1층 주요 구조 불연재료 허용 "주로 일반 주택가 근처의 페인트 점포 등에 해당하며, 비교적 완화된 불연재료 기준이 적용됩니다." 구조별 세부 규정 벽 (Walls) 내화구조 또는 불연재료 보 (Beams) 불연재료 지붕 (Roofs) 내화구조 또는 불연재료 출입문 (Doors) 방화문 (60분/30분) 지정수량 배수 비교 단위: 지정수량(배) 건축 규제 강도 분석 외부로 갈수록 더 엄격한 내화구조가 요구됨을 의미합니다. 위험물 배합실 기준 (공통) 판매취급소 내에서 위험물을 배합하거나 옮겨 담는 작업을 할 경우, 제1종과 제2종 관계없이 반드시 아래의 규격화된 배합실을 갖추어야 합니다. 01 바닥 면적 6㎡ 이상 15㎡ 이하 02 구획 구조 내화구조 또는 불연재료 벽 03 바닥 설비 침투 방지 및 집유설비 설치 04 출입구 자동폐쇄식 방화문 필수 © 2025 위험물 안전관리 시스템 | 본 가이드는 위험물안전관리법 시행규칙 [별표 14]를 근거로 합니다. 본 코드는 아바다(Avada) 테마 환경에 최적화되어 있습니다. // ------------------------------------------------------------------------- // 1. Data Definitions // ------------------------------------------------------------------------- const dataModel = { class1: { title: "제1종 판매취급소", subtitle: "중점: 소형 판매 및 1층 설치", qtyLabel: "20배", floor: "지상 1층 필수", brief: "불연재료 허용", tip: "\"주로 일반 주택가 근처의 페인트 점포 등에 해당하며, 비교적 완화된 불연재료 기준이 적용됩니다.\"", progress: 50, primaryColor: "#2563eb", accentColor: "rgba(37, 99, 235, 0.4)", specs: { wall: "내화구조 또는 불연재료", beam: "불연재료", roof: "내화구조 또는 불연재료", door: "방화문 (60분/30분)" }, radarData: [2, 1, 1.5, 3, 2] // 벽, 보, 지붕, 층수제한(높을수록 엄격), 출입문 }, class2: { title: "제2종 판매취급소", subtitle: "중점: 대규모 취급 및 내화구조 강화", qtyLabel: "40배", floor: "층수 제한 없음", brief: "내화구조 필수", tip: "\"대규모 도료 판매점 등에 해당하며, 취급량이 많아 보와 지붕까지 반드시 내화구조로 시공해야 합니다.\"", progress: 100, primaryColor: "#f97316", accentColor: "rgba(249, 115, 22, 0.4)", specs: { wall: "내화구조 (일체형)", beam: "반드시 내화구조", roof: "반드시 내화구조", door: "방화문 (60분/60분+)" }, radarData: [3, 3, 3, 1, 3] } }; // ------------------------------------------------------------------------- // 2. Chart logic // ------------------------------------------------------------------------- // Label Wrapping Logic (> 16 chars) function wrapLabel(label) { if (label.length > 16) { const words = label.split(' '); const lines = []; let currentLine = words[0]; for (let i = 1; i < words.length; i++) { if ((currentLine + " " + words[i]).length < 16) { currentLine += " " + words[i]; } else { lines.push(currentLine); currentLine = words[i]; } } lines.push(currentLine); return lines; } return label; } let barChart, radarChart; function initCharts() { // Bar Chart const barCtx = document.getElementById('barChart').getContext('2d'); barChart = new Chart(barCtx, { type: 'bar', data: { labels: [wrapLabel('제1종 판매취급소'), wrapLabel('제2종 판매취급소')], datasets: [{ label: '지정수량 배수', data: [20, 40], backgroundColor: ['#2563eb', '#cbd5e1'], borderRadius: 12, borderSkipped: false, barThickness: 50 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { callbacks: { title: function(items) { let label = items[0].chart.data.labels[items[0].dataIndex]; return Array.isArray(label) ? label.join(' ') : label; } } } }, scales: { y: { beginAtZero: true, max: 50, grid: { display: false } }, x: { grid: { display: false } } } } }); // Radar Chart const radarCtx = document.getElementById('radarChart').getContext('2d'); radarChart = new Chart(radarCtx, { type: 'radar', data: { labels: ['벽(Wall)', '보(Beam)', '지붕(Roof)', '설치 층수', '출입문'], datasets: [{ label: '규제 강도', data: dataModel.class1.radarData, borderColor: '#2563eb', backgroundColor: 'rgba(37, 99, 235, 0.4)', pointBackgroundColor: '#2563eb', borderWidth: 3 }] }, options: { responsive: true, maintainAspectRatio: false, scales: { r: { angleLines: { color: '#f1f5f9' }, grid: { color: '#f1f5f9' }, suggestedMin: 0, suggestedMax: 4, ticks: { display: false } } }, plugins: { legend: { display: false }, tooltip: { callbacks: { title: (items) => items[0].label } } } } }); } // ------------------------------------------------------------------------- // 3. UI Update Logic // ------------------------------------------------------------------------- function changeMode(mode) { const config = dataModel[mode]; const isClass1 = mode === 'class1'; // Update Buttons const btn1 = document.getElementById('toggle-1'); const btn2 = document.getElementById('toggle-2'); if (isClass1) { btn1.className = "custom-toggle-btn px-6 py-3 text-sm md:text-base font-bold rounded-xl border border-transparent bg-blue-600 text-white shadow-lg"; btn2.className = "custom-toggle-btn px-6 py-3 text-sm md:text-base font-bold rounded-xl border border-slate-100 bg-white text-slate-600 hover:bg-slate-50"; } else { btn1.className = "custom-toggle-btn px-6 py-3 text-sm md:text-base font-bold rounded-xl border border-slate-100 bg-white text-slate-600 hover:bg-slate-50"; btn2.className = "custom-toggle-btn px-6 py-3 text-sm md:text-base font-bold rounded-xl border border-transparent bg-orange-500 text-white shadow-lg"; } // Update Info Card with Animation const card = document.getElementById('main-info-card'); card.style.opacity = '0.5'; setTimeout(() => { document.getElementById('card-header').style.backgroundColor = config.primaryColor; document.getElementById('display-title').innerText = config.title; document.getElementById('display-subtitle').innerText = config.subtitle; document.getElementById('display-qty').innerText = config.qtyLabel; document.getElementById('display-progress').style.width = config.progress + '%'; document.getElementById('display-progress').style.backgroundColor = config.primaryColor; document.getElementById('display-floor').innerText = config.floor; document.getElementById('display-struct-brief').innerText = config.brief; document.getElementById('display-tip').innerText = config.tip; document.getElementById('display-tip').style.borderColor = config.accentColor; document.getElementById('display-tip').style.backgroundColor = isClass1 ? '#eff6ff' : '#fff7ed'; document.getElementById('display-tip').style.color = isClass1 ? '#1e40af' : '#9a3412'; // Update Specs document.getElementById('spec-wall').innerText = config.specs.wall; document.getElementById('spec-beam').innerText = config.specs.beam; document.getElementById('spec-roof').innerText = config.specs.roof; document.getElementById('spec-door').innerText = config.specs.door; card.style.opacity = '1'; }, 150); // Update Charts barChart.data.datasets[0].backgroundColor = isClass1 ? ['#2563eb', '#cbd5e1'] : ['#cbd5e1', '#f97316']; barChart.update(); radarChart.data.datasets[0].data = config.radarData; radarChart.data.datasets[0].borderColor = config.primaryColor; radarChart.data.datasets[0].backgroundColor = config.accentColor; radarChart.data.datasets[0].pointBackgroundColor = config.primaryColor; radarChart.update(); } // Initialize on Load window.onload = initCharts;

위험물 판매취급소 설치기준 인터랙티브 가이드

2025 위험물 실무 가이드

판매취급소 설치기준 분석

제1종(20배) 및 제2종(40배) 판매취급소의 법적 설치 기준을
시각화된 데이터와 함께 인터랙티브하게 비교해 보세요.

제1종 판매취급소

중점: 소형 판매 및 1층 설치

지정수량 취급 한계

20배
이하

설치 층수

지상 1층

주요 구조

불연재료 허용

“주로 일반 주택가 근처의 페인트 점포 등에 해당하며, 비교적 완화된 불연재료 기준이 적용됩니다.”

구조별 세부 규정

벽 (Walls)
내화구조 또는 불연재료

보 (Beams)
불연재료

지붕 (Roofs)
내화구조 또는 불연재료

출입문 (Doors)
방화문 (60분/30분)

지정수량 배수 비교

단위: 지정수량(배)

건축 규제 강도 분석

외부로 갈수록 더 엄격한 내화구조가 요구됨을 의미합니다.

위험물 배합실 기준 (공통)

판매취급소 내에서 위험물을 배합하거나 옮겨 담는 작업을 할 경우, 제1종과 제2종 관계없이 반드시 아래의 규격화된 배합실을 갖추어야 합니다.

바닥 면적

6㎡ 이상 15㎡ 이하

구획 구조

내화구조 또는 불연재료 벽

바닥 설비

침투 방지 및 집유설비 설치

출입구

자동폐쇄식 방화문 필수