diff --git a/pages/pickpickpick/[id]/components/PickCommentSection.tsx b/pages/pickpickpick/[id]/components/PickCommentSection.tsx index e7210c0f..25eb4779 100644 --- a/pages/pickpickpick/[id]/components/PickCommentSection.tsx +++ b/pages/pickpickpick/[id]/components/PickCommentSection.tsx @@ -38,7 +38,7 @@ export default function PickCommentSection({ return ( <> -
+
{ + if (!isPicked) { + return postVoteMutate({ pickId: id as string, pickOptionId: optionId }); + } + + return setToastVisible({ + message: '동일한 픽픽픽 선택지에 투표할 수 없습니다.', + type: 'error', + }); + }; + + const renderVoteResult = () => { + if (!dataIsVoted) { + return ( + <> +
+ ?? % +
+
+ + + 위를 가리키는 손가락 아이콘 + PICK {pickOrder === 'first' ? 'A' : 'B'} + + + ); + } + + const isNotVotedOrPicked = !isPicked; + + const percentageColor = isNotVotedOrPicked ? 'text-gray300' : 'text-white'; + const voteCountColor = isNotVotedOrPicked ? 'text-gray300' : 'text-primary200'; + const percentageBarColor = isNotVotedOrPicked ? 'bg-gray300' : 'bg-primary200'; + + return ( + <> +
+ {percent} % +
+ {voteTotalCount}표 +
+ + {isPicked ? ( + + 체크된 아이콘 + PICK! + + ) : ( + + 엑스 아이콘 + NOPE + + )} + + ); + }; + + const VOTE_BUTTON_STYLE = `rounded-[1.6rem] border border-gray300 flex flex-col justify-center gap-[2rem] p-[2.4rem] w-full + ${isMobile ? '' : 'min-w-[16rem] max-h-[28.7rem]'}`; + + const votebuttonClass = cn(VOTE_BUTTON_STYLE, { + 'bg-primary400 border-primary400': isPicked && dataIsVoted, + 'bg-gray500 border-gray400': !isPicked && dataIsVoted, + }); + + return ( + + {renderVoteResult()} + + ); +} diff --git a/pages/pickpickpick/[id]/components/VoteCardV2.tsx b/pages/pickpickpick/[id]/components/VoteCardV2.tsx new file mode 100644 index 00000000..b3ba42c0 --- /dev/null +++ b/pages/pickpickpick/[id]/components/VoteCardV2.tsx @@ -0,0 +1,110 @@ +import { useState } from 'react'; + +import Image from 'next/image'; + +import AngleDownPoint from '@public/image/pickpickpick/angle-down-point.svg'; +import AngleUpPoint from '@public/image/pickpickpick/angle-up-point.svg'; + +import { useMediaQueryContext } from '@/contexts/MediaQueryContext'; + +import { PickOptionData } from '../types/pickDetailData'; +import MarkdownViewer from './MarkdownViewer'; +import VoteButtonV2 from './VoteButtonV2'; + +export default function VoteCardV2({ + dataIsVoted, + pickDetailOptionData, + pickOrder, +}: { + dataIsVoted?: boolean; + pickDetailOptionData?: PickOptionData; + pickOrder: 'first' | 'second'; +}) { + const [isFullContents, setFullContents] = useState(false); + const { isMobile } = useMediaQueryContext(); + + const handleFullContents = () => { + setFullContents(!isFullContents); + }; + + return ( +
+ +
+
+
+

+ {pickDetailOptionData?.title} +

+ + {(pickDetailOptionData?.content || + pickDetailOptionData?.pickDetailOptionImages?.length !== 0) && ( +
+ {pickDetailOptionData?.content && ( + + )} + + {pickDetailOptionData?.pickDetailOptionImages?.length !== 0 && ( + <> +

첨부 이미지

+
+ {pickDetailOptionData?.pickDetailOptionImages?.map((optionImage) => ( + {`픽픽픽 + ))} +
+ + )} +
+ )} +
+ + {/* gradient overlay */} + {!isFullContents && + (pickDetailOptionData?.content || + pickDetailOptionData?.pickDetailOptionImages?.length !== 0) && ( +
+ )} +
+ + {(pickDetailOptionData?.content || + pickDetailOptionData?.pickDetailOptionImages?.length !== 0) && ( + + )} +
+
+ ); +} diff --git a/pages/pickpickpick/[id]/index.page.tsx b/pages/pickpickpick/[id]/index.page.tsx index 59e4725d..9fe21b1a 100644 --- a/pages/pickpickpick/[id]/index.page.tsx +++ b/pages/pickpickpick/[id]/index.page.tsx @@ -1,5 +1,5 @@ -import Link from 'next/link'; import type { NextPage } from 'next'; +import Link from 'next/link'; import { useRouter } from 'next/router'; import DevLoadingComponent from '@pages/loading/index.page'; @@ -17,8 +17,12 @@ import { PICK_VOTE_MODIFIED_MODAL, } from '@components/common/modals/modalConfig/pickVote'; import MoreButton from '@components/common/moreButton'; +import StatisticsItem from '@components/features/pickpickpick/StatisticsItem'; import type { MetaHeadProps } from '@components/meta/MetaHead'; +import GrayComment from '@public/image/comment-dots.svg'; +import GrayFire from '@public/image/fire-alt.svg'; + import { META } from '@/constants/metaData'; import { ROUTES } from '@/constants/routes'; import { useMediaQueryContext } from '@/contexts/MediaQueryContext'; @@ -27,7 +31,7 @@ import { useGetSimilarPick } from './apiHooks/useGetSimilarPick'; import { useGetPickDetailData } from './apiHooks/usePickDetailData'; import PickCommentSection from './components/PickCommentSection'; import SimilarPick from './components/SimilarPick'; -import VoteCard from './components/VoteCard'; +import VoteCardV2 from './components/VoteCardV2'; import usePickDetailHandlers from './handlers/usePickDetailHandlers'; type NextPageWithMeta = NextPage & { meta?: MetaHeadProps }; @@ -83,55 +87,90 @@ const PickDetailPage: NextPageWithMeta = () => { return ( <>
-
-
-

{pickDetailData?.pickTitle}

- -
- - - - {formatPickDate} - {loginStatus === 'login' && !pickDetailData?.isAuthor && ( - handleBlameButtonClick()} - > - 신고 +
+
+
+
+

+ {pickDetailData?.pickTitle} +

+ {pickDetailData?.isAuthor && ( +
+ ({ + buttonType: type, + moreButtonOnclick: handleVoteMoreButtonClick(type), + }))} + /> +
+ )} +
+ +
+ + + + + {formatPickDate} + {loginStatus === 'login' && !pickDetailData?.isAuthor && ( + handleBlameButtonClick()} + > + 신고 + + )} +
+ {!isMobile && ( +
+ + +
)}
- {pickDetailData?.isAuthor && ( -
- ({ - buttonType: type, - moreButtonOnclick: handleVoteMoreButtonClick(type), - }))} - /> -
- )} +
+ + +
- - -

나도 고민했는데! 다른 픽픽픽 💘

diff --git a/public/image/pickpickpick/pick-check.svg b/public/image/pickpickpick/pick-check.svg new file mode 100644 index 00000000..d379cfde --- /dev/null +++ b/public/image/pickpickpick/pick-check.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/image/pickpickpick/pick-nope.svg b/public/image/pickpickpick/pick-nope.svg new file mode 100644 index 00000000..4a7d3d6e --- /dev/null +++ b/public/image/pickpickpick/pick-nope.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/image/pickpickpick/point-up.svg b/public/image/pickpickpick/point-up.svg new file mode 100644 index 00000000..a1b36c29 --- /dev/null +++ b/public/image/pickpickpick/point-up.svg @@ -0,0 +1,3 @@ + + +