feat #18 바텀시트 카테고리 수정

jigume · Feb 25, 2024 · 6888039 · 6888039
1 parent 54da91c
commit 6888039
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 70 deletions.
diff --git a/src/api/goods.ts b/src/api/goods.ts
@@ -49,21 +49,27 @@ export const getSheetList = async (
 
   // 특수문자 인코딩
   const query = qs.stringify({
-    coordinateRequestDto: {
-      latitude: center.getLat().toFixed(6),
-      longitude: center.getLng().toFixed(6),
-      latitudeDelta: (arr[1] - arr[0]).toFixed(6),
-      longitudeDelta: (arr[3] - arr[2]).toFixed(6),
-    },
-  });
+    // coordinateRequestDto: {
+    //   latitude: center.getLat().toFixed(6),
+    //   longitude: center.getLng().toFixed(6),
+    //   latitudeDelta: (arr[1] - arr[0]).toFixed(6),
+    //   longitudeDelta: (arr[3] - arr[2]).toFixed(6),
+    // },
+    // pageable: {
+    //   page: 0,
+    //   size: 10,
+    //   sort: [],
+    // },
 
-  const response = await jigumeAxios
-    .get(`/api/goods/marker/list?${query}`)
-    .then((res) => res.data);
+    latitude: center.getLat().toFixed(6),
+    longitude: center.getLng().toFixed(6),
+    latitudeDelta: (arr[1] - arr[0]).toFixed(6),
+    longitudeDelta: (arr[3] - arr[2]).toFixed(6),
+  });
 
-  console.log(response);
+  const response = await jigumeAxios.get(`/api/goods/marker/list?${query}`);
 
