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 && }
>
);
};