1차 완성

src/pages/maintenance/Performance.tsx

@@ -6,11 +6,12 @@ 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 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">
@@ -24,6 +25,11 @@ const Performance = () => {
           <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">
@@ -80,10 +86,19 @@ const Performance = () => {
           <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">
-                <img src={imageSrc} alt={title} className="w-32 h-32 object-cover mb-2 rounded-lg shadow-md"/>
+            {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>
             ))}
@@ -92,21 +107,48 @@ const Performance = () => {
 
         {/* 제도 도입 배경 */}
         <section className="mb-12">
-          <h2 className="text-2xl font-bold text-blue-800 mb-4">
-            제도 도입 배경
-          </h2>
+          <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. 시행)
+              근거 법령: 「정보통신공사업법」 (법률 제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>
@@ -119,23 +161,136 @@ const Performance = () => {
             </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">300만원</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">300만원</td>
             </tr>
             <tr>
-              <td className="border px-2 py-1">
-                유지보수‧관리자 미선임
-              </td>
+              <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>
@@ -154,6 +309,15 @@ const Performance = () => {
             </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>
@@ -162,16 +326,16 @@ const Performance = () => {
             <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년간 보존, 지자체 제출
+                점검결과 기록 후 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>
+              <td className="border px-2 py-1">공사업자 또는 용역업자</td>
             </tr>
             </tbody>
           </table>
@@ -182,10 +346,13 @@ const Performance = () => {
           <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;
+export default Performance;