bandosj/src/pages/main/Hero.tsx

import React, {useState, useEffect} from 'react';
import DarkOverlay from "@/components/DarkOverlay.jsx";

const images = [
    '/hero.jpg',
    // '/hero2.png',
    '/hero.jpg',
];

const Hero = () => {
    const [currentImageIndex, setCurrentImageIndex] = useState(0);

    useEffect(() => {
        const timer = setInterval(() => {
            setCurrentImageIndex((prevIndex) =>
                prevIndex === images.length - 1 ? 0 : prevIndex + 1
            );
        }, 5000);

        return () => clearInterval(timer);
    }, [currentImageIndex]);

    const handleDotClick = (index: number) => {
        setCurrentImageIndex(index);
    };

    return (
        <div
            style={{ backgroundImage: `url(${images[currentImageIndex]})` }}
            className="relative w-full h-screen bg-cover bg-center inline-flex justify-center items-center"
        >
            <DarkOverlay />

            {/* 🔹 콘텐츠 */}
            <div className="relative flex flex-col mt-15 gap-10">
                <div className="text-center justify-center text-white text-6xl font-semibold font-['Inter']">
                    스마트 네트워크 리더 반도산전
                </div>
                <div className="self-stretch text-center justify-start text-zinc-100 text-xl font-normal font-['Inter']">
                    부·울·경 시공능력평가 1위를 넘어 대한민국 시공능력평가 1위로 도약합니다.
                    <br />
                    고객의 스마트 네트워크 산업을 더욱 가치있게 만들어 나갑니다.
                </div>
                <div className="self-stretch p-2.5 inline-flex justify-center items-center gap-4 overflow-hidden">
                    <div className="flex w-44 px-8 py-3 outline outline-offset-[-0.5px] outline-white justify-center items-center overflow-hidden hover:bg-white group transition-all duration-300 cursor-pointer">
                        <div className="w-28 text-center justify-start text-white text-base font-semibold font-['Inter'] group-hover:text-blue-700">
                            ABOUT
                        </div>
                    </div>
                </div>
            </div>

            {/* 🔹 인디케이터 */}
            <div className="absolute bottom-[12vh] inline-flex gap-2">
                {images.map((_, index: number) => (
                    <div
                        key={index}
                        onClick={() => handleDotClick(index)}
                        className={`w-2 h-2 relative select-none ${index === currentImageIndex ? 'bg-white' : 'bg-white/50'} rounded cursor-pointer`}
                    />
                ))}
            </div>
        </div>
    );
};

export default Hero;