주요 사업 완료

src/data/businessItems.json

@@ -1,6 +1,8 @@
 [
   {
     "label": "정보통신공사",
+    "description": "지금의 반도산전이 있기까지\n 정보통신공사로 시작한 반도산전 30년의 탄탄한 시공능력과 도전정신이 있습니다.",
+    "description2": "정보통신공사란?\n정보통신 시스템 및 관련 설비를 설치·이전·변경·철거하거나,\n유지·보수하는 공사를 말합니다. 이는 전기공사와는 다르며,\n정보통신기술(IT) 기반의 인프라 구축에 초점을 둔 공사입니다.",
     "image": "/business/정보통신공사.jpg",
     "url": "/business/communication"
   },

src/pages/business/Sections.jsx

@@ -1,16 +1,19 @@
-import React from 'react';
+import React, {useState} from 'react';
 import businessItems from "@/data/businessItems.json";
 import DarkOverlay from "@/components/DarkOverlay.jsx";
 
 const Landmarks = () => {
+    const [selectedItem, setSelectedItem] = useState(null);
+    
     return (
         <div className="relative h-[1453px] px-6 py-10 flex-col">
             <div className="relative grid grid-cols-5 gap-2 w-7xl mx-auto h-44 bg-white">
                 {businessItems.map((item, index) => (
                     <div
                         key={index}
-                        className="relative bg-gray-100 bg-cover bg-center"
+                        className="relative bg-gray-100 bg-cover bg-center cursor-pointer"
                         style={{ backgroundImage: `url(${item.image})` }}
+                        onClick={() => setSelectedItem(item)}
                     >
                         <DarkOverlay />
                         <div className="relative p-2">
@@ -21,52 +24,74 @@ const Landmarks = () => {
             </div>
 
 
-            {/*<div className="self-stretch h-60 flex flex-col justify-center items-center gap-9">*/}
-            {/*    <div className="text-center justify-center text-neutral-800 text-5xl font-extrabold font-['Inter'] leading-10">정보통신공사</div>*/}
-            {/*    <div className="text-center justify-center text-neutral-800 text-2xl font-medium font-['Inter'] leading-10">지금의 반도산전이 있기까지 정보통신공사로 시작한 반도산전 30년의 탄탄한 시공능력과 도전정신이 있습니다.</div>*/}
-            {/*</div>*/}
-            {/*<div className="self-stretch h-96 relative bg-zinc-300/75 overflow-hidden">*/}
-            {/*    <div className="w-[611px] h-96 left-0 top-0 absolute bg-zinc-300/75 overflow-hidden">*/}
-            {/*        <img className="w-[622px] h-[717.01px] left-[-5px] top-[-160px] absolute" src="https://placehold.co/622x717" />*/}
-            {/*    </div>*/}
-            {/*    <div className="self-stretch px-4 left-[621px] top-[115.50px] absolute inline-flex flex-col justify-center items-center gap-2.5">*/}
-            {/*        <div className="justify-center text-black text-xl font-light font-['Noto_Sans_KR'] leading-9">정보통신공사란?<br/>정보통신 시스템 및 관련 설비를 설치·이전·변경·철거하거나,<br/>유지·보수하는 공사를 말합니다. 이는 전기공사와는 다르며,<br/>정보통신기술(IT) 기반의 인프라 구축에 초점을 둔 공사입니다.</div>*/}
-            {/*    </div>*/}
-            {/*</div>*/}
-            {/*<div className="self-stretch h-28 flex flex-col justify-center items-center gap-9">*/}
-            {/*    <div className="text-center justify-center text-neutral-800 text-2xl font-medium font-['Inter'] leading-10">대표공사실적</div>*/}
-            {/*</div>*/}
-            {/*<div className="self-stretch flex-1 flex flex-col justify-start items-start">*/}
-            {/*    <div className="self-stretch flex-1 flex flex-col justify-start items-start gap-2.5">*/}
-            {/*        <div className="self-stretch flex-1 px-4 py-5 bg-gradient-to-b from-white/0 to-black/80 flex flex-col justify-end items-start gap-0.5">*/}
-            {/*            <div className="justify-start"></div>*/}
-            {/*            <div className="justify-start text-white text-2xl font-bold font-['Inter']">BNK 경남은행 전산 & 데이터센터</div>*/}
-            {/*        </div>*/}
-            {/*    </div>*/}
-            {/*</div>*/}
-            {/*<div className="w-[1161px] h-24 left-[60px] top-[1147px] absolute">*/}
-            {/*    <div className="w-24 h-24 left-[1068px] top-0 absolute">*/}
-            {/*        <div className="w-14 h-14 left-[19px] top-[19px] absolute bg-zinc-300/75" />*/}
-            {/*        <div className="left-[38px] top-[31px] absolute text-center justify-start text-black text-2xl font-thin font-['Inter']">{'>'}</div>*/}
-            {/*    </div>*/}
-            {/*    <div className="w-24 h-24 left-0 top-[1px] absolute">*/}
-            {/*        <div className="w-14 h-14 left-[19px] top-[19px] absolute bg-zinc-300/75" />*/}
-            {/*        <div className="left-[38px] top-[31px] absolute text-center justify-start text-black text-2xl font-thin font-['Inter']">{'>'}</div>*/}
-            {/*    </div>*/}
-            {/*</div>*/}
-            {/*<div className="px-96 py-2 left-[142px] top-[1427px] absolute inline-flex justify-start items-center gap-2 overflow-hidden">*/}
-            {/*    <div className="w-2 h-2 relative bg-blue-900 rounded" />*/}
-            {/*    <div className="w-2 h-2 relative bg-blue-900/20 rounded" />*/}
-            {/*    <div className="w-2 h-2 relative bg-blue-900/20 rounded" />*/}
-            {/*    <div className="w-2 h-2 relative bg-blue-900/20 rounded" />*/}
-            {/*    <div className="w-2 h-2 relative bg-blue-900/20 rounded" />*/}
-            {/*    <div className="w-2 h-2 relative bg-blue-900/20 rounded" />*/}
-            {/*    <div className="w-2 h-2 relative bg-blue-900/20 rounded" />*/}
-            {/*    <div className="w-2 h-2 relative bg-blue-900/20 rounded" />*/}
-            {/*    <div className="w-2 h-2 relative bg-blue-900/20 rounded" />*/}
-            {/*    <div className="w-2 h-2 relative bg-blue-900/20 rounded" />*/}
-            {/*    <div className="w-2 h-2 relative bg-blue-900/20 rounded" />*/}
-            {/*</div>*/}
+            {selectedItem && (
+                <>
+                    {/* 타이틀 */}
+                    <div className="h-60 flex flex-col my-10 justify-center items-center gap-9">
+                        <div className="text-center justify-center text-neutral-800 text-5xl font-extrabold font-['Inter'] leading-10">{selectedItem?.label}</div>
+                        <div className="text-center justify-center text-neutral-800 text-2xl font-medium font-['Inter'] leading-10 whitespace-pre-line">{selectedItem?.description}</div>
+                    </div>
+
+                    {/* 그림 및 설명 */}
+                    <div className="max-w-7xl mx-auto h-96 bg-zinc-300/75 flex">
+                        <div className="w-1/2 h-full">
+                            <img
+                                className="w-full h-full object-cover"
+                                src={selectedItem.image}
+                                alt="image"
+                            />
+                        </div>
+                        <div className="w-1/2 flex items-center justify-center px-4">
+                            <div className="text-black text-xl font-light font-['Noto_Sans_KR'] leading-9 whitespace-pre-line">
+                                {selectedItem?.description2}
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* 중간 타이틀 */}
+                    <div className="h-28 flex flex-col justify-center my-10 items-center gap-9">
+                        <div className="text-center justify-center text-neutral-800 text-2xl font-medium font-['Inter'] leading-10">대표공사실적</div>
+                    </div>
+
+                    {/* 그외 밑에 */}
+                    <div className="relative max-w-7xl mx-auto h-128 justify-start items-start">
+                        <div className="flex items-end w-full h-full px-4 py-3 bg-gradient-to-b from-white/0 to-black/80 gap-0.5">
+                            <div className="text-white text-2xl font-bold font-['Inter']">
+                                BNK 경남은행 전산 & 데이터센터
+                            </div>
+                        </div>
+
+                        {/* 왼쪽 화살표 */}
+                        <div className="absolute left-10 top-1/2 -translate-y-1/2 w-24 h-24 flex items-center justify-center">
+                            <div className="w-14 h-14 bg-zinc-300/75 flex items-center justify-center">
+                                <span className="text-black text-lg font-thin font-['Inter']">{'<'}</span>
+                            </div>
+                        </div>
+
+                        {/* 오른쪽 화살표 */}
+                        <div className="absolute right-10 top-1/2 -translate-y-1/2 w-24 h-24 flex items-center justify-center">
+                            <div className="w-14 h-14 bg-zinc-300/75 flex items-center justify-center">
+                                <span className="text-black text-lg font-thin font-['Inter']">{'>'}</span>
+                            </div>
+                        </div>
+
+                        {/* 인디케이터 */}
+                        <div className="py-10 flex justify-center items-center gap-2">
+                            <div className="w-2 h-2 relative bg-blue-900 rounded" />
+                            <div className="w-2 h-2 relative bg-blue-900/20 rounded" />
+                            <div className="w-2 h-2 relative bg-blue-900/20 rounded" />
+                            <div className="w-2 h-2 relative bg-blue-900/20 rounded" />
+                            <div className="w-2 h-2 relative bg-blue-900/20 rounded" />
+                            <div className="w-2 h-2 relative bg-blue-900/20 rounded" />
+                            <div className="w-2 h-2 relative bg-blue-900/20 rounded" />
+                            <div className="w-2 h-2 relative bg-blue-900/20 rounded" />
+                            <div className="w-2 h-2 relative bg-blue-900/20 rounded" />
+                            <div className="w-2 h-2 relative bg-blue-900/20 rounded" />
+                            <div className="w-2 h-2 relative bg-blue-900/20 rounded" />
+                        </div>
+                    </div>
+                </>
+            )}
         </div>
     );
 };