diff --git a/src/components/common/BoothDetail/BoothDetail.jsx b/src/components/common/BoothDetail/BoothDetail.jsx index 3f5ae5a..8c36078 100644 --- a/src/components/common/BoothDetail/BoothDetail.jsx +++ b/src/components/common/BoothDetail/BoothDetail.jsx @@ -80,41 +80,51 @@ export const BoothDetail = ({ onClose, booth_id, boothInfo }) => { - {Detailtitle.map((title, index) => ( -
-
- {title} - - { - if (index === 5) { - // 인스타그램 ID인 경우 - window.open( - `https://instagram.com/${boothDetailData.insta_id}`, - "_blank" - ); // 새 탭에서 열기 - } - }} - style={{ cursor: index === 5 ? "pointer" : "default" }} - > - {index === 0 && boothDetailData.detail_description} - {index === 1 && boothDetailData.host} - {index === 2 && - `${boothDetailData.start_time.slice( - 0, - 5 - )} ~ ${boothDetailData.end_time.slice(0, 5)}`} - {index === 3 && boothDetailData.entrace_fee} - {index === 4 && boothDetailData.menus} - {index === 5 && boothDetailData.insta_id} - - + {Detailtitle.map((title, index) => { + if (index === 5 && !boothDetailData.insta_id) return null; + return ( +
+
+ {title} + + {index !== 5 || boothDetailData.insta_id ? ( + { + if (index === 5 && boothDetailData.insta_id) { + // 인스타그램 ID인 경우 + window.open( + `https://instagram.com/${boothDetailData.insta_id}`, + "_blank" + ); // 새 탭에서 열기 + } + }} + style={{ + cursor: + index === 5 && boothDetailData.insta_id + ? "pointer" + : "default", + }} + > + {index === 0 && boothDetailData.detail_description} + {index === 1 && boothDetailData.host} + {index === 2 && + `${boothDetailData.start_time.slice( + 0, + 5 + )} ~ ${boothDetailData.end_time.slice(0, 5)}`} + {index === 3 && boothDetailData.entrace_fee} + {index === 4 && boothDetailData.menus} + {index === 5 && boothDetailData.insta_id} + + ) : null} + +
+ {index === 2 && } + {index === 4 && }
- {index === 2 && } - {index === 4 && } -
- ))} + ); + })} diff --git a/src/components/searchBar/SearchBar.jsx b/src/components/searchBar/SearchBar.jsx index 7246569..2c8a4fc 100644 --- a/src/components/searchBar/SearchBar.jsx +++ b/src/components/searchBar/SearchBar.jsx @@ -3,7 +3,7 @@ import * as S from "./SearchBarStyle"; import searchIcon from "../../assets/images/searchIcon.svg"; import { useBoothData } from "../../hook/useBooth"; // boothpage.jsx와 동일한 방식으로 데이터 훅 사용 -export const SearchBar = ({ setFilteredData }) => { +export const SearchBar = ({ setFilteredData, setIsSearchExecuted }) => { const [searchWord, setSearchWord] = useState(""); // 검색어 입력 상태 관리 const handleInput = (e) => { @@ -19,9 +19,15 @@ export const SearchBar = ({ setFilteredData }) => { }); const combinedBoothData = [...(boothData1 || []), ...(boothData2 || [])]; + // 검색어를 통해 부스 데이터를 필터링 const handleSearch = () => { - if (!searchWord) return; + setIsSearchExecuted(true); // 검색이 실행되면 상태를 true로 변경 + + if (!searchWord.trim()) { + setFilteredData(combinedBoothData); // 모든 부스를 다시 설정 + return; + } const filteredData = combinedBoothData?.filter( (booth) => @@ -33,9 +39,10 @@ export const SearchBar = ({ setFilteredData }) => { setFilteredData(filteredData); } else { console.log("검색 결과가 없습니다."); - setFilteredData([]); + setFilteredData([]); // 검색 결과가 없을 경우 빈 배열로 설정 } }; + const handleKeyPress = (e) => { if (e.key === "Enter") { handleSearch(); diff --git a/src/pages/booth/BoothPage.jsx b/src/pages/booth/BoothPage.jsx index 11efa6e..5afa062 100644 --- a/src/pages/booth/BoothPage.jsx +++ b/src/pages/booth/BoothPage.jsx @@ -12,7 +12,6 @@ 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 Footer from "../../components/about/Footer"; - import userLocationIcon from "../../assets/images/userLocation.svg"; export const BoothPage = () => { @@ -21,6 +20,7 @@ export const BoothPage = () => { const openModal = () => setIsModalOpen(true); const closeModal = () => setIsModalOpen(false); const [filteredData, setFilteredData] = useState([]); + const [isSearchExecuted, setIsSearchExecuted] = useState(false); // 검색 실행 상태 추가 // 날짜 선택 const getDayFromDate = (dateString) => { @@ -67,8 +67,6 @@ export const BoothPage = () => { is_reservable: undefined, }); - // console.log("boothpage:", boothData); - // 부스 디테일 띄우는 용 const [selectBooth, setSelectBooth] = useState(null); @@ -104,7 +102,7 @@ export const BoothPage = () => { setIsDropdownOpen((prevState) => ({ ...prevState, - [type]: prevState[type], // 선택 후 필터를 닫는 겁니다아 + [type]: prevState[type], // 선택 후 필터를 닫기 })); }; @@ -120,7 +118,6 @@ export const BoothPage = () => { }); const button = e.currentTarget; - button.style.transform = "rotate(0deg)"; button.style.transition = "none"; @@ -130,29 +127,24 @@ export const BoothPage = () => { }, 10); }; - // 부스 위치 버튼 클릭시 ! - 나중에 카카오맵에서 해당 위치를 카카오 맵에 띄우기 const handleBoothLocation = (boothId) => { const booth = boothData.find((booth) => booth.id === boothId); setHighlightedBooth(booth); }; - // 날짜 선택 용 const handleDateChange = (date) => { setSelectedDate(date); }; - // 부스 리스트 선택하기 const toggleBoothList = () => { setIsBoothListOpen(!isBoothListOpen); }; - // 부스 디테일 표시 용 const handleSelectBooth = (booth) => { setSelectBooth(booth); setHighlightedBooth(booth); }; - // boothData가 null 또는 undefined일 수 있으니 체크 const filteredBooths = Array.isArray(boothData) ? boothData.filter((booth) => { const timeMatch = @@ -168,7 +160,6 @@ export const BoothPage = () => { }) : []; // boothData가 배열이 아닐 경우 빈 배열로 처리 - // 부스 유형에 따른 초기 마커 이미지 설정 함수 const getInitialMarkerImage = (booth) => { let markerImage = booth.category === "음식점" ? nonselect_JU : nonselect_GI; @@ -207,15 +198,12 @@ export const BoothPage = () => { try { await loadKakaoMap(); - - // 지도 컨테이너 확인 const mapContainer = document.getElementById("map"); if (!mapContainer) { - console.error("지도 컨테이너를 찾을 수 없습니다. DOM 상태를 확인하세요."); + console.error("지도 컨테이너를 찾을 수 없습니다."); return; } - // Kakao 지도 초기화 const options = { center: new window.kakao.maps.LatLng(37.5577, 127.00099), level: 3, @@ -223,7 +211,6 @@ export const BoothPage = () => { mapRef.current = new window.kakao.maps.Map(mapContainer, options); - if (boothData?.length > 0) { createMarkers(boothData); } @@ -233,7 +220,6 @@ export const BoothPage = () => { }; const createMarkers = (booths) => { - booths.forEach((booth) => { try { if (!window.kakao || !window.kakao.maps) { @@ -241,7 +227,10 @@ export const BoothPage = () => { return; } - const markerPosition = new window.kakao.maps.LatLng(booth.latitude, booth.longitude); + const markerPosition = new window.kakao.maps.LatLng( + booth.latitude, + booth.longitude + ); const markerImage = new window.kakao.maps.MarkerImage( booth.category === "음식점" ? nonselect_JU : nonselect_GI, new window.kakao.maps.Size(30, 36) @@ -253,7 +242,6 @@ export const BoothPage = () => { map: mapRef.current, }); - window.kakao.maps.event.addListener(marker, "click", () => { setHighlightedBooth(booth); }); @@ -265,33 +253,23 @@ export const BoothPage = () => { }); }; - useEffect(() => { initializeMap(); }, [boothData]); - // 필터링된 부스 데이터가 변경될 때마다 마커 업데이트 useEffect(() => { if (filteredBooths.length > 0 && mapRef.current) { - // 기존 마커 삭제 markersRef.current.forEach(({ marker }) => marker.setMap(null)); markersRef.current = []; - - // 새 마커 생성 createMarkers(filteredBooths); } - }, [filteredBooths, mapRef.current]); - + }, [filteredBooths]); - - // 선택된 부스에 따라 마커 이미지 변경 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); marker.setImage(initialImage); } @@ -300,9 +278,7 @@ export const BoothPage = () => { } if (highlightedBooth && mapRef.current) { - // 선택된 부스의 위치 좌표로 맵의 중심 이동 mapRef.current.relayout(); - setTimeout(() => { const newCenter = new window.kakao.maps.LatLng( highlightedBooth.latitude, @@ -310,21 +286,17 @@ export const BoothPage = () => { ); mapRef.current.panTo(newCenter); }, 200); - } - // 선택된 부스가 있을 경우, 해당 마커만 업데이트 markersRef.current.forEach(({ boothId, marker }) => { const isHighlighted = highlightedBooth && highlightedBooth.id === boothId; - // 선택된 부스의 마커를 변경 if (isHighlighted) { let markerImage; if (highlightedBooth.category === "음식점") { - markerImage = select_JU; // 선택된 주점일 경우 + markerImage = select_JU; } else if (highlightedBooth.category === "기타") { - markerImage = select_GI; // 선택된 기타일 경우 - } else { + markerImage = select_GI; } marker.setImage( new window.kakao.maps.MarkerImage( @@ -333,8 +305,7 @@ export const BoothPage = () => { ) ); } 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); @@ -378,27 +349,22 @@ export const BoothPage = () => { useEffect(() => { let watchId; - let userMarker = null; // 사용자 위치 마커를 저장할 변수 + let userMarker = null; if (navigator.geolocation && followUser) { setHighlightedBooth(null); - - // 위치 변경 감지하여 실시간 위치 추적 + watchId = navigator.geolocation.watchPosition( (position) => { const { latitude, longitude } = position.coords; - // 사용자 위치 업데이트 setUserLocation({ latitude, longitude }); - // 카카오맵 SDK가 로드되고 mapRef가 정의된 이후에만 실행 if (window.kakao && window.kakao.maps && mapRef.current) { - // 기존 마커가 존재하면 삭제 if (userMarker) { userMarker.setMap(null); } - // 새로운 사용자 위치 마커 생성 const userPosition = new window.kakao.maps.LatLng( latitude, longitude @@ -408,19 +374,17 @@ export const BoothPage = () => { map: mapRef.current, title: "현재 위치", image: new window.kakao.maps.MarkerImage( - // 파란색 원형 점 이미지 (마커 커스텀) userLocationIcon, - new window.kakao.maps.Size(24, 24), // 마커 사이즈 - { offset: new window.kakao.maps.Point(12, 12) } // 마커 중앙 위치 설정 + new window.kakao.maps.Size(24, 24), + { offset: new window.kakao.maps.Point(12, 12) } ), }); - // 지도 중심을 새로운 사용자 위치로 이동 mapRef.current.panTo(userPosition); } }, (error) => { - setUserLocation({ latitude: 37.5577, longitude: 127.00099 }); // 기본 위치로 설정 + setUserLocation({ latitude: 37.5577, longitude: 127.00099 }); }, { enableHighAccuracy: true, @@ -432,40 +396,32 @@ export const BoothPage = () => { return () => { if (watchId) { - navigator.geolocation.clearWatch(watchId); // 위치 추적 멈추기 + navigator.geolocation.clearWatch(watchId); } if (userMarker) { - userMarker.setMap(null); // 컴포넌트 언마운트 시 기존 마커 삭제 + userMarker.setMap(null); } }; - }, [mapRef.current, followUser]); // 토글링을 넣어서 껐다켰다 가능. + }, [mapRef.current, followUser]); useEffect(() => { - // `isBoothListOpen` 상태가 변경될 때마다 사용자의 위치를 중앙으로 이동 if (userLocation && mapRef.current) { - // 리스트가 열리거나 닫힐 때 지도의 크기를 재조정하고, 부드럽게 이동 - mapRef.current.relayout(); // 지도 크기 재조정 - - // 약간의 지연 후 부드럽게 지도 중심 이동 + mapRef.current.relayout(); setTimeout(() => { const userPosition = new window.kakao.maps.LatLng( userLocation.latitude, userLocation.longitude - ); - // 지도의 중심을 사용자 위치로 이동 + ); mapRef.current.panTo(userPosition); - }, 200); // 200ms 지연을 두어 `relayout` 후 자연스럽게 이동 + }, 200); } - }, [isBoothListOpen, userLocation]); // centering - + }, [isBoothListOpen, userLocation]); return ( <> - {/* 상단 날짜 선택 버튼 */} - - {/* 카카오맵 자리 */} + { - {/* 부스 리스트 */} setFollowUser(!followUser)}> @@ -500,7 +455,6 @@ export const BoothPage = () => { - {/* 필터 섹션 (부스 리스트 안에) */} { > 전체 - handleSelect("type", "음식점")} > 음식점 - handleSelect("type", "기타")} > @@ -607,11 +559,9 @@ export const BoothPage = () => { - {/* 초기화 버튼 */} 초기화 - {/* 부스 리스트 */} 부스 클릭 시 테이블링 예약 링크로 이동 가능합니다. @@ -620,7 +570,7 @@ export const BoothPage = () => { filteredData.map((booth) => ( (boothRefs.current[booth.id] = el)} // 각 부스에 ref 추가 + ref={(el) => (boothRefs.current[booth.id] = el)} $isColored={ highlightedBooth && highlightedBooth.id === booth.id } @@ -653,7 +603,7 @@ export const BoothPage = () => { filteredBooths.map((booth) => ( (boothRefs.current[booth.id] = el)} // 각 부스에 ref 추가 + ref={(el) => (boothRefs.current[booth.id] = el)} $isColored={ highlightedBooth && highlightedBooth.id === booth.id } @@ -683,22 +633,25 @@ export const BoothPage = () => { )) ) : ( - 현재 운영중인 부스가 없어요! + isSearchExecuted && ( + + 해당 부스가 존재하지 않습니다. + + ) )}