Skip to content

Commit

Permalink
feat(#75) : 배포 주소 시설 연동
Browse files Browse the repository at this point in the history
  • Loading branch information
@KangBoSeok-kor
KangBoSeok-kor committed Dec 11, 2024
1 parent 400ad45 commit 91f9e06
Show file tree
Hide file tree
Showing 4 changed files with 356 additions and 65 deletions.
45 changes: 34 additions & 11 deletions src/app/place/placedetail/page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const PlaceDetailPage = () => {

const ActualPlaceDetailPage = () => {
const searchParams = useSearchParams();
const id = parseInt(searchParams.get("id"), 10);
const placeId = parseInt(searchParams.get("placeId"), 10);
const router = useRouter();
const [isClient, setIsClient] = useState(false);
const [isMapBottomSheetOpen, setIsMapBottomSheetOpen] = useState(false);
Expand All @@ -36,7 +36,8 @@ const ActualPlaceDetailPage = () => {
const [isUploadAction, setIsUploadAction] = useState(false);
const fileInputRef = useRef(null);
const { setPlaceName, setVisitDate, setCategory } = useReviewStore();
const selectedCard = cards.find((card) => card.id === id);
const [selectedCard, setSelectedCard] = useState(null);
const [isLoading, setIsLoading] = useState(true);

const { isLoaded } = useJsApiLoader({
googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
Expand All @@ -54,21 +55,37 @@ const ActualPlaceDetailPage = () => {
if (data.status === "OK" && data.results.length > 0) {
const { lat, lng } = data.results[0].geometry.location;
setCenter({ lat, lng });
} else {
alert("주소에 대한 좌표를 가져올 수 없습니다.");
}
} catch (error) {
console.error("Error fetching coordinates:", error);
}
};

useEffect(() => {
if (placeId) {
fetchPlaceDetails(placeId);
}
}, [placeId]);
const fetchPlaceDetails = async (placeId) => {
try {
const response = await axios.get(`https://api.daengplace.com/places/${placeId}`);
console.log(response.data);
setSelectedCard(response.data.data);
} catch (error) {
console.error("Error fetching place details:", error);
setSelectedCard(null);
} finally {
setIsLoading(false);
}
};

useEffect(() => {
if (selectedCard) {
setPlaceName(selectedCard.title);
setPlaceName(selectedCard.name);
setCategory(selectedCard.category);
setIsClient(true);
setAddress(selectedCard.address);
fetchCoordinates(selectedCard.address);
setAddress(selectedCard.location);
fetchCoordinates(selectedCard.location);
}
}, [selectedCard]);

Expand Down Expand Up @@ -168,12 +185,18 @@ const ActualPlaceDetailPage = () => {
<PlaceInfo
isLiked={isLiked}
toggleLike={toggleLike}
address={selectedCard.address}
address={selectedCard.location}
handleAddressClick={handleAddressClick}
category={selectedCard.category}
placeName={selectedCard.title}
openingHours={selectedCard.hours}
features={selectedCard.features}
placeName={selectedCard.name}
openhours={selectedCard.operationHour}
features={{
inside: selectedCard.inside,
outside: selectedCard.outside,
isParking: selectedCard.is_parking,
petFee: selectedCard.pet_fee,
weightLimit: selectedCard.weight_limit,
}}
/>
<ReviewSection />
<WriteReviewButton onClick={handleWriteReviewButtonClick} />
Expand Down
135 changes: 125 additions & 10 deletions src/app/place/placemap/page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import styled from "styled-components";
import { useRouter, useSearchParams } from "next/navigation";
import { useJsApiLoader } from "@react-google-maps/api";
import { sidoOptions, gunguOptions } from "@/data/data";
import axios from "axios";
import SearchBar from "@/components/place/placemap/SearchBar/SearchBar";
import Tabs from "@/components/place/placemap/Tabs/Tabs";
import FilterButtons from "@/components/place/placemap/FilterButtons/FilterButtons";
Expand Down Expand Up @@ -40,11 +41,13 @@ const ActualPlaceMap = () => {
const [selectedSido, setSelectedSido] = useState("");
const [selectedGungu, setSelectedGungu] = useState("");
const [showGunguDropdown, setShowGunguDropdown] = useState(false);
const [allMarkers, setAllMarkers] = useState([]);
const [markers, setMarkers] = useState([]);

const { isLoaded } = useJsApiLoader({
googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
});

useEffect(() => {
if (!isNaN(lat) && !isNaN(lng)) {
setCenter({ lat, lng });
Expand All @@ -53,6 +56,38 @@ const ActualPlaceMap = () => {
}
}, [lat, lng]);

useEffect(() => {
if (userLocation) {
setSelectedCategory("전체");
fetchPlaces(userLocation.lat, userLocation.lng);
}
}, [userLocation]);

const fetchPlaces = async (latitude, longitude) => {
try {
const response = await axios.get("https://api.daengplace.com/places", {
params: { latitude, longitude, page: 1, size: 20 },
});
const places = response.data.data.places || [];
const fetchedMarkers = places.map((place) => ({
id: place.placeId,
position: { lat: place.latitude, lng: place.longitude },
name: place.name,
category: place.category,
is_parking: place.is_parking,
inside: place.inside,
outside: place.outside,
weight_limit: place.weight_limit,
pet_fee: place.pet_fee,
operationHour: place.operationHour,
}));
setAllMarkers(fetchedMarkers);
setMarkers(fetchedMarkers);
console.log(places);
} catch (error) {
console.error("Error fetching places:", error);
}
};
const handleSidoChange = (event) => {
const value = event.target.value;
setSelectedSido(value);
Expand All @@ -63,12 +98,96 @@ const ActualPlaceMap = () => {
const handleGunguChange = (event) => setSelectedGungu(event.target.value);

const handleBackToList = () => {
router.push("/place/placesearch");
if (!isNaN(lat) && !isNaN(lng)) {
router.push(`/place/placesearch?lat=${lat}&lng=${lng}`);
} else {
alert("지도 데이터를 불러올 수 없습니다.");
}
};

const categoryMapping = {
미용: "서비스",
반려동물용품: "서비스",
위탁관리: "서비스",
식당: "음식점",
카페: "음식점",
문예회관: "문화시설",
박물관: "문화시설",
미술관: "문화시설",
여행지: "문화시설",
동물병원: "의료시설",
동물약국: "의료시설",
};

const handleCategoryClick = (category) => {
setSelectedCategory(category);
setSelectedFilters([]);
const updatedFilters = [...selectedFilters];
filterMarkers(category, selectedFilters);
};

const handleFilterClick = (filter) => {
setSelectedFilters((prevFilters) => {
const updatedFilters = prevFilters.includes(filter)
? prevFilters.filter((f) => f !== filter)
: [...prevFilters, filter];
filterMarkers(selectedCategory, updatedFilters);
return updatedFilters;
});
};

const filterMarkers = (category, filters) => {
let filteredMarkers = allMarkers;

if (category !== "전체") {
filteredMarkers = filteredMarkers.filter((marker) => {
const mainCategory = categoryMapping[marker.category];
return mainCategory === category;
});
}

if (filters.length > 0) {
filters.forEach((filter) => {
if (filter === "주차 가능") {
filteredMarkers = filteredMarkers.filter((marker) => marker.is_parking);
} else if (filter === "실내공간") {
filteredMarkers = filteredMarkers.filter((marker) => marker.inside);
} else if (filter === "야외공간") {
filteredMarkers = filteredMarkers.filter((marker) => marker.outside);
} else if (filter === "무게 제한 없음") {
filteredMarkers = filteredMarkers.filter((marker) => marker.weight_limit === 0);
} else if (filter === "애견 동반 요금 없음") {
filteredMarkers = filteredMarkers.filter((marker) => marker.pet_fee === 0);
} else if (filter === "영업중") {
filteredMarkers = filteredMarkers.filter((marker) => {
const { todayOpen, todayClose } = marker.operationHour || {};
if (!todayOpen || !todayClose) return false;

const now = new Date();
const [openHour, openMinute] = todayOpen.split(":").map(Number);
const [closeHour, closeMinute] = todayClose.split(":").map(Number);

const openTime = new Date();
openTime.setHours(openHour, openMinute);

const closeTime = new Date();
closeTime.setHours(closeHour, closeMinute);

if (closeTime <= openTime) {
closeTime.setDate(closeTime.getDate() + 1);
}

return now >= openTime && now <= closeTime;
});
}
});
}

setMarkers(filteredMarkers);
console.log("Filtered Markers:", filteredMarkers);
console.log("All Markers:", allMarkers);
console.log("Selected Filters:", filters);
console.log("All Markers with Parking Info:", allMarkers.map((marker) => marker.pet_fee));

};

if (!isLoaded) {
Expand Down Expand Up @@ -98,17 +217,13 @@ const ActualPlaceMap = () => {
/>
<hr></hr>
<FilterButtons
filters={["주차 가능", "실내공간", "야외공간", "무게 제한 없음", "애견 동반 요금 없음"]}
filters={["주차 가능", "실내공간", "야외공간", "무게 제한 없음", "애견 동반 요금 없음", "영업중"]}
selectedFilters={selectedFilters}
onFilterClick={(filter) =>
setSelectedFilters((prev) =>
prev.includes(filter) ? prev.filter((f) => f !== filter) : [...prev, filter]
)
}
onFilterClick={handleFilterClick}
hoveredFilter={hoveredFilter}
setHoveredFilter={setHoveredFilter}
/>
<Map center={center} zoom={zoom} userLocation={userLocation} />
<Map center={center} zoom={zoom} markers={markers} userLocation={userLocation} />
<FloatingButton onClick={handleBackToList} />
<BottomSheet
isOpen={isBottomSheetOpen}
Expand Down
Loading

0 comments on commit 91f9e06

Please sign in to comment.