|
|
@@ -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;
|