From 3162dba590958a5a4fefb1320f533bd1f0b80f27 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Wed, 2 Aug 2023 23:29:36 +0900 Subject: [PATCH 01/14] =?UTF-8?q?[=20feat=20]=20=EB=B8=94=EB=9E=99?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80/=EC=B7=A8?= =?UTF-8?q?=EC=86=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../@common/Toast/ToastProvider.tsx | 10 +++-- .../@common/Toast/hooks/useTimeout.ts | 2 - src/@components/@common/Toast/style.ts | 6 +++ .../Card/MenuModal/index.tsx | 14 ++++++- .../CardCollectionPage/Card/index.tsx | 9 +++-- .../CardCollectionPage/CardSlider/index.tsx | 5 +-- .../CardCollectionPage/hooks/useBlacklist.ts | 40 +++++++++++++++++++ src/@components/CardCollectionPage/index.tsx | 10 +---- src/core/api/cardCollection.ts | 10 +++++ src/core/api/common/axios.ts | 4 ++ src/core/api/common/constants.ts | 1 + 11 files changed, 89 insertions(+), 22 deletions(-) create mode 100644 src/@components/CardCollectionPage/hooks/useBlacklist.ts diff --git a/src/@components/@common/Toast/ToastProvider.tsx b/src/@components/@common/Toast/ToastProvider.tsx index 395fdeb7..59c4f2a6 100644 --- a/src/@components/@common/Toast/ToastProvider.tsx +++ b/src/@components/@common/Toast/ToastProvider.tsx @@ -7,6 +7,7 @@ import * as St from "./style"; export type ToastType = { message: string; duration: number; + handleClickCancel?: () => void; }; export default function ToastProvider({ children }: PropsWithChildren) { @@ -14,8 +15,8 @@ export default function ToastProvider({ children }: PropsWithChildren) { const toastTimeout = useTimeout(); const showToast = useCallback( - async ({ message, duration }: ToastType) => { - setToast({ message, duration }); + async ({ message, duration, handleClickCancel }: ToastType) => { + setToast({ message, duration, handleClickCancel }); toastTimeout.set(() => { setToast(null); @@ -29,7 +30,10 @@ export default function ToastProvider({ children }: PropsWithChildren) { {children} {toast && ( - {toast.message} + + {toast.message} + {toast.handleClickCancel && 취소} + )} diff --git a/src/@components/@common/Toast/hooks/useTimeout.ts b/src/@components/@common/Toast/hooks/useTimeout.ts index a6978c86..419bfaee 100644 --- a/src/@components/@common/Toast/hooks/useTimeout.ts +++ b/src/@components/@common/Toast/hooks/useTimeout.ts @@ -1,7 +1,5 @@ import { useRef } from "react"; -import { ToastType } from "../ToastProvider"; - export default function useTimeout() { const timerRef = useRef | null>(null); diff --git a/src/@components/@common/Toast/style.ts b/src/@components/@common/Toast/style.ts index d502f5e1..19a16b16 100644 --- a/src/@components/@common/Toast/style.ts +++ b/src/@components/@common/Toast/style.ts @@ -12,6 +12,7 @@ export const ToastContainer = styled.div` export const ToastMessage = styled.div` display: flex; + justify-content: space-between; height: 4.8rem; padding: 0.8rem 1.6rem; @@ -24,3 +25,8 @@ export const ToastMessage = styled.div` ${({ theme }) => theme.newFonts.caption1} color: ${({ theme }) => theme.newColors.gray900}; `; + +export const CancelButton = styled.button` + ${({ theme }) => theme.newFonts.caption1} + color: ${({ theme }) => theme.newColors.gray600}; +`; diff --git a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx index 3e659131..6ec073f5 100644 --- a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx +++ b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx @@ -1,8 +1,10 @@ import Modal from "../../../@common/Modal"; import useToast from "../../../@common/Toast/hooks/useToast"; +import useBlacklist from "../../hooks/useBlacklist"; import * as St from "./style"; interface MenuModalProps { + currentCardId: string; closeHandler: () => void; } @@ -14,8 +16,9 @@ type ModalItem = { }; export default function MenuModal(props: MenuModalProps) { - const { closeHandler } = props; + const { currentCardId, closeHandler } = props; const showToast = useToast(); + const { handleClickAddBlacklist, handleClickCancelBlacklist } = useBlacklist(() => console.log("todo")); const ModalItems: ModalItem[] = [ { @@ -31,7 +34,14 @@ export default function MenuModal(props: MenuModalProps) { title: "주제 다시 안보기", isNeedLogin: true, handleClickItem: () => { - /* todo */ + handleClickAddBlacklist(currentCardId, () => { + closeHandler(); + showToast({ + message: "🚫 해당 대화주제가 더 이상 추천되지 않아요", + duration: 3.5, + handleClickCancel: () => handleClickCancelBlacklist(currentCardId, () => console.log("블랙리스트 취소")), + }); + }); }, }, { diff --git a/src/@components/CardCollectionPage/Card/index.tsx b/src/@components/CardCollectionPage/Card/index.tsx index 3fef499b..af951165 100644 --- a/src/@components/CardCollectionPage/Card/index.tsx +++ b/src/@components/CardCollectionPage/Card/index.tsx @@ -1,8 +1,10 @@ import React from "react"; import { GTM_CLASS_NAME } from "../../../util/const/gtm"; +import useModal from "../../@common/hooks/useModal"; import TagsSlider from "../TagsSlider"; import CardMenu from "./CardMenu"; +import MenuModal from "./MenuModal"; import St from "./style"; interface LoginCheckProps { @@ -11,11 +13,11 @@ interface LoginCheckProps { content: string; isBookmark: boolean; tags: string[]; - toggleMenuModal: () => void; } const Card = (props: LoginCheckProps) => { - const { content, tags } = props; + const { _id, content, tags } = props; + const { isModalOpen: isMenuModalOpen, toggleModal: toggleMenuModal } = useModal(); return ( @@ -25,7 +27,8 @@ const Card = (props: LoginCheckProps) => { - + + {isMenuModalOpen && } ); }; diff --git a/src/@components/CardCollectionPage/CardSlider/index.tsx b/src/@components/CardCollectionPage/CardSlider/index.tsx index 75cf9ae1..01d2bf4f 100644 --- a/src/@components/CardCollectionPage/CardSlider/index.tsx +++ b/src/@components/CardCollectionPage/CardSlider/index.tsx @@ -12,11 +12,10 @@ interface CardSliderProps { openLoginModalHandler: () => void; cardLists: CardList[]; lastCardObsvRef: React.RefObject; - toggleMenuModal: () => void; } const CardSlider = (props: CardSliderProps) => { - const { openLoginModalHandler, cardLists, lastCardObsvRef, toggleMenuModal } = props; + const { openLoginModalHandler, cardLists, lastCardObsvRef } = props; const { swiperSettings } = useCardSwiper(); return ( @@ -24,7 +23,7 @@ const CardSlider = (props: CardSliderProps) => { {cardLists.map((cardList) => ( - + ))} diff --git a/src/@components/CardCollectionPage/hooks/useBlacklist.ts b/src/@components/CardCollectionPage/hooks/useBlacklist.ts new file mode 100644 index 00000000..6e4e1928 --- /dev/null +++ b/src/@components/CardCollectionPage/hooks/useBlacklist.ts @@ -0,0 +1,40 @@ +import { cardCollectionApi } from "../../../core/api/cardCollection"; +import useAuth from "../../../core/hooks/useAuth"; + +const useBlacklist = (handleClickBeforeLogin: () => void) => { + const { isLogin } = useAuth(); + // const [cardId, setCardId] = useState(); + + // const { data } = useSWR(cardId ? `${PATH.USERS_}${PATH.CARDS_}${PATH.BLACKLIST}` + cardId : null, realReq.POST, { + // suspense: true, + // onSuccess: onSuccessAdd, + // }); + + const handleClickAddBlacklist = (_id: string, onSuccessAdd: () => void) => { + switch (isLogin) { + case true: + cardCollectionApi.addBlacklist(_id); + onSuccessAdd(); + break; + case false: + handleClickBeforeLogin(); + break; + } + }; + + const handleClickCancelBlacklist = (_id: string, onSuccessDelete: () => void) => { + switch (isLogin) { + case true: + cardCollectionApi.deleteBlacklist(_id); + onSuccessDelete(); + break; + case false: + handleClickBeforeLogin(); + break; + } + }; + + return { handleClickAddBlacklist, handleClickCancelBlacklist }; +}; + +export default useBlacklist; diff --git a/src/@components/CardCollectionPage/index.tsx b/src/@components/CardCollectionPage/index.tsx index 997e6500..ffe2dc0d 100644 --- a/src/@components/CardCollectionPage/index.tsx +++ b/src/@components/CardCollectionPage/index.tsx @@ -37,7 +37,6 @@ function CardCollectionContent() { const { isModalOpen: isFilterModalOpen, toggleModal: toggleFilterModal } = useModal(); const { isModalOpen: isLoginModalOpen, toggleModal: toggleLoginModal } = useModal(); - const { isModalOpen: isMenuModalOpen, toggleModal: toggleMenuModal } = useModal(); const isSliderDown = useRecoilValue(isSliderDownState); @@ -45,12 +44,7 @@ function CardCollectionContent() { {isSliderDown ? :
} - + {isVisibleCTAButton && ( )} - - {isMenuModalOpen && } ); } diff --git a/src/core/api/cardCollection.ts b/src/core/api/cardCollection.ts index 9f83b8fb..0867c5e9 100644 --- a/src/core/api/cardCollection.ts +++ b/src/core/api/cardCollection.ts @@ -6,6 +6,16 @@ function addNDeleteBookmark(cardId: string) { return realReq.PUT(`${PATH.USERS_}${PATH.USERS_BOOKMARK}`, { cardId }); } +function addBlacklist(cardId: string) { + return realReq.POST(`${PATH.USERS_}${PATH.CARDS_}${PATH.BLACKLIST}`, { cardId }); +} + +function deleteBlacklist(cardId: string) { + return realReq.DELETE(`${PATH.USERS_}${PATH.CARDS_}${PATH.BLACKLIST}/${cardId}`); +} + export const cardCollectionApi = { addNDeleteBookmark, + addBlacklist, + deleteBlacklist, }; diff --git a/src/core/api/common/axios.ts b/src/core/api/common/axios.ts index c61b9105..4385f72b 100644 --- a/src/core/api/common/axios.ts +++ b/src/core/api/common/axios.ts @@ -31,4 +31,8 @@ export const realReq = { async PATCH(path: string, body: T) { await axiosInstance.patch(path, body); }, + + async DELETE(path: string, option?: { params: string }) { + await axiosInstance.delete(path, option); + }, }; diff --git a/src/core/api/common/constants.ts b/src/core/api/common/constants.ts index f133cd6f..4c732220 100644 --- a/src/core/api/common/constants.ts +++ b/src/core/api/common/constants.ts @@ -15,6 +15,7 @@ export const PATH = { CARDS_GENDER: "/cardByBookmarkedGender", NOTICES: "/notices", MEDLEY: "/medley", + BLACKLIST: "/blacklist", }; export const USER_TOKEN = "piickle-token"; From 905542de86596d4952c1b1077912e883c99f50f9 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Wed, 2 Aug 2023 23:36:23 +0900 Subject: [PATCH 02/14] =?UTF-8?q?[=20feat=20]=20=EB=B8=94=EB=9E=99?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=B7=A8=EC=86=8C=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@components/@common/Toast/ToastProvider.tsx | 4 +++- src/@components/@common/Toast/context.ts | 4 ++++ src/@components/@common/Toast/hooks/useToast.ts | 4 ++-- src/@components/CardCollectionPage/Card/MenuModal/index.tsx | 4 ++-- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/@components/@common/Toast/ToastProvider.tsx b/src/@components/@common/Toast/ToastProvider.tsx index 59c4f2a6..84dbd08f 100644 --- a/src/@components/@common/Toast/ToastProvider.tsx +++ b/src/@components/@common/Toast/ToastProvider.tsx @@ -25,8 +25,10 @@ export default function ToastProvider({ children }: PropsWithChildren) { [setToast, toastTimeout], ); + const blackoutToast = useCallback(() => setToast(null), [setToast]); + return ( - + {children} {toast && ( diff --git a/src/@components/@common/Toast/context.ts b/src/@components/@common/Toast/context.ts index c2bc5ffc..c5f450a9 100644 --- a/src/@components/@common/Toast/context.ts +++ b/src/@components/@common/Toast/context.ts @@ -4,10 +4,14 @@ import { ToastType } from "./ToastProvider"; interface ToastController { showToast: (toast: ToastType) => void; + blackoutToast: () => void; } export const ToastContext = React.createContext({ showToast: () => { throw new Error("Function not implemented."); }, + blackoutToast: () => { + throw new Error("Function not implemented."); + }, }); diff --git a/src/@components/@common/Toast/hooks/useToast.ts b/src/@components/@common/Toast/hooks/useToast.ts index 0538c141..48e686e2 100644 --- a/src/@components/@common/Toast/hooks/useToast.ts +++ b/src/@components/@common/Toast/hooks/useToast.ts @@ -4,7 +4,7 @@ import { ToastContext } from "../context"; import { ToastType } from "../ToastProvider"; export default function useToast() { - const { showToast } = useContext(ToastContext); + const { showToast, blackoutToast } = useContext(ToastContext); - return (toast: ToastType) => showToast(toast); + return { showToast: (toast: ToastType) => showToast(toast), blackoutToast }; } diff --git a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx index 6ec073f5..971be671 100644 --- a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx +++ b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx @@ -17,7 +17,7 @@ type ModalItem = { export default function MenuModal(props: MenuModalProps) { const { currentCardId, closeHandler } = props; - const showToast = useToast(); + const { showToast, blackoutToast } = useToast(); const { handleClickAddBlacklist, handleClickCancelBlacklist } = useBlacklist(() => console.log("todo")); const ModalItems: ModalItem[] = [ @@ -39,7 +39,7 @@ export default function MenuModal(props: MenuModalProps) { showToast({ message: "🚫 해당 대화주제가 더 이상 추천되지 않아요", duration: 3.5, - handleClickCancel: () => handleClickCancelBlacklist(currentCardId, () => console.log("블랙리스트 취소")), + handleClickCancel: () => handleClickCancelBlacklist(currentCardId, blackoutToast), }); }); }, From a4afac46d392f1f5312b7f0483147ec64eba232c Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Wed, 2 Aug 2023 23:40:11 +0900 Subject: [PATCH 03/14] =?UTF-8?q?[=20refactor=20]=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=ED=8C=8C=EB=9D=BC=EB=AF=B8=ED=84=B0=20=EA=B0=9D=EC=B2=B4?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CardCollectionPage/Card/MenuModal/index.tsx | 17 ++++++++++------- .../CardCollectionPage/hooks/useBlacklist.ts | 9 +++++++-- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx index 971be671..bbc27135 100644 --- a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx +++ b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx @@ -34,13 +34,16 @@ export default function MenuModal(props: MenuModalProps) { title: "주제 다시 안보기", isNeedLogin: true, handleClickItem: () => { - handleClickAddBlacklist(currentCardId, () => { - closeHandler(); - showToast({ - message: "🚫 해당 대화주제가 더 이상 추천되지 않아요", - duration: 3.5, - handleClickCancel: () => handleClickCancelBlacklist(currentCardId, blackoutToast), - }); + handleClickAddBlacklist({ + _id: currentCardId, + onSuccess: () => { + closeHandler(); + showToast({ + message: "🚫 해당 대화주제가 더 이상 추천되지 않아요", + duration: 3.5, + handleClickCancel: () => handleClickCancelBlacklist({ _id: currentCardId, onSuccess: blackoutToast }), + }); + }, }); }, }, diff --git a/src/@components/CardCollectionPage/hooks/useBlacklist.ts b/src/@components/CardCollectionPage/hooks/useBlacklist.ts index 6e4e1928..6339dae7 100644 --- a/src/@components/CardCollectionPage/hooks/useBlacklist.ts +++ b/src/@components/CardCollectionPage/hooks/useBlacklist.ts @@ -1,6 +1,11 @@ import { cardCollectionApi } from "../../../core/api/cardCollection"; import useAuth from "../../../core/hooks/useAuth"; +interface handleClickParams { + _id: string; + onSuccess: () => void; +} + const useBlacklist = (handleClickBeforeLogin: () => void) => { const { isLogin } = useAuth(); // const [cardId, setCardId] = useState(); @@ -10,7 +15,7 @@ const useBlacklist = (handleClickBeforeLogin: () => void) => { // onSuccess: onSuccessAdd, // }); - const handleClickAddBlacklist = (_id: string, onSuccessAdd: () => void) => { + const handleClickAddBlacklist = ({ _id, onSuccess: onSuccessAdd }: handleClickParams) => { switch (isLogin) { case true: cardCollectionApi.addBlacklist(_id); @@ -22,7 +27,7 @@ const useBlacklist = (handleClickBeforeLogin: () => void) => { } }; - const handleClickCancelBlacklist = (_id: string, onSuccessDelete: () => void) => { + const handleClickCancelBlacklist = ({ _id, onSuccess: onSuccessDelete }: handleClickParams) => { switch (isLogin) { case true: cardCollectionApi.deleteBlacklist(_id); From c2fcbcd97cbc28f1be773143553af85e22a2eefe Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Thu, 3 Aug 2023 00:41:10 +0900 Subject: [PATCH 04/14] [ feat ] autoslide --- .../CardCollectionPage/Card/MenuModal/index.tsx | 10 ++++++++-- .../CardCollectionPage/Card/index.tsx | 6 ++++-- .../CardCollectionPage/CardSlider/index.tsx | 6 +++--- .../CardCollectionPage/hooks/useCardSwiper.ts | 16 ++++++++++++++-- 4 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx index bbc27135..3fcd9887 100644 --- a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx +++ b/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(); }, }); }, diff --git a/src/@components/CardCollectionPage/Card/index.tsx b/src/@components/CardCollectionPage/Card/index.tsx index af951165..2ba69aca 100644 --- a/src/@components/CardCollectionPage/Card/index.tsx +++ b/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) => { - {isMenuModalOpen && } + {isMenuModalOpen && } ); }; diff --git a/src/@components/CardCollectionPage/CardSlider/index.tsx b/src/@components/CardCollectionPage/CardSlider/index.tsx index 01d2bf4f..dd6e8da4 100644 --- a/src/@components/CardCollectionPage/CardSlider/index.tsx +++ b/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 ( - + {cardLists.map((cardList) => ( - + ))} diff --git a/src/@components/CardCollectionPage/hooks/useCardSwiper.ts b/src/@components/CardCollectionPage/hooks/useCardSwiper.ts index 0994dadf..b1bfeb7c 100644 --- a/src/@components/CardCollectionPage/hooks/useCardSwiper.ts +++ b/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(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 }; } From 480a958b09c80278a3bcb2f38924b1d0e8ab55bd Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Thu, 3 Aug 2023 17:19:21 +0900 Subject: [PATCH 05/14] =?UTF-8?q?[=20feat=20]=20=EB=B9=84=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=EC=8B=9C=20=EB=AA=A8=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Card/MenuModal/index.tsx | 31 ++++++++++--------- .../CardCollectionPage/Card/index.tsx | 11 +++++-- .../CardCollectionPage/hooks/useBlacklist.ts | 6 ++-- 3 files changed, 30 insertions(+), 18 deletions(-) diff --git a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx index 3fcd9887..cf730ec0 100644 --- a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx +++ b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx @@ -8,6 +8,7 @@ interface MenuModalProps { currentCardId: string; closeHandler: () => void; autoSlide: autoSlideType; + openLoginModalHandler: () => void; } type ModalItem = { @@ -18,9 +19,22 @@ type ModalItem = { }; export default function MenuModal(props: MenuModalProps) { - const { currentCardId, closeHandler, autoSlide } = props; + const { currentCardId, closeHandler, autoSlide, openLoginModalHandler } = props; const { showToast, blackoutToast } = useToast(); - const { handleClickAddBlacklist, handleClickCancelBlacklist } = useBlacklist(() => console.log("todo")); + const { handleClickAddBlacklist, handleClickCancelBlacklist } = useBlacklist(openLoginModalHandler); + + const onSuccessAddBlacklist = () => { + closeHandler(); + showToast({ + message: "🚫 해당 대화주제가 더 이상 추천되지 않아요", + duration: 3.5, + handleClickCancel: () => { + handleClickCancelBlacklist({ _id: currentCardId, onSuccess: blackoutToast }); + autoSlide.slideUp(); + }, + }); + autoSlide.slideDown(); + }; const ModalItems: ModalItem[] = [ { @@ -38,18 +52,7 @@ export default function MenuModal(props: MenuModalProps) { handleClickItem: () => { handleClickAddBlacklist({ _id: currentCardId, - onSuccess: () => { - closeHandler(); - showToast({ - message: "🚫 해당 대화주제가 더 이상 추천되지 않아요", - duration: 3.5, - handleClickCancel: () => { - handleClickCancelBlacklist({ _id: currentCardId, onSuccess: blackoutToast }); - autoSlide.slideUp(); - }, - }); - autoSlide.slideDown(); - }, + onSuccess: onSuccessAddBlacklist, }); }, }, diff --git a/src/@components/CardCollectionPage/Card/index.tsx b/src/@components/CardCollectionPage/Card/index.tsx index 2ba69aca..74c9ed97 100644 --- a/src/@components/CardCollectionPage/Card/index.tsx +++ b/src/@components/CardCollectionPage/Card/index.tsx @@ -18,7 +18,7 @@ interface LoginCheckProps { } const Card = (props: LoginCheckProps) => { - const { _id, content, tags, autoSlide } = props; + const { _id, content, tags, autoSlide, openLoginModalHandler } = props; const { isModalOpen: isMenuModalOpen, toggleModal: toggleMenuModal } = useModal(); return ( @@ -30,7 +30,14 @@ const Card = (props: LoginCheckProps) => { - {isMenuModalOpen && } + {isMenuModalOpen && ( + + )} ); }; diff --git a/src/@components/CardCollectionPage/hooks/useBlacklist.ts b/src/@components/CardCollectionPage/hooks/useBlacklist.ts index 6339dae7..9a19ede8 100644 --- a/src/@components/CardCollectionPage/hooks/useBlacklist.ts +++ b/src/@components/CardCollectionPage/hooks/useBlacklist.ts @@ -6,6 +6,8 @@ interface handleClickParams { onSuccess: () => void; } +type handleClickBlacklistType = (params: handleClickParams) => void; + const useBlacklist = (handleClickBeforeLogin: () => void) => { const { isLogin } = useAuth(); // const [cardId, setCardId] = useState(); @@ -15,7 +17,7 @@ const useBlacklist = (handleClickBeforeLogin: () => void) => { // onSuccess: onSuccessAdd, // }); - const handleClickAddBlacklist = ({ _id, onSuccess: onSuccessAdd }: handleClickParams) => { + const handleClickAddBlacklist: handleClickBlacklistType = ({ _id, onSuccess: onSuccessAdd }) => { switch (isLogin) { case true: cardCollectionApi.addBlacklist(_id); @@ -27,7 +29,7 @@ const useBlacklist = (handleClickBeforeLogin: () => void) => { } }; - const handleClickCancelBlacklist = ({ _id, onSuccess: onSuccessDelete }: handleClickParams) => { + const handleClickCancelBlacklist: handleClickBlacklistType = ({ _id, onSuccess: onSuccessDelete }) => { switch (isLogin) { case true: cardCollectionApi.deleteBlacklist(_id); From 2dc28619d3d2a63f6f60428036f5e0a4a619bde3 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Fri, 4 Aug 2023 18:47:52 +0900 Subject: [PATCH 06/14] =?UTF-8?q?[=20feat=20]=20location=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EB=B8=94=EB=9D=BD=20=EB=A9=94=EB=89=B4=20?= =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Card/MenuModal/index.tsx | 31 ++++++++++++++----- .../CardCollectionPage/hooks/useBlacklist.ts | 9 +++++- .../CardCollectionPage/hooks/useCardLists.ts | 3 +- 3 files changed, 34 insertions(+), 9 deletions(-) diff --git a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx index cf730ec0..8a2b48cd 100644 --- a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx +++ b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx @@ -1,3 +1,6 @@ +import { useEffect, useState } from "react"; + +import { LocationType } from "../../../../types/cardCollection"; import Modal from "../../../@common/Modal"; import useToast from "../../../@common/Toast/hooks/useToast"; import useBlacklist from "../../hooks/useBlacklist"; @@ -23,6 +26,8 @@ export default function MenuModal(props: MenuModalProps) { const { showToast, blackoutToast } = useToast(); const { handleClickAddBlacklist, handleClickCancelBlacklist } = useBlacklist(openLoginModalHandler); + const [isBlockShow, setIsBlockShow] = useState(true); + const onSuccessAddBlacklist = () => { closeHandler(); showToast({ @@ -66,16 +71,28 @@ 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 ( - {ModalItems.map(({ emoji, title, isNeedLogin, handleClickItem }, idx) => ( - - {emoji} - {title} - {isNeedLogin && 로그인 시 사용가능 합니다} - - ))} + {ModalItems.map(({ emoji, title, isNeedLogin, handleClickItem }, idx) => { + if (idx === 1 && !isBlockShow) { + return null; + } else { + return ( + + {emoji} + {title} + {isNeedLogin && 로그인 시 사용가능 합니다} + + ); + } + })} ); diff --git a/src/@components/CardCollectionPage/hooks/useBlacklist.ts b/src/@components/CardCollectionPage/hooks/useBlacklist.ts index 9a19ede8..4d94cd8b 100644 --- a/src/@components/CardCollectionPage/hooks/useBlacklist.ts +++ b/src/@components/CardCollectionPage/hooks/useBlacklist.ts @@ -1,5 +1,6 @@ import { cardCollectionApi } from "../../../core/api/cardCollection"; import useAuth from "../../../core/hooks/useAuth"; +import { useCardLists } from "./useCardLists"; interface handleClickParams { _id: string; @@ -16,11 +17,13 @@ const useBlacklist = (handleClickBeforeLogin: () => void) => { // suspense: true, // onSuccess: onSuccessAdd, // }); + //const { mutateCardlists } = useCardLists(); const handleClickAddBlacklist: handleClickBlacklistType = ({ _id, onSuccess: onSuccessAdd }) => { switch (isLogin) { case true: cardCollectionApi.addBlacklist(_id); + //mutateCardlists(); onSuccessAdd(); break; case false: @@ -33,6 +36,7 @@ const useBlacklist = (handleClickBeforeLogin: () => void) => { switch (isLogin) { case true: cardCollectionApi.deleteBlacklist(_id); + //mutateCardlists(); onSuccessDelete(); break; case false: @@ -41,7 +45,10 @@ const useBlacklist = (handleClickBeforeLogin: () => void) => { } }; - return { handleClickAddBlacklist, handleClickCancelBlacklist }; + return { + handleClickAddBlacklist, + handleClickCancelBlacklist, + }; }; export default useBlacklist; diff --git a/src/@components/CardCollectionPage/hooks/useCardLists.ts b/src/@components/CardCollectionPage/hooks/useCardLists.ts index 3fac554e..21c9c38b 100644 --- a/src/@components/CardCollectionPage/hooks/useCardLists.ts +++ b/src/@components/CardCollectionPage/hooks/useCardLists.ts @@ -21,7 +21,7 @@ export function useCardLists() { const fetchingKeyByLocation = getSWRFetchingKeyByLocation(cardsTypeLocation); const optionsByLocation = getSWROptionsByLocation(cardsTypeLocation); - const { data } = useSWR>( + const { data, mutate: mutateCardlists } = useSWR>( fetchingKeyByLocation, realReq.GET_SWR, optionsByLocation, @@ -32,6 +32,7 @@ export function useCardLists() { return { cardLists: getReturnCardLists(data, cardsTypeLocation) ?? [], fetchCardListsWithFilter, + mutateCardlists, }; } From ffc6e5de6a65d736d7e0e8b3bbd98973a87b4982 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Fri, 4 Aug 2023 18:51:23 +0900 Subject: [PATCH 07/14] =?UTF-8?q?[=20etc=20]=20=EC=95=88=EC=93=B0=EB=8A=94?= =?UTF-8?q?=20import=EB=AC=B8=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@components/CardCollectionPage/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/@components/CardCollectionPage/index.tsx b/src/@components/CardCollectionPage/index.tsx index ffe2dc0d..65248149 100644 --- a/src/@components/CardCollectionPage/index.tsx +++ b/src/@components/CardCollectionPage/index.tsx @@ -10,9 +10,6 @@ import useModal from "../@common/hooks/useModal"; import useScroll from "../@common/hooks/useScrollToTop"; import LoginModal from "../@common/LoginModal"; import SuspenseBoundary from "../@common/SuspenseBoundary"; -import useToast from "../@common/Toast/hooks/useToast"; -import Toast from "../@common/Toast/ToastProvider"; -import MenuModal from "./Card/MenuModal"; import CardSlider from "./CardSlider"; import FilterModal from "./FilterModal"; import { useCardLists } from "./hooks/useCardLists"; From 252e931b7410665349e48b8a949483ff4fd40bce Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Fri, 11 Aug 2023 15:04:03 +0900 Subject: [PATCH 08/14] =?UTF-8?q?[=20feat=20]=20=EB=B8=94=EB=9D=BD?= =?UTF-8?q?=EB=90=9C=20=EC=B9=B4=EB=93=9C=20=EB=A1=9C=EC=A7=81=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Card/MenuModal/index.tsx | 8 +-- .../CardCollectionPage/Card/index.tsx | 10 ++- .../CardCollectionPage/CardSlider/index.tsx | 24 +++++-- .../CardCollectionPage/hooks/useBlacklist.ts | 62 ++++++++----------- 4 files changed, 57 insertions(+), 47 deletions(-) diff --git a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx index 8a2b48cd..f10c52ce 100644 --- a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx +++ b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx @@ -3,7 +3,7 @@ import { useEffect, useState } from "react"; import { LocationType } from "../../../../types/cardCollection"; import Modal from "../../../@common/Modal"; import useToast from "../../../@common/Toast/hooks/useToast"; -import useBlacklist from "../../hooks/useBlacklist"; +import { handleClickBlacklistType } from "../../hooks/useBlacklist"; import { autoSlideType } from "../../hooks/useCardSwiper"; import * as St from "./style"; @@ -11,7 +11,8 @@ interface MenuModalProps { currentCardId: string; closeHandler: () => void; autoSlide: autoSlideType; - openLoginModalHandler: () => void; + handleClickAddBlacklist: handleClickBlacklistType; + handleClickCancelBlacklist: handleClickBlacklistType; } type ModalItem = { @@ -22,9 +23,8 @@ type ModalItem = { }; export default function MenuModal(props: MenuModalProps) { - const { currentCardId, closeHandler, autoSlide, openLoginModalHandler } = props; + const { currentCardId, closeHandler, autoSlide, handleClickAddBlacklist, handleClickCancelBlacklist } = props; const { showToast, blackoutToast } = useToast(); - const { handleClickAddBlacklist, handleClickCancelBlacklist } = useBlacklist(openLoginModalHandler); const [isBlockShow, setIsBlockShow] = useState(true); diff --git a/src/@components/CardCollectionPage/Card/index.tsx b/src/@components/CardCollectionPage/Card/index.tsx index 74c9ed97..49026362 100644 --- a/src/@components/CardCollectionPage/Card/index.tsx +++ b/src/@components/CardCollectionPage/Card/index.tsx @@ -2,6 +2,7 @@ import React from "react"; import { GTM_CLASS_NAME } from "../../../util/const/gtm"; import useModal from "../../@common/hooks/useModal"; +import { handleClickBlacklistType } from "../hooks/useBlacklist"; import { autoSlideType } from "../hooks/useCardSwiper"; import TagsSlider from "../TagsSlider"; import CardMenu from "./CardMenu"; @@ -10,15 +11,17 @@ import St from "./style"; interface LoginCheckProps { autoSlide: autoSlideType; - openLoginModalHandler: () => void; _id: string; content: string; isBookmark: boolean; tags: string[]; + openLoginModalHandler: () => void; + handleClickAddBlacklist: handleClickBlacklistType; + handleClickCancelBlacklist: handleClickBlacklistType; } const Card = (props: LoginCheckProps) => { - const { _id, content, tags, autoSlide, openLoginModalHandler } = props; + const { _id, content, tags, autoSlide, handleClickAddBlacklist, handleClickCancelBlacklist } = props; const { isModalOpen: isMenuModalOpen, toggleModal: toggleMenuModal } = useModal(); return ( @@ -35,7 +38,8 @@ const Card = (props: LoginCheckProps) => { currentCardId={_id} closeHandler={toggleMenuModal} autoSlide={autoSlide} - openLoginModalHandler={openLoginModalHandler} + handleClickAddBlacklist={handleClickAddBlacklist} + handleClickCancelBlacklist={handleClickCancelBlacklist} /> )} diff --git a/src/@components/CardCollectionPage/CardSlider/index.tsx b/src/@components/CardCollectionPage/CardSlider/index.tsx index dd6e8da4..021b9e5d 100644 --- a/src/@components/CardCollectionPage/CardSlider/index.tsx +++ b/src/@components/CardCollectionPage/CardSlider/index.tsx @@ -5,6 +5,7 @@ import { Swiper, SwiperSlide } from "swiper/react"; import { CardList } from "../../../types/cardCollection"; import Card from "../Card"; import LastCard from "../Card/LastCard"; +import useBlacklist from "../hooks/useBlacklist"; import useCardSwiper from "../hooks/useCardSwiper"; import St from "./style"; @@ -17,15 +18,28 @@ interface CardSliderProps { const CardSlider = (props: CardSliderProps) => { const { openLoginModalHandler, cardLists, lastCardObsvRef } = props; const { swiperSettings, swiperRef, autoSlide } = useCardSwiper(); + const { blacklist, handleClickAddBlacklist, handleClickCancelBlacklist } = useBlacklist(openLoginModalHandler); return ( - {cardLists.map((cardList) => ( - - - - ))} + {cardLists.map((cardList) => + blacklist.includes(cardList._id) ? ( + +
블락된 카드
+ + ) : ( + + + + ), + )} diff --git a/src/@components/CardCollectionPage/hooks/useBlacklist.ts b/src/@components/CardCollectionPage/hooks/useBlacklist.ts index 4d94cd8b..7d6d2c71 100644 --- a/src/@components/CardCollectionPage/hooks/useBlacklist.ts +++ b/src/@components/CardCollectionPage/hooks/useBlacklist.ts @@ -1,51 +1,43 @@ +import { useCallback, useState } from "react"; + import { cardCollectionApi } from "../../../core/api/cardCollection"; import useAuth from "../../../core/hooks/useAuth"; -import { useCardLists } from "./useCardLists"; interface handleClickParams { _id: string; onSuccess: () => void; } -type handleClickBlacklistType = (params: handleClickParams) => void; +export type handleClickBlacklistType = (params: handleClickParams) => void; const useBlacklist = (handleClickBeforeLogin: () => void) => { const { isLogin } = useAuth(); - // const [cardId, setCardId] = useState(); - - // const { data } = useSWR(cardId ? `${PATH.USERS_}${PATH.CARDS_}${PATH.BLACKLIST}` + cardId : null, realReq.POST, { - // suspense: true, - // onSuccess: onSuccessAdd, - // }); - //const { mutateCardlists } = useCardLists(); - - const handleClickAddBlacklist: handleClickBlacklistType = ({ _id, onSuccess: onSuccessAdd }) => { - switch (isLogin) { - case true: - cardCollectionApi.addBlacklist(_id); - //mutateCardlists(); - onSuccessAdd(); - break; - case false: - handleClickBeforeLogin(); - break; - } - }; - - const handleClickCancelBlacklist: handleClickBlacklistType = ({ _id, onSuccess: onSuccessDelete }) => { - switch (isLogin) { - case true: - cardCollectionApi.deleteBlacklist(_id); - //mutateCardlists(); - onSuccessDelete(); - break; - case false: - handleClickBeforeLogin(); - break; - } - }; + const [blacklist, setBlacklist] = useState([]); + + const handleClickAddBlacklist: handleClickBlacklistType = useCallback( + ({ _id, onSuccess: onSuccessAdd }) => { + switch (isLogin) { + case true: + cardCollectionApi.addBlacklist(_id); + onSuccessAdd(); + setBlacklist((prev) => [...prev, _id]); + break; + case false: + handleClickBeforeLogin(); + break; + } + }, + [isLogin, handleClickBeforeLogin], + ); + + const handleClickCancelBlacklist: handleClickBlacklistType = useCallback(({ _id, onSuccess: onSuccessDelete }) => { + cardCollectionApi.deleteBlacklist(_id); + setBlacklist((prev) => prev.filter((id) => id !== _id)); + onSuccessDelete(); + }, []); return { + blacklist, handleClickAddBlacklist, handleClickCancelBlacklist, }; From 23275a343ff52b0b66925f8f3c057faa9eaca1e7 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Fri, 11 Aug 2023 15:09:21 +0900 Subject: [PATCH 09/14] =?UTF-8?q?[=20fix=20]=20\n=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@components/CardCollectionPage/Card/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/@components/CardCollectionPage/Card/index.tsx b/src/@components/CardCollectionPage/Card/index.tsx index 49026362..f74d4bda 100644 --- a/src/@components/CardCollectionPage/Card/index.tsx +++ b/src/@components/CardCollectionPage/Card/index.tsx @@ -27,7 +27,7 @@ const Card = (props: LoginCheckProps) => { return ( - {content} + {content.replace(/\\n/g, "")} From f7b724e3a56169b4ced9f65225756c1b4f64e0f3 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Fri, 11 Aug 2023 15:11:21 +0900 Subject: [PATCH 10/14] =?UTF-8?q?[=20fix=20]=20MenuModal=20width=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@components/CardCollectionPage/Card/MenuModal/style.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/@components/CardCollectionPage/Card/MenuModal/style.ts b/src/@components/CardCollectionPage/Card/MenuModal/style.ts index 1ac26d87..b2ba6c76 100644 --- a/src/@components/CardCollectionPage/Card/MenuModal/style.ts +++ b/src/@components/CardCollectionPage/Card/MenuModal/style.ts @@ -6,13 +6,12 @@ export const ModalContainer = styled.aside` display: flex; flex-direction: column; - width: 36rem; + width: 100%; `; export const ModalItemWrapper = styled.div` display: flex; - width: 36rem; padding: 1.6rem; ${({ theme }) => theme.newFonts.body4}; From f089627589e111dd7e18c72282025661b042b2e0 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Fri, 11 Aug 2023 17:50:16 +0900 Subject: [PATCH 11/14] =?UTF-8?q?Revert=20"[=20fix=20]=20\n=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 23275a343ff52b0b66925f8f3c057faa9eaca1e7. --- src/@components/CardCollectionPage/Card/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/@components/CardCollectionPage/Card/index.tsx b/src/@components/CardCollectionPage/Card/index.tsx index f74d4bda..49026362 100644 --- a/src/@components/CardCollectionPage/Card/index.tsx +++ b/src/@components/CardCollectionPage/Card/index.tsx @@ -27,7 +27,7 @@ const Card = (props: LoginCheckProps) => { return ( - {content.replace(/\\n/g, "")} + {content} From c82096ae9d79e5709770a1ac7394dbd93a47bab8 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Tue, 15 Aug 2023 21:24:55 +0900 Subject: [PATCH 12/14] [ feat ] Blocked Card UI --- .../CardCollectionPage/Card/index.tsx | 13 +++++-- .../CardCollectionPage/Card/style.ts | 34 ++++++++++++++++++- .../CardCollectionPage/CardSlider/index.tsx | 29 +++++++--------- .../CardCollectionPage/hooks/useBlacklist.ts | 6 ++-- 4 files changed, 59 insertions(+), 23 deletions(-) diff --git a/src/@components/CardCollectionPage/Card/index.tsx b/src/@components/CardCollectionPage/Card/index.tsx index 49026362..fef2d901 100644 --- a/src/@components/CardCollectionPage/Card/index.tsx +++ b/src/@components/CardCollectionPage/Card/index.tsx @@ -18,14 +18,15 @@ interface LoginCheckProps { openLoginModalHandler: () => void; handleClickAddBlacklist: handleClickBlacklistType; handleClickCancelBlacklist: handleClickBlacklistType; + isBlocked: boolean; } const Card = (props: LoginCheckProps) => { - const { _id, content, tags, autoSlide, handleClickAddBlacklist, handleClickCancelBlacklist } = props; + const { _id, content, tags, autoSlide, handleClickAddBlacklist, handleClickCancelBlacklist, isBlocked } = props; const { isModalOpen: isMenuModalOpen, toggleModal: toggleMenuModal } = useModal(); return ( - + {content} @@ -33,6 +34,14 @@ const Card = (props: LoginCheckProps) => { + + {isBlocked && ( + + 다시 안보기를 설정한 주제입니다 + handleClickCancelBlacklist({ _id })}>취소하기 + + )} + {isMenuModalOpen && ( ` position: relative; display: flex; @@ -37,10 +37,42 @@ const TagsWrapper = styled.div` margin-top: 1.6rem; `; +const BlockCardWrapper = styled.div` + position: absolute; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + width: 100%; + height: 100%; + + gap: 0.8rem; + + border-radius: 0.8rem; + background: var(--blackblur, rgba(0, 0, 0, 0.6)); + backdrop-filter: blur(1.2rem); +`; + +const BlockCardText = styled.p` + color: ${({ theme }) => theme.newColors.white}; + ${({ theme }) => theme.newFonts.body4}; +`; + +const BlockCardButton = styled.button` + color: ${({ theme }) => theme.newColors.white}; + ${({ theme }) => theme.newFonts.caption1}; + text-decoration: underline; +`; + const St = { Card, Container, ContentWrapper, TagsWrapper, + BlockCardWrapper, + BlockCardText, + BlockCardButton, }; + export default St; diff --git a/src/@components/CardCollectionPage/CardSlider/index.tsx b/src/@components/CardCollectionPage/CardSlider/index.tsx index 021b9e5d..fc4e5e13 100644 --- a/src/@components/CardCollectionPage/CardSlider/index.tsx +++ b/src/@components/CardCollectionPage/CardSlider/index.tsx @@ -23,23 +23,18 @@ const CardSlider = (props: CardSliderProps) => { return ( - {cardLists.map((cardList) => - blacklist.includes(cardList._id) ? ( - -
블락된 카드
- - ) : ( - - - - ), - )} + {cardLists.map((cardList) => ( + + + + ))} diff --git a/src/@components/CardCollectionPage/hooks/useBlacklist.ts b/src/@components/CardCollectionPage/hooks/useBlacklist.ts index 7d6d2c71..ab77ee68 100644 --- a/src/@components/CardCollectionPage/hooks/useBlacklist.ts +++ b/src/@components/CardCollectionPage/hooks/useBlacklist.ts @@ -5,7 +5,7 @@ import useAuth from "../../../core/hooks/useAuth"; interface handleClickParams { _id: string; - onSuccess: () => void; + onSuccess?: () => void; } export type handleClickBlacklistType = (params: handleClickParams) => void; @@ -19,7 +19,7 @@ const useBlacklist = (handleClickBeforeLogin: () => void) => { switch (isLogin) { case true: cardCollectionApi.addBlacklist(_id); - onSuccessAdd(); + onSuccessAdd && onSuccessAdd(); setBlacklist((prev) => [...prev, _id]); break; case false: @@ -33,7 +33,7 @@ const useBlacklist = (handleClickBeforeLogin: () => void) => { const handleClickCancelBlacklist: handleClickBlacklistType = useCallback(({ _id, onSuccess: onSuccessDelete }) => { cardCollectionApi.deleteBlacklist(_id); setBlacklist((prev) => prev.filter((id) => id !== _id)); - onSuccessDelete(); + onSuccessDelete && onSuccessDelete(); }, []); return { From 62710ee34c578eb3fe640b0bf85e8e2945e0df81 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Tue, 15 Aug 2023 21:31:23 +0900 Subject: [PATCH 13/14] [ refactor ] export getIsBlacklist instead --- src/@components/CardCollectionPage/Card/index.tsx | 12 +++++------- src/@components/CardCollectionPage/Card/style.ts | 2 +- .../CardCollectionPage/CardSlider/index.tsx | 10 +--------- .../CardCollectionPage/hooks/useBlacklist.ts | 4 +++- 4 files changed, 10 insertions(+), 18 deletions(-) diff --git a/src/@components/CardCollectionPage/Card/index.tsx b/src/@components/CardCollectionPage/Card/index.tsx index fef2d901..e01dc470 100644 --- a/src/@components/CardCollectionPage/Card/index.tsx +++ b/src/@components/CardCollectionPage/Card/index.tsx @@ -2,7 +2,7 @@ import React from "react"; import { GTM_CLASS_NAME } from "../../../util/const/gtm"; import useModal from "../../@common/hooks/useModal"; -import { handleClickBlacklistType } from "../hooks/useBlacklist"; +import useBlacklist from "../hooks/useBlacklist"; import { autoSlideType } from "../hooks/useCardSwiper"; import TagsSlider from "../TagsSlider"; import CardMenu from "./CardMenu"; @@ -16,17 +16,15 @@ interface LoginCheckProps { isBookmark: boolean; tags: string[]; openLoginModalHandler: () => void; - handleClickAddBlacklist: handleClickBlacklistType; - handleClickCancelBlacklist: handleClickBlacklistType; - isBlocked: boolean; } const Card = (props: LoginCheckProps) => { - const { _id, content, tags, autoSlide, handleClickAddBlacklist, handleClickCancelBlacklist, isBlocked } = props; + const { _id, content, tags, autoSlide, openLoginModalHandler } = props; const { isModalOpen: isMenuModalOpen, toggleModal: toggleMenuModal } = useModal(); + const { getIsBlacklist, handleClickAddBlacklist, handleClickCancelBlacklist } = useBlacklist(openLoginModalHandler); return ( - + {content} @@ -35,7 +33,7 @@ const Card = (props: LoginCheckProps) => { - {isBlocked && ( + {getIsBlacklist(_id) && ( 다시 안보기를 설정한 주제입니다 handleClickCancelBlacklist({ _id })}>취소하기 diff --git a/src/@components/CardCollectionPage/Card/style.ts b/src/@components/CardCollectionPage/Card/style.ts index c1d072b4..cda265da 100644 --- a/src/@components/CardCollectionPage/Card/style.ts +++ b/src/@components/CardCollectionPage/Card/style.ts @@ -1,6 +1,6 @@ import styled from "styled-components"; -const Card = styled.article<{ isblocked: boolean }>` +const Card = styled.article` position: relative; display: flex; diff --git a/src/@components/CardCollectionPage/CardSlider/index.tsx b/src/@components/CardCollectionPage/CardSlider/index.tsx index fc4e5e13..a9afecf4 100644 --- a/src/@components/CardCollectionPage/CardSlider/index.tsx +++ b/src/@components/CardCollectionPage/CardSlider/index.tsx @@ -18,21 +18,13 @@ interface CardSliderProps { const CardSlider = (props: CardSliderProps) => { const { openLoginModalHandler, cardLists, lastCardObsvRef } = props; const { swiperSettings, swiperRef, autoSlide } = useCardSwiper(); - const { blacklist, handleClickAddBlacklist, handleClickCancelBlacklist } = useBlacklist(openLoginModalHandler); return ( {cardLists.map((cardList) => ( - + ))} diff --git a/src/@components/CardCollectionPage/hooks/useBlacklist.ts b/src/@components/CardCollectionPage/hooks/useBlacklist.ts index ab77ee68..6151ad25 100644 --- a/src/@components/CardCollectionPage/hooks/useBlacklist.ts +++ b/src/@components/CardCollectionPage/hooks/useBlacklist.ts @@ -36,8 +36,10 @@ const useBlacklist = (handleClickBeforeLogin: () => void) => { onSuccessDelete && onSuccessDelete(); }, []); + const getIsBlacklist = useCallback((_id: string) => blacklist.includes(_id), [blacklist]); + return { - blacklist, + getIsBlacklist, handleClickAddBlacklist, handleClickCancelBlacklist, }; From d1d54c97063112e9dca05867e690d3cbd9d58a16 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Thu, 17 Aug 2023 23:40:51 +0900 Subject: [PATCH 14/14] [ refactor ] add useShowByQuery --- src/@components/@common/hooks/useShowByQuery.ts | 15 +++++++++++++++ .../CardCollectionPage/Card/MenuModal/index.tsx | 9 ++------- 2 files changed, 17 insertions(+), 7 deletions(-) create mode 100644 src/@components/@common/hooks/useShowByQuery.ts diff --git a/src/@components/@common/hooks/useShowByQuery.ts b/src/@components/@common/hooks/useShowByQuery.ts new file mode 100644 index 00000000..24353765 --- /dev/null +++ b/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(false); + + useEffect(() => { + const cardType = new URLSearchParams(window.location.search.split("?")[1]).get("type"); + setIsShow(!locationTypes.includes((cardType as LocationType) || "")); + }, [locationTypes]); + + return { isShow }; +} diff --git a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx index f10c52ce..2d7fba98 100644 --- a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx +++ b/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(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 (