갤러리 완성

src/pages/about/Gallery.tsx

@@ -1,32 +1,33 @@
 import React, {useState} from "react";
+import IndicatorDots from "@/components/common/IndicatorDots";
+
+const images = [];
 
 const Gallery: React.FC = () => {
   
   return (
-    <div className="relative max-w-7xl mx-auto mt-10">
-      <img className="w-[1132px] h-[849px] left-[74px] top-[80px] absolute shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)]" src="https://placehold.co/1132x849" />
-      <div className="px-96 py-2 left-[153px] top-[886px] absolute inline-flex justify-start items-center gap-2 overflow-hidden">
-        <div className="w-2 h-2 relative bg-white rounded" />
-        <div className="w-2 h-2 relative bg-white/50 rounded" />
-        <div className="w-2 h-2 relative bg-white/50 rounded" />
-        <div className="w-2 h-2 relative bg-white/50 rounded" />
-        <div className="w-2 h-2 relative bg-white/50 rounded" />
-        <div className="w-2 h-2 relative bg-white/50 rounded" />
-        <div className="w-2 h-2 relative bg-white/50 rounded" />
-        <div className="w-2 h-2 relative bg-white/50 rounded" />
-        <div className="w-2 h-2 relative bg-white/50 rounded" />
-        <div className="w-2 h-2 relative bg-white/50 rounded" />
-        <div className="w-2 h-2 relative bg-white/50 rounded" />
+    <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" />
+      <div className="absolute z-10 bottom-[12vh]">
+        <IndicatorDots
+          count={2}
+          activeIndex={0}
+          onClick={() => {}}
+        />
       </div>
-      <div className="left-[543px] top-[974px] absolute text-center justify-start text-black text-4xl font-bold font-['Inter']">김해지사 전경</div>
-      <div className="w-[1067px] h-24 left-[107px] top-[457px] absolute">
-        <div className="w-24 h-24 left-[974px] 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 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="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>
         </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 className="absolute top-1/2 left-10 -translate-y-[150%] cursor-pointer">
+          <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>
         </div>
       </div>
     </div>