src/data/maintenance.ts

@@ -0,0 +1,24 @@
+export interface Equipment {
+  title: string;
+  imageSrc: string;
+}
+
+// 법정장비 보유현황
+const equipments: Equipment[] = [
+  { title: "광섬유영역 반사계", imageSrc: "/image/maintenance/광섬유영역반사계.png" },
+  { title: "네트워크 측정기", imageSrc: "/image/maintenance/네트워크측정기.png" },
+  { title: "CATV 레벨측정기", imageSrc: "/image/maintenance/CATV레벨측정기.png" },
+  { title: "오실로스코프", imageSrc: "/image/maintenance/오실로스코프.png" },
+  { title: "광케이블 접속기", imageSrc: "/image/maintenance/광케이블접속기.png" },
+  { title: "광파워메타", imageSrc: "/image/maintenance/광파워메타.png" },
+  { title: "광심선 대조기", imageSrc: "/image/maintenance/광심선대조기.png" },
+  { title: "TV ANT 레벨측정기", imageSrc: "/image/maintenance/TVANT레벨측정기.png" },
+  { title: "방송음향 측정기", imageSrc: "/image/maintenance/방송음향측정기.png" },
+  { title: "복합가스 측정기", imageSrc: "/image/maintenance/복합가스측정기.png" },
+  { title: "LAN 측정기", imageSrc: "/image/maintenance/LAN측정기.png" },
+  { title: "적외선온도 측정기", imageSrc: "/image/maintenance/적외선온도측정기.png" },
+  { title: "AC/DC/저항 측정기", imageSrc: "/image/maintenance/ACDC저항측정기.png" },
+  { title: "절연저항 측정기", imageSrc: "/image/maintenance/절연저항측정기.png" },
+];
+
+export default equipments;

src/data/menuItems.ts

@@ -25,6 +25,15 @@ const menuItems: MenuItem[] = [
             { label: "주요 랜드마크 시공현장", href: "landmarks" }
         ]
     },
