diff --git a/src/pages/home/components/Banner/styles.ts b/src/pages/home/components/Banner/styles.ts index 5f014b87..3f0ffa54 100644 --- a/src/pages/home/components/Banner/styles.ts +++ b/src/pages/home/components/Banner/styles.ts @@ -33,7 +33,7 @@ export const ImageContainer = styled.div` export const Image = styled(motion.img)` width: 100%; height: 100%; - object-fit: fill; + object-fit: cover; border-radius: 10px; cursor: pointer; `; diff --git a/src/pages/products/components/KakaoMap/ProductsMarkers.tsx b/src/pages/products/components/KakaoMap/ProductsMarkers.tsx index 8176cabb..0d50dac6 100644 --- a/src/pages/products/components/KakaoMap/ProductsMarkers.tsx +++ b/src/pages/products/components/KakaoMap/ProductsMarkers.tsx @@ -22,12 +22,11 @@ export const ProductsMarkers = ({ const map = useMap(); const handleSelect = (product: ProductType) => { + // positions, productId, setProductId const { latitude, longitude } = product; setSelectedProductId(product.id); map.panTo(new kakao.maps.LatLng(latitude, longitude)); - console.log(selectedProductId, product.id); }; - console.log(selectedProductId); return products.map((product) => ( @@ -35,7 +34,7 @@ export const ProductsMarkers = ({ data-selected={selectedProductId === product.id ? "true" : "false"} onClick={() => handleSelect(product)} > - {getPriceWithComma(product.price)} + {getPriceWithComma(product.sellingPrice)} )); diff --git a/src/pages/products/components/KakaoMap/Research.tsx b/src/pages/products/components/KakaoMap/Research.tsx index ad456265..3fce1760 100644 --- a/src/pages/products/components/KakaoMap/Research.tsx +++ b/src/pages/products/components/KakaoMap/Research.tsx @@ -7,10 +7,10 @@ const Research = () => { const [searchParams, setSearchParams] = useSearchParams(); const handleResearch = () => { - searchParams.set("swx", position.smallX.toString()); - searchParams.set("swy", position.smallY.toString()); - searchParams.set("nex", position.bigX.toString()); - searchParams.set("ney", position.bigY.toString()); + searchParams.set("smallX", position.smallX.toString()); + searchParams.set("smallY", position.smallY.toString()); + searchParams.set("bigX", position.bigX.toString()); + searchParams.set("bigY", position.bigY.toString()); setSearchParams(searchParams); setMapMoved(false); }; diff --git a/src/pages/products/components/KakaoMap/index.tsx b/src/pages/products/components/KakaoMap/index.tsx index b68c7384..6b5a63ca 100644 --- a/src/pages/products/components/KakaoMap/index.tsx +++ b/src/pages/products/components/KakaoMap/index.tsx @@ -7,6 +7,7 @@ import ProductCardForMap from "../ProductCard/ProductCardForMap"; import { MyPositionMarker } from "./MyPositionMarker"; import Research from "./Research"; import { ProductType } from "@pages/products/types/productsType"; +import { useSearchParams } from "react-router-dom"; export interface UserPositionType { lat: number | null; @@ -38,6 +39,7 @@ const KakaoMap = ({ products }: MapProps) => { errorMessage: "", isLoading: true }); + const searchParams = useSearchParams(); useEffect(() => { if (products.length > 0) { @@ -96,7 +98,7 @@ const KakaoMap = ({ products }: MapProps) => { height: "100%", zIndex: 1000 }} - level={5} + level={searchParams[0].size === 0 ? 13 : 5} ref={mapRef} > {userPosition.lat && userPosition.lng ? : null} diff --git a/src/pages/products/components/ProductList/index.tsx b/src/pages/products/components/ProductList/index.tsx index 466c3747..82a5d91c 100644 --- a/src/pages/products/components/ProductList/index.tsx +++ b/src/pages/products/components/ProductList/index.tsx @@ -1,67 +1,64 @@ -import useIntersect from "@pages/products/hooks/useIntersect"; import * as S from "../../styles/style"; -import KakaoMap from "../KakaoMap"; import ProductCard from "../ProductCard"; import useProducts from "@pages/products/api/queries"; -import { useMapState } from "@pages/products/stores/mapStore"; import { ScrollRestoration, useSearchParams } from "react-router-dom"; -import { Category, Option, OrderState } from "@pages/products/api/products"; -import { useEffect, useState } from "react"; +import { + Category, + GetProductsRequestParams, + Option, + OrderState +} from "@pages/products/api/products"; +import { useMemo } from "react"; +import useIntersect from "@pages/products/hooks/useIntersect"; +import KakaoMap from "../KakaoMap"; import NoProduct from "../NoProduct"; +import { useMapState } from "@pages/products/stores/mapStore"; +import GoToMapButton from "../ToMapButton"; const ProductList = () => { const [searchParams] = useSearchParams(); - const [queryParams, setQueryParams] = useState({ - options: searchParams.getAll("options"), - order: searchParams.get("order"), - category: searchParams.get("category"), - keyword: searchParams.get("keyword"), - checkInDate: searchParams.get("checkInDate"), - checkOutDate: searchParams.get("checkOutDate"), - swx: Number(searchParams.get("swx")), - swy: Number(searchParams.get("swy")), - nex: Number(searchParams.get("nex")), - ney: Number(searchParams.get("ney")) - }); + const searchParamString = searchParams.toString(); + + const queryParams = useMemo(() => { + const params = new URLSearchParams(searchParamString); + + return { + options: params.getAll("options") as Option[], + order: params.get("order") as OrderState, + category: params.get("category") as Category, + keyword: params.get("keyword"), + checkInDate: params.get("checkInDate"), + checkOutDate: params.get("checkOutDate"), + smallX: Number(params.get("smallX")), + smallY: Number(params.get("smallY")), + bigX: Number(params.get("bigX")), + bigY: Number(params.get("bigY")) + }; + }, [searchParamString]); - useEffect(() => { - setQueryParams({ - options: searchParams.getAll("options"), - order: searchParams.get("order"), - category: searchParams.get("category"), - keyword: searchParams.get("keyword"), - checkInDate: searchParams.get("checkInDate"), - checkOutDate: searchParams.get("checkOutDate"), - swx: Number(searchParams.get("swx")), - swy: Number(searchParams.get("swy")), - nex: Number(searchParams.get("nex")), - ney: Number(searchParams.get("ney")) + const removeFalsy = ( + obj: T, + ...rest: Array> + ): Partial => { + const result = Object.assign({}, ...rest); + + Object.entries(obj).forEach(([key, value]) => { + if (value && value !== 0) { + result[key] = value; + } }); - }, [searchParams]); + + return result; + }; const { data: products, hasNextPage, isFetching, fetchNextPage - } = useProducts({ - ...(queryParams.options && { options: queryParams.options as Option[] }), - ...(queryParams.order && { order: queryParams.order as OrderState }), - ...(queryParams.category && { category: queryParams.category as Category }), - ...(queryParams.checkInDate && { checkInDate: queryParams.checkInDate }), - ...(queryParams.checkOutDate && { checkOutDate: queryParams.checkOutDate }), - ...(queryParams.keyword && { keyword: queryParams.keyword }), - ...(queryParams.swx && { smallX: queryParams.swx }), - ...(queryParams.swy && { smallY: queryParams.swy }), - ...(queryParams.nex && { bigX: queryParams.nex }), - ...(queryParams.ney && { bigY: queryParams.ney }), - size: 10 - }); - const { isMapOpen, setHasProducts, hasProducts } = useMapState(); + } = useProducts(removeFalsy>(queryParams, { size: 10 })); - useEffect(() => { - setHasProducts(products.length); - }, [products.length, setHasProducts]); + const { setMapOpen, isMapOpen } = useMapState(); const ref = useIntersect(async (entry, observer) => { observer.unobserve(entry.target); @@ -77,7 +74,7 @@ const ProductList = () => { - ) : !hasProducts ? ( + ) : products.length === 0 ? ( ) : ( <> @@ -87,9 +84,11 @@ const ProductList = () => { ))}
+ )} + ; ); }; diff --git a/src/pages/products/index.tsx b/src/pages/products/index.tsx index 35c87b26..d20b1da6 100644 --- a/src/pages/products/index.tsx +++ b/src/pages/products/index.tsx @@ -2,17 +2,16 @@ import UpperNavBar from "@components/navBar/upperNavBar"; import SearchBar from "./components/SearchBar"; import * as S from "./styles/style"; import CategoryTab from "./components/CategoryTab"; -import GoToMapButton from "./components/ToMapButton"; -import { Suspense } from "react"; import { Link, useLocation, useNavigate } from "react-router-dom"; import ProductList from "./components/ProductList"; import { useMapState } from "./stores/mapStore"; import OptionTab from "./components/OptionTap"; import Order from "./components/Order"; +import { Suspense } from "react"; import LoadingCircle from "@components/loading"; const Products = () => { - const { isMapOpen, setMapOpen, hasProducts } = useMapState(); + const { isMapOpen, setMapOpen } = useMapState(); const location = useLocation(); const navigate = useNavigate(); @@ -45,7 +44,6 @@ const Products = () => { }> - {!isMapOpen && hasProducts && } ); };