-  return response;
+  return response.data;
 };
 
 export const getGoodsPage = async (

diff --git a/src/pages/Map/components/BottomSheetComponent/components/CategoryTag.tsx b/src/pages/Map/components/BottomSheetComponent/components/CategoryTag.tsx
@@ -13,9 +13,7 @@ export default function CategoryTag({
 }) {
   return (
     <div
-      className={`rounded-[8px] border border-gray-100 p-[8px] ${
-        !item.checked ? 'bg-white' : 'bg-gray-900 text-white'
-      }`}
+      className="rounded-lg border border-gray-100 bg-white px-2 py-1 font-light"
       onClick={() => {
         const prevData = [...filter];
 
@@ -27,11 +25,7 @@ export default function CategoryTag({
         setFilter(prevData);
       }}
     >
-      <img
-        className="mr-1 inline-block size-[16px]"
-        src={item.icon}
-        alt="필터"
-      />
+      <img className="mr-1 inline-block size-4" src={item.icon} alt="필터" />
       <span className="text-xs">{item.name}</span>
     </div>
   );

diff --git a/src/pages/Map/components/BottomSheetComponent/components/ContentHeader.tsx b/src/pages/Map/components/BottomSheetComponent/components/ContentHeader.tsx
@@ -24,45 +24,11 @@ export default function ContentHeader({
             <div className="mb-0 text-lg font-bold">공동 구매 폼 내역 보기</div>
           </div>
           <div className="grid grid-cols-8 px-[16px] py-[12px]">
-            <div className="col-span-7 h-[1.5rem] overflow-x-scroll whitespace-nowrap text-gray-600">
-              {chekedItem.length === filter_.length || !chekedItem.length ? (
-                <div className="text-sm text-gray-600">
-                  제품군 카테고리 필터를 켜보세요
-                </div>
-              ) : (
-                filter_.map(
-                  (item, index) =>
-                    item.checked && (
-                      <motion.span
-                        className="cursor-pointer px-1"
-                        key={item.name}
-                        onClick={() => {
-                          const prevData = [...filter_];
-
-                          prevData[index] = {
-                            ...prevData[index],
-                            checked: !item.checked,
-                          };
-
-                          setFilter(prevData);
-                        }}
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                        transition={{ duration: 0.3 }}
-                      >
-                        <span>{item.name}</span>
-                        <img
-                          src={CloseIcon}
-                          className="inline-block pb-[3px] "
-                          alt="closeIcon"
-                        />
-                      </motion.span>
-                    )
-                )
-              )}
+            <div className="col-span-7 flex h-8 flex-row items-center gap-2 overflow-x-scroll whitespace-nowrap text-sm text-gray-600">
+              {open
+                ? '제품군 카테고리를 선택하세요'
+                : '찾으시는 제품이 있나요?'}
             </div>
-
             <div
               className="col-span-1 flex h-[1.5rem] cursor-pointer justify-center transition-all duration-300 ease-in-out active:scale-95"
               onClick={() => setOpen((prev) => !prev)}
@@ -74,6 +40,46 @@ export default function ContentHeader({
               )}
             </div>
           </div>
+
+          <div className="flex h-10 flex-row gap-2 overflow-x-scroll whitespace-nowrap border-y py-1 pl-4 text-gray-600">
+            {filter_.map(
+              (item, index) =>
+                item.checked && (
+                  <motion.div
+                    className="flex shrink-0 items-center justify-center gap-1 rounded-md border p-2"
+                    key={item.name}
+                    onClick={() => {
+                      const prevData = [...filter_];
+
+                      prevData[index] = {
+                        ...prevData[index],
+                        checked: !item.checked,
+                      };
+
+                      setFilter(prevData);
+                    }}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.3 }}
+                  >
+                    <img
+                      src={item.icon}
+                      alt={item.name}
+                      className="inline-block size-4"
+                    />
+                    <div className="inline-block text-xs font-light">
+                      {item.name}
+                    </div>
+                    <img
+                      src={CloseIcon}
+                      className="inline-block size-3"
+                      alt="닫기"
+                    />
+                  </motion.div>
+                )
+            )}
+          </div>
         </div>
 
         {open && (

diff --git a/src/pages/Map/components/BottomSheetComponent/components/ItemComponent.tsx b/src/pages/Map/components/BottomSheetComponent/components/ItemComponent.tsx
@@ -27,7 +27,7 @@ export default function ItemComponent({ goods }: { goods?: GoodsListDTO }) {
 
   return (
     <div
-      className={`flex w-full cursor-pointer flex-row gap-4 px-4 pb-4${
+      className={`flex w-full cursor-pointer flex-row gap-4 p-4 first-of-type:pt-0 ${
         !goods ? 'animate-pulse' : ''
       }`}
     >
@@ -42,7 +42,7 @@ export default function ItemComponent({ goods }: { goods?: GoodsListDTO }) {
             <img
               src={isWished ? favoriteFilled : favoriteBordered}
               alt="좋아요"
-              className="size-7"
+              className="size-6"
             />
           </button>
           <img

diff --git a/src/pages/Map/components/BottomSheetComponent/components/ItemList.tsx b/src/pages/Map/components/BottomSheetComponent/components/ItemList.tsx
@@ -15,11 +15,12 @@ export default function ItemList({
   sheetLevel: SheetLevelType;
   preViewer: PreViewerMarker;
 }) {
+  const trueArr = filter.filter(({ checked }) => checked);
   // preViewer
   if (preViewer && goodsArr.length > 0)
     return (
       <div
-        className="absolute top-[96px] size-full overflow-x-scroll py-[96px]"
+        className="absolute top-[7.5rem] size-full overflow-x-scroll pt-[7.5rem]"
         style={{ height: thresholds[sheetLevel] }}
       >
         <ItemComponent goods={goodsArr[0]} />
@@ -30,7 +31,7 @@ export default function ItemList({
   if (goodsArr.length === 0)
     return (
       <div
-        className="absolute top-[96px] flex size-full flex-col gap-2 overflow-x-scroll pb-[192px] pt-[96px]"
+        className="absolute top-[7.5rem] flex size-full flex-col gap-2 overflow-x-scroll pb-48 pt-[7.5rem]"
         style={{ height: thresholds[sheetLevel] }}
       >
         {[1, 2, 3].map((item) => (
@@ -40,14 +41,14 @@ export default function ItemList({
     );
 
   return (
-    <div className="absolute top-[96px] flex h-full flex-col gap-2 overflow-x-scroll pb-[192px] pt-[96px]">
-      {goodsArr.map((item) => {
-        const trueArr = filter.filter(({ checked }) => checked);
-
-        if (!trueArr.find(({ idx }) => idx === item.categoryId))
-          return <div key={item.goodsId} />;
-        return item && <ItemComponent key={item.goodsId} goods={item} />;
-      })}
+    <div className="absolute top-[7.5rem] flex h-full flex-col divide-y overflow-x-scroll pb-48 pt-[7.5rem]">
+      {goodsArr
+        .filter((item) =>
+          trueArr.some((item2) => item2.idx === item.categoryId)
+        )
+        .map((item) => (
+          <ItemComponent key={item.goodsId} goods={item} />
+        ))}
     </div>
   );
 }