diff --git a/src/components/display/BoothInfo.styled.ts b/src/components/display/BoothInfo.styled.ts index d23c3f3..fae8d87 100644 --- a/src/components/display/BoothInfo.styled.ts +++ b/src/components/display/BoothInfo.styled.ts @@ -13,7 +13,7 @@ export const ImgWrapper = styled.div` margin-bottom: 10px; display: flex; - flex-direction: row; + flex-direction: row; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; diff --git a/src/components/display/BoothInfo.tsx b/src/components/display/BoothInfo.tsx index a114a00..d6dd39c 100644 --- a/src/components/display/BoothInfo.tsx +++ b/src/components/display/BoothInfo.tsx @@ -1,14 +1,22 @@ import React from "react"; +import { useState, useRef, useCallback, useEffect } from "react"; import jannaviImage from "@/assets/jannavi.jpg"; import norazoImage from "@/assets/norazo.jpg"; import { Text } from "../typography/Text"; -import { BoothDetail, BoothImg, BoothName, ImgWrapper, ImgContainer, InfoWrapper, DotWrapper, Dot } 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 = @@ -19,32 +27,32 @@ const BoothInfo: React.FC = () => { 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); - } - } - }); + 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 + threshold: 0.5, }); - - slideRefs.current.forEach(slide => { + + slideRefs.current.forEach((slide) => { if (slide) { - observer.observe(slide); + observer.observe(slide); } }); - + return () => { - slideRefs.current.forEach(slide => { + slideRefs.current.forEach((slide) => { if (slide) { observer.unobserve(slide); } @@ -53,11 +61,11 @@ const BoothInfo: React.FC = () => { }, [updateCurrentIndex]); return ( - <> + <> {boothImg.map((src, index) => { - return slideRefs.current[index] = el}/>; + return (slideRefs.current[index] = el)} />; })} diff --git a/src/pages/BoothDetailPage.styled.tsx b/src/pages/BoothDetailPage.styled.tsx index d492f07..e068c81 100644 --- a/src/pages/BoothDetailPage.styled.tsx +++ b/src/pages/BoothDetailPage.styled.tsx @@ -32,7 +32,7 @@ export const ContentContainer = styled.form` border: 1px solid #3f3a6c; border-radius: 30px; position: relative; - + textarea { color: #5d5a88; border: none; @@ -70,5 +70,4 @@ export const SubBtn = styled.button` right: 10px; `; -export const SendImg = styled.img` -`; +export const SendImg = styled.img``;