모바일 반도산전은

src/components/main/Hero.tsx

@@ -1,71 +1,93 @@
-import React, {useState, useEffect} from 'react';
+import React, { useState, useEffect } from "react";
 import DarkOverlay from "@/components/common/DarkOverlay.jsx";
-import {IMAGE_PREFIX} from "@/constants";
+import { IMAGE_PREFIX } from "@/constants";
 import IndicatorDots from "@/components/common/IndicatorDots";
-import {useScrollAnimation} from "@/hooks/useScrollAnimation";
+import { useScrollAnimation } from "@/hooks/useScrollAnimation";
 import { Link } from "react-router-dom";
 
-const images = [
-    `${IMAGE_PREFIX}/banner.png`,
-];
+const images = [`${IMAGE_PREFIX}/banner.png`];
 
 const Hero = () => {
-    const [currentImageIndex, setCurrentImageIndex] = useState(0);
-    const { ref, isVisible } = useScrollAnimation({ threshold: 0.2 });
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const { ref, isVisible } = useScrollAnimation({ threshold: 0.2 });
 
-    useEffect(() => {
-        const timer = setInterval(() => {
-            setCurrentImageIndex((prevIndex) =>
-                prevIndex === images.length - 1 ? 0 : prevIndex + 1
-            );
-        }, 5000);
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentImageIndex((prev) =>
+        prev === images.length - 1 ? 0 : prev + 1,
+      );
+    }, 5000);
 
-        return () => clearInterval(timer);
-    }, [currentImageIndex]);
+    return () => clearInterval(timer);
+  }, []);
 
-    const handleDotClick = (index: number) => {
-        setCurrentImageIndex(index);
-    };
+  const handleDotClick = (index: number) => setCurrentImageIndex(index);
 
-    return (
-        <div
-            ref={ref}
-            style={{ backgroundImage: `url(${images[currentImageIndex]})` }}
-            className="relative w-full h-screen bg-cover bg-center inline-flex justify-center items-center"
-        >
-            <DarkOverlay />
+  return (
+    <div
+      ref={ref}
+      className="relative w-full h-screen overflow-hidden flex items-center justify-center"
+    >
+      {/* 배경 이미지 ― 화면에 꽉 채우고 잘라냄 */}
+      <img
+        src={images[currentImageIndex]}
+        alt=""
+        className="absolute inset-0 w-full h-full object-cover"
+        draggable={false}
+      />
 
-            <div className={`relative flex flex-col mt-15 gap-6 lg:gap-10 px-4 lg:px-0 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
-                <div className="text-center justify-center text-white text-3xl sm:text-3xl md:text-4xl lg:text-6xl font-semibold font-['Noto_Sans_KR'] antialiased">
-                    <div className="flex flex-col sm:flex-row justify-center items-center gap-1 sm:gap-2">
-                        <span>스마트 네트워크 리더</span>
-                        <span>반도산전</span>
-                    </div>
-                </div>
-                <div className="self-stretch text-center justify-start text-zinc-100 font-medium font-['Noto_Sans_KR'] px-4 lg:px-0 space-y-2 antialiased">
-                    <div className="text-sm sm:text-base lg:text-lg xl:text-xl">부·울·경 시공능력평가 1위를 넘어</div>
-                    <div className="text-sm sm:text-base lg:text-lg xl:text-xl">대한민국 시공능력평가 1위로 도약합니다.</div>
-                    <div className="text-sm sm:text-base lg:text-lg xl:text-xl">고객의 스마트 네트워크 산업을</div>
-                    <div className="text-sm sm:text-base lg:text-lg xl:text-xl">더욱 가치있게 만들어 나갑니다.</div>
-                </div>
-                <div className="self-stretch p-2.5 inline-flex justify-center items-center gap-4 overflow-hidden">
-                    <Link to="/about/history" className="flex w-32 sm:w-36 lg:w-44 px-6 lg: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="text-center justify-start text-white text-sm lg:text-base font-semibold font-['Noto_Sans_KR'] group-hover:text-blue-700 antialiased">
-                            ABOUT
-                        </div>
-                    </Link>
-                </div>
-            </div>
+      {/* 어둡게 덮는 오버레이 (필요 없다면 제거) */}
+      <DarkOverlay />
+
+      {/* 중앙 콘텐츠 */}
+      <div
+        className={`relative z-20 flex flex-col mt-15 gap-6 lg:gap-10 px-4 lg:px-0 transition-all duration-1000 ${
+          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
+        }`}
+      >
+        <div className="text-center text-white text-3xl sm:text-3xl md:text-4xl lg:text-6xl font-semibold font-['Noto_Sans_KR'] antialiased flex flex-col sm:flex-row justify-center items-center gap-1 sm:gap-2">
+          <span>스마트 네트워크 리더</span>
+          <span>반도산전</span>
+        </div>
 
-            <div className="absolute bottom-[12vh]">
-                <IndicatorDots
-                  count={images.length}
-                  activeIndex={currentImageIndex}
-                  onClick={handleDotClick}
-                />
+        <div className="self-stretch text-center text-zinc-100 font-medium font-['Noto_Sans_KR'] px-4 lg:px-0 space-y-2 antialiased">
+          {[
+            "부·울·경 시공능력평가 1위를 넘어",
+            "대한민국 시공능력평가 1위로 도약합니다.",
+            "고객의 스마트 네트워크 산업을",
+            "더욱 가치있게 만들어 나갑니다.",
+          ].map((line) => (
+            <div
+              key={line}
+              className="text-sm sm:text-base lg:text-lg xl:text-xl"
+            >
+              {line}
             </div>
+          ))}
         </div>
-    );
+
+        <div className="self-stretch p-2.5 inline-flex justify-center items-center gap-4">
+          <Link
+            to="/about/history"
+            className="flex w-32 sm:w-36 lg:w-44 px-6 lg:px-8 py-3 outline outline-offset-[-0.5px] outline-white justify-center items-center hover:bg-white group transition-all duration-300"
+          >
+            <span className="text-white group-hover:text-blue-700 text-sm lg:text-base font-semibold font-['Noto_Sans_KR'] antialiased">
+              ABOUT
+            </span>
+          </Link>
+        </div>
+      </div>
+
+      {/* 인디케이터 점 */}
+      <div className="absolute bottom-[12vh] z-20">
+        <IndicatorDots
+          count={images.length}
+          activeIndex={currentImageIndex}
+          onClick={handleDotClick}
+        />
+      </div>
+    </div>
+  );
 };
 
 export default Hero;