Browse Source

갤러리 디테일

home 6 months ago
parent
commit
22ad1809d9

BIN
public/image/gallery/hero.jpg


+ 1 - 0
src/data/business.ts

@@ -9,6 +9,7 @@ export interface BusinessItem {
   subImages?: string[];
 }
 
+// FIXME : 첫번째 객체와 같이 subImages 및 description 달면 알아서 적용 됨.
 const businessSections: BusinessItem[] = [
   {
     label: "정보통신공사",

+ 1 - 2
src/data/partners.ts

@@ -14,8 +14,7 @@ const partnerProjects: PartnerProject[] = [
   },
   {
     title: "롯데캐슬 드메르",
-    description:
-      "발주처 : 롯데건설\n부산 북항 초고층 복합개발사업 중 통신공사 (롯데 드메르)\n계약금액 : 1,351,200,000원",
+    description: "발주처 : 롯데건설\n부산 북항 초고층 복합개발사업 중 통신공사 (롯데 드메르)\n계약금액 : 1,351,200,000원",
     imageUrl: `${PARTNER_IMAGE_PREFIX}/DL.png`,
   },
   {

+ 1 - 0
src/data/project.ts

@@ -10,6 +10,7 @@ export interface MajorProject {
   subImgUrl?: string[]
 }
 
+// FIXME : subImagUrl(주요 랜드마크 시공현장 카드 클릭시 노출되는 이미지 리스트)
 const projectList: MajorProject[] = [
   {
     title: "BNK 경남은행 전산 & 데이터센터",

+ 48 - 15
src/pages/about/Gallery.tsx

@@ -1,32 +1,65 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import IndicatorDots from "@/components/common/IndicatorDots";
 
-const images = [];
-
 const Gallery: React.FC = () => {
-  
+  // FIXME : public/image/gallery 경로에 사진 추가하면 됨 
+  const images: string[] = [
+    "/image/gallery/hero.jpg",
+    "/image/gallery/hero.jpg",
+    "/image/gallery/hero.jpg",
+  ];
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handlePrev = () => {
+    setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
+  };
+
+  const handleDotClick = (index: number) => {
+    setCurrentIndex(index);
+  };
+
   return (
     <div className="relative flex flex-col items-center max-w-7xl mx-auto mt-15 mb-10 space-y-10">
-      <img className="w-full h-[849px]" src="/image/hero.jpg" />
+      <img
+        className="w-full h-[849px] object-cover"
+        src={images[currentIndex]}
+        alt={`slide-${currentIndex}`}
+      />
+
+      {/* 인디케이터 Dots */}
       <div className="absolute z-10 bottom-[12vh]">
         <IndicatorDots
-          count={2}
-          activeIndex={0}
-          onClick={() => {}}
+          count={images.length}
+          activeIndex={currentIndex}
+          onClick={handleDotClick}
         />
       </div>
-      <div className="text-black text-4xl font-bold font-['Inter']">김해지사 전경</div>
+
+      <div className="text-black text-4xl font-bold font-['Inter']">
+        김해지사 전경
+      </div>
 
       {/* 화살표 */}
-      <div className="absolute inset-0">
-        <div className="absolute top-1/2 right-10 -translate-y-[150%] cursor-pointer">
+      <div className="absolute inset-0 pointer-events-none">
+        <div
+          className="absolute top-1/2 left-10 -translate-y-1/2 cursor-pointer pointer-events-auto"
+          onClick={handlePrev}
+        >
           <div className="w-14 h-14 bg-zinc-300/75 flex items-center justify-center">
-            <div className="text-black text-2xl font-thin font-['Inter']">{'>'}</div>
+            <div className="text-black text-2xl font-thin">{'<'}</div>
           </div>
         </div>
-        <div className="absolute top-1/2 left-10 -translate-y-[150%] cursor-pointer">
+        <div
+          className="absolute top-1/2 right-10 -translate-y-1/2 cursor-pointer pointer-events-auto"
+          onClick={handleNext}
+        >
           <div className="w-14 h-14 bg-zinc-300/75 flex items-center justify-center">
-            <div className="text-black text-2xl font-thin font-['Inter']">{'<'}</div>
+            <div className="text-black text-2xl font-thin">{'>'}</div>
           </div>
         </div>
       </div>
@@ -34,4 +67,4 @@ const Gallery: React.FC = () => {
   );
 };
 
-export default Gallery;
+export default Gallery;

+ 0 - 1
src/pages/about/Partners.tsx

@@ -1,6 +1,5 @@
 import React, {useState} from "react";
 import partnerList from '@/data/partners';
-import projectList from "@/data/project";
 import Pagination from "@/components/common/Pagination";
 
 const Gallery: React.FC = () => {

+ 1 - 1
src/pages/score/Certification.tsx

@@ -22,6 +22,7 @@ const categories: Category[] = [
   { id: "iso", label: "ISO 인증서" },
 ];
 
+// FIXME : public/image 하위에 cert 폴더 만들고, 인증서 쭈셔넣으면 됨
 const certificates: Certificate[] = [
   {
     id: 1,
@@ -35,7 +36,6 @@ const certificates: Certificate[] = [
     title: "상표등록증",
     imageUrl: "https://placehold.co/564x788?text=Design+1",
   },
-  // ... 생략 가능
 ];
 
 const Certification: React.FC = () => {