[ refactor ] add useShowByQuery

src/@components/@common/hooks/useShowByQuery.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+import { LocationType } from "../../../types/cardCollection";
+
+// 파라미터로 보이지 않아야할 locationType 전달
+export default function useShowByCardType(locationTypes: LocationType[]) {
+  const [isShow, setIsShow] = useState<boolean>(false);
+
+  useEffect(() => {
+    const cardType = new URLSearchParams(window.location.search.split("?")[1]).get("type");
+    setIsShow(!locationTypes.includes((cardType as LocationType) || ""));
+  }, [locationTypes]);
+
+  return { isShow };
+}

src/@components/CardCollectionPage/Card/MenuModal/index.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 
 import { LocationType } from "../../../../types/cardCollection";
+import useShowByCardType from "../../../@common/hooks/useShowByQuery";
 import Modal from "../../../@common/Modal";
 import useToast from "../../../@common/Toast/hooks/useToast";
 import { handleClickBlacklistType } from "../../hooks/useBlacklist";
@@ -26,7 +27,7 @@ export default function MenuModal(props: MenuModalProps) {
   const { currentCardId, closeHandler, autoSlide, handleClickAddBlacklist, handleClickCancelBlacklist } = props;
   const { showToast, blackoutToast } = useToast();
 
-  const [isBlockShow, setIsBlockShow] = useState<boolean>(true);
+  const { isShow: isBlockShow } = useShowByCardType([LocationType.BEST, LocationType.MEDLEY]);
 
   const onSuccessAddBlacklist = () => {
     closeHandler();
@@ -71,12 +72,6 @@ export default function MenuModal(props: MenuModalProps) {
     },
   ];
 
-  useEffect(() => {
-    if (location.search.includes(LocationType.BEST)) setIsBlockShow(false);
-    else if (location.search.includes(LocationType.MEDLEY)) setIsBlockShow(false);
-    else setIsBlockShow(true);
-  }, []);
-
   return (
     <Modal theme="WHITE_BOTTOM" closeHandler={closeHandler} isNoCloseBtn>
       <St.ModalContainer>