Merge branch 'develop' of https://github.com/TeamPiickle/client into …

…develop
TeamPiickle · Jun 21, 2023 · 68f3d05 · 68f3d05
2 parents c73bd66 + 84d2c50
commit 68f3d05
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 35 deletions.
diff --git a/src/@components/@common/Header/index.tsx b/src/@components/@common/Header/index.tsx
@@ -1,13 +1,10 @@
-import { lazy } from "react";
-
 import { IcHamburger, IcLogo } from "../../../asset/icon";
 import { routePaths } from "../../../core/routes/path";
 import { GTM_CLASS_NAME } from "../../../util/const/gtm";
 import useModal from "../hooks/useModal";
+import MenuBar from "../MenuBar";
 import * as St from "./style";
 
-const MenuBar = lazy(() => import("../MenuBar"));
-
 export default function Header() {
   const { isModalOpen, toggleModal } = useModal();
 

diff --git a/src/@components/@common/hooks/useNavigateCardCollection.ts b/src/@components/@common/hooks/useNavigateCardCollection.ts
@@ -1,3 +1,4 @@
+import qs from "qs";
 import { useNavigate } from "react-router-dom";
 import { useSetRecoilState } from "recoil";
 
@@ -19,40 +20,51 @@ export default function useNavigateCardCollection(locationType: LocationType) {
   switch (locationType) {
     case LocationType.ALL:
       return (sliderIdx = 0) => {
-        navigate(routePaths.CardCollection, { state: { type: LocationType.ALL } });
+        navigate(`${routePaths.CardCollection}?type=${LocationType.ALL}`);
         setSliderIdx(sliderIdx);
       };
 
     case LocationType.BEST:
       return (sliderIdx = 0) => {
-        navigate(routePaths.CardCollection, { state: { type: LocationType.BEST } });
+        navigate(`${routePaths.CardCollection}?type=${LocationType.BEST}`);
         setSliderIdx(sliderIdx);
       };
 
     case LocationType.BOOKMARK:
       return (sliderIdx = 0) => {
-        navigate(routePaths.CardCollection, { state: { type: LocationType.BOOKMARK } });
+        navigate(`${routePaths.CardCollection}?type=${LocationType.BOOKMARK}`);
         setSliderIdx(sliderIdx);
       };
 
     case LocationType.CATEGORY:
       return (categoryId: string, sliderIdx = 0) => {
-        navigate(routePaths.CardCollection, { state: { type: LocationType.CATEGORY, categoryId } });
+        navigate(`${routePaths.CardCollection}?type=${LocationType.CATEGORY}&categoryId=${categoryId}`);
         setSliderIdx(sliderIdx);
       };
 
     case LocationType.FILTER:
       return (filterTypes: string[], sliderIdx = 0) => {
-        navigate(routePaths.CardCollection, {
-          state: { type: LocationType.FILTER, filterTypes },
-        });
+        navigate(
+          `${routePaths.CardCollection}?type=${LocationType.FILTER}&filterTypes=${parseFilterTypesToString(
+            filterTypes,
+          )}`,
+        );
         setSliderIdx(sliderIdx);
       };
 
     case LocationType.MEDLEY:
       return (medleyId: string, sliderIdx = 0) => {
-        navigate(routePaths.CardCollection, { state: { type: LocationType.MEDLEY, medleyId } });
+        navigate(`${routePaths.CardCollection}?type=${LocationType.MEDLEY}&medleyId=${medleyId}`);
         setSliderIdx(sliderIdx);
       };
   }
 }
+
+function parseFilterTypesToString(filterTypes: string[]): string {
+  return qs.stringify(
+    {
+      search: filterTypes,
+    },
+    { arrayFormat: "repeat" },
+  );
+}
diff --git a/src/@components/CardCollectionPage/hooks/useCardLists.ts b/src/@components/CardCollectionPage/hooks/useCardLists.ts
@@ -1,4 +1,5 @@
 import qs from "qs";
+import { useLocation } from "react-router-dom";
 import useSWR from "swr";
 
 import { realReq } from "../../../core/api/common/axios";
@@ -12,9 +13,13 @@ interface ExtendedCardList extends Array<CardList> {
   cards?: CardList[]; // with medly id
 }
 
-export function useCardLists(cardsTypeLocation: CardsTypeLocation) {
+export function useCardLists() {
+  const location = useLocation();
+  const cardsTypeLocation = getLocationInfoByQueryString(location.search);
+
   const fetchingKeyByLocation = getSWRFetchingKeyByLocation(cardsTypeLocation);
   const optionsByLocation = getSWROptionsByLocation(cardsTypeLocation);
+
   const { data } = useSWR<PiickleSWRResponse<ExtendedCardList>>(
     fetchingKeyByLocation,
     realReq.GET_SWR,
@@ -43,6 +48,33 @@ function getReturnCardLists(
   }
 }
 
+type Obj = { [key: string]: string };
+function getLocationInfoByQueryString(queryString: string): CardsTypeLocation {
+  const exclusiveQuestionMarkQueryString = queryString.slice(1);
+  const firstAndMarkIdx = exclusiveQuestionMarkQueryString.indexOf("&");
+
+  if (firstAndMarkIdx === -1) {
+    const [key, value] = exclusiveQuestionMarkQueryString.split("=");
+
+    const locationInfo: Obj = {};
+    locationInfo[key] = value;
+
+    return locationInfo as unknown as CardsTypeLocation;
+  }
+
+  // ?A=B&C=DDD 2개까지
+  return [
+    exclusiveQuestionMarkQueryString.slice(0, firstAndMarkIdx),
+    exclusiveQuestionMarkQueryString.slice(firstAndMarkIdx + 1),
+  ].reduce((acc: Obj, query) => {
+    const firstEqualMarkIdx = query.indexOf("=");
+    const [key, value] = [query.slice(0, firstEqualMarkIdx), query.slice(firstEqualMarkIdx + 1)];
+    acc[key] = value;
+
+    return acc;
+  }, {}) as unknown as CardsTypeLocation;
+}
+
 function getSWRFetchingKeyByLocation(cardsTypeLocation: CardsTypeLocation) {
   switch (cardsTypeLocation.type) {
     case LocationType.CATEGORY:
@@ -53,24 +85,10 @@ function getSWRFetchingKeyByLocation(cardsTypeLocation: CardsTypeLocation) {
       return `${PATH.USERS_}${PATH.USERS_BOOKMARK}`;
     case LocationType.MEDLEY:
       return `${PATH.MEDLEY}/${cardsTypeLocation.medleyId}`;
-    case LocationType.ALL: {
-      const searchParams = qs.stringify(
-        {
-          search: ["태그"],
-        },
-        { arrayFormat: "repeat" },
-      );
-      return `${PATH.CATEGORIES_}${PATH.CATEGORIES_CARDS}?${searchParams}`;
-    }
     case LocationType.FILTER: {
-      const searchParams = qs.stringify(
-        {
-          search: cardsTypeLocation.filterTypes,
-        },
-        { arrayFormat: "repeat" },
-      );
-      return `${PATH.CATEGORIES_}${PATH.CATEGORIES_CARDS}?${searchParams}`;
+      return `${PATH.CATEGORIES_}${PATH.CATEGORIES_CARDS}?${cardsTypeLocation.filterTypes}`;
     }
+    case LocationType.ALL:
     default: {
       const searchParams = qs.stringify(
         {

diff --git a/src/@components/CardCollectionPage/index.tsx b/src/@components/CardCollectionPage/index.tsx
@@ -1,8 +1,6 @@
-import { useLocation } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 
 import { isSliderDownState } from "../../core/atom/slider";
-import { CardsTypeLocation } from "../../types/cardCollection";
 import { GTM_CLASS_NAME } from "../../util/const/gtm";
 import HeadlessCTAButton from "../@common/CTABtn/HeadlessCTAButton";
 import Header from "../@common/Header";
@@ -30,9 +28,7 @@ function CardCollectionContent() {
   useGTMPage();
   useScroll();
 
-  const location = useLocation();
-  const cardsTypeLoaction = location.state as CardsTypeLocation;
-  const { cardLists, fetchCardListsWithFilter } = useCardLists(cardsTypeLoaction);
+  const { cardLists, fetchCardListsWithFilter } = useCardLists();
 
   const { isVisibleCTAButton, intersectionObserverRef: lastCardObsvRef } = useCTAFilter();
 

diff --git a/src/types/cardCollection.ts b/src/types/cardCollection.ts
@@ -25,7 +25,7 @@ interface CategoryTypeLocation {
 
 interface FilterTypeLocation {
   type: LocationType.FILTER;
-  filterTypes: string[];
+  filterTypes: string;
 }
 
 interface MedleyTypeLocation {