feat: 부스별 이미지 슬라이드 구현

src/components/display/BoothInfo.styled.ts

@@ -1,18 +1,53 @@
 import styled from "styled-components";
 
+export const ImgContainer = styled.div`
+    margin: 0 auto;
+`;
+
 export const ImgWrapper = styled.div`
     overflow: hidden;
     width: 90%;
+    margin: 0 auto;
     aspect-ratio: 1 / 1;
     border-radius: 20px;
-    margin-bottom: 30px;
+    margin-bottom: 10px;
+
+    display: flex;
+    flex-direction: row;        
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+        display: none;
+    }
 `;
 
 export const BoothImg = styled.img`
     width: 100%;
-    height: 100%;
+    scroll-snap-align: center;
+    flex-shrink: 0;
     object-fit: cover;
     object-position: 50% 50%;
+    border-radius: 20px;
+`;
+
+export const DotWrapper = styled.div`
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: 30px;
+`;
+
+export const Dot = styled.div<{ active: boolean }>`
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: ${({ active }) => (active ? "#3F3A6C" : "#dddddd")};
+    display: inline-block;
+    transition: background-color 0.3s ease;
+    cursor: pointer;
 `;
 
 export const InfoWrapper = styled.div`

src/components/display/BoothInfo.tsx

@@ -1,23 +1,71 @@
 import React from "react";
 
-import mainPageImage from "@/assets/main_page.jpg";
+import jannaviImage from "@/assets/jannavi.jpg";
+import norazoImage from "@/assets/norazo.jpg";
 
 import { Text } from "../typography/Text";
-import { BoothDetail, BoothImg, BoothName, ImgWrapper, InfoWrapper } from "./BoothInfo.styled";
+import { BoothDetail, BoothImg, BoothName, ImgWrapper, ImgContainer, InfoWrapper, DotWrapper, Dot } from "./BoothInfo.styled";
 import { Heart } from "./Heart";
 
+import { useState, useRef,useCallback, useEffect } from "react";
+
 //zustand 로 refactor 필요
 const BoothInfo: React.FC = () => {
     const boothdetail =
         "멋쟁이사자처럼 주점에서는 노래방 마이크로 김대건이 노래를 하고 춤도 추고 히어로 서사에 대해 설명할 것입니다.";
     const boothName = "멋쟁이 사자처럼 주점";
     const num = 365;
+    const boothImg = [jannaviImage, norazoImage, jannaviImage];
+
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const slideRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+    const updateCurrentIndex = useCallback((entries: IntersectionObserverEntry[]) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const index = slideRefs.current.indexOf(entry.target as HTMLDivElement);
+          if (index !== -1) {
+            setCurrentIndex(index);
+          }
+        }
+      });
+    }, []);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(updateCurrentIndex, {
+            root: null,
+            threshold: 0.5
+        });
+
+        slideRefs.current.forEach(slide => {
+            if (slide) {
+            observer.observe(slide);
+            }
+        });
+
+        return () => {
+            slideRefs.current.forEach(slide => {
+                if (slide) {
+                    observer.unobserve(slide);
+                }
+            });
+        };
+    }, [updateCurrentIndex]);
 
     return (
-        <>
-            <ImgWrapper>
-                <BoothImg src={mainPageImage} />
-            </ImgWrapper>
+            <>
+            <ImgContainer>
+                <ImgWrapper>
+                    {boothImg.map((src, index) => {
+                            return <BoothImg key={index} src={src} ref={el => slideRefs.current[index] = el}/>;
+                    })}
+                </ImgWrapper>
+                <DotWrapper>
+                    {boothImg.map((_, index) => (
+                        <Dot key={index} active={index === currentIndex} />
+                    ))}
+                </DotWrapper>
+            </ImgContainer>
             <InfoWrapper>
                 <BoothName>
                     <Text size="20px" weight="bold" variant="#3F3A6C">