+    {
+        label: "유지보수관리",
+        href: "/maintenance",
+        layoutImg: `${LAYOUT_IMAGE_PREFIX}/사업소개.jpg`,
+        description: "반도산전의 사업을 소개합니다.",
+        children: [
+            { label: "성능점검", href: "performance" }
+        ]
+    },
     {
         label: "회사소개",
         href: "/about",

src/pages/maintenance/Performance.tsx

@@ -0,0 +1,358 @@
+import React from "react";
+import { useScrollAnimation } from "@/hooks/useScrollAnimation";
+import equipments from "@/data/maintenance";
+
+const Performance = () => {
+  const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });
+
+  return (
+    <div ref={ref} className="px-4 sm:px-8 py-8 sm:py-12">
+      <div
+        className={`max-w-7xl mx-auto transition-all duration-1000 ${
+          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
+        }`}
+      >
+        {/* 제목 */}
+        <div className="text-center mb-8 sm:mb-12 lg:mb-16">
+          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-blue-900 font-['Noto_Sans_KR'] antialiased mb-6">
+            정보통신설비 유지관리 및 성능점검
+          </h1>
+          <div className="w-20 h-1 bg-blue-900 mx-auto"></div>
+        </div>
+
+        {/* 인증 및 평가 */}
+        <section className="mb-12">
+          <h2 className="text-2xl font-bold text-blue-800 mb-4">
+            검증된 정보통신 유지보수(성능점검) 전문 기업
+          </h2>
+          <p className="text-gray-700 text-sm mb-6">
+            반도산전(주)는 27년간 전국 2,500여 개 건축물의 전기·통신·소방 설비공사를 준공한 외감 법인입니다.<br/>
+            도급순위 상위 0.3% 이내, 건설안전 NICE디앤비 1등급(SA1), ESG 2등급(중소기업 최고등급) 보유.<br/>
+            정보통신기술자 특급 5명 외 45명 보유.
+          </p>
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-6 text-center">
+            <div
+              className="bg-white rounded-lg shadow-md p-4 border border-gray-200 hover:border-blue-500 transition-all duration-300">
+              <div className="bg-blue-50 rounded-t-lg p-3 mb-3">
+                <p className="font-bold text-blue-900">ISO 45001</p>
+              </div>
+              <div className="space-y-2">
+                <p className="text-sm text-gray-600">안전보건경영시스템</p>
+                <div className="w-full h-px bg-gray-200 my-2"></div>
+                <p className="text-blue-600 font-medium">신용등급 BBB0</p>
+              </div>
+            </div>
+
+            <div
+              className="bg-white rounded-lg shadow-md p-4 border border-gray-200 hover:border-blue-500 transition-all duration-300">
+              <div className="bg-blue-50 rounded-t-lg p-3 mb-3">
+                <p className="font-bold text-blue-900">ISO 9001</p>
+              </div>
+              <div className="space-y-2">
+                <p className="text-sm text-gray-600">품질경영시스템</p>
+                <div className="w-full h-px bg-gray-200 my-2"></div>
+                <p className="text-blue-600 font-medium">현금흐름 A</p>
+              </div>
+            </div>
+
+            <div
+              className="bg-white rounded-lg shadow-md p-4 border border-gray-200 hover:border-blue-500 transition-all duration-300">
+              <div className="bg-blue-50 rounded-t-lg p-3 mb-3">
+                <p className="font-bold text-blue-900">ISO 14001</p>
+              </div>
+              <div className="space-y-2">
+                <p className="text-sm text-gray-600">환경경영시스템</p>
+                <div className="w-full h-px bg-gray-200 my-2"></div>
+                <p className="text-blue-600 font-medium">ESG</p>
+              </div>
+            </div>
+
+            <div
+              className="bg-white rounded-lg shadow-md p-4 border border-gray-200 hover:border-blue-500 transition-all duration-300">
+              <div className="bg-blue-50 rounded-t-lg p-3 mb-3">
+                <p className="font-bold text-blue-900">나이스디앤비</p>
+              </div>
+              <div className="space-y-2">
+                <p className="text-sm text-gray-600">건설안전관리보고서</p>
+                <div className="w-full h-px bg-gray-200 my-2"></div>
+                <p className="text-blue-600 font-medium">정보통신기술자 특급 5명 외 45명 보유</p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* 장비 보유현황 */}
+        <section className="mb-12">
+          <h2 className="text-2xl font-bold text-blue-800 mb-4">
+            정보통신설비 유지보수·관리 및 성능점검 법정장비 보유현황
+          </h2>
+          <p className="text-gray-700 text-sm mb-6">
+            광섬유영역반사계, 네트워크측정기, 오실로스코프, 광케이블접속기, 광파워메타, 광심선대조기,<br/>
+            TV ANT 레벨측정기, 방송음향 측정기, 복합가스 측정기, LAN 측정기, 적외선 온도측정기,<br/>
+            AC/DC/저항 측정기, 절연저항 측정기 등 보유.
+          </p>
+          <div className="grid grid-cols-2 sm:grid-cols-7 gap-4">
+            {equipments.map(({ title, imageSrc }) => (
+              <div className="flex flex-col items-center" key={title}>
+                <img
+                  src={imageSrc}
+                  alt={title}
+                  className="w-32 h-32 object-cover mb-2 rounded-lg shadow-md"
+                />
+                <p className="text-sm text-center">{title}</p>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* 제도 도입 배경 */}
+        <section className="mb-12">
+          <h2 className="text-2xl font-bold text-blue-800 mb-4">제도 도입 배경</h2>
+          <ul className="list-disc list-inside space-y-2 text-gray-700">
+            <li>
+              근거 법령: 「정보통신공사업법」 (법률 제19546호, 2023.7.18. 개정, 2024.7.19. 시행)
+            </li>
+            <li>
+              목적: 건축물 정보통신설비의 안전 확보와 통신서비스 품질 향상을 위한 유지보수·관리 제도 도입
+            </li>
+          </ul>
+        </section>
+
+        {/* 관리자 선임기준 */}
+        <section className="mb-12">
+          <h2 className="text-2xl font-bold text-blue-800 mb-4">관리자 선임 기준</h2>
+          <table className="w-full border text-sm">
+            <thead className="bg-gray-100">
+            <tr>
+              <th className="border px-2 py-1">건축물 연면적</th>
+              <th className="border px-2 py-1">기술자 등급</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+              <td className="border px-2 py-1">6만㎡ 이상</td>
+              <td className="border px-2 py-1">특급 기술자</td>
+            </tr>
+            <tr>
+              <td className="border px-2 py-1">3만 ~ 6만㎡</td>
+              <td className="border px-2 py-1">고급 기술자 이상</td>
+            </tr>
+            <tr>
+              <td className="border px-2 py-1">1.5만 ~ 3만㎡</td>
+              <td className="border px-2 py-1">중급 기술자 이상</td>
+            </tr>
+            <tr>
+              <td className="border px-2 py-1">0.5만 ~ 1.5만㎡</td>
+              <td className="border px-2 py-1">초급 기술자 이상</td>
+            </tr>
+            </tbody>
+          </table>
+        </section>
+
+        {/* 과태료 기준 */}
+        <section className="mb-12">
+          <h2 className="text-2xl font-bold text-blue-800 mb-4">과태료 기준</h2>
+          <table className="w-full border text-sm">
+            <thead className="bg-gray-100">
+            <tr>
+              <th className="border px-2 py-1">위반행위</th>
+              <th className="border px-2 py-1">과태료 금액</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+              <td className="border px-2 py-1">유지보수 관리기준 미준수</td>
+              <td className="border px-2 py-1">300만원</td>
+            </tr>
+            <tr>
+              <td className="border px-2 py-1">점검기록 미작성 또는 거짓 작성</td>
+              <td className="border px-2 py-1">300만원</td>
+            </tr>
+            <tr>
+              <td className="border px-2 py-1">유지보수‧관리자 미선임 또는 해임 후 30일 내 미선임</td>
+              <td className="border px-2 py-1">300만원</td>
+            </tr>
+            <tr>
+              <td className="border px-2 py-1">점검기록 미보존</td>
+              <td className="border px-2 py-1">150만원</td>
+            </tr>
+            <tr>
+              <td className="border px-2 py-1">지자체 미제출</td>
+              <td className="border px-2 py-1">100만원</td>
+            </tr>
+            <tr>
+              <td className="border px-2 py-1">선·해임 신고 미이행 또는 허위신고</td>
+              <td className="border px-2 py-1">100만원</td>
+            </tr>
+            </tbody>
+          </table>
+          <p className="text-sm text-gray-600 mt-2">
+            ※ 과태료 처분만으로 의무 이행이 완료되는 것은 아니며, 30일 이내 미선임 시 반복 부과될 수 있습니다.
+          </p>
+        </section>
+
+        {/* 대상설비 세부항목 */}
+        <section className="mb-12">
+          <h2 className="text-2xl font-bold text-blue-800 mb-4">대상설비 세부항목</h2>
+          <table className="w-full border text-sm md:text-base">
+            <thead className="bg-gray-100">
+            <tr>
+              <th className="border px-4 py-3 w-1/4 text-center font-semibold">구분</th>
+              <th className="border px-4 py-3 w-3/4 text-center font-semibold">점검대상</th>
+            </tr>
+            </thead>
+            <tbody className="divide-y">
+            {/* 통신설비 */}
+            <tr className="align-middle">
+              <td className="border px-3 py-4 text-center font-medium">
+                <div className="flex flex-col items-center">
+                  <img src="/image/maintenance/통신설비.png" alt="통신설비" className="w-20 h-20 mb-2" />
+                  <span>통신설비</span>
+                </div>
+              </td>
+              <td className="border px-4 py-4 leading-relaxed">
+                <ul className="list-disc list-inside text-left space-y-1">
+                  <li>케이블설비</li>
+                  <li>배관설비</li>
+                  <li>국선인입설비</li>
+                  <li>단자함설비</li>
+                  <li>이동통신구내선로설비</li>
+                  <li>전화설비</li>
+                  <li>방송 공동수신 안테나 시설</li>
+                  <li>종합유선방송 구내전송선로설비</li>
+                </ul>
+              </td>
+            </tr>
+
+            {/* 방송설비 */}
+            <tr className="align-middle">
+              <td className="border px-3 py-4 text-center font-medium">
+                <div className="flex flex-col items-center">
+                  <img src="/image/maintenance/방송설비.png" alt="방송설비" className="w-20 h-20 mb-2" />
+                  <span>방송설비</span>
+                </div>
+              </td>
+              <td className="border px-4 py-4">
+                <ul className="list-disc list-inside text-left">
+                  <li>방송음향설비</li>
+                </ul>
+              </td>
+            </tr>
+
+            {/* 정보설비 */}
+            <tr className="align-middle">
+              <td className="border px-3 py-4 text-center font-medium">
+                <div className="flex flex-col items-center">
+                  <img src="/image/maintenance/정보설비.png" alt="정보설비" className="w-20 h-20 mb-2" />
+                  <span>정보설비</span>
+                </div>
+              </td>
+              <td className="border px-4 py-4 leading-relaxed">
+                <ul className="list-disc list-inside text-left grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-1">
+                  <li>네트워크설비</li>
+                  <li>전자출입(통제)시스템</li>
+                  <li>원격검침시스템</li>
+                  <li>주차관제시스템</li>
+                  <li>주차유도시스템</li>
+                  <li>무인택배시스템</li>
+                  <li>비상벨설비</li>
+                  <li>영상정보처리기기 시스템</li>
+                  <li>홈 네트워크 이용자 설비</li>
+                  <li>빌딩안내시스템(BIS)</li>
+                  <li>전기시계시스템</li>
+                  <li>통합 SI시스템</li>
+                  <li>시설관리시스템(FMS)</li>
+                  <li>건물에너지관리시스템(BEMS)</li>
+                  <li>지능형 인원계수 시스템</li>
+                  <li>지능형 경계 감시 시스템</li>
+                  <li>스마트 병원 설비</li>
+                  <li>스마트 도난방지 시스템</li>
+                  <li>스마트 공장 시스템</li>
+                  <li>스마트 도서관 시스템</li>
+                  <li>지능형 이상 음원 시스템</li>
+                  <li>IoT 기반 지하공간 안전관리 시스템</li>
+                  <li>디지털 사이니지</li>
+                </ul>
+              </td>
+            </tr>
+
+            {/* 기타설비 */}
+            <tr className="align-middle">
+              <td className="border px-3 py-4 text-center font-medium">
+                <div className="flex flex-col items-center">
+                  <img src="/image/maintenance/기타설비.png" alt="기타설비" className="w-20 h-20 mb-2" />
+                  <span>기타설비</span>
+                </div>
+              </td>
+              <td className="border px-4 py-4">
+                <ul className="list-disc list-inside text-left">
+                  <li>통신용 전원설비</li>
+                  <li>통신접지설비</li>
+                </ul>
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </section>
+
+        {/* 주요내용 */}
+        <section>
+          <h2 className="text-2xl font-bold text-blue-800 mb-4">
+            유지보수·관리 및 성능점검 주요내용
+          </h2>
+          <table className="w-full border text-sm">
+            <thead className="bg-gray-100">
+            <tr>
+              <th className="border px-2 py-1">구분</th>
+              <th className="border px-2 py-1">유지보수·관리</th>
+              <th className="border px-2 py-1">성능점검</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+              <td className="border px-2 py-1">주요내용</td>
+              <td className="border px-2 py-1">
+                일상적 점검을 통해 설비 기능 유지 및 안전 확보
+              </td>
+              <td className="border px-2 py-1">
+                설비 운용에 필요한 성능 점검
+              </td>
+            </tr>
+            <tr>
+              <td className="border px-2 py-1">주기</td>
+              <td className="border px-2 py-1">반기별 1회 이상</td>
+              <td className="border px-2 py-1">연 1회 이상</td>
+            </tr>
+            <tr>
+              <td className="border px-2 py-1">주요업무</td>
+              <td className="border px-2 py-1">
+                외관, 기능, 안전 상태 점검 및 기록
+              </td>
+              <td className="border px-2 py-1">
+                점검결과 기록 후 5년간 보존 및 지자체 제출
+              </td>
+            </tr>
+            <tr>
+              <td className="border px-2 py-1">업무위탁</td>
+              <td className="border px-2 py-1">공사업자</td>
+              <td className="border px-2 py-1">공사업자 또는 용역업자</td>
+            </tr>
+            </tbody>
+          </table>
+        </section>
+
+        {/* 연락처 */}
+        <div className="mt-12 text-center text-gray-700">
+          <p className="font-semibold">[견적요청 및 문의]</p>
+          <p>E-MAIL : bando@bdsj.kr</p>
+          <p>대표번호 : 051-808-8556</p>
+          <p className="text-sm mt-2">
+            <a href="/download/견적요청서.hwp" download className="text-blue-700 underline">견적서 다운로드</a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Performance;