diff --git a/src/apis/booth.js b/src/apis/booth.js index 3932b85..90a4926 100644 --- a/src/apis/booth.js +++ b/src/apis/booth.js @@ -7,9 +7,20 @@ export const getBoothList = async ({ is_reservable, }) => { try { - const res = await instance.get( - `api/v1/booth/?day=${day}&category=${category}&location=${location}&is_night=${is_night}&is_reservable=${is_reservable}` - ); + // URLSearchParams 객체 생성 + const params = new URLSearchParams(); + + // 파라미터가 존재할 때만 추가 + if (day) params.append("day", day); + if (category) params.append("category", category); + if (location) params.append("location", location); + if (is_night !== undefined) params.append("is_night", is_night); + if (is_reservable !== undefined) + params.append("is_reservable", is_reservable); + + // 파라미터들을 포함한 GET 요청 + const res = await instance.get(`api/v1/booth/?${params.toString()}`); + console.log("booth.js에서의 res 값", res); return res; } catch (err) { console.log(err); diff --git a/src/apis/boothDetail.js b/src/apis/boothDetail.js index 49dc800..b787b1d 100644 --- a/src/apis/boothDetail.js +++ b/src/apis/boothDetail.js @@ -1,5 +1,5 @@ import { instance } from "./instance"; -export const getBoothDetail = async ({ booth_id }) => { +export const getBoothDetail = async (booth_id) => { try { const res = await instance.get(`api/v1/booth/detail/${booth_id}`); return res; diff --git a/src/assets/images/tabling.svg b/src/assets/images/tabling.svg new file mode 100644 index 0000000..26a1bdb --- /dev/null +++ b/src/assets/images/tabling.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/common/BoothDetail/BoothDetail.jsx b/src/components/common/BoothDetail/BoothDetail.jsx new file mode 100644 index 0000000..61e4c09 --- /dev/null +++ b/src/components/common/BoothDetail/BoothDetail.jsx @@ -0,0 +1,108 @@ +import * as S from "./styled"; +import { useState, useRef } from "react"; +import tablingImg from "../../../assets/images/tabling.svg"; +import CancelIcon from "../../../assets/images/X_Icon.svg"; +import { useNavigate } from "react-router-dom"; +import { + Detailtitle, + BoothDetailData, +} from "../../../constant/StarDetail/data"; +import { useBoothDetailData } from "../../../hook/useBoothDetail"; + +export const BoothDetail = ({ onClose, booth_id }) => { + const navigate = useNavigate(); + const [currentIndex, setCurrentIndex] = useState(0); + const imgWrapperRef = useRef(null); + const { boothDetailData } = useBoothDetailData(booth_id); + console.log("boothDetail컴포넌트에서 :", boothDetailData); + if (!boothDetailData) { + return
Loading...
; + } + const totalImages = BoothDetailData[0].src.length; + + const handleTouchStart = (e) => { + imgWrapperRef.current.startX = e.touches[0].clientX; + }; + + const handleTouchEnd = (e) => { + const endX = e.changedTouches[0].clientX; + const difference = imgWrapperRef.current.startX - endX; + + if (difference > 50) { + handleNext(); + } else if (difference < -50) { + handlePrev(); + } + }; + + const handlePrev = () => { + setCurrentIndex((prevIndex) => + prevIndex === 0 ? totalImages - 1 : prevIndex - 1 + ); + }; + + const handleNext = () => { + setCurrentIndex((prevIndex) => + prevIndex === totalImages - 1 ? 0 : prevIndex + 1 + ); + }; + + const MoveonTabling = () => { + navigate("/"); + }; + // const DetailData = useBoothDetailData(); + return ( + + + +
{BoothDetailData[0].booth_name}
+ {/* {BoothDetailData[0].id_night===true && } */} + +
+ {BoothDetailData[0].is_night ? "밤부스" : "낮부스"} +
+
{BoothDetailData[0].location}
+
{BoothDetailData[0].category}
+ + + + + + + {currentIndex + 1}/{totalImages} + + + + + {Detailtitle.map((title, index) => ( +
+
+ {title} + + {index === 0 && BoothDetailData[0].description} + {index === 1 && BoothDetailData[0].operation} + {index === 2 && BoothDetailData[0].time} + {index === 3 && BoothDetailData[0].fee} + {index === 4 && BoothDetailData[0].menu} + {index === 5 && BoothDetailData[0].insta} + +
+ {index === 2 && } + {index === 4 && } +
+ ))} + + + + + + + ); +}; diff --git a/src/components/common/BoothDetail/styled.js b/src/components/common/BoothDetail/styled.js new file mode 100644 index 0000000..c4f30f9 --- /dev/null +++ b/src/components/common/BoothDetail/styled.js @@ -0,0 +1,177 @@ +import styled, { keyframes } from "styled-components"; +const slideUp = keyframes` + 0% { + transform: translateY(100%); + + } + 100% { + transform: translateY(0); + } +`; +export const DetailWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: fixed; + bottom: 0; + width: 370px; + height: 55%; + gap: 20px; + background-color: #fff; + border-radius: 20px 20px 0px 0px; + box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.7); + z-index: 10; + + animation: ${slideUp} 0.5s ease-out forwards; + + @media (max-width: 375px) { + height: 80%; + } +`; +export const DetailContent = styled.div` + display: flex; + flex-direction: column; + width: 90%; + gap: 15px; + @media (max-width: 375px) { + margin-top: 1rem; + } +`; + +export const NameContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: 15px; + .BoothName { + color: #000; + text-align: center; + ${({ theme }) => theme.fonts.AppleSDGothicNeoB00}; + + font-size: 15px; + } +`; + +export const tagContainer = styled.div` + display: flex; + flex-direction: row; + + gap: 5px; + + .tag { + display: flex; + align-items: center; + justify-content: center; + width: 46px; + height: 16px; + border-radius: 5px; + padding: 7px; + text-align: center; + font-family: ${({ theme }) => + theme.fonts.AppleSDGothicNeoL00["font-family"]}; + font-size: 10px; + } + + .tag:nth-child(1) { + background-color: #d4eaff; + color: #00326d; + } + .tag:nth-child(2) { + background-color: #ffd5d5; + color: #f00; + } + .tag:nth-child(3) { + background-color: #ffd9a1; + color: #db4200; + } +`; +export const CloseBtn = styled.img` + cursor: pointer; + margin-left: auto; +`; +export const imgWrapper = styled.div` + display: flex; + position: relative; +`; +export const BoothDetailImage = styled.img` + width: 100%; + height: 240px; + object-fit: cover; +`; +export const imgCount = styled.div` + display: flex; + width: 27.463px; + height: 15.152px; + padding: 7px 10px; + justify-content: center; + align-items: center; + gap: 10px; + flex-shrink: 0; + border-radius: 30px; + background-color: #fff; + z-index: 2; + position: absolute; + right: 10px; + top: 10px; +`; +export const DetailInfo = styled.div` + display: flex; + flex-direction: column; +`; + +export const Details = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + gap: 10px; + .InfoContainer { + display: flex; + flex-direction: row; + gap: 20px; + } + .InfoWrapper { + display: flex; + flex-direction: column; + } +`; + +export const DetailTitle = styled.div` + display: flex; + justify-content: start; + align-items: center; + width: 20%; + font-family: ${({ theme }) => theme.fonts.AppleSDGothicNeoB00["font-family"]}; + font-size: 12px; +`; +export const DetailContext = styled.div` + display: flex; + background-color: ${(props) => (props.index === 5 ? "#ffe3e3" : "FFE1DA")}; + color: ${(props) => (props.index === 5 ? "#ED6308" : "000")}; + + border-radius: ${(props) => (props.index === 5 ? "5px" : "0")}; + padding: ${(props) => (props.index === 5 ? "0.2rem" : "0")}; + + font-family: ${({ theme }) => theme.fonts.AppleSDGothicNeoR00["font-family"]}; + font-size: 10px; +`; +export const Divider = styled.div` + display: flex; + width: 100%; + height: 1px; + margin-top: 6px; + background-color: #b6b6b6; +`; +export const tabling = styled.img` + display: flex; + width: 90%; + padding: 7px 59px 3px 68px; + justify-content: flex-end; + align-items: flex-start; + gap: 10px; + border-radius: 5.25px; + background: #e9ff99; + object-fit: cover; + margin-bottom: 10px; +`; diff --git a/src/components/performanceP/StarDetail/StarDetail.jsx b/src/components/performanceP/StarDetail/StarDeatil.jsx similarity index 96% rename from src/components/performanceP/StarDetail/StarDetail.jsx rename to src/components/performanceP/StarDetail/StarDeatil.jsx index 4740697..ad94e1f 100644 --- a/src/components/performanceP/StarDetail/StarDetail.jsx +++ b/src/components/performanceP/StarDetail/StarDeatil.jsx @@ -1,4 +1,4 @@ -import * as S from "./styled"; +import * as S from "../../common/BoothDetail/styled"; import CancelIcon from "../../../assets/images/X_Icon.svg"; import { StarDetailInfo, Detailtitle } from "../../../constant/StarDetail/data"; export const StarDetail = ({ onClose }) => { diff --git a/src/components/performanceP/StarDetail/styled.js b/src/components/performanceP/StarDetail/styled.js deleted file mode 100644 index 2ad553d..0000000 --- a/src/components/performanceP/StarDetail/styled.js +++ /dev/null @@ -1,108 +0,0 @@ -import styled, { keyframes } from "styled-components"; -const slideUp = keyframes` - 0% { - transform: translateY(100%); - - } - 100% { - transform: translateY(0); - } -`; -export const DetailWrapper = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - position: fixed; - bottom: 0; - width: 100%; - height: 68%; - background-color: #fff; - border-radius: 20px 20px 0px 0px; - box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.7); - z-index: 10; - padding-bottom: 0.5rem; - - animation: ${slideUp} 0.5s ease-out forwards; -`; -export const DetailContent = styled.div` - display: flex; - flex-direction: column; - width: 90%; - gap: 15px; -`; - -export const NameContainer = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - - .StarName { - color: #000; - text-align: center; - ${({ theme }) => theme.fonts.AppleSDGothicNeoB00}; - - font-size: 15px; - } -`; - -export const CloseBtn = styled.img` - cursor: pointer; -`; -export const StarDetailImage = styled.img` - width: 100%; - height: 240px; - object-fit: cover; -`; - -export const DetailInfo = styled.div` - display: flex; - flex-direction: column; -`; - -export const Details = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - gap: 10px; - .InfoContainer { - display: flex; - flex-direction: row; - gap: 20px; - } - .InfoWrapper { - display: flex; - flex-direction: column; - } -`; - -export const DetailTitle = styled.div` - display: flex; - justify-content: start; - align-items: center; - width: 20%; - font-family: ${({ theme }) => theme.fonts.AppleSDGothicNeoB00["font-family"]}; - font-size: 12px; -`; -export const DetailContext = styled.div` - display: flex; - background-color: ${(props) => - props.index === 2 ? "#ffe3e3" : props.index === 3 ? "#FFEADA" : "FFE1DA"}; - color: ${(props) => - props.index === 2 ? "#ED6308" : props.index === 3 ? "#ED3F08" : "000"}; - - border-radius: ${(props) => - props.index === 2 || props.index === 3 ? "5px" : "0"}; - padding: ${(props) => - props.index === 2 || props.index === 3 ? "0.2rem" : "0"}; - - font-family: ${({ theme }) => theme.fonts.AppleSDGothicNeoR00["font-family"]}; - font-size: 10px; -`; -export const Divider = styled.div` - display: flex; - width: 100%; - height: 1px; - margin-top: 6px; - background-color: #b6b6b6; -`; diff --git a/src/constant/StarDetail/data.js b/src/constant/StarDetail/data.js index 5898a2f..c197a80 100644 --- a/src/constant/StarDetail/data.js +++ b/src/constant/StarDetail/data.js @@ -1,15 +1,30 @@ -const StarDetailInfo = [ +const Detailtitle = [ + "한줄소개", + "운영주체", + "운영시간", + "입장료", + "대표메뉴", + "인스타", +]; + +const BoothDetailData = [ { - id: 1, - star: "에스파", - starImg: + booth_id: 1, + booth_name: "치즈네컷", + is_night: false, + location: "팔정도", + category: "부스", + img_total_count: "4", + src: [ "https://cdn2.smentertainment.com/wp-content/uploads/2024/08/%EC%97%90%EC%8A%A4%ED%8C%8C-%EC%B2%AB-%EC%A0%95%EA%B7%9C-Armageddon-%EC%9D%B4%EB%AF%B8%EC%A7%80.jpg", - description: "안녕하세요! 4세대 대표 아이돌 에스파입니다!", - song: "supernova", + "https://i.namu.wiki/i/8IHblumlMpEi-m7qx5W95uJ1wotTls8j_UcFe2eWqhU9r_8bENxsmZX5jK8JddOptXUGaY0FVyNF-CHqw0XM8Q.webp", + ], + description: "냉동 치즈 녹이기", + operation: "전효준", + time: "15:00-17:00", + fee: "1.5", + menu: "오뎅탕", insta: "@gj1111", - youtube: "youtube link", }, ]; - -const Detailtitle = ["한줄소개", "대표곡", "인스타그램", "유튜브"]; -export { StarDetailInfo, Detailtitle }; +export { Detailtitle, BoothDetailData }; diff --git a/src/hook/useBooth.js b/src/hook/useBooth.js index c81678c..3ca25e5 100644 --- a/src/hook/useBooth.js +++ b/src/hook/useBooth.js @@ -1,11 +1,15 @@ // src/hooks/useMain.js import { useState, useEffect } from "react"; import { getBoothList } from "../apis/booth"; -import { useParams } from "react-router-dom"; -export const useBoothData = () => { +export const useBoothData = ({ + day, + category, + location, + is_night, + is_reservable, +}) => { const [boothData, setBoothData] = useState(null); - const { day, category, location, is_night, is_reservable } = useParams(); const fetchBoothData = async () => { try { const res = await getBoothList( @@ -26,7 +30,7 @@ export const useBoothData = () => { useEffect(() => { fetchBoothData(); - }, []); + }, [day, category, location, is_night, is_reservable]); return { boothData }; }; diff --git a/src/hook/useBoothDetail.js b/src/hook/useBoothDetail.js index c75305c..81a72d6 100644 --- a/src/hook/useBoothDetail.js +++ b/src/hook/useBoothDetail.js @@ -1,11 +1,9 @@ // src/hooks/useMain.js import { useState, useEffect } from "react"; import { getBoothDetail } from "../apis/boothDetail"; -import { useParams } from "react-router-dom"; -export const useBoothDetailData = () => { +export const useBoothDetailData = (booth_id) => { const [boothDetailData, setBoothDetailData] = useState(null); - const { booth_id } = useParams(); const fetchBoothDetailData = async () => { try { const res = await getBoothDetail(booth_id); @@ -19,8 +17,10 @@ export const useBoothDetailData = () => { }; useEffect(() => { - fetchBoothDetailData(); - }, []); + if (booth_id) { + fetchBoothDetailData(); + } + }, [booth_id]); return { boothDetailData }; }; diff --git a/src/pages/about/AboutPage.jsx b/src/pages/about/AboutPage.jsx index e84190f..7eee1a2 100644 --- a/src/pages/about/AboutPage.jsx +++ b/src/pages/about/AboutPage.jsx @@ -1,7 +1,7 @@ import * as S from "./AboutPage.styled"; -import { AboutCard } from "@components/about/AboutCard/AboutCard" -import { LikeLionLink } from "@components/about/LikeLionLink/LikeLionLink" -import { Review } from "@components/about/Review/Review" +import { AboutCard } from "@components/about/AboutCard/AboutCard"; +import { LikeLionLink } from "@components/about/LikeLionLink/LikeLionLink"; +import { Review } from "@components/about/Review/Review"; export const AboutPage = () => { return ( diff --git a/src/pages/booth/BoothPage.jsx b/src/pages/booth/BoothPage.jsx index cf1056d..6b3cdcd 100644 --- a/src/pages/booth/BoothPage.jsx +++ b/src/pages/booth/BoothPage.jsx @@ -10,25 +10,43 @@ import nonselect_GI from "../../assets/images/nonselect_GI.png"; import nonselect_JU from "../../assets/images/nonselect_JU.png"; import select_GI from "../../assets/images/select_GI.png"; import select_JU from "../../assets/images/select_JU.png"; - +import { BoothDetail } from "@components/common/BoothDetail/BoothDetail"; export const BoothPage = () => { // 모달 상태 추가 const [isModalOpen, setIsModalOpen] = useState(false); const openModal = () => setIsModalOpen(true); const closeModal = () => setIsModalOpen(false); + // 초기 날짜 선택 용 + const getDayFromDate = (dateString) => { + const dayPart = dateString.split("(")[1]; // 요일 부분 추출 + return dayPart ? dayPart.replace(")", "") : ""; // ")" 기호 제거 후 반환 + }; + + const translateDayToEnglish = (day) => { + const dayMap = { + 월: "Mon", + 화: "Tue", + }; + return dayMap[day] || ""; // 해당 요일의 영어 이름 반환 + }; - const { boothData } = useBoothData(); + const [selectedDate, setSelectedDate] = useState("10/7(월)"); + const dayInKorean = getDayFromDate(selectedDate); // "월" 추출 + const dayInEnglish = translateDayToEnglish(dayInKorean); // "Mon"으로 변환 - // 초기 날짜 선택 용 - const [selectedDate, setSelectedDate] = useState('10/7(월)'); + //목록리스트 API + const { boothData } = useBoothData({ + day: dayInEnglish, + }); + console.log("boothpage:", boothData); // 부스 리스트를 띄울 지 말지 const [isBoothListOpen, setIsBoothListOpen] = useState(true); // 부스 필터링 용 - const [selectedTime, setSelectedTime] = useState('시간'); - const [selectedType, setSelectedType] = useState('유형'); - const [selectedLocation, setSelectedLocation] = useState('위치'); + const [selectedTime, setSelectedTime] = useState("시간"); + const [selectedType, setSelectedType] = useState("유형"); + const [selectedLocation, setSelectedLocation] = useState("위치"); const [isDropdownOpen, setIsDropdownOpen] = useState({ time: false, type: false, @@ -42,7 +60,6 @@ export const BoothPage = () => { const [highlightedBooth, setHighlightedBooth] = useState(null); const boothRefs = useRef({}); - // 마킹 용 배열 const mapRef = useRef(null); const markersRef = useRef([]); @@ -57,29 +74,29 @@ export const BoothPage = () => { }; const handleSelect = (type, value) => { - if (type === 'time') setSelectedTime(value); - if (type === 'type') setSelectedType(value); - if (type === 'location') setSelectedLocation(value); + if (type === "time") setSelectedTime(value); + if (type === "type") setSelectedType(value); + if (type === "location") setSelectedLocation(value); setIsDropdownOpen((prevState) => ({ ...prevState, - [type]: prevState[type], // 선택 후 필터를 닫는 겁니다아 + [type]: prevState[type], // 선택 후 필터를 닫는 겁니다아 })); }; const resetFilters = (e) => { - setSelectedTime('시간'); - setSelectedType('유형'); - setSelectedLocation('위치'); + setSelectedTime("시간"); + setSelectedType("유형"); + setSelectedLocation("위치"); const button = e.currentTarget; - button.style.transform = 'rotate(0deg)'; - button.style.transition = 'none'; - + button.style.transform = "rotate(0deg)"; + button.style.transition = "none"; + setTimeout(() => { - button.style.transition = 'transform 1s ease'; - button.style.transform = 'rotate(-360deg)'; + button.style.transition = "transform 1s ease"; + button.style.transform = "rotate(-360deg)"; }, 10); }; @@ -87,7 +104,7 @@ export const BoothPage = () => { const handleBoothLocation = (boothId) => { const booth = BoothData.find((booth) => booth.id === boothId); setHighlightedBooth(booth); - } + }; // 날짜 선택 용 const handleDateChange = (date) => { @@ -106,9 +123,13 @@ export const BoothPage = () => { }; const filteredBooths = BoothData.filter((booth) => { - const timeMatch = selectedTime === '시간' || booth.filters.time === selectedTime; - const typeMatch = selectedType === '유형' || booth.filters.type === selectedType; - const locationMatch = selectedLocation === '위치' || booth.filters.location === selectedLocation; + const timeMatch = + selectedTime === "시간" || booth.filters.time === selectedTime; + const typeMatch = + selectedType === "유형" || booth.filters.type === selectedType; + const locationMatch = + selectedLocation === "위치" || + booth.filters.location === selectedLocation; // 모든 필터 조건을 만족하는 부스만 반환 return timeMatch && typeMatch && locationMatch; @@ -116,21 +137,25 @@ export const BoothPage = () => { // 부스 유형에 따른 초기 마커 이미지 설정 함수 const getInitialMarkerImage = (booth) => { - let markerImage = booth.filters.type === '주점' ? nonselect_JU : nonselect_GI; + let markerImage = + booth.filters.type === "주점" ? nonselect_JU : nonselect_GI; - return new window.kakao.maps.MarkerImage(markerImage, new window.kakao.maps.Size(30, 36)); + return new window.kakao.maps.MarkerImage( + markerImage, + new window.kakao.maps.Size(30, 36) + ); }; // 카카오맵 마커 생성 useEffect(() => { - const script = document.createElement('script'); + const script = document.createElement("script"); script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=972351b156b1bdfe825cb095c12d1e56&autoload=false`; script.async = true; document.head.appendChild(script); script.onload = () => { window.kakao.maps.load(() => { - const container = document.getElementById('map'); + const container = document.getElementById("map"); const options = { center: new window.kakao.maps.LatLng(37.5567, 127.0003), level: 3, @@ -139,7 +164,10 @@ export const BoothPage = () => { // 초기 마커 생성 filteredBooths.forEach((booth) => { - const markerPosition = new window.kakao.maps.LatLng(booth.latitude, booth.longitude); + const markerPosition = new window.kakao.maps.LatLng( + booth.latitude, + booth.longitude + ); const markerImage = getInitialMarkerImage(booth); // 유형에 따라 초기 마커 이미지 설정 const marker = new window.kakao.maps.Marker({ position: markerPosition, @@ -148,7 +176,7 @@ export const BoothPage = () => { }); // 마커 클릭 이벤트 설정 - window.kakao.maps.event.addListener(marker, 'click', () => { + window.kakao.maps.event.addListener(marker, "click", () => { handleBoothLocation(booth.id); // 부스 선택 }); @@ -163,13 +191,12 @@ export const BoothPage = () => { }; }, []); - // 선택된 부스에 따라 마커 이미지 변경 useEffect(() => { // 선택된 부스가 없으면 모든 마커를 초기화 if (!highlightedBooth) { markersRef.current.forEach(({ marker, boothId }) => { - const booth = BoothData.find(b => b.id === boothId); // 해당 부스 데이터 찾기 + const booth = BoothData.find((b) => b.id === boothId); // 해당 부스 데이터 찾기 if (booth) { // 초기 마커 이미지로 변경 const initialImage = getInitialMarkerImage(booth); @@ -181,28 +208,35 @@ export const BoothPage = () => { if (highlightedBooth && mapRef.current) { // 선택된 부스의 위치 좌표로 맵의 중심 이동 - const newCenter = new window.kakao.maps.LatLng(highlightedBooth.latitude, highlightedBooth.longitude); + const newCenter = new window.kakao.maps.LatLng( + highlightedBooth.latitude, + highlightedBooth.longitude + ); mapRef.current.panTo(newCenter); } - + // 선택된 부스가 있을 경우, 해당 마커만 업데이트 markersRef.current.forEach(({ boothId, marker }) => { const isHighlighted = highlightedBooth && highlightedBooth.id === boothId; - + // 선택된 부스의 마커를 변경 if (isHighlighted) { let markerImage; - if (highlightedBooth.filters.type === '주점') { + if (highlightedBooth.filters.type === "주점") { markerImage = select_JU; // 선택된 주점일 경우 - } else if (highlightedBooth.filters.type === '기타') { + } else if (highlightedBooth.filters.type === "기타") { markerImage = select_GI; // 선택된 기타일 경우 } else { - } - marker.setImage(new window.kakao.maps.MarkerImage(markerImage, new window.kakao.maps.Size(32, 40))); + marker.setImage( + new window.kakao.maps.MarkerImage( + markerImage, + new window.kakao.maps.Size(32, 40) + ) + ); } else { // 선택되지 않은 부스는 초기 이미지로 유지 - const booth = BoothData.find(b => b.id === boothId); // 해당 부스 데이터 찾기 + const booth = BoothData.find((b) => b.id === boothId); // 해당 부스 데이터 찾기 if (booth) { const initialImage = getInitialMarkerImage(booth); marker.setImage(initialImage); @@ -213,7 +247,10 @@ export const BoothPage = () => { useEffect(() => { if (highlightedBooth && boothRefs.current[highlightedBooth.id]) { - boothRefs.current[highlightedBooth.id].scrollIntoView({ behavior: 'smooth', block: 'start' }); + boothRefs.current[highlightedBooth.id].scrollIntoView({ + behavior: "smooth", + block: "start", + }); } }, [highlightedBooth]); @@ -227,37 +264,43 @@ export const BoothPage = () => { mapRef.current.relayout(); setTimeout(() => { - window.kakao.maps.event.trigger(mapRef.current, 'resize'); + window.kakao.maps.event.trigger(mapRef.current, "resize"); if (highlightedBooth) { - const newCenter = new window.kakao.maps.LatLng(highlightedBooth.latitude, highlightedBooth.longitude); + const newCenter = new window.kakao.maps.LatLng( + highlightedBooth.latitude, + highlightedBooth.longitude + ); mapRef.current.panTo(newCenter); } }, 200); } } }, [isBoothListOpen, selectBooth, highlightedBooth]); - return ( <> {/* 상단 날짜 선택 버튼 */} - + {/* 카카오맵 자리 */} - + handleDateChange('10/7(월)')} + $active={selectedDate === "10/7(월)"} + onClick={() => handleDateChange("10/7(월)")} > 10/7(월) handleDateChange('10/8(화)')} + $active={selectedDate === "10/8(화)"} + onClick={() => handleDateChange("10/8(화)")} > 10/8(화) @@ -265,49 +308,104 @@ export const BoothPage = () => { - {/* 부스 리스트 */} - {isBoothListOpen ? : } + + {isBoothListOpen ? : } + {/* 필터 섹션 (부스 리스트 안에) */} - toggleDropdown('time')}> + toggleDropdown("time")} + > {selectedTime} - + + + {isDropdownOpen.time && ( - handleSelect('time', '시간')}>전체 - handleSelect('time', '낮')}>낮 - handleSelect('time', '밤')}>밤 + handleSelect("time", "시간")} + > + 전체 + + handleSelect("time", "낮")}> + 낮 + + handleSelect("time", "밤")}> + 밤 + )} - toggleDropdown('type')}> + toggleDropdown("type")} + > {selectedType} - + + + {isDropdownOpen.type && ( - handleSelect('type', '유형')}>전체 - handleSelect('type', '푸드트럭')}>푸드트럭 - handleSelect('type', '주점')}>주점 - handleSelect('type', '기타')}>기타 + handleSelect("type", "유형")} + > + 전체 + + handleSelect("type", "푸드트럭")} + > + 푸드트럭 + + handleSelect("type", "주점")} + > + 주점 + + handleSelect("type", "기타")} + > + 기타 + )} - toggleDropdown('location')}> + toggleDropdown("location")} + > {selectedLocation} - + + + {isDropdownOpen.location && ( - handleSelect('location', '위치')}>전체 - handleSelect('location', '팔정도')}>팔정도 - handleSelect('location', '만해광장')}>만해광장 + handleSelect("location", "위치")} + > + 전체 + + handleSelect("location", "팔정도")} + > + 팔정도 + + handleSelect("location", "만해광장")} + > + 만해광장 + )} @@ -319,13 +417,17 @@ export const BoothPage = () => { {/* 부스 리스트 */} - 부스 클릭 시 테이블링 예약 링크로 이동 가능합니다. + + 부스 클릭 시 테이블링 예약 링크로 이동 가능합니다. + {filteredBooths.length > 0 ? ( filteredBooths.map((booth) => ( boothRefs.current[booth.id] = el} // 각 부스에 ref 추가 - $isColored={highlightedBooth && highlightedBooth.id === booth.id} + ref={(el) => (boothRefs.current[booth.id] = el)} // 각 부스에 ref 추가 + $isColored={ + highlightedBooth && highlightedBooth.id === booth.id + } onClick={() => handleSelectBooth(booth)} > {/* 나중에 좋아요순으로 수정 */} @@ -336,94 +438,29 @@ export const BoothPage = () => { {booth.owner} - { - e.stopPropagation(); - handleBoothLocation(booth.id) - }}> + { + e.stopPropagation(); + handleBoothLocation(booth.id); + }} + > 위치 보기 )) ) : ( - - 현재 운영중인 부스가 없어요! - + 현재 운영중인 부스가 없어요! )} {/* 선택한 부스 디테일 */} {selectBooth && ( - <> - {/* setSelectBooth(null)} /> */} - - - setSelectBooth(null)}>X - - - {selectBooth.boothName} - - {selectBooth.filters.time}부스 - {selectBooth.filters.type} - {selectBooth.filters.location} - - - - - - - {selectBooth.description && ( - - 한줄소개 - {selectBooth.description} - - )} - {selectBooth.owner && ( - - 운영주체 - {selectBooth.owner} - - )} - {selectBooth.operationTime && ( - - 운영시간 - {selectBooth.operationTime} - - )} - - {selectBooth.entranceFee && ( - - 입장료 - {selectBooth.entranceFee} - - )} - {selectBooth.menu && ( - - 대표메뉴 - {selectBooth.menu} - - )} - - {selectBooth.instagram && ( - - 인스타 - {selectBooth.instagram} - - )} - {selectBooth.filters.type === "주점" && ( - - 테이블링 예약하기 - - - )} - - - - + setSelectBooth(null)} + /> )} {isModalOpen && } diff --git a/src/router.jsx b/src/router.jsx index 54d625a..ea6e8d4 100644 --- a/src/router.jsx +++ b/src/router.jsx @@ -15,10 +15,6 @@ export const router = createBrowserRouter([ element: , }, //부스페이지 - { - path: "/:booth_id/:day/:category/:location/:is_night/:is_reservable", - element: , - }, { path: "/booth-test", element: ,