Feat/#315 card blacklist

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

@@ -1,11 +1,13 @@
 import Modal from "../../../@common/Modal";
 import useToast from "../../../@common/Toast/hooks/useToast";
 import useBlacklist from "../../hooks/useBlacklist";
+import { autoSlideType } from "../../hooks/useCardSwiper";
 import * as St from "./style";
 
 interface MenuModalProps {
   currentCardId: string;
   closeHandler: () => void;
+  autoSlide: autoSlideType;
 }
 
 type ModalItem = {
@@ -16,7 +18,7 @@ type ModalItem = {
 };
 
 export default function MenuModal(props: MenuModalProps) {
-  const { currentCardId, closeHandler } = props;
+  const { currentCardId, closeHandler, autoSlide } = props;
   const { showToast, blackoutToast } = useToast();
   const { handleClickAddBlacklist, handleClickCancelBlacklist } = useBlacklist(() => console.log("todo"));
 
@@ -41,8 +43,12 @@ export default function MenuModal(props: MenuModalProps) {
             showToast({
               message: "🚫 해당 대화주제가 더 이상 추천되지 않아요",
               duration: 3.5,
-              handleClickCancel: () => handleClickCancelBlacklist({ _id: currentCardId, onSuccess: blackoutToast }),
+              handleClickCancel: () => {
+                handleClickCancelBlacklist({ _id: currentCardId, onSuccess: blackoutToast });
+                autoSlide.slideUp();
+              },
             });
+            autoSlide.slideDown();
           },
         });
       },

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

@@ -2,12 +2,14 @@ import React from "react";
 
 import { GTM_CLASS_NAME } from "../../../util/const/gtm";
 import useModal from "../../@common/hooks/useModal";
+import { autoSlideType } from "../hooks/useCardSwiper";
 import TagsSlider from "../TagsSlider";
 import CardMenu from "./CardMenu";
 import MenuModal from "./MenuModal";
 import St from "./style";
 
 interface LoginCheckProps {
+  autoSlide: autoSlideType;
   openLoginModalHandler: () => void;
   _id: string;
   content: string;
@@ -16,7 +18,7 @@ interface LoginCheckProps {
 }
 
 const Card = (props: LoginCheckProps) => {
-  const { _id, content, tags } = props;
+  const { _id, content, tags, autoSlide } = props;
   const { isModalOpen: isMenuModalOpen, toggleModal: toggleMenuModal } = useModal();
 
   return (
@@ -28,7 +30,7 @@ const Card = (props: LoginCheckProps) => {
         </St.TagsWrapper>
       </St.Container>
       <CardMenu {...props} toggleMenuModal={toggleMenuModal} />
-      {isMenuModalOpen && <MenuModal currentCardId={_id} closeHandler={toggleMenuModal} />}
+      {isMenuModalOpen && <MenuModal currentCardId={_id} closeHandler={toggleMenuModal} autoSlide={autoSlide} />}
     </St.Card>
   );
 };

src/@components/CardCollectionPage/CardSlider/index.tsx

@@ -16,14 +16,14 @@ interface CardSliderProps {
 
 const CardSlider = (props: CardSliderProps) => {
   const { openLoginModalHandler, cardLists, lastCardObsvRef } = props;
-  const { swiperSettings } = useCardSwiper();
+  const { swiperSettings, swiperRef, autoSlide } = useCardSwiper();
 
   return (
     <St.Wrapper>
-      <Swiper {...swiperSettings}>
+      <Swiper {...swiperSettings} ref={swiperRef}>
         {cardLists.map((cardList) => (
           <SwiperSlide key={cardList._id}>
-            <Card openLoginModalHandler={openLoginModalHandler} {...cardList} />
+            <Card autoSlide={autoSlide} openLoginModalHandler={openLoginModalHandler} {...cardList} />
           </SwiperSlide>
         ))}
         <SwiperSlide>

src/@components/CardCollectionPage/hooks/useCardSwiper.ts

@@ -1,12 +1,19 @@
+import { useRef } from "react";
 import { useRecoilState, useSetRecoilState } from "recoil";
 import { Pagination } from "swiper";
-import { SwiperProps } from "swiper/react";
+import { SwiperProps, SwiperRef } from "swiper/react";
 
 import { isSliderDownState, sliderIdxState } from "../../../core/atom/slider";
 
+export type autoSlideType = {
+  slideDown: () => void;
+  slideUp: () => void;
+};
+
 export default function useCardSwiper() {
   const [sliderIdx, setSliderIdx] = useRecoilState(sliderIdxState);
   const setIsSliderDown = useSetRecoilState(isSliderDownState);
+  const swiperRef = useRef<SwiperRef>(null);
 
   const swiperSettings: SwiperProps = {
     slidesPerView: "auto",
@@ -20,5 +27,10 @@ export default function useCardSwiper() {
     },
   };
 
-  return { swiperSettings };
+  const autoSlide: autoSlideType = {
+    slideDown: () => swiperRef.current?.swiper.slideTo(sliderIdx + 1),
+    slideUp: () => swiperRef.current?.swiper.slideTo(sliderIdx),
+  };
+
+  return { swiperSettings, swiperRef, autoSlide };
 }