From 74b6483ce2a017a46147e5cedfa47bc09bd41dbf Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Sun, 9 Jul 2023 00:13:53 +0900 Subject: [PATCH 01/14] =?UTF-8?q?[=20feat=20]=20=EB=B2=A0=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=ED=94=BC=ED=81=B4=EB=9E=AD=ED=82=B9=20api=EC=97=B0?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BestPiickleRank/RankItem/index.tsx | 9 +++---- .../BestPiicklePage/BestPiickleRank/index.tsx | 24 ++++++++++++------- 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/src/@components/BestPiicklePage/BestPiickleRank/RankItem/index.tsx b/src/@components/BestPiicklePage/BestPiickleRank/RankItem/index.tsx index de8ad5da..bb3c21a9 100644 --- a/src/@components/BestPiicklePage/BestPiickleRank/RankItem/index.tsx +++ b/src/@components/BestPiicklePage/BestPiickleRank/RankItem/index.tsx @@ -12,23 +12,24 @@ interface RankItemProps { cardId: string; content: string; rank: number; + isBookmark: boolean; } export default function RankItem(props: RankItemProps) { - const { cardId, content, rank } = props; + const { cardId, content, rank, isBookmark } = props; const navigateRankCollection = useNavigateCardCollection(LocationType.BEST) as NavigateCardCollectionBookMarkType; - const [isBookmarked, setIsBookmarked] = useState(true); + const [isBookmarked, setIsBookmarked] = useState(isBookmark); const toggleBookmark = () => { setIsBookmarked((prev) => !prev); - //cardCollectionApi.addNDeleteBookmark(cardId); + cardCollectionApi.addNDeleteBookmark(cardId); }; return ( - {rank} + {rank + 1} {content} diff --git a/src/@components/BestPiicklePage/BestPiickleRank/index.tsx b/src/@components/BestPiicklePage/BestPiickleRank/index.tsx index cecaf9a0..35a2d7ff 100644 --- a/src/@components/BestPiicklePage/BestPiickleRank/index.tsx +++ b/src/@components/BestPiicklePage/BestPiickleRank/index.tsx @@ -1,5 +1,10 @@ +import { LocationType } from "../../../types/cardCollection"; import { HeadingTitle } from "../../../util/main/headingTitles"; import HeadingTitleContainer from "../../@common/HeadingTitleContainer"; +import useNavigateCardCollection, { + NavigateCardCollectionBookMarkType, +} from "../../@common/hooks/useNavigateCardCollection"; +import { useBestPiickle } from "../../MainPage/hooks/useBestPiickle"; import RankItem from "./RankItem"; import * as St from "./style"; @@ -9,20 +14,21 @@ const rankTitles: HeadingTitle = { }; export default function BestPiickleRank() { + const { bestPiickle } = useBestPiickle(); + + const navigateRankCollection = useNavigateCardCollection(LocationType.BEST) as NavigateCardCollectionBookMarkType; return ( {/* todo : rankitem id 수정*/} - - - - - - - - + {bestPiickle && + [...bestPiickle.data] + .slice(0, 8) + .map(({ _id, content, isBookmark }, idx) => ( + + ))} - 이어서 베스트 피클 카드 보기 + navigateRankCollection(8)}>이어서 베스트 피클 카드 보기 ); From 8b68ef5c050c97b17b4021c18cdd73c4a2588578 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Sun, 9 Jul 2023 00:15:53 +0900 Subject: [PATCH 02/14] =?UTF-8?q?[=20refactor=20]=20St=20=EC=BB=A8?= =?UTF-8?q?=EB=B2=A4=EC=85=98=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@components/BestPiicklePage/index.tsx | 2 +- src/@components/BestPiicklePage/style.ts | 7 +------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/@components/BestPiicklePage/index.tsx b/src/@components/BestPiicklePage/index.tsx index eef6b368..c763c210 100644 --- a/src/@components/BestPiicklePage/index.tsx +++ b/src/@components/BestPiicklePage/index.tsx @@ -4,7 +4,7 @@ import Header from "../@common/Header"; import SuspenseBoundary from "../@common/SuspenseBoundary"; import BestPiickleRank from "./BestPiickleRank"; import BestPiickleRecommend from "./BestPiickleRecommend"; -import St from "./style"; +import * as St from "./style"; export default function BestPiicklePage() { return ( diff --git a/src/@components/BestPiicklePage/style.ts b/src/@components/BestPiicklePage/style.ts index f6668530..8a70aaf9 100644 --- a/src/@components/BestPiicklePage/style.ts +++ b/src/@components/BestPiicklePage/style.ts @@ -1,11 +1,6 @@ import styled from "styled-components"; -const Root = styled.main` +export const Root = styled.main` display: flex; flex-direction: column; `; - -const St = { - Root, -}; -export default St; From b94643f26160a4a402b98911bd69b32367bcd859 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Sun, 9 Jul 2023 00:37:25 +0900 Subject: [PATCH 03/14] =?UTF-8?q?[=20feat=20]=20=EC=B5=9C=EA=B7=BC=20?= =?UTF-8?q?=EB=B6=81=EB=A7=88=ED=81=AC=EB=90=9C=20=EC=B9=B4=EB=93=9C=20?= =?UTF-8?q?=EC=A1=B0=ED=9A=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RecommendItem/index.tsx | 30 +++++++++---------- .../hooks/useRecentlyBookmarked.ts | 16 ++++++++++ .../BestPiickleRecommend/index.tsx | 13 ++++---- src/core/api/common/constants.ts | 1 + src/types/cardCollection.ts | 5 ++++ 5 files changed, 45 insertions(+), 20 deletions(-) create mode 100644 src/@components/BestPiicklePage/BestPiickleRecommend/hooks/useRecentlyBookmarked.ts diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx b/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx index ec9854bf..7766fafd 100644 --- a/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx +++ b/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx @@ -1,6 +1,6 @@ import BestPiickleCard from "../../../@common/BestPiickleCard"; import useDraggingContainer from "../../../@common/hooks/useDraggingContainer"; -import { useBestPiickle } from "../../../MainPage/hooks/useBestPiickle"; +import { useRecentlyBookmarked } from "../hooks/useRecentlyBookmarked"; import * as St from "./style"; interface RecommendProps { @@ -9,26 +9,26 @@ interface RecommendProps { export default function RecommendItem(props: RecommendProps) { const { recommendType } = props; - const { bestPiickle } = useBestPiickle(); + const { recentlyBookmarkedCards } = useRecentlyBookmarked(); const { scrollableContainerProps, isDragging } = useDraggingContainer(); + return ( {recommendType} - {bestPiickle && ( + {recentlyBookmarkedCards && ( - {bestPiickle && - bestPiickle.data.slice(0, 4).map((bestPiickle, idx) => { - return ( - - ); - })} + {recentlyBookmarkedCards.slice(0, 4).map((bestPiickle, idx) => { + return ( + + ); + })} )} diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/hooks/useRecentlyBookmarked.ts b/src/@components/BestPiicklePage/BestPiickleRecommend/hooks/useRecentlyBookmarked.ts new file mode 100644 index 00000000..a62101a4 --- /dev/null +++ b/src/@components/BestPiicklePage/BestPiickleRecommend/hooks/useRecentlyBookmarked.ts @@ -0,0 +1,16 @@ +import useSWR from "swr"; + +import { realReq } from "../../../../core/api/common/axios"; +import { PATH } from "../../../../core/api/common/constants"; +import { RecentCardList } from "../../../../types/cardCollection"; +import { PiickleSWRResponse } from "../../../../types/remote/swr"; + +export function useRecentlyBookmarked() { + const { data } = useSWR>(`${PATH.CARDS_}${PATH.CARDS_RECENT}`, realReq.GET_SWR, { + suspense: true, + }); + + return { + recentlyBookmarkedCards: data?.data.data.cardResponseDtos, + }; +} diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx b/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx index fc446455..ce3c9812 100644 --- a/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx +++ b/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx @@ -1,5 +1,6 @@ import { HeadingTitle } from "../../../util/main/headingTitles"; import HeadingTitleContainer from "../../@common/HeadingTitleContainer"; +import { useRecentlyBookmarked } from "./hooks/useRecentlyBookmarked"; import RecommendItem from "./RecommendItem"; import * as St from "./style"; @@ -8,16 +9,18 @@ const recommendTitles: HeadingTitle = { content: "", }; +const recommendSubtitles: string[] = [ + "💖 유저들이 가장 최근에 북마크한 대화주제", + "👩 여성이 북마크한 대화주제들", + "👱‍♂️ 남성이 북마크한 대화주제를 확인해보세요", +]; + export default function BestPiickleRecommend() { return ( - {[ - "💖 유저들이 가장 최근에 북마크한 대화주제", - "👩 여성이 북마크한 대화주제들", - "👱‍♂️ 남성이 북마크한 대화주제를 확인해보세요", - ].map((recommendType, idx) => ( + {recommendSubtitles.map((recommendType, idx) => ( ))} diff --git a/src/core/api/common/constants.ts b/src/core/api/common/constants.ts index bda52959..2507098b 100644 --- a/src/core/api/common/constants.ts +++ b/src/core/api/common/constants.ts @@ -10,6 +10,7 @@ export const PATH = { BALLOTS: "/ballots", CARDS_: "/cards", CARDS_BEST: "/best", + CARDS_RECENT: "/recentlyBookmarkedCard", NOTICES: "/notices", MEDLEY: "/medley", }; diff --git a/src/types/cardCollection.ts b/src/types/cardCollection.ts index a1e1db75..730ed17b 100644 --- a/src/types/cardCollection.ts +++ b/src/types/cardCollection.ts @@ -48,3 +48,8 @@ export interface CardList { isBookmark: boolean; filter: string[]; } + +export interface RecentCardList { + recentlyDate: string; + cardResponseDtos: CardList[]; +} From f4d7b30489156cd83f42cc7889fa0d141f86ab57 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Sun, 9 Jul 2023 00:51:10 +0900 Subject: [PATCH 04/14] =?UTF-8?q?[=20fix=20]=20button=20descent=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@components/@common/BestPiickleCard/index.tsx | 2 +- src/@components/@common/BestPiickleCard/style.ts | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/@components/@common/BestPiickleCard/index.tsx b/src/@components/@common/BestPiickleCard/index.tsx index 7a36e9bf..c7228937 100644 --- a/src/@components/@common/BestPiickleCard/index.tsx +++ b/src/@components/@common/BestPiickleCard/index.tsx @@ -45,7 +45,7 @@ export default function BestPiickleCard(props: BestPiickleCardProps) {
보고 싶다면? - 나머지 보기 + 나머지 보기 )} diff --git a/src/@components/@common/BestPiickleCard/style.ts b/src/@components/@common/BestPiickleCard/style.ts index 82683011..d6e1eb94 100644 --- a/src/@components/@common/BestPiickleCard/style.ts +++ b/src/@components/@common/BestPiickleCard/style.ts @@ -56,7 +56,11 @@ export const LastCard = styled(BestPiickleCard)` background: ${({ theme }) => theme.newColors.white}; `; -export const LastCardButton = styled.button` +export const LastCardWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + margin-top: 1.2rem; align-self: flex-end; From 341f58d801b568582c2df1a85311a4f57f5ba81f Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Sun, 9 Jul 2023 01:51:09 +0900 Subject: [PATCH 05/14] =?UTF-8?q?[=20feat=20]=20=EC=84=B1=EB=B3=84?= =?UTF-8?q?=EB=B3=84=20=EC=B9=B4=EB=93=9C=EC=A1=B0=ED=9A=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../@common/BestPiickleCard/index.tsx | 5 +++-- .../hooks/useNavigateCardCollection.ts | 5 +++++ .../RecommendItem/index.tsx | 11 +++++++--- .../hooks/useCardsByGender.ts | 20 +++++++++++++++++++ .../BestPiickleRecommend/index.tsx | 1 - .../MainPage/BestPiickle/index.tsx | 2 ++ src/core/api/common/constants.ts | 1 + src/types/cardCollection.ts | 1 + 8 files changed, 40 insertions(+), 6 deletions(-) create mode 100644 src/@components/BestPiicklePage/BestPiickleRecommend/hooks/useCardsByGender.ts diff --git a/src/@components/@common/BestPiickleCard/index.tsx b/src/@components/@common/BestPiickleCard/index.tsx index c7228937..9fd398cb 100644 --- a/src/@components/@common/BestPiickleCard/index.tsx +++ b/src/@components/@common/BestPiickleCard/index.tsx @@ -12,14 +12,15 @@ interface BestPiickleCardProps { idx: number; canNavigate: boolean; isLast?: boolean; + locationType: LocationType; } export default function BestPiickleCard(props: BestPiickleCardProps) { - const { bestPiickle, idx, canNavigate, isLast } = props; + const { bestPiickle, idx, canNavigate, isLast, locationType } = props; const { content, tags } = bestPiickle; const GTM_IDX_KEY = `mainBestPiickle${idx + 1}`; - const navigateCardCollection = useNavigateCardCollection(LocationType.BEST) as NavigateCardCollectionBestType; + const navigateCardCollection = useNavigateCardCollection(locationType) as NavigateCardCollectionBestType; const onClickCard = () => { if (!canNavigate) return; diff --git a/src/@components/@common/hooks/useNavigateCardCollection.ts b/src/@components/@common/hooks/useNavigateCardCollection.ts index a3d753f2..fc6682d4 100644 --- a/src/@components/@common/hooks/useNavigateCardCollection.ts +++ b/src/@components/@common/hooks/useNavigateCardCollection.ts @@ -57,6 +57,11 @@ export default function useNavigateCardCollection(locationType: LocationType) { navigate(`${routePaths.CardCollection}?type=${LocationType.MEDLEY}&medleyId=${medleyId}`); setSliderIdx(sliderIdx); }; + case LocationType.RECENT: + return (medleyId: string, sliderIdx = 0) => { + navigate(`${routePaths.CardCollection}?type=${LocationType.RECENT}`); + setSliderIdx(sliderIdx); + }; } } diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx b/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx index 7766fafd..918cf62c 100644 --- a/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx +++ b/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx @@ -1,5 +1,7 @@ +import { LocationType } from "../../../../types/cardCollection"; import BestPiickleCard from "../../../@common/BestPiickleCard"; import useDraggingContainer from "../../../@common/hooks/useDraggingContainer"; +import { useCardsByGender } from "../hooks/useCardsByGender"; import { useRecentlyBookmarked } from "../hooks/useRecentlyBookmarked"; import * as St from "./style"; @@ -10,6 +12,8 @@ interface RecommendProps { export default function RecommendItem(props: RecommendProps) { const { recommendType } = props; const { recentlyBookmarkedCards } = useRecentlyBookmarked(); + const maleBookmarkedCards = useCardsByGender("남"); + const femaleBookmarkedCards = useCardsByGender("여"); const { scrollableContainerProps, isDragging } = useDraggingContainer(); return ( @@ -18,14 +22,15 @@ export default function RecommendItem(props: RecommendProps) { {recentlyBookmarkedCards && ( - {recentlyBookmarkedCards.slice(0, 4).map((bestPiickle, idx) => { + {recentlyBookmarkedCards.slice(0, 4).map((recenltyBookmarked, idx) => { return ( ); })} diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/hooks/useCardsByGender.ts b/src/@components/BestPiicklePage/BestPiickleRecommend/hooks/useCardsByGender.ts new file mode 100644 index 00000000..3d11add8 --- /dev/null +++ b/src/@components/BestPiicklePage/BestPiickleRecommend/hooks/useCardsByGender.ts @@ -0,0 +1,20 @@ +import useSWR from "swr"; + +import { realReq } from "../../../../core/api/common/axios"; +import { PATH } from "../../../../core/api/common/constants"; +import { CardList } from "../../../../types/cardCollection"; +import { PiickleSWRResponse } from "../../../../types/remote/swr"; + +export function useCardsByGender(gender: "남" | "여") { + const { data } = useSWR>( + `${PATH.CARDS_}${PATH.CARDS_GENDER}/${gender}`, + realReq.GET_SWR, + { + suspense: true, + }, + ); + + return { + genderBookmarkedCards: data?.data.data, + }; +} diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx b/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx index ce3c9812..52e93887 100644 --- a/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx +++ b/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx @@ -1,6 +1,5 @@ import { HeadingTitle } from "../../../util/main/headingTitles"; import HeadingTitleContainer from "../../@common/HeadingTitleContainer"; -import { useRecentlyBookmarked } from "./hooks/useRecentlyBookmarked"; import RecommendItem from "./RecommendItem"; import * as St from "./style"; diff --git a/src/@components/MainPage/BestPiickle/index.tsx b/src/@components/MainPage/BestPiickle/index.tsx index 17578115..f8f29ac5 100644 --- a/src/@components/MainPage/BestPiickle/index.tsx +++ b/src/@components/MainPage/BestPiickle/index.tsx @@ -1,4 +1,5 @@ import { routePaths } from "../../../core/routes/path"; +import { LocationType } from "../../../types/cardCollection"; import { headingTitles } from "../../../util/main/headingTitles"; import BestPiickleCard from "../../@common/BestPiickleCard"; import HeadingTitleContainer from "../../@common/HeadingTitleContainer"; @@ -29,6 +30,7 @@ export default function BestPiickle() { idx={idx} canNavigate={!isDragging} isLast={idx !== 5} + locationType={LocationType.BEST} /> ); })} diff --git a/src/core/api/common/constants.ts b/src/core/api/common/constants.ts index 2507098b..43566117 100644 --- a/src/core/api/common/constants.ts +++ b/src/core/api/common/constants.ts @@ -11,6 +11,7 @@ export const PATH = { CARDS_: "/cards", CARDS_BEST: "/best", CARDS_RECENT: "/recentlyBookmarkedCard", + CARDS_GENDER: "/cardByBookmarkedGender", NOTICES: "/notices", MEDLEY: "/medley", }; diff --git a/src/types/cardCollection.ts b/src/types/cardCollection.ts index 730ed17b..cc75af32 100644 --- a/src/types/cardCollection.ts +++ b/src/types/cardCollection.ts @@ -5,6 +5,7 @@ export const enum LocationType { CATEGORY = "category", FILTER = "filter", MEDLEY = "medley", + RECENT = "recent", } interface AllTypeLocation { From 937f53bedd393cc662968fb394e699a28e80567f Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Sun, 9 Jul 2023 02:20:57 +0900 Subject: [PATCH 06/14] =?UTF-8?q?[=20feat=20]=20NavigateRecentCollection?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@components/@common/BestPiickleCard/index.tsx | 4 ++-- src/@components/@common/hooks/useNavigateCardCollection.ts | 4 +++- src/@components/CardCollectionPage/hooks/useCardLists.ts | 6 ++++++ src/types/cardCollection.ts | 7 ++++++- 4 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/@components/@common/BestPiickleCard/index.tsx b/src/@components/@common/BestPiickleCard/index.tsx index 9fd398cb..96331d15 100644 --- a/src/@components/@common/BestPiickleCard/index.tsx +++ b/src/@components/@common/BestPiickleCard/index.tsx @@ -1,6 +1,6 @@ import { LocationType } from "../../../types/cardCollection"; import { GTM_CLASS_NAME } from "../../../util/const/gtm"; -import useNavigateCardCollection, { NavigateCardCollectionBestType } from "../hooks/useNavigateCardCollection"; +import useNavigateCardCollection, { NavigateRecentCollectionType } from "../hooks/useNavigateCardCollection"; import * as St from "./style"; interface BestPiickleCardProps { @@ -20,7 +20,7 @@ export default function BestPiickleCard(props: BestPiickleCardProps) { const { content, tags } = bestPiickle; const GTM_IDX_KEY = `mainBestPiickle${idx + 1}`; - const navigateCardCollection = useNavigateCardCollection(locationType) as NavigateCardCollectionBestType; + const navigateCardCollection = useNavigateCardCollection(locationType) as NavigateRecentCollectionType; const onClickCard = () => { if (!canNavigate) return; diff --git a/src/@components/@common/hooks/useNavigateCardCollection.ts b/src/@components/@common/hooks/useNavigateCardCollection.ts index fc6682d4..4d43d7ab 100644 --- a/src/@components/@common/hooks/useNavigateCardCollection.ts +++ b/src/@components/@common/hooks/useNavigateCardCollection.ts @@ -12,6 +12,7 @@ export type NavigateCardCollectionBookMarkType = (sliderIdx?: number) => void; export type NavigateCardCollectionCategoryType = (categoryId: string, sliderIdx?: number) => void; export type NavigateCardCollectionFilterType = (filterTypes: string[], sliderIdx?: number) => void; export type NavigateCardCollectionMedleyType = (medleyId: string, sliderIdx?: number) => void; +export type NavigateRecentCollectionType = (sliderIdx?: number) => void; export default function useNavigateCardCollection(locationType: LocationType) { const navigate = useNavigate(); @@ -57,8 +58,9 @@ export default function useNavigateCardCollection(locationType: LocationType) { navigate(`${routePaths.CardCollection}?type=${LocationType.MEDLEY}&medleyId=${medleyId}`); setSliderIdx(sliderIdx); }; + case LocationType.RECENT: - return (medleyId: string, sliderIdx = 0) => { + return (sliderIdx = 0) => { navigate(`${routePaths.CardCollection}?type=${LocationType.RECENT}`); setSliderIdx(sliderIdx); }; diff --git a/src/@components/CardCollectionPage/hooks/useCardLists.ts b/src/@components/CardCollectionPage/hooks/useCardLists.ts index d795e73a..19a854f1 100644 --- a/src/@components/CardCollectionPage/hooks/useCardLists.ts +++ b/src/@components/CardCollectionPage/hooks/useCardLists.ts @@ -11,6 +11,7 @@ import useCardListsFilter from "./useCardListsFilter"; interface ExtendedCardList extends Array { cardList?: CardList[]; // with category id cards?: CardList[]; // with medly id + cardResponseDtos?: CardList[]; } export function useCardLists() { @@ -43,6 +44,8 @@ function getReturnCardLists( return data?.data.data.cardList; case LocationType.MEDLEY: return data?.data.data.cards; + case LocationType.RECENT: + return data?.data.data.cardResponseDtos; default: return data?.data.data; } @@ -88,6 +91,9 @@ function getSWRFetchingKeyByLocation(cardsTypeLocation: CardsTypeLocation) { case LocationType.FILTER: { return `${PATH.CATEGORIES_}${PATH.CATEGORIES_CARDS}?${cardsTypeLocation.filterTypes}`; } + case LocationType.RECENT: + return `${PATH.CARDS_}${PATH.CARDS_RECENT}`; + case LocationType.ALL: default: { const searchParams = qs.stringify( diff --git a/src/types/cardCollection.ts b/src/types/cardCollection.ts index cc75af32..232e5948 100644 --- a/src/types/cardCollection.ts +++ b/src/types/cardCollection.ts @@ -34,13 +34,18 @@ interface MedleyTypeLocation { medleyId: string; } +interface RecentTypeLocation { + type: LocationType.RECENT; +} + export type CardsTypeLocation = | AllTypeLocation | BestTypeLocation | BookmarkTypeLocation | CategoryTypeLocation | FilterTypeLocation - | MedleyTypeLocation; + | MedleyTypeLocation + | RecentTypeLocation; export interface CardList { _id: string; From 45fe4c33d76337b0298f7f8220469148296b50ad Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Sun, 9 Jul 2023 22:06:16 +0900 Subject: [PATCH 07/14] =?UTF-8?q?[=20refactor=20]=20feat/#300=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=EB=A6=AC=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LastBestPiickleCard/index.tsx | 16 ++++++ .../LastBestPiickleCard/styled.ts | 50 +++++++++++++++++++ .../@common/BestPiickleCard/index.tsx | 14 ++---- .../@common/BestPiickleCard/style.ts | 26 ---------- 4 files changed, 70 insertions(+), 36 deletions(-) create mode 100644 src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx create mode 100644 src/@components/@common/BestPiickleCard/LastBestPiickleCard/styled.ts diff --git a/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx new file mode 100644 index 00000000..78602c4c --- /dev/null +++ b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx @@ -0,0 +1,16 @@ +import React from "react"; + +import * as St from "./styled"; + +export default function LastBestPiickleCard() { + return ( + + + 나머지 주제들도 +
+ 보고 싶다면? + + 나머지 보기 + + ); +} diff --git a/src/@components/@common/BestPiickleCard/LastBestPiickleCard/styled.ts b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/styled.ts new file mode 100644 index 00000000..3fbf0645 --- /dev/null +++ b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/styled.ts @@ -0,0 +1,50 @@ +import styled from "styled-components"; + +export const LastCard = styled.div` + position: relative; + + display: flex; + flex-direction: column; + + width: 18rem; + height: 10.6rem; + + border-radius: 0.4rem; + + padding: 0.8rem 1.2rem; + padding-top: 2.1rem; + background: ${({ theme }) => theme.newColors.white}; +`; + +export const LastCardWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + + margin-top: 1.2rem; + align-self: flex-end; + + width: 6.9rem; + height: 2.5rem; + + border-radius: 2.9rem; + background: ${({ theme }) => theme.newColors.green}; + + color: ${({ theme }) => theme.newColors.white}; + ${({ theme }) => theme.newFonts.btn2} +`; + +export const LastCardContent = styled.p` + margin-top: 0.4rem; + + text-align: left; + + white-space: normal; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + + ${({ theme }) => theme.newFonts.btn1} + color: ${({ theme }) => theme.newColors.gray900}; +`; diff --git a/src/@components/@common/BestPiickleCard/index.tsx b/src/@components/@common/BestPiickleCard/index.tsx index 96331d15..804a8fc4 100644 --- a/src/@components/@common/BestPiickleCard/index.tsx +++ b/src/@components/@common/BestPiickleCard/index.tsx @@ -1,6 +1,7 @@ import { LocationType } from "../../../types/cardCollection"; import { GTM_CLASS_NAME } from "../../../util/const/gtm"; import useNavigateCardCollection, { NavigateRecentCollectionType } from "../hooks/useNavigateCardCollection"; +import LastBestPiickleCard from "./LastBestPiickleCard"; import * as St from "./style"; interface BestPiickleCardProps { @@ -22,13 +23,13 @@ export default function BestPiickleCard(props: BestPiickleCardProps) { const navigateCardCollection = useNavigateCardCollection(locationType) as NavigateRecentCollectionType; - const onClickCard = () => { + const handleClickCard = () => { if (!canNavigate) return; navigateCardCollection(idx); }; return ( - + {isLast ? ( @@ -40,14 +41,7 @@ export default function BestPiickleCard(props: BestPiickleCardProps) { 카드 보기 ) : ( - - - 나머지 주제들도 -
- 보고 싶다면? - - 나머지 보기 - + )} ); diff --git a/src/@components/@common/BestPiickleCard/style.ts b/src/@components/@common/BestPiickleCard/style.ts index d6e1eb94..20ed8e21 100644 --- a/src/@components/@common/BestPiickleCard/style.ts +++ b/src/@components/@common/BestPiickleCard/style.ts @@ -47,29 +47,3 @@ export const PickButtonWrapper = styled.div` text-align: right; `; - -export const LastCard = styled(BestPiickleCard)` - display: flex; - flex-direction: column; - - padding-top: 2.1rem; - background: ${({ theme }) => theme.newColors.white}; -`; - -export const LastCardWrapper = styled.div` - display: flex; - justify-content: center; - align-items: center; - - margin-top: 1.2rem; - align-self: flex-end; - - width: 6.9rem; - height: 2.5rem; - - border-radius: 2.9rem; - background: ${({ theme }) => theme.newColors.green}; - - color: ${({ theme }) => theme.newColors.white}; - ${({ theme }) => theme.newFonts.btn2} -`; From 525b95cd6e01671dc556663e7c4ad82bb492452f Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Sun, 9 Jul 2023 22:28:56 +0900 Subject: [PATCH 08/14] =?UTF-8?q?[=20refactor=20]=20RecommendList=20?= =?UTF-8?q?=EC=9D=98=EC=A1=B4=EC=84=B1=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RecommendItem/index.tsx | 20 +++++------ .../BestPiickleRecommend/index.tsx | 35 +++++++++++++++---- 2 files changed, 36 insertions(+), 19 deletions(-) diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx b/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx index 918cf62c..36669237 100644 --- a/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx +++ b/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx @@ -1,32 +1,28 @@ import { LocationType } from "../../../../types/cardCollection"; import BestPiickleCard from "../../../@common/BestPiickleCard"; import useDraggingContainer from "../../../@common/hooks/useDraggingContainer"; -import { useCardsByGender } from "../hooks/useCardsByGender"; -import { useRecentlyBookmarked } from "../hooks/useRecentlyBookmarked"; +import { recommendListType } from ".."; import * as St from "./style"; interface RecommendProps { - recommendType: string; + recommendList: recommendListType; } export default function RecommendItem(props: RecommendProps) { - const { recommendType } = props; - const { recentlyBookmarkedCards } = useRecentlyBookmarked(); - const maleBookmarkedCards = useCardsByGender("남"); - const femaleBookmarkedCards = useCardsByGender("여"); + const { recommendList } = props; const { scrollableContainerProps, isDragging } = useDraggingContainer(); return ( - {recommendType} + {recommendList.subtitle} - {recentlyBookmarkedCards && ( + {recommendList.cards && ( - {recentlyBookmarkedCards.slice(0, 4).map((recenltyBookmarked, idx) => { + {recommendList.cards.slice(0, 4).map((cards, idx) => { return ( - {recommendSubtitles.map((recommendType, idx) => ( - + {recommendLists.map((recommendList, idx) => ( + ))} ); From 2fafd0386b8eaff2806117def491e32dc818d53c Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Sun, 9 Jul 2023 22:35:15 +0900 Subject: [PATCH 09/14] =?UTF-8?q?[=20fix=20]=20isLast=20=EB=A1=9C=EC=A7=81?= =?UTF-8?q?=20=EC=98=A4=EB=A5=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@components/@common/BestPiickleCard/index.tsx | 2 +- .../BestPiickleRecommend/RecommendItem/index.tsx | 2 +- src/@components/MainPage/BestPiickle/index.tsx | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/@components/@common/BestPiickleCard/index.tsx b/src/@components/@common/BestPiickleCard/index.tsx index 804a8fc4..488224f3 100644 --- a/src/@components/@common/BestPiickleCard/index.tsx +++ b/src/@components/@common/BestPiickleCard/index.tsx @@ -30,7 +30,7 @@ export default function BestPiickleCard(props: BestPiickleCardProps) { return ( - {isLast ? ( + {!isLast ? ( {tags.map((tag: string, i: number) => { diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx b/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx index 36669237..bfe238d2 100644 --- a/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx +++ b/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx @@ -25,7 +25,7 @@ export default function RecommendItem(props: RecommendProps) { bestPiickle={cards} idx={idx} canNavigate={!isDragging} - isLast={idx !== 3} + isLast={idx === 3} locationType={LocationType.RECENT} /> ); diff --git a/src/@components/MainPage/BestPiickle/index.tsx b/src/@components/MainPage/BestPiickle/index.tsx index f8f29ac5..84f61824 100644 --- a/src/@components/MainPage/BestPiickle/index.tsx +++ b/src/@components/MainPage/BestPiickle/index.tsx @@ -29,7 +29,6 @@ export default function BestPiickle() { bestPiickle={bestPiickle} idx={idx} canNavigate={!isDragging} - isLast={idx !== 5} locationType={LocationType.BEST} /> ); From 6c38b7625e9364665a6a23aef797aea764ffc86e Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Sun, 9 Jul 2023 23:01:36 +0900 Subject: [PATCH 10/14] [ feat ] male/female cards navigation --- .../@common/hooks/useNavigateCardCollection.ts | 12 ++++++++++++ .../BestPiickleRecommend/RecommendItem/index.tsx | 3 +-- .../BestPiicklePage/BestPiickleRecommend/index.tsx | 6 +++++- .../CardCollectionPage/hooks/useCardLists.ts | 4 ++++ src/types/cardCollection.ts | 14 +++++++++++++- 5 files changed, 35 insertions(+), 4 deletions(-) diff --git a/src/@components/@common/hooks/useNavigateCardCollection.ts b/src/@components/@common/hooks/useNavigateCardCollection.ts index 4d43d7ab..cadf0754 100644 --- a/src/@components/@common/hooks/useNavigateCardCollection.ts +++ b/src/@components/@common/hooks/useNavigateCardCollection.ts @@ -13,6 +13,8 @@ export type NavigateCardCollectionCategoryType = (categoryId: string, sliderIdx? export type NavigateCardCollectionFilterType = (filterTypes: string[], sliderIdx?: number) => void; export type NavigateCardCollectionMedleyType = (medleyId: string, sliderIdx?: number) => void; export type NavigateRecentCollectionType = (sliderIdx?: number) => void; +export type NavigateFemaleCollectionType = (sliderIdx?: number) => void; +export type NavigateMaleCollectionType = (sliderIdx?: number) => void; export default function useNavigateCardCollection(locationType: LocationType) { const navigate = useNavigate(); @@ -64,6 +66,16 @@ export default function useNavigateCardCollection(locationType: LocationType) { navigate(`${routePaths.CardCollection}?type=${LocationType.RECENT}`); setSliderIdx(sliderIdx); }; + case LocationType.FEMALE: + return (sliderIdx = 0) => { + navigate(`${routePaths.CardCollection}?type=${LocationType.FEMALE}`); + setSliderIdx(sliderIdx); + }; + case LocationType.MALE: + return (sliderIdx = 0) => { + navigate(`${routePaths.CardCollection}?type=${LocationType.MALE}`); + setSliderIdx(sliderIdx); + }; } } diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx b/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx index bfe238d2..98f07dbc 100644 --- a/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx +++ b/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx @@ -1,4 +1,3 @@ -import { LocationType } from "../../../../types/cardCollection"; import BestPiickleCard from "../../../@common/BestPiickleCard"; import useDraggingContainer from "../../../@common/hooks/useDraggingContainer"; import { recommendListType } from ".."; @@ -26,7 +25,7 @@ export default function RecommendItem(props: RecommendProps) { idx={idx} canNavigate={!isDragging} isLast={idx === 3} - locationType={LocationType.RECENT} + locationType={recommendList.locationType} /> ); })} diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx b/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx index fd9b4f1b..fee8b028 100644 --- a/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx +++ b/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx @@ -1,4 +1,4 @@ -import { CardList } from "../../../types/cardCollection"; +import { CardList, LocationType } from "../../../types/cardCollection"; import { HeadingTitle } from "../../../util/main/headingTitles"; import HeadingTitleContainer from "../../@common/HeadingTitleContainer"; import { useCardsByGender } from "./hooks/useCardsByGender"; @@ -14,6 +14,7 @@ const recommendTitles: HeadingTitle = { export type recommendListType = { subtitle: string; cards?: CardList[]; + locationType: LocationType; }; export default function BestPiickleRecommend() { @@ -25,14 +26,17 @@ export default function BestPiickleRecommend() { { subtitle: "💖 유저들이 가장 최근에 북마크한 대화주제", cards: recentlyBookmarkedCards, + locationType: LocationType.RECENT, }, { subtitle: "👩 여성이 북마크한 대화주제들", cards: femaleBookmarkedCards, + locationType: LocationType.FEMALE, }, { subtitle: "👱‍♂️ 남성이 북마크한 대화주제를 확인해보세요", cards: maleBookmarkedCards, + locationType: LocationType.MALE, }, ]; diff --git a/src/@components/CardCollectionPage/hooks/useCardLists.ts b/src/@components/CardCollectionPage/hooks/useCardLists.ts index 19a854f1..3fac554e 100644 --- a/src/@components/CardCollectionPage/hooks/useCardLists.ts +++ b/src/@components/CardCollectionPage/hooks/useCardLists.ts @@ -93,6 +93,10 @@ function getSWRFetchingKeyByLocation(cardsTypeLocation: CardsTypeLocation) { } case LocationType.RECENT: return `${PATH.CARDS_}${PATH.CARDS_RECENT}`; + case LocationType.FEMALE: + return `${PATH.CARDS_}${PATH.CARDS_GENDER}/여`; + case LocationType.MALE: + return `${PATH.CARDS_}${PATH.CARDS_GENDER}/남`; case LocationType.ALL: default: { diff --git a/src/types/cardCollection.ts b/src/types/cardCollection.ts index 232e5948..b4127f89 100644 --- a/src/types/cardCollection.ts +++ b/src/types/cardCollection.ts @@ -6,6 +6,8 @@ export const enum LocationType { FILTER = "filter", MEDLEY = "medley", RECENT = "recent", + FEMALE = "female", + MALE = "male", } interface AllTypeLocation { @@ -38,6 +40,14 @@ interface RecentTypeLocation { type: LocationType.RECENT; } +interface FemaleTypeLocation { + type: LocationType.FEMALE; +} + +interface MaleTypeLocation { + type: LocationType.MALE; +} + export type CardsTypeLocation = | AllTypeLocation | BestTypeLocation @@ -45,7 +55,9 @@ export type CardsTypeLocation = | CategoryTypeLocation | FilterTypeLocation | MedleyTypeLocation - | RecentTypeLocation; + | RecentTypeLocation + | FemaleTypeLocation + | MaleTypeLocation; export interface CardList { _id: string; From 0cf4e16efda6fbfdb185943051060a5770940f31 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Mon, 10 Jul 2023 00:18:06 +0900 Subject: [PATCH 11/14] =?UTF-8?q?[=20fix=20]=20=EB=B6=81=EB=A7=88=ED=81=AC?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BestPiickleRank/RankItem/index.tsx | 15 +++++---------- .../BestPiicklePage/BestPiickleRank/index.tsx | 16 +++++++++++++--- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/src/@components/BestPiicklePage/BestPiickleRank/RankItem/index.tsx b/src/@components/BestPiicklePage/BestPiickleRank/RankItem/index.tsx index bb3c21a9..17e29193 100644 --- a/src/@components/BestPiicklePage/BestPiickleRank/RankItem/index.tsx +++ b/src/@components/BestPiicklePage/BestPiickleRank/RankItem/index.tsx @@ -1,14 +1,13 @@ -import { useState } from "react"; - import IcBookmarkCheck_16_20 from "../../../../asset/icon/IcBookmarkCheck_16_20"; -import { cardCollectionApi } from "../../../../core/api/cardCollection"; import { LocationType } from "../../../../types/cardCollection"; import useNavigateCardCollection, { NavigateCardCollectionBookMarkType, } from "../../../@common/hooks/useNavigateCardCollection"; +import useCardBookmark from "../../../CardCollectionPage/hooks/useCardBookmark"; import * as St from "./style"; interface RankItemProps { + openLoginModalHandler: () => void; cardId: string; content: string; rank: number; @@ -16,15 +15,11 @@ interface RankItemProps { } export default function RankItem(props: RankItemProps) { - const { cardId, content, rank, isBookmark } = props; + const { cardId, content, rank, isBookmark, openLoginModalHandler } = props; const navigateRankCollection = useNavigateCardCollection(LocationType.BEST) as NavigateCardCollectionBookMarkType; - const [isBookmarked, setIsBookmarked] = useState(isBookmark); - const toggleBookmark = () => { - setIsBookmarked((prev) => !prev); - cardCollectionApi.addNDeleteBookmark(cardId); - }; + const { isBookmarked, handleClickBookmark } = useCardBookmark(isBookmark, openLoginModalHandler); return ( @@ -32,7 +27,7 @@ export default function RankItem(props: RankItemProps) { {rank + 1} {content} - + handleClickBookmark(cardId)}> navigateRankCollection(rank)} /> diff --git a/src/@components/BestPiicklePage/BestPiickleRank/index.tsx b/src/@components/BestPiicklePage/BestPiickleRank/index.tsx index 35a2d7ff..36128224 100644 --- a/src/@components/BestPiicklePage/BestPiickleRank/index.tsx +++ b/src/@components/BestPiicklePage/BestPiickleRank/index.tsx @@ -1,9 +1,11 @@ import { LocationType } from "../../../types/cardCollection"; import { HeadingTitle } from "../../../util/main/headingTitles"; import HeadingTitleContainer from "../../@common/HeadingTitleContainer"; +import useModal from "../../@common/hooks/useModal"; import useNavigateCardCollection, { NavigateCardCollectionBookMarkType, } from "../../@common/hooks/useNavigateCardCollection"; +import LoginModal from "../../@common/LoginModal"; import { useBestPiickle } from "../../MainPage/hooks/useBestPiickle"; import RankItem from "./RankItem"; import * as St from "./style"; @@ -15,21 +17,29 @@ const rankTitles: HeadingTitle = { export default function BestPiickleRank() { const { bestPiickle } = useBestPiickle(); - + const { isModalOpen: isLoginModalOpen, toggleModal: toggleLoginModal } = useModal(); const navigateRankCollection = useNavigateCardCollection(LocationType.BEST) as NavigateCardCollectionBookMarkType; return ( - {/* todo : rankitem id 수정*/} {bestPiickle && [...bestPiickle.data] .slice(0, 8) .map(({ _id, content, isBookmark }, idx) => ( - + ))} navigateRankCollection(8)}>이어서 베스트 피클 카드 보기 + + {isLoginModalOpen && } ); } From 707ccc0a9c71f04d46b0dbd12e045fb2dc9cc274 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Wed, 12 Jul 2023 11:32:08 +0900 Subject: [PATCH 12/14] =?UTF-8?q?[=20fix=20]=20=ED=8C=8C=EC=9D=BC=EB=AA=85?= =?UTF-8?q?=20styled=20->=20style?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../@common/BestPiickleCard/LastBestPiickleCard/index.tsx | 2 +- .../BestPiickleCard/LastBestPiickleCard/{styled.ts => style.ts} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/@components/@common/BestPiickleCard/LastBestPiickleCard/{styled.ts => style.ts} (100%) diff --git a/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx index 78602c4c..bd4caa96 100644 --- a/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx +++ b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx @@ -1,6 +1,6 @@ import React from "react"; -import * as St from "./styled"; +import * as St from "./style"; export default function LastBestPiickleCard() { return ( diff --git a/src/@components/@common/BestPiickleCard/LastBestPiickleCard/styled.ts b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/style.ts similarity index 100% rename from src/@components/@common/BestPiickleCard/LastBestPiickleCard/styled.ts rename to src/@components/@common/BestPiickleCard/LastBestPiickleCard/style.ts From 479d924994d424da5a120a1ddf7ccb807db0a1f6 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Wed, 12 Jul 2023 11:37:14 +0900 Subject: [PATCH 13/14] =?UTF-8?q?[=20refactor=20]=20=EC=BD=94=EB=93=9C?= =?UTF-8?q?=EB=A6=AC=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../@common/BestPiickleCard/LastBestPiickleCard/style.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/@components/@common/BestPiickleCard/LastBestPiickleCard/style.ts b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/style.ts index 3fbf0645..4e71befc 100644 --- a/src/@components/@common/BestPiickleCard/LastBestPiickleCard/style.ts +++ b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/style.ts @@ -11,8 +11,7 @@ export const LastCard = styled.div` border-radius: 0.4rem; - padding: 0.8rem 1.2rem; - padding-top: 2.1rem; + padding: 2.1rem 1.2rem 0.8rem; background: ${({ theme }) => theme.newColors.white}; `; From 7a3a137886bb2b82ce6d47fcb3f5ba12faa5c16f Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Thu, 13 Jul 2023 12:37:48 +0900 Subject: [PATCH 14/14] =?UTF-8?q?[=20feat=20]=20=ED=81=B4=EB=A6=AD=20?= =?UTF-8?q?=EB=B2=94=EC=9C=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BestPiickleCard/LastBestPiickleCard/index.tsx | 12 ++++++++---- .../BestPiickleCard/LastBestPiickleCard/style.ts | 6 +++++- src/@components/@common/BestPiickleCard/index.tsx | 6 +++--- .../BestPiickleRank/RankItem/index.tsx | 3 +-- .../BestPiickleRank/RankItem/style.ts | 12 ++---------- 5 files changed, 19 insertions(+), 20 deletions(-) diff --git a/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx index bd4caa96..ce0f31e1 100644 --- a/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx +++ b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx @@ -1,8 +1,12 @@ -import React from "react"; - import * as St from "./style"; -export default function LastBestPiickleCard() { +interface LastCardProps { + handleClickCard: () => void; +} + +export default function LastBestPiickleCard(props: LastCardProps) { + const { handleClickCard } = props; + return ( @@ -10,7 +14,7 @@ export default function LastBestPiickleCard() {
보고 싶다면? - 나머지 보기 + 나머지 보기 ); } diff --git a/src/@components/@common/BestPiickleCard/LastBestPiickleCard/style.ts b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/style.ts index 4e71befc..ebfefcac 100644 --- a/src/@components/@common/BestPiickleCard/LastBestPiickleCard/style.ts +++ b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/style.ts @@ -13,9 +13,11 @@ export const LastCard = styled.div` padding: 2.1rem 1.2rem 0.8rem; background: ${({ theme }) => theme.newColors.white}; + + cursor: default; `; -export const LastCardWrapper = styled.div` +export const LastCardWButtonWrapper = styled.div` display: flex; justify-content: center; align-items: center; @@ -31,6 +33,8 @@ export const LastCardWrapper = styled.div` color: ${({ theme }) => theme.newColors.white}; ${({ theme }) => theme.newFonts.btn2} + + cursor: pointer; `; export const LastCardContent = styled.p` diff --git a/src/@components/@common/BestPiickleCard/index.tsx b/src/@components/@common/BestPiickleCard/index.tsx index 488224f3..825f6ef0 100644 --- a/src/@components/@common/BestPiickleCard/index.tsx +++ b/src/@components/@common/BestPiickleCard/index.tsx @@ -29,9 +29,9 @@ export default function BestPiickleCard(props: BestPiickleCardProps) { }; return ( - + {!isLast ? ( - + {tags.map((tag: string, i: number) => { return {tag.slice(1)}; @@ -41,7 +41,7 @@ export default function BestPiickleCard(props: BestPiickleCardProps) { 카드 보기 ) : ( - + )} ); diff --git a/src/@components/BestPiicklePage/BestPiickleRank/RankItem/index.tsx b/src/@components/BestPiicklePage/BestPiickleRank/RankItem/index.tsx index 17e29193..df42d36b 100644 --- a/src/@components/BestPiicklePage/BestPiickleRank/RankItem/index.tsx +++ b/src/@components/BestPiicklePage/BestPiickleRank/RankItem/index.tsx @@ -25,12 +25,11 @@ export default function RankItem(props: RankItemProps) { {rank + 1} - {content} + navigateRankCollection(rank)}>{content} handleClickBookmark(cardId)}> - navigateRankCollection(rank)} /> ); } diff --git a/src/@components/BestPiicklePage/BestPiickleRank/RankItem/style.ts b/src/@components/BestPiicklePage/BestPiickleRank/RankItem/style.ts index eabc613b..dc6ca344 100644 --- a/src/@components/BestPiicklePage/BestPiickleRank/RankItem/style.ts +++ b/src/@components/BestPiicklePage/BestPiickleRank/RankItem/style.ts @@ -14,16 +14,6 @@ export const RankItemContainer = styled.article` height: 4.8rem; `; -/* todo: 질문 */ -export const RankItemLink = styled.button` - position: absolute; - top: 0; - bottom: 0; - left: 0; - - width: 80%; -`; - export const RankItemContent = styled.span` display: flex; flex-direction: row; @@ -47,6 +37,8 @@ export const RankItemText = styled.p` /* todo: 디자인 컨펌필요 */ width: 25.2rem; + + cursor: pointer; `; export const BookmarkWrapper = styled.div`