hwahwahwa

deploy.sh

@@ -7,13 +7,6 @@ HOST="129.154.58.6"
 REMOTE_DIR="/var/www/bandosj.com/public_html"
 ARCHIVE_NAME="dist.tar.gz"
 
-# ===== nvm 초기화 및 빌드 =====
-export NVM_DIR="$HOME/.nvm"
-[ -s "$NVM_DIR/nvm.sh" ] && source "$NVM_DIR/nvm.sh"
-
-echo "🟢 Node.js LTS 버전 활성화..."
-nvm use --lts || { echo "❌ Node 설정 실패"; exit 1; }
-
 echo "🔧 빌드 중..."
 npm install
 npm run build || { echo "❌ 빌드 실패"; exit 1; }

src/components/CertificateModal.tsx

@@ -9,11 +9,11 @@ interface CertificateModalProps {
 const CertificateModal: React.FC<CertificateModalProps> = ({ title, imageUrl, onClose }) => {
   return (
     <div
-      className="fixed inset-0 z-50 bg-black/70 backdrop-blur-[10px] flex items-center justify-center px-4"
+      className="fixed inset-0 z-50 bg-black/70 backdrop-blur-[10px] flex items-center justify-center px-4 animate-in fade-in-0 duration-300"
       onClick={onClose}
     >
       <div
-        className="relative bg-transparent max-w-[700px] w-full flex flex-col items-center"
+        className="relative bg-transparent max-w-[700px] w-full flex flex-col items-center animate-in zoom-in-95 fade-in-0 duration-300"
         onClick={(e) => e.stopPropagation()}
       >
         {/* 이미지 */}

src/components/ProjectModal.tsx

@@ -1,6 +1,5 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { MajorProject } from "@/data/project";
-import IndicatorDots from "@/components/common/IndicatorDots";
 
 interface CommonModalProps {
     isOpen: boolean;
@@ -9,96 +8,72 @@ interface CommonModalProps {
 }
 
 export const ProjectModal: React.FC<CommonModalProps> = ({ isOpen, onClose, item }) => {
-    const [currentIndex, setCurrentIndex] = useState(0);
-
     if (!isOpen || !item) return null;
 
-    const images = item.subImgUrl ?? [];
-
-    const handlePrev = () => {
-        if (images.length === 0) return;
-        setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
-    };
-
-    const handleNext = () => {
-        if (images.length === 0) return;
-        setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
-    };
-
     return (
-      <div
-        className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4"
-        onClick={onClose}
-      >
-          <div
-            className="relative bg-white w-full max-w-6xl max-h-[90vh] overflow-y-auto p-4 sm:p-6 lg:p-8 rounded-lg"
-            onClick={(e) => e.stopPropagation()}
-          >
-              {/* 닫기 버튼 */}
-              <button
-                className="absolute top-4 right-4 sm:top-6 sm:right-6 text-black text-2xl sm:text-3xl font-light cursor-pointer hover:text-gray-600 transition-colors"
-                onClick={onClose}
-              >
-                  ×
-              </button>
+        <div
+            className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4 animate-in fade-in-0 duration-300"
+            onClick={onClose}
+        >
+            <div
+                className="relative bg-white w-full max-w-7xl h-[90vh] overflow-hidden animate-in zoom-in-95 fade-in-0 duration-300"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <button
+                    className="absolute top-4 right-4 z-20 text-white lg:text-black text-2xl sm:text-3xl font-bold cursor-pointer hover:text-gray-300 lg:hover:text-gray-600 transition-colors drop-shadow-lg"
+                    onClick={onClose}
+                >
+                    ×
+                </button>
 
-              {/* 제목 및 정보 */}
-              <div className="mb-6 sm:mb-8 pr-8">
-                  <h2 className="text-xl sm:text-2xl lg:text-3xl font-bold font-['Noto_Sans_KR'] antialiased mb-3 sm:mb-4 text-gray-800">{item.title}</h2>
-                  <div className="text-sm sm:text-base font-medium font-['Noto_Sans_KR'] antialiased space-y-2 text-gray-700">
-                      {item.client && <p>발주처 : {item.client}</p>}
-                      {item.contractAmount && <p>계약금액 : {item.contractAmount}</p>}
-                      {item.period && <p>공사기간 : {item.period}</p>}
-                  </div>
-              </div>
-
-              {/* 이미지 및 컨트롤 */}
-              <div className="relative w-full">
-                  {images.length > 0 ? (
-                    <div className="relative flex justify-center items-center bg-gray-100 rounded-lg">
-                      <img
-                        src={images[currentIndex]}
-                        alt={`image-${currentIndex}`}
-                        className="rounded-lg max-w-full h-auto max-h-[50vh] sm:max-h-[60vh] object-contain"
-                      />
-                      
-                      {images.length > 1 && (
-                        <>
-                          <button
-                            onClick={handlePrev}
-                            className="absolute left-2 sm:left-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white w-10 h-10 sm:w-12 sm:h-12 rounded-full text-lg sm:text-xl cursor-pointer shadow-lg transition-colors flex items-center justify-center"
-                          >
-                              {'<'}
-                          </button>
-                          <button
-                            onClick={handleNext}
-                            className="absolute right-2 sm:right-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white w-10 h-10 sm:w-12 sm:h-12 rounded-full text-lg sm:text-xl cursor-pointer shadow-lg transition-colors flex items-center justify-center"
-                          >
-                              {'>'}
-                          </button>
-                        </>
-                      )}
-                    </div>
-                  ) : (
-                    <div className="w-full h-64 sm:h-96 bg-gray-100 rounded-lg flex items-center justify-center">
-                      <p className="text-gray-500 font-medium font-['Noto_Sans_KR'] antialiased">이미지가 없습니다</p>
+                <div className="flex flex-col lg:flex-row h-full">
+                    <div className="relative lg:w-1/2 h-64 lg:h-full overflow-hidden">
+                        <div className="absolute inset-0">
+                            <img
+                                src={item.imageUrl}
+                                alt="background"
+                                className="w-full h-full object-fill brightness-[0.3] scale-150"
+                            />
+                        </div>
+                        
+                        <div className="absolute inset-0 flex items-center justify-center p-4">
+                            <img
+                                src={item.imageUrl}
+                                alt={item.title}
+                                className="max-w-full max-h-full object-contain"
+                            />
+                        </div>
+                        
+                        <div className="absolute inset-0 bg-black/20"></div>
                     </div>
-                  )}
-              </div>
 
-              {/* 페이지 인디케이터 */}
-              {images.length > 1 && (
-                <div className="flex justify-center mt-4 sm:mt-6">
-                    <IndicatorDots
-                      count={images.length}
-                      activeIndex={currentIndex}
-                      onClick={(index) => setCurrentIndex(index)}
-                      activeColorClass="bg-blue-900"
-                      inactiveColorClass="bg-blue-900/20"
-                    />
+                    <div className="lg:w-1/2 p-6 sm:p-8 lg:p-10 overflow-y-auto">
+                        <div className="space-y-6">
+                            <div>
+                                <h2 className="text-xl sm:text-2xl lg:text-3xl font-bold font-['Noto_Sans_KR'] antialiased mb-4 text-gray-800">
+                                    {item.title}
+                                </h2>
+                                <div className="text-sm sm:text-base font-medium font-['Noto_Sans_KR'] antialiased space-y-2 text-gray-600">
+                                    {item.client && <p>발주처 : {item.client}</p>}
+                                    {item.contractAmount && <p>계약금액 : {item.contractAmount}</p>}
+                                    {item.period && <p>공사기간 : {item.period}</p>}
+                                </div>
+                            </div>
+
+                            {item.detailDescription && (
+                                <div>
+                                    <h3 className="text-lg sm:text-xl font-bold font-['Noto_Sans_KR'] antialiased mb-4 text-gray-800">
+                                        프로젝트 상세정보
+                                    </h3>
+                                    <div className="text-sm sm:text-base font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed whitespace-pre-line">
+                                        {item.detailDescription}
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </div>
                 </div>
-              )}
-          </div>
-      </div>
+            </div>
+        </div>
     );
 };

src/components/main/Business.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import DarkOverlay from "@/components/common/DarkOverlay.jsx";
 import businessItems from '@/data/business';
 import {useScrollAnimation} from "@/hooks/useScrollAnimation";
+import { useNavigate } from 'react-router-dom';
 
 const RankBox = (title: string, rank: string, topPercent: string) => (
     <div className="flex flex-col items-center justify-center w-full max-w-[280px] mx-auto">
@@ -31,40 +32,44 @@ const RankBox = (title: string, rank: string, topPercent: string) => (
 const Business = () => {
     const { ref: businessRef, isVisible: businessVisible } = useScrollAnimation({ threshold: 0.1 });
     const { ref: rankRef, isVisible: rankVisible } = useScrollAnimation({ threshold: 0.1 });
+    const navigate = useNavigate();
+    
+    const handleCardClick = (item: any) => {
+        navigate('/business/sections', { state: { selectedItem: item } });
+    };
 
     return (
         <div className="max-w-7xl mx-auto px-[2vw] py-[4vw] space-y-[5vw]">
-            {/* 주요 사업 */}
             <div ref={businessRef} className={`transition-all duration-1000 ${businessVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
-                {/* 텍스트 영역 */}
                 <div className="space-y-3 mb-8">
                     <div className="text-blue-900 text-2xl sm:text-3xl lg:text-4xl font-bold font-['Noto_Sans_KR'] antialiased">반도산전 Business Solution</div>
                     <div className="text-zinc-500 text-sm sm:text-md font-semibold font-['Noto_Sans_KR'] antialiased">반도산전이 선도하는 힘</div>
                 </div>
 
-                {/* 이미지 영역 */}
                 <div className="bg-white flex flex-wrap gap-2 sm:gap-[0.3vw] w-full">
                     {businessItems.map((item, index) => (
-                        <a
+                        <div
                             key={index}
-                            href={item.url}
-                            className="relative flex-[0_0_calc(50%-4px)] sm:flex-[0_0_calc(33.33%-8px)] lg:flex-[0_0_calc((100%-24px)/5)] bg-cover bg-center h-24 sm:aspect-[16/10] cursor-pointer"
+                            onClick={() => handleCardClick(item)}
+                            className="relative flex-[0_0_calc(50%-4px)] sm:flex-[0_0_calc(33.33%-8px)] lg:flex-[0_0_calc((100%-24px)/5)] bg-cover bg-center h-36 sm:h-40 lg:h-44 cursor-pointer"
                             style={{backgroundImage: `url(${item.image})`}}
                         >
                             <DarkOverlay />
                             
-                            <div className="relative p-2 sm:p-4">
-                                <div className="text-white text-sm sm:text-base lg:text-lg font-semibold font-['Noto_Sans_KR'] whitespace-pre-line antialiased">{item.label}</div>
-                                <div className="text-white text-xs sm:text-sm font-semibold font-['Noto_Sans_KR'] antialiased">상세보기</div>
+                            <div className="relative p-3 sm:p-4 h-full flex flex-col justify-end">
+                                <div className="text-white text-sm sm:text-base lg:text-lg font-bold font-['Noto_Sans_KR'] antialiased leading-tight mb-1">
+                                    {item.label.split('\n').map((line, idx) => (
+                                        <div key={idx}>{line}</div>
+                                    ))}
+                                </div>
+                                <div className="text-white text-xs sm:text-sm lg:text-base font-medium font-['Noto_Sans_KR'] antialiased">상세보기</div>
                             </div>
-                        </a>
+                        </div>
                     ))}
                 </div>
             </div>
             
-            {/* 반도산전은 */}
             <div ref={rankRef} className={`transition-all duration-1000 ${rankVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
-                {/* 텍스트 영역 */}
                 <div className="space-y-2 mb-2.5 pb-6 sm:pb-10">
                     <div className="text-2xl sm:text-3xl lg:text-4xl text-blue-900 font-bold font-['Noto_Sans_KR'] antialiased">반도산전은</div>
                 </div>
@@ -81,12 +86,19 @@ const Business = () => {
                         </div>
                     </div>
                     <div className="flex flex-wrap justify-center items-center gap-3 sm:gap-4 lg:gap-8 max-w-6xl mx-auto">
+                        <div className="flex justify-center items-center">
+                            <svg width="40" height="41" viewBox="0 0 98 99" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-8 h-8 sm:w-10 sm:h-10 lg:w-16 lg:h-16">
+                                <path d="M40.8333 45.4166H65.3333L89.7925 4.58325H65.2925L40.8333 45.4166Z" fill="#1E3A8A"/>
+                                <path d="M57.1258 45.4166H32.6258L8.16666 4.58325H32.6667L57.1258 45.4166Z" fill="#1E3A8A"/>
+                                <path d="M49 94.4167C64.7862 94.4167 77.5833 81.6195 77.5833 65.8333C77.5833 50.0472 64.7862 37.25 49 37.25C33.2139 37.25 20.4167 50.0472 20.4167 65.8333C20.4167 81.6195 33.2139 94.4167 49 94.4167Z" fill="#E7ECEF"/>
+                            </svg>
+                        </div>
                         <div className="flex justify-center">
-                            {RankBox("전기공사", "15위", "5%")}
+                            {RankBox("소방공사", "15위", "5%")}
                         </div>
                         
                         <div className="w-px h-16 lg:h-24 bg-gray-200"></div>
-                        
+
                         <div className="flex justify-center items-center">
                             <svg width="40" height="41" viewBox="0 0 98 99" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-8 h-8 sm:w-10 sm:h-10 lg:w-16 lg:h-16">
                                 <path d="M40.8333 45.4166H65.3333L89.7925 4.58325H65.2925L40.8333 45.4166Z" fill="#1E3A8A"/>
@@ -100,7 +112,13 @@ const Business = () => {
                         </div>
                         
                         <div className="w-px h-16 lg:h-24 bg-gray-200"></div>
-                        
+                        <div className="flex justify-center items-center">
+                            <svg width="40" height="41" viewBox="0 0 98 99" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-8 h-8 sm:w-10 sm:h-10 lg:w-16 lg:h-16">
+                                <path d="M40.8333 45.4166H65.3333L89.7925 4.58325H65.2925L40.8333 45.4166Z" fill="#1E3A8A"/>
+                                <path d="M57.1258 45.4166H32.6258L8.16666 4.58325H32.6667L57.1258 45.4166Z" fill="#1E3A8A"/>
+                                <path d="M49 94.4167C64.7862 94.4167 77.5833 81.6195 77.5833 65.8333C77.5833 50.0472 64.7862 37.25 49 37.25C33.2139 37.25 20.4167 50.0472 20.4167 65.8333C20.4167 81.6195 33.2139 94.4167 49 94.4167Z" fill="#E7ECEF"/>
+                            </svg>
+                        </div>
                         <div className="flex justify-center">
                             {RankBox("전기공사", "9위", "2%")}
                         </div>
@@ -111,4 +129,4 @@ const Business = () => {
     )
 }
 
-export default Business;
+export default Business;

src/components/main/Directions.tsx

@@ -9,22 +9,22 @@ const tabItems: TabItem[] = [
 
 const tabContent: Record<string, { lat: number; lng: number; address: string; phone: string }> = {
   busan: {
-    lat: 35.170833,
-    lng: 129.130833,
-    address: '부산 해운대구 센텀중앙로 78, 1308호(센텀그린타워)',
+    lat: 35.174678,
+    lng: 129.126943,
+    address: '부산 해운대구 센텀중앙로 78, 1308호 (센텀그린타워)',
     phone: '051-808-8556',
   },
   gimhae: {
-    lat: 35.207,
-    lng: 128.848,
-    address: '경남 김해시 주촌면 골든루트로 80-16',
-    phone: '055-123-4567',
+    lat: 35.206194,
+    lng: 128.838419,
+    address: '경남 김해시 서김해산단안길 2 (명법동)',
+    phone: '055-339-8550',
   },
   seoul: {
-    lat: 37.501274,
-    lng: 127.039585,
-    address: '서울 강남구 테헤란로 123, 5층',
-    phone: '02-987-6543',
+    lat: 37.576899,
+    lng: 127.192714,
+    address: '경기 하남시 미사강변한강로135, 나동 902호',
+    phone: '031-794-2967',
   },
 };
 

src/components/main/Footer.tsx

@@ -26,11 +26,6 @@ const Footer = () => {
                                 대표번호 : 051-808-8556<br />
                                 FAX : 051-808-8657
                             </p>
-                            
-                            {/*/!* 카피라이트 *!/*/}
-                            <div className="flex text-xs font-medium text-right text-gray-500 font-['Noto_Sans_KR'] antialiased">
-                                © BANDO INDUSTRIAL SYSTEM CO., LTD. All rights reserved.
-                            </div>
                         </div>
 
                         {/* 공장 및 지사 */}
@@ -50,12 +45,19 @@ const Footer = () => {
                 </div>
 
                 {/* SNS 아이콘 영역 */}
-                <div className="flex justify-end mb-6 sm:mb-10 gap-3 sm:gap-6 flex-wrap">
+                <div className="flex justify-end mb-6 sm:mb-8 gap-3 sm:gap-6 flex-wrap">
                     <img className="w-16 h-8 sm:w-20 sm:h-11" src={`${FOOTER_IMAGE_PREFIX}/KTR마크.png`} alt="icon1" />
                     <img className="w-10 h-8 sm:w-12 sm:h-11" src={`${FOOTER_IMAGE_PREFIX}/중소기업청.png`} alt="icon2" />
                     <img className="w-10 h-8 sm:w-12 sm:h-11" src={`${FOOTER_IMAGE_PREFIX}/벤처기업인증마크.png`} alt="icon3" />
                     <img className="w-12 h-8 sm:w-16 sm:h-11" src={`${FOOTER_IMAGE_PREFIX}/ci.png`} alt="icon4" />
                 </div>
+                
+                {/* 카피라이트 */}
+                <div className="text-center py-4 border-t border-gray-600">
+                    <div className="text-xs text-gray-500 font-medium font-['Noto_Sans_KR'] antialiased">
+                        © BANDO INDUSTRIAL SYSTEM CO., LTD. All rights reserved.
+                    </div>
+                </div>
             </div>
             
             {/* TOP 버튼 */}

src/data/business.ts

@@ -13,8 +13,8 @@ export interface BusinessItem {
 const businessSections: BusinessItem[] = [
   {
     label: "정보통신공사",
-    description: "지금의 반도산전이 있기까지\n 정보통신공사로 시작한 반도산전 30년의 탄탄한 시공능력과 도전정신이 있습니다.",
-    description2: "정보통신공사란?\n정보통신 시스템 및 관련 설비를 설치·이전·변경·철거하거나,\n유지·보수하는 공사를 말합니다. 이는 전기공사와는 다르며,\n정보통신기술(IT) 기반의 인프라 구축에 초점을 둔 공사입니다.",
+    description: "반도산전(주)는 전기·통신·소방 분야의 전문 시공 역량을 기반으로, 다양한 건축물에 최적화된 정보통신 인프라를 구축합니다.\n당사의 정보통신공사 부문은 입주자의 생활 편의, 보안, 스마트 환경 구현을 위한 통합형 Business Solution을 제공합니다.",
+    description2: "주요 시공 분야\n\n1. 구내통신 배선 공사 - 건물 내 전화선, 인터넷선, TV케이블 등 통신 인프라 구축\n2. 인터넷 및 네트워크 인프라 구축 - LAN 및 IPTV용 네트워크 설계·시공\n3. CATV 및 위성방송 설비 - 공동주택용 MATV 및 위성 수신 안테나 설치\n4. 보안 및 감시시스템 (CCTV) - 실시간 모니터링 및 원격 관제 시설\n5. 출입통제 및 인터폰 시스템 - 로비폰, 세대 인터폰, 월패드 연동\n6. 주차관제 및 차량번호 인식 시스템 - 차량 자동 입출차 지원\n7. 비상 호출 및 경보 시스템 - 위급 상황 대응 체계\n8. 스마트홈 연동 설비 (IoT 기반) - 조명, 냉난방, 가스 등 통합 제어",
     image: `${BUSINESS_IMAGE_PREFIX}/정보통신공사.jpg`,
     url: "/business/communication",
     subImages: [
@@ -25,46 +25,64 @@ const businessSections: BusinessItem[] = [
   },
   {
     label: "전기설비공사",
+    description: "반도산전(주)는 전기설비 분야의 전문 시공 역량을 바탕으로\n안전하고 효율적인 전기 인프라를 구축합니다.",
+    description2: "전기설비공사는 건축물의 전력 공급과 배전을 담당하는 핵심 인프라입니다.\n당사는 고압, 저압 배전설비부터 조명, 동력, 콘센트까지\n건물 전체의 전기시설을 통합 설계·시공합니다.",
     image: `${BUSINESS_IMAGE_PREFIX}/전기설비공사.jpg`,
     url: "/business/electric",
   },
   {
     label: "소방설비공사",
+    description: "당사는 사람의 생명과 재산을 지키는 안전 설비를 최우선으로 생각합니다.\n전기식 소방설비 분야는 당사의 핵심 Business Solution 중 하나로, 다양한 건축물에 최적화된 시스템을 구축합니다.",
+    description2: "주요 시공 분야\n\n1. 자동화재탐지설비 - 화재 발생 자동 감지 및 신속 상황 전달\n2. 비상방송설비 - 화재 시 자동 피난 안내 방송 송출\n3. 비상조명등 설비 - 정전 시 즉시 점등되어 안전한 피난 유도\n4. 유도등 설비 - 출구 방향 안내 및 점멸 기능으로 대피 방향 유도\n5. 전원공급 및 배선 공사 - 비상전원 시스템 및 방화 구획 기준 배선\n6. 연동 제어설비 - 화재 시 각종 설비 자동 연동으로 2차 피해 방지\n7. 시운전 및 소방검사 대응 - 소방서 사용승인 검사까지 완벽 대응",
     image: `${BUSINESS_IMAGE_PREFIX}/소방설비공사.jpg`,
     url: "/business/ict",
   },
   {
     label: "OSP 기간통신사업",
+    description: "반도산전(주)는 국가기간통신망 구축에 필요한 외부 통신 인프라 공사를 수행하는 전문 기업으로,\nKT & KT netcore 1군 협력사로서 거창·합천·산청·함양 등 주요 권역의 통신망 구축 및 유지보수를 책임지고 있습니다.",
+    description2: "주요 사업 분야\n\n1. 통신 전주 관련 공사 - 다양한 환경의 통신 전주 신설, 철거 및 이설\n2. 관로 공사 - 지중 통신망 구축을 위한 PVC/HDPE 관로 매설\n3. 광케이블 및 동케이블 포설 - 통신국사부터 건물까지 광케이블 포설 및 접속\n4. 건물 인입 및 단자함 설치 - MDF/IDF 설비 시공 및 체계적인 인입망 확보\n5. 보수 및 유지관리 - 통신장애 긴급복구 및 정기 신호측정\n\n당사는 KT와의 장기 협력관계를 바탕으로 지역 기반의 책임감 있는 시공과\n현장 밀착형 유지보수 체계를 갖추고 있습니다.",
     image: `${BUSINESS_IMAGE_PREFIX}/OSP기간통신사업.jpg`,
     url: "/business/security",
   },
   {
     label: "친환경공사",
+    description: "반도산전(주)는 지속가능한 미래를 위한 친환경 건축 인프라 구축에 앞장서고 있습니다.\n전기·통신·소방 분야의 전문성을 바탕으로, 에너지 절감과 탄소 배출 저감을 실현하는 통합형 친환경 Business Solution을 제공합니다.",
+    description2: "Green Energy & Smart Infra Solution\n\n1. 태양광 발전 설비 공사 - 옥상형 및 주차장형 태양광 모듈, ESS 연계 시스템\n2. 전기차 충전소 설치 공사 - 완속·급속 충전기 및 EMS 연계 운영\n3. 통합 에너지관리 및 스마트 통신 설비 - BEMS를 통한 실시간 에너지 분석·제어\n4. 친환경 소방 설비 - 고감도 감지기, 저전력 경보설비, 친환경 가스소화설비\n\n당사는 친환경 기술을 중심으로 설계부터 시공, 통합 제어까지 아우르는\n에너지 중심의 스마트 건축 솔루션을 고객에게 제공합니다.",
     image: `${BUSINESS_IMAGE_PREFIX}/친환경공사.jpg`,
     url: "/business/fire",
   },
   {
     label: "ICT",
+    description: "반도산전(주)는 ICT 기반의 정보통신 인프라 구축에 특화된 전문 기업으로,\n전기·통신·보안·스마트제어 분야를 아우르는 통합 솔루션을 제공합니다.",
+    description2: "ICT 인프라 구축 솔루션\n\n1. 건물 내부 구내통신 및 LAN/Wi-Fi 네트워크 설계\n2. IPTV, 전화, 인터넷, CCTV 통합 통신시스템 시공\n3. 비디오폰, 월패드, 스마트홈 연동 출입통제 시스템\n4. KT 등 통신사 연계 OSP 광케이블 및 외부 통신망 공사\n5. 통신실, EPS실, MDF/IDF, 서버랙 구성 등 통합 배선 인프라\n6. IoT 기반 에너지관리·감시제어 통신망 구축(BEMS, EMS 등)\n\n당사의 ICT 인프라 솔루션은 건축물 내부를 넘어 도시와 연결되는\n지능형 정보통신 환경을 구현합니다.",
     image: `${BUSINESS_IMAGE_PREFIX}/ICT.jpg`,
     url: "/business/osp",
   },
   {
     label: "정보통신설비\n유지보수",
+    description: "최근 정보통신설비 유지보수의 중요성이 크게 부각되고 있습니다.\n과학기술정보통신부는 일정 규모 이상 건축물에 대해 정보통신설비 유지보수·관리자의 선임을 의무화하는 법령 개정을 추진하고 있습니다.",
+    description2: "주요 유지보수 업무 범위\n\n1. 구내통신 배선 상태 점검 및 보수 (광·UTP 등)\n2. 통신함체, EPS실, MDF/IDF 등 통신실 내 설비 정비\n3. CCTV, 출입통제, 월패드 등 연동기기 작동 점검\n4. 통신속도 측정, 신호 상태 분석(OTDR, TEST기기 활용)\n5. 백업, 원격관제 연동 및 시스템 로그 점검\n6. 노후 장비 교체 및 신규장비 이설 작업\n7. 계약 기반 정기 점검 + 긴급 장애 대응 서비스\n\n반도산전(주)는 정보통신 특급 기술자 등 다수의 공인된 정보통신 전문 인력을 보유하여\n설계부터 시공, 점검, 긴급복구까지 토탈 솔루션을 제공합니다.",
     image: `${BUSINESS_IMAGE_PREFIX}/정보통신설비유지보수.jpg`,
     url: "/business/maintenance",
   },
   {
     label: "통합보안시스템",
+    description: "반도산전(주)는 통합보안시스템 구축을 통해\n건물과 시설의 종합적인 보안 환경을 제공합니다.",
+    description2: "통합보안시스템은 CCTV, 출입통제, 침입감지, 주차관제 등\n다양한 보안 시설을 하나의 플랫폼으로 통합 관리하는 시스템입니다.\n실시간 모니터링과 원격 제어를 통해 효율적인 보안 관리를 실현합니다.",
     image: `${BUSINESS_IMAGE_PREFIX}/통합보안시스템.jpg`,
     url: "/business/eco",
   },
   {
     label: "제품생산\nR&D",
+    description: "반도산전(주)는 단순한 시공을 넘어, 전기·통신·소방 분야의 핵심 자재를 직접 생산하고,\n고유 기술을 연구·개발하는 제조형 기술기업입니다.",
+    description2: "기술력 검증 현황\n\n✓ 산업통상자원부 직접생산확인증명서 다수 보유\n✓ 정보통신 분야 특허기술 보유\n - 광 전송 시스템 및 그 방법 (제10-0573458호)\n - 광분배망 통신제어 시스템 (제10-0582778호)\n - 광선로 자동복구 장치 (제10-0606697호)\n\n김해지사 공장 기반 R&D 중심의 스마트 생산 체계\n- 자체 제작 시스템을 통한 현장 맞춤형 자재 생산\n- 기술연구 기반의 설계 최적화 및 제품 성능 개선\n- 생산→설치→유지보수를 연결하는 One-Stop 기술 대응 체계\n\n검증된 특허기술과 생산 인프라를 바탕으로 지속가능한 인프라를 책임지는\n믿을 수 있는 기술 파트너입니다.",
     image: `${BUSINESS_IMAGE_PREFIX}/제품생산RND.jpg`,
     url: "/business/production",
   },
   {
     label: "설계(CAD)\n견적(실행 제안)",
+    description: "반도산전(주)는 전기, 통신, 소방 분야의 전문 건설업체로서\n오랜 시공 경험과 설계 노하우를 바탕으로 CAD 기반 설계 및 견적 통합 시스템을 운영하고 있습니다.",
+    description2: "설계부터 견적까지 연결되는 CAD 기반 시공 솔루션\n\n1. 전문 CAD 설계 인력 보유\n복잡한 통신·전장·배선 설계를 정확하고 빠르게 도면화\n\n2. 현장 변화 즉각 대응 설계 수정체계\n공사 중 발생하는 현장 여건 변화나 설계 변경사항에\n설계팀과 즉시 연동하여 도면 수정 및 반영\n\n3. 도면 기반 견적 산출의 정밀성 확보\nCAD 설계를 바탕으로 정확한 수량 산출 및 내역서 작성\n\n당사의 CAD 설계 시스템은 단순한 도면 작업을 넘어\n공사 계획, 예산관리, 시공 정확도 향상까지 연계되는\n실행력 있는 설계 기반 비즈니스 솔루션입니다.",
     image: `${BUSINESS_IMAGE_PREFIX}/설계견적.jpg`,
     url: "/business/cad",
   },

src/data/project.ts

@@ -7,7 +7,8 @@ export interface MajorProject {
   client?: string;
   contractAmount?: string;
   period?: string;
-  subImgUrl?: string[]
+  subImgUrl?: string[];
+  detailDescription?: string;
 }
 
 // FIXME : subImagUrl(주요 랜드마크 시공현장 카드 클릭시 노출되는 이미지 리스트)
@@ -18,6 +19,7 @@ const projectList: MajorProject[] = [
     contractAmount: "₩1,486,082,000",
     description: "전산 & 데이터센터 신축, 이전공사",
     imageUrl: `${PROJECT_IMAGE_PREFIX}/데이터센터.jpg`,
+    detailDescription: "BNK 전산센터는 BNK금융그룹 산하의 IT 인프라 및 정보시스템 운영을 담당하는 핵심 시설로, BNK부산은행과 경남은행, BNK캐피탈 등 그룹 계열사의 전산업무를 통합 관리하는 데이터센터입니다. 이 센터는 금융업무의 디지털 전환, 보안 강화, 재해 복구 체계 확립 등을 목표로 설립되었습니다.\n\n주요 기능:\n1. BNK금융그룹 전체 IT 인프라 관리\n2. 금융 거래 데이터 처리 및 저장\n3. 24시간 무중단 서비스 제공\n4. 고객정보 보호 및 보안관리\n5. 비상상황 대비 재해복구(DR) 시스템 운영",
     subImgUrl: [
       `${PROJECT_SUBIMAGE_PREFIX}/ICT.jpg`,
       `${PROJECT_SUBIMAGE_PREFIX}/ICT.jpg`,
@@ -31,6 +33,7 @@ const projectList: MajorProject[] = [
     period: "2023.12.19 - 2024.12.31",
     description: "부산 북항 초고층 복합개발사업 중 통신공사 (롯데 드메르)",
     imageUrl: `${PROJECT_IMAGE_PREFIX}/드메르.jpg`,
+    detailDescription: "롯데캐슬 드메르는 부산 북항 재개발지구 내 상업업무지구 D-3 블록에 위치한 초고층 복합 생활숙박시설로, 북항의 새로운 랜드마크로 주목받고 있습니다.\n\n규모: 지하 5층 ~ 지상 59층, 총 1,221실",
   },
   {
     title: "부산 북항 협성마리나 G7",
@@ -39,6 +42,7 @@ const projectList: MajorProject[] = [
     period: "2018.02 - 2021.03",
     description: "",
     imageUrl: `${PROJECT_IMAGE_PREFIX}/G7.png`,
+    detailDescription: "협성마리나 G7은 부산 북항 재개발지구 D-1블럭에 위치한 초고층 복합 생활숙박시설로, 부산항을 대표하는 랜드마크 중 하나입니다.\n\n1. 건물 규모: 지상 61층, 지하 4층, 높이 약 210m\n2. 총 객실 수: 926실\n3. 주차 대수: 1,477대",
   },
   {
     title: "국방광대역 통합망",
@@ -47,6 +51,7 @@ const projectList: MajorProject[] = [
     period: "2022.09 - 2024.09",
     description: "차기 국방광대역통합망(M-BcN) 구축 민간투자사업(BTL)",
     imageUrl: `${PROJECT_IMAGE_PREFIX}/통합망.jpg`,
+    detailDescription: "차기 국방광대역통합망(M-BcN) 구축 민간투자사업(BTL)은 국방부 산하 국군지휘통신사령부가 추진하는 대규모 통신 인프라 사업으로, 전국의 군 부대를 초고속 통신망으로 연결하여 군의 지휘통신 능력을 강화하고자 하는 프로젝트입니다.\n\n1. 광케이블 설치: 약 1만 1,588km의 신규 광케이블 설치\n2. 장비 도입: 전송·교환·암호장비 등 약 2만 8,906대의 주요 장비 도입\n3. 통합망 관리체계: 군이 독자적으로 통신망을 운용하고 제어할 수 있는 지능형 관리체계 구축\n4. 연결 대상: 육군, 해군, 공군, 해병대, 국방부 직할부대 등 전국 2,321개 부대",
   },
   {
     title: "수원 덕산종합병원",
@@ -55,6 +60,7 @@ const projectList: MajorProject[] = [
     period: "2022.01 - 2025.10",
     description: "덕산의료재단 수원덕산병원 신축 건설공사 중 통신공사",
     imageUrl: `${PROJECT_IMAGE_PREFIX}/덕산병원.jpg`,
+    detailDescription: "수원덕산병원은 경기도 수원시 권선구 고색동에 건립 중인 종합병원으로, 덕산의료재단이 추진하고 있습니다. 이 병원은 서수원 지역의 의료 서비스 격차를 해소하고, 지역 주민들에게 질 높은 의료 서비스를 제공하기 위해 계획되었습니다.\n\n1. 연면적: 약 86,850㎡ (26,272평)\n2. 규모: 지하 4층 ~ 지상 10층\n3. 병상 수: 총 457병상 (1단계), 향후 249병상 추가 예정",
   },
   {
     title: "부산 강서구 BGF 리테일 CU 물류창고",
@@ -63,6 +69,7 @@ const projectList: MajorProject[] = [
     period: "2024.07 - 2026.09",
     description: "BGF리테일 부산센터 구축공사 소방전기공사",
     imageUrl: `${PROJECT_IMAGE_PREFIX}/CU물류창고.jpg`,
+    detailDescription: "BGF리테일은 부산 강서구 구랑동 국제산업물류도시에 국내 편의점 업계 최대 규모의 신규 물류센터를 건설하고 있습니다.\n\n연면적: 약 128,000㎡ (약 38,000평)\n\n물류 허브: 부산신항만과 인접하고, 2029년 개항 예정인 가덕도신공항과도 가까워 국내외 물류의 중심지로 활용됩니다.\n\n수출 전진기지: 몽골, 말레이시아, 카자흐스탄 등 해외 진출 국가로의 상품 및 물자 운송을 위한 수출 전진기지로 활용될 예정입니다.",
   },
   {
     title: "부산 동부산 관광단지 오시리아 메디타운",
@@ -71,6 +78,7 @@ const projectList: MajorProject[] = [
     period: "2024.02 - 2025.03",
     description: "오시리아 메디타운 중 약전설비공사",
     imageUrl: `${PROJECT_IMAGE_PREFIX}/메디타운.jpg`,
+    detailDescription: "오시리아 메디타운은 부산 기장군 오시리아 관광단지 내에 조성 중인 대규모 복합 의료·복지 단지입니다. 이 프로젝트는 고령화 사회에 대응하여 시니어 주거, 의료, 복지, 상업 기능을 통합한 새로운 형태의 메디컬 복합단지로 주목받고 있습니다.\n\n1. 위치: 부산광역시 기장군 기장읍 당사리 530번지 일원 (오시리아 관광단지 마8 용지)\n2. 주요 시설:\n- 시니어타운: 노인복지주택 574세대\n- 헬스타운: 양로시설 408세대\n- 한방병원: 249병상 규모\n- 메디컬컴플렉스: 상업시설 및 스트리트형 상가 등",
   },
   {
     title: "부산대학교병원 아트리움",
@@ -79,6 +87,7 @@ const projectList: MajorProject[] = [
     period: "2010.12 - 2016.08",
     description: "외상전문센터 통신공사, 호흡기전문질환센터 통신공사, B동 아트리움 증축 통신공사, 기타 외상전문센터 통신공사",
     imageUrl: `${PROJECT_IMAGE_PREFIX}/아트리움.jpg`,
+    detailDescription: "부산대학교병원은 다양한 전문센터를 운영하며 지역사회에 수준 높은 의료 서비스를 제공하고 있습니다. 특히 권역외상센터와 권역호흡기전문질환센터는 중증 외상 및 호흡기 질환 치료에 중추적인 역할을 하고 있습니다.\n\nB동 아트리움은 부산대학교병원의 주요 건물 중 하나로, 환자와 방문객을 위한 쾌적한 환경을 제공합니다. 이 공간은 자연 채광을 활용한 개방형 구조로 설계되어 있으며, 다양한 편의 시설과 휴게 공간이 마련되어 있어 병원을 방문하는 이들에게 편안함을 제공합니다.",
   },
   {
     title: "김해물류센터",
@@ -87,11 +96,16 @@ const projectList: MajorProject[] = [
     period: "2022.12 - 2024.10",
     description: "김해물류센터신축공사(전기설비공사,소방시설공사)",
     imageUrl: `${PROJECT_IMAGE_PREFIX}/김해물류센터.png`,
+    detailDescription: "김해 안동에 위치한 물류센터는 최근 쿠팡이 대규모 투자를 통해 조성한 스마트 복합물류센터로, 경상남도와 김해시의 적극적인 지원 아래 지역 물류 인프라의 핵심 거점으로 부상했습니다.\n\n규모: 지하 1층 ~ 지상 8층, 연면적 약 121,628㎡ (약 3만 7,000평)",
   },
   {
     title: "롯데호텔앤리조트 김해",
+    client: "롯데건설",
+    contractAmount: "₩1,308,780,000",
+    period: "2023.04.10 - 2025.04.30",
     description: "",
     imageUrl: `${PROJECT_IMAGE_PREFIX}/롯데호텔.jpg`,
+    detailDescription: "롯데호텔앤리조트 김해는 경상남도 김해시 신문동 1411번지에 위치한 가족형 복합 리조트로, 2024년 10월 8일에 공식 개장하였습니다. 이 리조트는 김해관광유통단지 내에 자리하고 있으며, 롯데워터파크와 롯데프리미엄아웃렛과 도보로 약 10분 거리에 있어 쇼핑과 레저를 동시에 즐길 수 있는 최적의 입지를 자랑합니다.\n\n총 250개의 객실은 다양한 여행객의 니즈를 충족시키기 위해 다음과 같은 타입으로 구성되어 있습니다:\n디럭스, 패밀리, 스위트, 프리미엄 스위트, 풀 스위트, 프레지던셜, 로얄",
   },
   {
     title: "롯데리조트제주 아트발라스",
@@ -100,6 +114,16 @@ const projectList: MajorProject[] = [
     period: "2010.09 - 2012.04",
     description: "",
     imageUrl: `${PROJECT_IMAGE_PREFIX}/롯데리조트제주.jpg`,
+    detailDescription: "롯데리조트 제주 아트빌라스는 제주 서귀포시 중문관광단지 내에 위치한 프라이빗 럭셔리 빌라형 리조트로, 세계적인 건축가들의 작품을 통해 자연과 예술이 조화를 이루는 공간입니다. 이곳은 VVIP를 위한 고급 휴식처로 설계되어, 제주 자연의 아름다움과 독창적인 건축미를 동시에 경험할 수 있습니다.",
+  },
+  {
+    title: "부산 래미안 장전",
+    client: "삼성물산",
+    contractAmount: "₩2,500,000,000",
+    period: "2015.06 - 2017.09",
+    description: "래미안 장전 아파트 통신공사",
+    imageUrl: `${PROJECT_IMAGE_PREFIX}/래미안장전.jpg`,
+    detailDescription: "래미안 장전은 부산광역시 금정구 장전동 745번지에 위치한 대규모 아파트 단지로, 삼성물산이 시공한 브랜드 아파트입니다. 2017년 9월에 입주를 시작하였으며, 총 1,938세대로 구성되어 있습니다.\n\n1. 총세대수: 1,938세대\n2. 건물규모: 지하 2층 ~ 지상 19~38층, 총 12개 동\n3. 전용면적: 59㎡ ~ 114㎡",
   },
   {
     title: "부암 서희 스타힐스",
@@ -108,6 +132,7 @@ const projectList: MajorProject[] = [
     period: "2022.06 - 2025.03",
     description: "",
     imageUrl: `${PROJECT_IMAGE_PREFIX}/서희스타힐스.jpg`,
+    detailDescription: "부암동 서희 스타힐스는 부산광역시 부산진구 부암동 610-88번지 일원에 위치한 대규모 아파트 단지로, 백양산 자락에 자리잡고 있습니다. 이 단지는 지역주택조합 방식으로 추진되었습니다.\n\n1. 총세대수: 1,295세대\n2. 건물규모: 지하 2층 ~ 지상 27층, 총 13개 동\n3. 전용면적: 59㎡, 65㎡, 84㎡ 등 다양한 타입으로 구성",
   },
 ];
 

src/pages/about/Ceo.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {useScrollAnimation} from "@/hooks/useScrollAnimation";
 
-const Ceo: React.FC = () => {
+const Ceo = () => {
     const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });
 
     return (
@@ -49,9 +49,12 @@ const Ceo: React.FC = () => {
                         <p className="text-lg sm:text-xl lg:text-2xl font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased mb-4">
                             감사합니다.
                         </p>
-                        <p className="text-base sm:text-lg lg:text-xl font-semibold text-blue-900 font-['Noto_Sans_KR'] antialiased">
-                            반도산전(주) 대표이사 서보석
-                        </p>
+                        <div className="flex items-center justify-center gap-4">
+                            <p className="text-base sm:text-lg lg:text-xl font-semibold text-blue-900 font-['Noto_Sans_KR'] antialiased">
+                                반도산전(주) 대표이사 서보석
+                            </p>
+                            <img src="/image/sig.png" alt="서보석 서명" className="h-8 sm:h-10 lg:h-12" />
+                        </div>
                     </div>
 
                 </div>
@@ -60,4 +63,4 @@ const Ceo: React.FC = () => {
     );
 };
 
-export default Ceo;
+export default Ceo;

src/pages/about/History.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, {useState, useEffect, useRef} from "react";
 import Tabs, {TabItem} from "@/components/common/Tabs";
 import { useScrollAnimation } from "@/hooks/useScrollAnimation";
 
@@ -72,9 +72,11 @@ const historyItems = [
   { date: '2024.06', description: '부산광역시 일자리창출 우수기업선정(부산광역시청)' }
 ];
 
-const History: React.FC = () => {
+const History = () => {
   const [activeTab, setActiveTab] = useState('3');
+  const [visibleItems, setVisibleItems] = useState<Set<number>>(new Set());
   const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
   
   // 연도 필터링 함수
   const getFilteredHistory = (tabId: string) => {
@@ -95,6 +97,35 @@ const History: React.FC = () => {
 
   const filteredItems = getFilteredHistory(activeTab);
   const yearRange = tabYears[activeTab];
+
+  useEffect(() => {
+    const observers: IntersectionObserver[] = [];
+    
+    itemRefs.current.forEach((ref, index) => {
+      if (ref) {
+        const observer = new IntersectionObserver(
+          ([entry]) => {
+            if (entry.isIntersecting) {
+              setVisibleItems(prev => new Set([...prev, index]));
+            }
+          },
+          { threshold: 0.1, rootMargin: '50px' }
+        );
+        
+        observer.observe(ref);
+        observers.push(observer);
+      }
+    });
+
+    return () => {
+      observers.forEach(observer => observer.disconnect());
+    };
+  }, [filteredItems]);
+
+  useEffect(() => {
+    setVisibleItems(new Set());
+    itemRefs.current = [];
+  }, [activeTab]);
   
   return (
     <div ref={ref} className="px-4 sm:px-8 py-8 sm:py-12">
@@ -130,17 +161,31 @@ const History: React.FC = () => {
               </div>
             </div>
 
-            {/* 타임라인 섹션 */}
             <div className="w-full lg:w-2/3">
               <div className="relative space-y-6 sm:space-y-8">
-                {/* 타임라인 선 */}
-                <div className="absolute left-4 top-0 w-0.5 h-full bg-gray-300 hidden sm:block"></div>
+                <div className="absolute left-4 top-0 w-0.5 h-full bg-gray-300"></div>
                 
                 {filteredItems.map(({date, description, image}, index) => (
-                  <div key={date + description} className="relative pl-0 sm:pl-12">
+                  <div 
+                    key={date + description} 
+                    ref={el => itemRefs.current[index] = el}
+                    className={`relative pl-12 transition-all duration-700 ease-out ${
+                      visibleItems.has(index) 
+                        ? 'opacity-100 translate-y-0' 
+                        : 'opacity-0 translate-y-8'
+                    }`}
+                    style={{
+                      transitionDelay: visibleItems.has(index) ? `${index * 50}ms` : '0ms'
+                    }}
+                  >
                     
-                    {/* 타임라인 점 */}
-                    <div className="absolute left-2.5 top-2 w-3 h-3 bg-blue-900 rounded-full hidden sm:block"></div>
+                    <div className={`absolute left-2.5 top-2 w-3 h-3 bg-blue-900 rounded-full transition-all duration-500 ${
+                      visibleItems.has(index) ? 'scale-100' : 'scale-0'
+                    }`}
+                    style={{
+                      transitionDelay: visibleItems.has(index) ? `${index * 50 + 100}ms` : '0ms'
+                    }}
+                    ></div>
                     
                     <div className="space-y-2">
                       <div className="text-base sm:text-lg lg:text-xl font-bold font-['Noto_Sans_KR'] antialiased text-gray-800">
@@ -161,4 +206,4 @@ const History: React.FC = () => {
   );
 };
 
-export default History;
+export default History;

src/pages/about/Organization.tsx

@@ -103,4 +103,4 @@ const Organization: React.FC = () => {
   );
 };
 
-export default Organization;
+export default Organization;

src/pages/business/Sections.tsx

@@ -1,18 +1,53 @@
-import React, {useState} from 'react';
+import React, {useState, useEffect} from 'react';
 import businessItems from "@/data/business";
 import type {BusinessItem} from "@/data/business";
 import DarkOverlay from "@/components/common/DarkOverlay";
 import IndicatorDots from "@/components/common/IndicatorDots";
 import { useScrollAnimation } from "@/hooks/useScrollAnimation";
+import { useLocation } from 'react-router-dom';
 
 const Sections = () => {
   const [selectedItem, setSelectedItem] = useState<BusinessItem | null>(null);
   const [currentSubIndex, setCurrentSubIndex] = useState(0);
   const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });
+  const location = useLocation();
+  
+  useEffect(() => {
+    if (location.state?.selectedItem) {
+      setSelectedItem(location.state.selectedItem);
+      setTimeout(() => {
+        const titleElement = document.querySelector('[data-title-section]');
+        if (titleElement) {
+          const elementPosition = titleElement.getBoundingClientRect().top;
+          const offsetPosition = elementPosition + window.pageYOffset - 100;
+          
+          window.scrollTo({
+            top: offsetPosition,
+            behavior: 'smooth'
+          });
+        }
+      }, 300);
+    } else {
+      setSelectedItem(businessItems[0]);
+    }
+  }, [location.state]);
 
   const handleSelectItem = (item: BusinessItem) => {
     setSelectedItem(item);
     setCurrentSubIndex(0);
+    
+    setTimeout(() => {
+      const titleElement = document.querySelector('[data-title-section]');
+      if (titleElement) {
+        const elementPosition = titleElement.getBoundingClientRect().top;
+        const offsetPosition = elementPosition + window.pageYOffset - 100;
+
+        window.scrollTo({
+          top: offsetPosition,
+          behavior: 'smooth'
+        });
+      }
+    }, 100);
   };
 
   const handlePrev = () => {
@@ -43,7 +78,7 @@ const Sections = () => {
             {businessItems.map((item, index) => (
               <div
                 key={index}
-                className="relative h-24 sm:h-32 lg:h-36 bg-cover bg-center cursor-pointer rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-200"
+                className="relative h-24 sm:h-32 lg:h-36 bg-cover bg-center cursor-pointer overflow-hidden transition-shadow duration-200"
                 style={{backgroundImage: `url(${item.image})`}}
                 onClick={() => handleSelectItem(item)}
               >
@@ -62,7 +97,7 @@ const Sections = () => {
           <div className="space-y-8 sm:space-y-12 lg:space-y-16">
             
             {/* 타이틀 */}
-            <div className="text-center space-y-4 sm:space-y-6">
+            <div className="text-center space-y-4 sm:space-y-6" data-title-section>
               <h1 className="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold font-['Noto_Sans_KR'] antialiased text-gray-800">
                 {selectedItem.label}
               </h1>

src/pages/performance/Esg.tsx

@@ -0,0 +1,437 @@
+import React, { useState } from 'react';
+import { useScrollAnimation } from "@/hooks/useScrollAnimation";
+import Tabs, { TabItem } from "@/components/common/Tabs";
+
+const tabItems: TabItem[] = [
+  { id: '1', label: 'ESG 개요' },
+  { id: '2', label: 'Environment' },
+  { id: '3', label: 'Social' },
+  { id: '4', label: 'Governance' },
+];
+
+const Esg = () => {
+  const [activeTab, setActiveTab] = useState('1');
+  const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });
+
+  const renderESGOverview = () => (
+    <div className="space-y-12">
+      <div className="text-center space-y-6">
+        <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-blue-900 font-['Noto_Sans_KR'] antialiased">
+          지속가능경영 (ESG)
+        </h2>
+        <p className="text-base sm:text-lg lg:text-xl font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed max-w-4xl mx-auto">
+          ESG는 Environment(환경), Social(사회), Governance(지배구조)의 약자로, 기업이 단순한 이윤 추구를 넘어 환경 보호, 사회적 책임, 윤리적 경영을 실천하는 지속가능경영 지표입니다.
+        </p>
+        <p className="text-base sm:text-lg lg:text-xl font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed max-w-4xl mx-auto">
+          전 세계 투자자들과 고객들은 이제 'ESG를 잘하는 기업'을 선택합니다. 반도산전(주)는 ESG 경영을 통해 책임 있는 시공, 친환경 기술 도입, 근로자와 협력사 상생, 투명한 경영을 실천하며 신뢰받는 기업으로 성장하고 있습니다.
+        </p>
+      </div>
+
+      <div className="flex justify-center">
+        <div className="w-full max-w-2xl h-80 bg-gray-100 rounded-lg flex items-center justify-center">
+          <span className="text-gray-500 text-lg font-medium font-['Noto_Sans_KR'] antialiased">ESG 개념도 이미지</span>
+        </div>
+      </div>
+
+      <div className="bg-blue-50 p-8 rounded-lg">
+        <div className="flex items-center gap-4 mb-6">
+          <div className="w-12 h-12 bg-blue-900 rounded-full flex items-center justify-center">
+            <span className="text-white font-bold text-lg">2</span>
+          </div>
+          <h3 className="text-2xl sm:text-3xl font-bold text-blue-900 font-['Noto_Sans_KR'] antialiased">
+            이크레더블 ESG 평가보고서 2등급
+          </h3>
+        </div>
+        <p className="text-base sm:text-lg font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed mb-6">
+          매년 공신력 있는 ESG 평가를 통해 지속가능경영 수준을 입증합니다. 반도산전(주)는 매년 국내 주요 ESG 평가 전문기관인 이크레더블(i-CREDBLE)을 통해 ESG(환경·사회·지배구조) 등급 평가를 정기적으로 받고 있으며, 우수 등급을 꾸준히 유지하고 있습니다.
+        </p>
+        <div className="w-full max-w-md h-60 bg-white rounded-lg border flex items-center justify-center">
+          <span className="text-gray-500 text-sm font-medium font-['Noto_Sans_KR'] antialiased">ESG 평가보고서 이미지</span>
+        </div>
+      </div>
+
+      <div className="space-y-8">
+        <h3 className="text-2xl sm:text-3xl font-bold text-blue-900 font-['Noto_Sans_KR'] antialiased text-center">
+          주요 국제 인증
+        </h3>
+        
+        <div className="grid md:grid-cols-3 gap-8">
+          <div className="text-center space-y-4">
+            <div className="w-full h-48 bg-gray-100 rounded-lg flex items-center justify-center">
+              <span className="text-gray-500 text-sm font-medium font-['Noto_Sans_KR'] antialiased">ISO 9001 인증서</span>
+            </div>
+            <h4 className="text-xl font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">ISO 9001</h4>
+            <p className="text-sm font-medium text-blue-900 font-['Noto_Sans_KR'] antialiased">품질경영시스템 인증</p>
+            <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-600 leading-relaxed">
+              고객 만족과 품질 향상의 체계적 관리. 국제표준화기구(ISO)가 제정한 품질경영시스템(QMS)에 관한 국제 표준입니다.
+            </p>
+          </div>
+
+          <div className="text-center space-y-4">
+            <div className="w-full h-48 bg-gray-100 rounded-lg flex items-center justify-center">
+              <span className="text-gray-500 text-sm font-medium font-['Noto_Sans_KR'] antialiased">ISO 14001 인증서</span>
+            </div>
+            <h4 className="text-xl font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">ISO 14001</h4>
+            <p className="text-sm font-medium text-blue-900 font-['Noto_Sans_KR'] antialiased">환경경영시스템 인증</p>
+            <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-600 leading-relaxed">
+              친환경 경영 실현을 위한 글로벌 기준. 환경영향을 최소화하기 위한 조직의 체계적인 관리 시스템에 관한 국제 표준입니다.
+            </p>
+          </div>
+
+          <div className="text-center space-y-4">
+            <div className="w-full h-48 bg-gray-100 rounded-lg flex items-center justify-center">
+              <span className="text-gray-500 text-sm font-medium font-['Noto_Sans_KR'] antialiased">ISO 45001 인증서</span>
+            </div>
+            <h4 className="text-xl font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">ISO 45001</h4>
+            <p className="text-sm font-medium text-blue-900 font-['Noto_Sans_KR'] antialiased">안전보건경영시스템 인증</p>
+            <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-600 leading-relaxed">
+              근로자 안전과 건강을 보호하는 경영체계. 산업재해 예방과 건강한 근무환경 조성을 위한 안전보건 경영시스템에 관한 국제 표준입니다.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-green-50 p-8 rounded-lg">
+        <div className="flex items-center gap-4 mb-6">
+          <div className="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center">
+            <span className="text-white font-bold text-lg">🌱</span>
+          </div>
+          <h3 className="text-2xl sm:text-3xl font-bold text-green-700 font-['Noto_Sans_KR'] antialiased">
+            스마트팜 확산기업 참여기업 등록
+          </h3>
+        </div>
+        <p className="text-base sm:text-lg font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed mb-6">
+          농림축산식품부 산하 기관으로부터 스마트팜 확산사업 참여기업으로 공식 등록 (2021년 12월)
+          <br />
+          시설원예 및 축산 분야에서 친환경 인프라 구축 역량을 인정받음
+        </p>
+        <div className="w-full max-w-md h-48 bg-white rounded-lg border flex items-center justify-center">
+          <span className="text-gray-500 text-sm font-medium font-['Noto_Sans_KR'] antialiased">스마트팜 확산기업 등록증 이미지</span>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderEnvironment = () => (
+    <div className="space-y-12">
+      <div className="text-center space-y-6">
+        <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-green-700 font-['Noto_Sans_KR'] antialiased">
+          Environment (환경)
+        </h2>
+        <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+          <div className="bg-green-50 p-6 rounded-lg">
+            <h3 className="text-xl font-bold text-green-700 font-['Noto_Sans_KR'] antialiased mb-4">
+              2025 환경경영방침
+            </h3>
+            <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed">
+              반도산전(주)는 앞으로도 친환경 자재 선택, 에너지 절감 기술 도입, 현장별 오염 저감 활동 등을 통해 환경에 대한 책임을 다하겠습니다.
+            </p>
+          </div>
+          <div className="bg-green-50 p-6 rounded-lg">
+            <h3 className="text-xl font-bold text-green-700 font-['Noto_Sans_KR'] antialiased mb-4">
+              2025 환경경영목표
+            </h3>
+            <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed">
+              지속가능한 환경보호와 법규 준수를 통한 친환경 기업 실현
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-8">
+        <h3 className="text-2xl sm:text-3xl font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased text-center">
+          환경경영 추진계획
+        </h3>
+        
+        <div className="grid gap-6">
+          <div className="bg-white border-l-4 border-green-600 p-6 shadow-sm">
+            <div className="flex items-center gap-3 mb-4">
+              <span className="text-2xl">✅</span>
+              <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">
+                환경법규 100% 준수 및 내부 기준 강화
+              </h4>
+            </div>
+            <ul className="space-y-2 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 ml-8">
+              <li>• 전 사업장에서 배출시설, 폐기물 처리 등 환경 관련 법규 준수</li>
+              <li>• 자체 사내관리기준 수립 및 모니터링 체계 강화</li>
+              <li>• 미준수 발생 시 즉시 원인 분석 및 개선조치</li>
+            </ul>
+          </div>
+
+          <div className="bg-white border-l-4 border-green-600 p-6 shadow-sm">
+            <div className="flex items-center gap-3 mb-4">
+              <span className="text-2xl">✅</span>
+              <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">
+                전 직원 환경 교육 100% 이수
+              </h4>
+            </div>
+            <ul className="space-y-2 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 ml-8">
+              <li>• 연 1회 이상 본사 및 현장 중심의 환경관리 교육 시행</li>
+              <li>• 신규 입사자와 현장 근로자를 대상으로 실무 중심 교육</li>
+              <li>• 외부 전문가 초빙 교육을 통한 인식 제고 및 사고 예방</li>
+            </ul>
+          </div>
+
+          <div className="bg-white border-l-4 border-green-600 p-6 shadow-sm">
+            <div className="flex items-center gap-3 mb-4">
+              <span className="text-2xl">✅</span>
+              <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">
+                ISO14001 환경경영시스템 구축 및 성과 공개
+              </h4>
+            </div>
+            <ul className="space-y-2 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 ml-8">
+              <li>• 국제 환경경영인증(ISO14001) 획득 및 유지</li>
+              <li>• 환경경영 실적을 지표화하여 대외 공개 및 ESG 경영 실현</li>
+              <li>• 본사 및 지사 대상 정기 심사를 통한 개선활동 추진</li>
+            </ul>
+          </div>
+
+          <div className="bg-white border-l-4 border-green-600 p-6 shadow-sm">
+            <div className="flex items-center gap-3 mb-4">
+              <span className="text-2xl">✅</span>
+              <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">
+                건설 폐기물 처리 강화 및 재활용 확대
+              </h4>
+            </div>
+            <ul className="space-y-2 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 ml-8">
+              <li>• 폐콘크리트, 폐아스팔트 등 폐기물을 전문 처리업체 위탁</li>
+              <li>• 폐기물 처리 실적 실시간 모니터링 및 투명한 배출관리</li>
+              <li>• 민원 대응 절차 및 환경오염 사고 대응 매뉴얼 수립</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderSocial = () => (
+    <div className="space-y-12">
+      <div className="text-center space-y-6">
+        <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-purple-700 font-['Noto_Sans_KR'] antialiased">
+          Social (사회)
+        </h2>
+        <p className="text-base sm:text-lg lg:text-xl font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed max-w-4xl mx-auto">
+          사람 중심 경영과 모두가 존중받는 근로환경
+        </p>
+        <p className="text-base sm:text-lg font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed max-w-4xl mx-auto">
+          반도산전(주)는 인권 존중, 안전보건, 근로자 권익 보호, 다양성 증진을 통해 지속가능한 기업 시민으로서의 책임을 실천합니다.
+        </p>
+      </div>
+
+      <div className="bg-purple-50 p-8 rounded-lg">
+        <h3 className="text-2xl sm:text-3xl font-bold text-purple-700 font-['Noto_Sans_KR'] antialiased mb-6 text-center">
+          반도산전(주) 인권경영 선언문
+        </h3>
+        <div className="bg-white p-6 rounded-lg border">
+          <p className="text-base font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed mb-4">
+            우리는 미래 성장을 주도하는 열린 기업으로서 모든 경영활동 과정에서 사람 중심 기업으로서 그 사명을 다한다.
+          </p>
+          <p className="text-base font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed mb-6">
+            이를 위해 우리는 '인간의 존엄과 가치를 보장하는 인권경영'을 선언하고 임직원이 준수하여야 할 행동규범 및 가치판단 기준으로 삼으며, 아래와 같이 그 실천을 다짐한다.
+          </p>
+          <div className="space-y-3">
+            <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">하나, 우리는 사람을 최우선으로 하는 경영을 한다.</p>
+            <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">하나, 우리는 장애, 성별, 인종, 종교, 국적, 지역 사회적 신분, 학력, 나이 직종 등의 이유로 고용상 차별하지 않으며, 상호 존중과 배려의 근무 환경을 제공한다.</p>
+            <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">하나, 우리는 직원들에게 안전하고 위생적인 근무환경을 제공한다.</p>
+            <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">하나, 우리는 어떠한 형태의 강제노동 및 아동노동도 금지한다.</p>
+            <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">하나, 우리는 직원의 결사 및 단체교섭의 자유를 보장한다.</p>
+            <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">하나, 우리는 유관기관 등을 포함한 모든 이해관계자의 인권을 존중한다.</p>
+            <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">하나, 우리는 우리가 생산하는 재화를 소비하는 소비자의 인권을 보호하기 위하여 노력한다.</p>
+            <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">하나, 우리는 국내외 환경법규를 준수하고 환경보호와 오염방지를 위하여 노력한다.</p>
+            <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">하나, 우리는 인권침해를 사전에 예방하며 적극적인 구제를 위하여 노력할 뿐만 아니라, 지속적인 인권 개선활동으로 인권경영의 선두에 선다.</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-6">
+        <div className="bg-white border-l-4 border-purple-600 p-6 shadow-sm">
+          <div className="flex items-center gap-3 mb-4">
+            <span className="text-2xl">✅</span>
+            <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">인권경영 실천</h4>
+          </div>
+          <ul className="space-y-2 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 ml-8">
+            <li>• UN 세계인권선언, ILO 핵심협약 등 국제 기준을 존중</li>
+            <li>• 경영 전반에 걸쳐 인권 침해 사전 예방 및 대응 체계 마련</li>
+            <li>• 전 임직원을 대상으로 인권경영 선언문과 행동규범 제정</li>
+          </ul>
+        </div>
+
+        <div className="bg-white border-l-4 border-purple-600 p-6 shadow-sm">
+          <div className="flex items-center gap-3 mb-4">
+            <span className="text-2xl">✅</span>
+            <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">고용상 차별 금지</h4>
+          </div>
+          <ul className="space-y-2 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 ml-8">
+            <li>• 성별, 장애, 연령, 출신지역, 학력, 종교, 외모, 성적지향 등 모든 차별 금지</li>
+            <li>• 채용부터 교육, 승진, 평가까지 공정하고 투명한 인사 운영</li>
+          </ul>
+        </div>
+
+        <div className="bg-white border-l-4 border-purple-600 p-6 shadow-sm">
+          <div className="flex items-center gap-3 mb-4">
+            <span className="text-2xl">✅</span>
+            <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">강제노동 및 아동노동 금지</h4>
+          </div>
+          <ul className="space-y-2 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 ml-8">
+            <li>• 강요, 협박, 신분증 압류, 채용수수료 요구 등 모든 형태의 강제근로 금지</li>
+            <li>• 15세 미만 고용 금지, 실습생은 보호기준에 따라 관리</li>
+            <li>• 임산부 및 미성년자의 야간·위험 근로 제한</li>
+          </ul>
+        </div>
+
+        <div className="bg-white border-l-4 border-purple-600 p-6 shadow-sm">
+          <div className="flex items-center gap-3 mb-4">
+            <span className="text-2xl">✅</span>
+            <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">적법한 근로시간 및 휴식 보장</h4>
+          </div>
+          <ul className="space-y-2 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 ml-8">
+            <li>• 주 40시간 기본근로 + 주 12시간 이내 연장근로</li>
+            <li>• 비상상황 외에는 주 60시간 초과 금지, 주 1회 이상 휴일 보장</li>
+            <li>• 휴게시간, 연차, 육아시간 등 법정 휴식 제도 철저 준수</li>
+          </ul>
+        </div>
+
+        <div className="bg-white border-l-4 border-purple-600 p-6 shadow-sm">
+          <div className="flex items-center gap-3 mb-4">
+            <span className="text-2xl">✅</span>
+            <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">임금 및 복리후생</h4>
+          </div>
+          <ul className="space-y-2 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 ml-8">
+            <li>• 최저임금 이상 지급, 초과근로수당은 법 기준보다 높게 산정</li>
+            <li>• 징계 목적의 임금 삭감 금지, 정기 건강검진 및 복지 제공</li>
+            <li>• 고용형태와 무관하게 공정한 처우와 고용 안정 보장</li>
+          </ul>
+        </div>
+
+        <div className="bg-white border-l-4 border-purple-600 p-6 shadow-sm">
+          <div className="flex items-center gap-3 mb-4">
+            <span className="text-2xl">✅</span>
+            <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">결사의 자유 보장</h4>
+          </div>
+          <ul className="space-y-2 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 ml-8">
+            <li>• 노동조합 활동 및 단체교섭의 자유 보장</li>
+            <li>• 노조가입, 활동 등으로 인한 불이익 금지</li>
+          </ul>
+        </div>
+
+        <div className="bg-white border-l-4 border-purple-600 p-6 shadow-sm">
+          <div className="flex items-center gap-3 mb-4">
+            <span className="text-2xl">✅</span>
+            <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">산업안전보건과 근로자 보호</h4>
+          </div>
+          <ul className="space-y-2 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 ml-8">
+            <li>• 전 임직원 대상 정기적 안전보건 교육</li>
+            <li>• 작업환경 측정, 보호구 지급, 유해물질 관리 등 법 기준 준수</li>
+            <li>• 산업안전보건법과 KOSHA18001 기준 기반의 체계적 관리</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderGovernance = () => (
+    <div className="space-y-12">
+      <div className="text-center space-y-6">
+        <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-blue-700 font-['Noto_Sans_KR'] antialiased">
+          Governance (지배구조)
+        </h2>
+        <p className="text-base sm:text-lg lg:text-xl font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed max-w-4xl mx-auto">
+          투명하고 책임 있는 기업 운영 체계
+        </p>
+        <p className="text-base sm:text-lg font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed max-w-4xl mx-auto">
+          반도산전(주)는 윤리경영을 기반으로 투명한 의사결정, 내부통제, 부패방지 체계를 구축하여 지속가능한 성장과 신뢰받는 기업문화를 실현합니다.
+        </p>
+      </div>
+
+      <div className="grid gap-6">
+        <div className="bg-white border-l-4 border-blue-600 p-6 shadow-sm">
+          <div className="flex items-center gap-3 mb-4">
+            <span className="text-2xl">✅</span>
+            <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">윤리경영 실천 원칙</h4>
+          </div>
+          <ul className="space-y-2 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 ml-8">
+            <li>• 모든 임직원이 정직·공정·투명하게 업무 수행</li>
+            <li>• 법령 및 사내 규정 위반 행위 무관용 원칙 적용</li>
+            <li>• 협력사, 고객 등 외부 이해관계자와의 청렴한 거래 문화 정착</li>
+          </ul>
+        </div>
+
+        <div className="bg-white border-l-4 border-blue-600 p-6 shadow-sm">
+          <div className="flex items-center gap-3 mb-4">
+            <span className="text-2xl">✅</span>
+            <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">내부신고 제도 운영</h4>
+          </div>
+          <ul className="space-y-2 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 ml-8">
+            <li>• 익명 및 비공개 보호 시스템을 갖춘 내부제보 채널 운영</li>
+            <li>• 임직원은 부정·부패·위법 행위 인지 시 신고 의무</li>
+            <li>• 조사 전담자와 윤리위원회를 통해 독립적이고 공정하게 처리</li>
+            <li>• 신고자 보호 및 보복 금지 정책 철저 이행</li>
+          </ul>
+        </div>
+
+        <div className="bg-white border-l-4 border-blue-600 p-6 shadow-sm">
+          <div className="flex items-center gap-3 mb-4">
+            <span className="text-2xl">✅</span>
+            <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">지속적인 내부통제 및 감시</h4>
+          </div>
+          <ul className="space-y-2 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 ml-8">
+            <li>• 신고 내용은 조사 후 징계 절차 및 경영진 보고</li>
+            <li>• 중대한 사안은 감사위원회 및 대표이사에 즉시 보고</li>
+            <li>• 조사는 서면 및 전산 기록으로 보관하며 정보보호 강화</li>
+          </ul>
+        </div>
+
+        <div className="bg-white border-l-4 border-blue-600 p-6 shadow-sm">
+          <div className="flex items-center gap-3 mb-4">
+            <span className="text-2xl">✅</span>
+            <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">윤리위원회 구성 및 기능</h4>
+          </div>
+          <ul className="space-y-2 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 ml-8">
+            <li>• 윤리위원회는 사내 인트라넷을 통한 운영 및 접근성 확보</li>
+            <li>• 경영관리팀이 전담하여 신고 접수, 처리, 보호 업무 수행</li>
+            <li>• 정기적인 윤리교육 및 사례 공유를 통해 임직원 윤리의식 제고</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case '1':
+        return renderESGOverview();
+      case '2':
+        return renderEnvironment();
+      case '3':
+        return renderSocial();
+      case '4':
+        return renderGovernance();
+      default:
+        return renderESGOverview();
+    }
+  };
+
+  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">
+            지속가능경영 (ESG)
+          </h1>
+          <div className="w-20 h-1 bg-blue-900 mx-auto"></div>
+        </div>
+
+        <Tabs
+          items={tabItems}
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+        >
+          {renderContent()}
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+
+export default Esg;

src/pages/performance/Sh.tsx

@@ -0,0 +1,323 @@
+import React, { useState } from 'react';
+import { useScrollAnimation } from "@/hooks/useScrollAnimation";
+import Tabs, { TabItem } from "@/components/common/Tabs";
+
+const tabItems: TabItem[] = [
+  { id: '1', label: 'SH 개요' },
+  { id: '2', label: 'SH 평가' },
+  { id: '3', label: '경영진 안전교육' },
+  { id: '4', label: '산업재해율 & 표창' },
+];
+
+const Sh = () => {
+  const [activeTab, setActiveTab] = useState('1');
+  const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });
+
+  const renderSHOverview = () => (
+    <div className="space-y-12">
+      <div className="text-center space-y-6">
+        <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-red-600 font-['Noto_Sans_KR'] antialiased">
+          안전보건경영 (SH)
+        </h2>
+        <p className="text-base sm:text-lg lg:text-xl font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed max-w-4xl mx-auto">
+          근로자의 생명과 안전을 최우선으로 하는 경영 실천
+        </p>
+        <p className="text-base sm:text-lg font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed max-w-4xl mx-auto">
+          반도산전(주)는 전 임직원의 생명과 건강을 보호하기 위해 안전보건관리규정과 연간 안전보건경영계획을 수립하고, 철저한 관리 체계 아래 재해 예방과 쾌적한 근로환경 조성을 실현하고 있습니다.
+        </p>
+      </div>
+
+      <div className="grid md:grid-cols-2 gap-8">
+        <div className="w-full h-64 bg-gray-100 rounded-lg flex items-center justify-center">
+          <span className="text-gray-500 text-lg font-medium font-['Noto_Sans_KR'] antialiased">안전보건 경영방침 PDF 이미지</span>
+        </div>
+        <div className="w-full h-64 bg-gray-100 rounded-lg flex items-center justify-center">
+          <span className="text-gray-500 text-lg font-medium font-['Noto_Sans_KR'] antialiased">안전보건 목표 PDF 이미지</span>
+        </div>
+      </div>
+
+      <div className="bg-red-50 p-8 rounded-lg">
+        <h3 className="text-2xl sm:text-3xl font-bold text-red-600 font-['Noto_Sans_KR'] antialiased mb-6">
+          반도산전(주) 안전보건관리 규정 개요
+        </h3>
+        <div className="grid md:grid-cols-2 gap-6">
+          <div className="space-y-4">
+            <div>
+              <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased mb-2">근거 법령</h4>
+              <p className="text-base font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">산업안전보건법</p>
+            </div>
+            <div>
+              <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased mb-2">적용 대상</h4>
+              <p className="text-base font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">전 임직원 및 현장 근로자</p>
+            </div>
+          </div>
+          <div>
+            <h4 className="text-lg font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased mb-3">주요 내용</h4>
+            <ul className="space-y-2 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">
+              <li>■ 안전보건 조직 및 책임 체계</li>
+              <li>■ 교육훈련, 안전점검, 위험성 평가, 작업허가 등</li>
+              <li>■ 보호구 지급, 건강검진, 사고 발생 시 조치 기준</li>
+              <li>■ 협력업체 및 하도급 근로자 보호 기준 포함</li>
+              <li>■ 대표이사가 최고 책임자로서 전사 총괄</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-8">
+        <h3 className="text-2xl sm:text-3xl font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased text-center">
+          2025년도 안전보건경영 세부계획 주요 추진내용
+        </h3>
+        
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse border border-gray-300">
+            <thead>
+              <tr className="bg-red-600 text-white">
+                <th className="border border-gray-300 px-4 py-3 text-left font-bold font-['Noto_Sans_KR'] antialiased">추진목표</th>
+                <th className="border border-gray-300 px-4 py-3 text-left font-bold font-['Noto_Sans_KR'] antialiased">세부 내용</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr className="bg-white">
+                <td className="border border-gray-300 px-4 py-3 font-medium font-['Noto_Sans_KR'] antialiased text-gray-800">안전보건 교육 100% 실시</td>
+                <td className="border border-gray-300 px-4 py-3 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">월별 정기교육 + 특별교육 + 온라인 병행, 교육만족도 조사 실시</td>
+              </tr>
+              <tr className="bg-gray-50">
+                <td className="border border-gray-300 px-4 py-3 font-medium font-['Noto_Sans_KR'] antialiased text-gray-800">자체 안전점검 강화</td>
+                <td className="border border-gray-300 px-4 py-3 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">본사·현장 자체 점검 12회 이상, 경영진 합동점검, 불시점검 포함</td>
+              </tr>
+              <tr className="bg-white">
+                <td className="border border-gray-300 px-4 py-3 font-medium font-['Noto_Sans_KR'] antialiased text-gray-800">위험성 평가 고도화</td>
+                <td className="border border-gray-300 px-4 py-3 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">전 현장 위험요소 발굴 → 개선계획 수립 → 사후조치 및 피드백 운영</td>
+              </tr>
+              <tr className="bg-gray-50">
+                <td className="border border-gray-300 px-4 py-3 font-medium font-['Noto_Sans_KR'] antialiased text-gray-800">ISO 45001 시스템 정착</td>
+                <td className="border border-gray-300 px-4 py-3 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">매뉴얼 최적화, 업무별 책임 명확화, 전담인력 교육 전원 이수</td>
+              </tr>
+              <tr className="bg-white">
+                <td className="border border-gray-300 px-4 py-3 font-medium font-['Noto_Sans_KR'] antialiased text-gray-800">경영진 주도 안전경영</td>
+                <td className="border border-gray-300 px-4 py-3 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">대표이사 주관 목표 수립 및 12회 이상 현장 점검 실행</td>
+              </tr>
+              <tr className="bg-gray-50">
+                <td className="border border-gray-300 px-4 py-3 font-medium font-['Noto_Sans_KR'] antialiased text-gray-800">기타 안전문화 정착</td>
+                <td className="border border-gray-300 px-4 py-3 text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-700">우수현장 포상, 재해사례 전파, 교육 콘텐츠 개발 및 지원</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderSHEvaluation = () => (
+    <div className="space-y-12">
+      <div className="text-center space-y-6">
+        <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-orange-600 font-['Noto_Sans_KR'] antialiased">
+          SH 평가
+        </h2>
+        <p className="text-base sm:text-lg font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed max-w-4xl mx-auto">
+          SH(Safety & Health) 평가는 사업장의 안전보건 관리체계를 외부에서 객관적으로 평가하는 제도로, 근로자의 안전 확보, 재해 예방, 법규 준수 등을 종합적으로 검토하여 기업의 안전관리 수준을 진단합니다.
+        </p>
+      </div>
+
+      <div className="bg-orange-50 p-8 rounded-lg text-center">
+        <h3 className="text-2xl sm:text-3xl font-bold text-orange-600 font-['Noto_Sans_KR'] antialiased mb-4">
+          현장의 안전은 기업의 신뢰로 이어집니다.
+        </h3>
+        <p className="text-base sm:text-lg font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed mb-6">
+          반도산전(주)는 공신력 있는 평가기관인 이크레더블(i-CREDBLE)을 통해 매년 안전보건(SH) 평가를 정기적으로 수행하고 있으며, 2025년도 기준 전체 평가 기업 중 상위 6.5% 이내에 해당하는 SH2 등급을 획득하였습니다.
+        </p>
+        <div className="flex justify-center">
+          <div className="w-full max-w-md h-80 bg-white rounded-lg border shadow-lg flex items-center justify-center">
+            <span className="text-gray-500 text-base font-medium font-['Noto_Sans_KR'] antialiased">이크레더블 SH 평가보고서 이미지</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderManagementEducation = () => (
+    <div className="space-y-12">
+      <div className="text-center space-y-6">
+        <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-blue-600 font-['Noto_Sans_KR'] antialiased">
+          경영진 안전교육
+        </h2>
+        <p className="text-base sm:text-lg lg:text-xl font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed max-w-4xl mx-auto">
+          경영진이 앞장서는 안전보건경영
+        </p>
+        <p className="text-lg sm:text-xl font-bold text-blue-600 font-['Noto_Sans_KR'] antialiased">
+          "안전은 최상위 경영 원칙입니다."
+        </p>
+        <p className="text-base sm:text-lg font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed max-w-4xl mx-auto">
+          반도산전(주)는 '안전은 선택이 아닌 책임'이라는 경영 철학 아래, 대표이사를 비롯한 전 임원진이 전사적 안전보건경영에 깊이 관여하고 실천하고 있습니다.
+        </p>
+      </div>
+
+      <div className="bg-blue-50 p-8 rounded-lg">
+        <div className="flex items-center gap-4 mb-6">
+          <span className="text-3xl">✅</span>
+          <h3 className="text-2xl sm:text-3xl font-bold text-blue-600 font-['Noto_Sans_KR'] antialiased">
+            대표이사의 안전 리더십 실천
+          </h3>
+        </div>
+        <div className="space-y-4 mb-8">
+          <p className="text-base font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed">
+            매년 안전보건공단에서 실시하는 대표이사 안전보건교육 수료
+          </p>
+          <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-600 leading-relaxed ml-4">
+            → 경영 최상위 책임자로서 안전보건관리 책임과 의무를 지속적으로 이행
+          </p>
+          <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-600 leading-relaxed ml-4">
+            → 법령 이수 기준을 넘어 실질적 현장 안전 확보를 위한 실천 중심 교육 참여
+          </p>
+        </div>
+        <div className="grid md:grid-cols-3 gap-4">
+          <div className="w-full h-48 bg-white rounded-lg border flex items-center justify-center">
+            <span className="text-gray-500 text-sm font-medium font-['Noto_Sans_KR'] antialiased">대표이사 안전교육 이수증 1</span>
+          </div>
+          <div className="w-full h-48 bg-white rounded-lg border flex items-center justify-center">
+            <span className="text-gray-500 text-sm font-medium font-['Noto_Sans_KR'] antialiased">대표이사 안전교육 이수증 2</span>
+          </div>
+          <div className="w-full h-48 bg-white rounded-lg border flex items-center justify-center">
+            <span className="text-gray-500 text-sm font-medium font-['Noto_Sans_KR'] antialiased">대표이사 안전교육 이수증 3</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-green-50 p-8 rounded-lg">
+        <div className="flex items-center gap-4 mb-6">
+          <span className="text-3xl">✅</span>
+          <h3 className="text-2xl sm:text-3xl font-bold text-green-600 font-['Noto_Sans_KR'] antialiased">
+            본사 및 지사 PM의 교육 이수 현황
+          </h3>
+        </div>
+        <div className="space-y-4 mb-8">
+          <p className="text-base font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed">
+            PM(Project Manager) 전원 산업안전보건법상 관리감독자 교육 이수
+          </p>
+          <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-600 leading-relaxed ml-4">
+            → 현장 실무 책임자로서 작업자 관리, 위험성 평가, 안전지시 능력 강화
+          </p>
+          <p className="text-sm font-medium font-['Noto_Sans_KR'] antialiased text-gray-600 leading-relaxed ml-4">
+            → 법정 이수시간 이상 수료하며 현장 사고 예방 역량 강화
+          </p>
+        </div>
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+          {Array.from({ length: 9 }, (_, index) => (
+            <div key={index} className="space-y-2">
+              <div className="w-full h-32 bg-white rounded-lg border flex items-center justify-center">
+                <span className="text-gray-500 text-xs font-medium font-['Noto_Sans_KR'] antialiased text-center">
+                  PM {index + 1}
+                  <br />
+                  수료증 1
+                </span>
+              </div>
+              <div className="w-full h-32 bg-white rounded-lg border flex items-center justify-center">
+                <span className="text-gray-500 text-xs font-medium font-['Noto_Sans_KR'] antialiased text-center">
+                  PM {index + 1}
+                  <br />
+                  수료증 2
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="bg-gray-50 p-8 rounded-lg text-center">
+        <p className="text-lg font-bold font-['Noto_Sans_KR'] antialiased text-gray-800 leading-relaxed">
+          반도산전은 안전보건을 단순한 규정 준수가 아닌,
+          <br />
+          경영진이 주도하는 실천 중심의 책임경영 체계로 구현하고 있습니다.
+        </p>
+      </div>
+    </div>
+  );
+
+  const renderAccidentRate = () => (
+    <div className="space-y-12">
+      <div className="text-center space-y-6">
+        <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-purple-600 font-['Noto_Sans_KR'] antialiased">
+          산업재해율 조회 및 표창장
+        </h2>
+      </div>
+
+      <div className="grid md:grid-cols-3 gap-8">
+        <div className="text-center space-y-4">
+          <h3 className="text-xl font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">
+            사업장 산업재해율 조회
+          </h3>
+          <p className="text-sm font-medium text-gray-600 font-['Noto_Sans_KR'] antialiased">
+            24년01월~24년12월
+          </p>
+          <div className="w-full h-64 bg-gray-100 rounded-lg flex items-center justify-center">
+            <span className="text-gray-500 text-sm font-medium font-['Noto_Sans_KR'] antialiased">산업재해율 조회서 이미지</span>
+          </div>
+        </div>
+
+        <div className="text-center space-y-4">
+          <h3 className="text-xl font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">
+            표창장
+          </h3>
+          <p className="text-sm font-medium text-gray-600 font-['Noto_Sans_KR'] antialiased">
+            현대엔지니어링 22년 안전보건관리 정기평가 상위 우수 협력사
+          </p>
+          <div className="w-full h-64 bg-gray-100 rounded-lg flex items-center justify-center">
+            <span className="text-gray-500 text-sm font-medium font-['Noto_Sans_KR'] antialiased">표창장 이미지</span>
+          </div>
+        </div>
+
+        <div className="text-center space-y-4">
+          <h3 className="text-xl font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">
+            ISO 45001 인증서
+          </h3>
+          <p className="text-sm font-medium text-gray-600 font-['Noto_Sans_KR'] antialiased">
+            안전보건경영시스템 인증
+          </p>
+          <div className="w-full h-64 bg-gray-100 rounded-lg flex items-center justify-center">
+            <span className="text-gray-500 text-sm font-medium font-['Noto_Sans_KR'] antialiased">ISO 45001 인증서 이미지</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case '1':
+        return renderSHOverview();
+      case '2':
+        return renderSHEvaluation();
+      case '3':
+        return renderManagementEducation();
+      case '4':
+        return renderAccidentRate();
+      default:
+        return renderSHOverview();
+    }
+  };
+
+  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-red-600 font-['Noto_Sans_KR'] antialiased mb-6">
+            안전보건경영 (SH)
+          </h1>
+          <div className="w-20 h-1 bg-red-600 mx-auto"></div>
+        </div>
+
+        <Tabs
+          items={tabItems}
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+        >
+          {renderContent()}
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+
+export default Sh;

src/pages/score/Certification.tsx

@@ -38,7 +38,7 @@ const certificates: Certificate[] = [
   },
 ];
 
-const Certification: React.FC = () => {
+const Certification = () => {
   const [activeTab, setActiveTab] = useState<string>("all");
   const [selectedCert, setSelectedCert] = useState<Certificate | null>(null);
 
@@ -108,4 +108,4 @@ const Certification: React.FC = () => {
   );
 };
 
-export default Certification;
+export default Certification;