temp

src/components/common/IndicatorDots.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+interface IndicatorDotsProps {
+  /**
+   * 전체 인디케이터(dot)의 개수
+   * 예: 이미지 개수, 슬라이드 개수 등
+   */
+  count: number;
+
+  /**
+   * 현재 활성화된 인디케이터의 인덱스
+   * 예: 현재 보이는 이미지나 슬라이드의 순번
+   */
+  activeIndex: number;
+
+  /**
+   * 인디케이터(dot)를 클릭했을 때 호출되는 콜백 함수
+   * 클릭된 인덱스가 인자로 전달됨
+   */
+  onClick: (index: number) => void;
+
+  /**
+   * 인디케이터를 감싸는 최상위 div의 추가 클래스명
+   * 위치 조정 등 외부 스타일을 조정할 때 사용
+   */
+  className?: string;
+}
+
+/**
+ * 범용 인디케이터(Dots) 컴포넌트
+ * - 사용자가 현재 보고 있는 항목을 시각적으로 표시하며
+ * - 클릭 시 해당 항목으로 이동하는 기능을 제공함
+ */
+const IndicatorDots: React.FC<IndicatorDotsProps> = ({count, activeIndex, onClick, className = '',}) => {
+  return (
+    <div className={`inline-flex gap-2 ${className}`}>
+      {Array.from({length: count}).map((_, index) => (
+        <div
+          key={index}
+          onClick={() => onClick(index)}
+          className={`w-2 h-2 relative select-none ${
+            index === activeIndex ? 'bg-white' : 'bg-white/50'
+          } rounded cursor-pointer`}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default IndicatorDots;

src/components/main/Hero.tsx

@@ -1,6 +1,7 @@
 import React, {useState, useEffect} from 'react';
 import DarkOverlay from "@/components/common/DarkOverlay.jsx";
 import {IMAGE_PREFIX} from "@/constants";
+import IndicatorDots from "@/components/common/IndicatorDots";
 
 const images = [
     `${IMAGE_PREFIX}/hero.jpg`,
@@ -51,15 +52,13 @@ const Hero = () => {
                 </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 className="absolute bottom-[12vh]">
+                <IndicatorDots
+                  count={images.length}
+                  activeIndex={currentImageIndex}
+                  onClick={handleDotClick}
+                />
             </div>
         </div>
     );

src/data/menuItems.ts

@@ -36,7 +36,7 @@ const menuItems: MenuItem[] = [
             { label: "연혁", href: "history" },
             { label: "찾아오시는 길", href: "location" },
             { label: "조직도", href: "organization" },
-            { label: "갤러리", href: "partners" }
+            { label: "갤러리", href: "gallery" }
         ]
     },
     {

src/pages/about/Gallery.tsx

@@ -0,0 +1,36 @@
+import React, {useState} from "react";
+
+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>
+      <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>
+        <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>
+      </div>
+    </div>
+  );
+};
+
+export default Gallery;