Feature/#256

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;
 `;

src/pages/products/components/KakaoMap/ProductsMarkers.tsx

@@ -22,20 +22,19 @@ 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) => (
     <CustomOverlayMap key={product.id} position={{ lat: product.latitude, lng: product.longitude }}>
       <S.Pin
         data-selected={selectedProductId === product.id ? "true" : "false"}
         onClick={() => handleSelect(product)}
       >
-        {getPriceWithComma(product.price)}
+        {getPriceWithComma(product.sellingPrice)}
       </S.Pin>
     </CustomOverlayMap>
   ));

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

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 ? <MyPositionMarker position={userPosition} /> : null}

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 = <T extends object>(
+    obj: T,
+    ...rest: Array<Record<string, any>>
+  ): Partial<T> => {
+    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<Partial<GetProductsRequestParams>>(queryParams, { size: 10 }));
 
-  useEffect(() => {
-    setHasProducts(products.length);
-  }, [products.length, setHasProducts]);
+  const { setMapOpen, isMapOpen } = useMapState();
 
   const ref = useIntersect<HTMLDivElement>(async (entry, observer) => {
     observer.unobserve(entry.target);
@@ -77,7 +74,7 @@ const ProductList = () => {
         <S.MapContainer>
           <KakaoMap products={products} />
         </S.MapContainer>
-      ) : !hasProducts ? (
+      ) : products.length === 0 ? (
         <NoProduct />
       ) : (
         <>
@@ -87,9 +84,11 @@ const ProductList = () => {
               <ProductCard key={product.id} product={product} />
             ))}
             <div className="observer" ref={ref} />
+            <GoToMapButton handleClick={setMapOpen} />
           </S.ProductCardWrapper>
         </>
       )}
+      ;
     </>
   );
 };

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 = () => {
       <Suspense fallback={<LoadingCircle width="200px" />}>
         <ProductList />
       </Suspense>
-      {!isMapOpen && hasProducts && <GoToMapButton handleClick={setMapOpen} />}
     </>
   );
 };