From 38bc07497923b3c3238068797035ecf298601f6e Mon Sep 17 00:00:00 2001 From: "minyoung.kim" Date: Sun, 2 Nov 2025 16:58:53 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20VoteButtonV2=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[id]/components/VoteButtonV2.tsx | 115 ++++++++++++++++++ public/image/pickpickpick/pick-check.svg | 3 + public/image/pickpickpick/pick-nope.svg | 3 + public/image/pickpickpick/point-up.svg | 3 + 4 files changed, 124 insertions(+) create mode 100644 pages/pickpickpick/[id]/components/VoteButtonV2.tsx create mode 100644 public/image/pickpickpick/pick-check.svg create mode 100644 public/image/pickpickpick/pick-nope.svg create mode 100644 public/image/pickpickpick/point-up.svg diff --git a/pages/pickpickpick/[id]/components/VoteButtonV2.tsx b/pages/pickpickpick/[id]/components/VoteButtonV2.tsx new file mode 100644 index 00000000..8fe11143 --- /dev/null +++ b/pages/pickpickpick/[id]/components/VoteButtonV2.tsx @@ -0,0 +1,115 @@ +import { motion } from 'framer-motion'; + +import Image from 'next/image'; +import { useRouter } from 'next/router'; + +import { cn } from '@utils/mergeStyle'; + +import { useToastVisibleStore } from '@stores/toastVisibleStore'; + +import PickCheck from '@public/image/pickpickpick/pick-check.svg'; +import PickNope from '@public/image/pickpickpick/pick-nope.svg'; +import PointUp from '@public/image/pickpickpick/point-up.svg'; + +import { useMediaQueryContext } from '@/contexts/MediaQueryContext'; + +import { usePostVote } from '../apiHooks/usePostVote'; +import { PickOptionData } from '../types/pickDetailData'; + +interface VoteButtonProps { + pickOptionData?: PickOptionData; + dataIsVoted?: boolean; + pickOrder: 'first' | 'second'; +} + +export default function VoteButtonV2({ pickOptionData, dataIsVoted, pickOrder }: VoteButtonProps) { + const { id: optionId, isPicked, percent, voteTotalCount } = pickOptionData ?? {}; + + const { mutate: postVoteMutate } = usePostVote(); + + const router = useRouter(); + const { id } = router.query; + + const { setToastVisible } = useToastVisibleStore(); + + const { isMobile } = useMediaQueryContext(); + + const handleVote = () => { + 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/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 @@ + + + From f8573bcc4818925bd3d299737a15732b1b1eeca1 Mon Sep 17 00:00:00 2001 From: "minyoung.kim" Date: Sun, 2 Nov 2025 16:59:50 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20VoteCardV2=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[id]/components/VoteCardV2.tsx | 99 +++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 pages/pickpickpick/[id]/components/VoteCardV2.tsx diff --git a/pages/pickpickpick/[id]/components/VoteCardV2.tsx b/pages/pickpickpick/[id]/components/VoteCardV2.tsx new file mode 100644 index 00000000..992e69f9 --- /dev/null +++ b/pages/pickpickpick/[id]/components/VoteCardV2.tsx @@ -0,0 +1,99 @@ +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?.pickDetailOptionImages.length !== 0 && ( +

첨부 이미지

+ )} +
+ {pickDetailOptionData?.pickDetailOptionImages?.map((optionImage) => ( + {`픽픽픽 + ))} +
+
+ + {/* gradient overlay */} + {!isFullContents && ( +
+ )} +
+ + +
+ )} +
+
+ ); +} From 73f1569cf6af950d545581c5441afa998ccea2d2 Mon Sep 17 00:00:00 2001 From: "minyoung.kim" Date: Sun, 2 Nov 2025 17:01:13 +0900 Subject: [PATCH 3/7] =?UTF-8?q?fix:=20pickDetailPage=EC=97=90=20v2=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/pickpickpick/[id]/index.page.tsx | 119 ++++++++++++++++--------- 1 file changed, 79 insertions(+), 40 deletions(-) diff --git a/pages/pickpickpick/[id]/index.page.tsx b/pages/pickpickpick/[id]/index.page.tsx index 59e4725d..d2fce3a0 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 }; @@ -87,51 +91,86 @@ const PickDetailPage: NextPageWithMeta = () => { ${isMobile ? 'px-[1.6rem]' : 'px-[20.4rem] pt-[6.4rem] pb-[12.2rem]'} `} > -
-
-

{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), - }))} - /> -
- )} +
+ + +
- - -

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

From c93800b6b864dc1d1598fb47727ddff9d8728dfb Mon Sep 17 00:00:00 2001 From: "minyoung.kim" Date: Wed, 5 Nov 2025 22:33:53 +0900 Subject: [PATCH 4/7] =?UTF-8?q?fix:=20border=20->=20outline=20=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/pickpickpick/[id]/components/VoteCardV2.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/pickpickpick/[id]/components/VoteCardV2.tsx b/pages/pickpickpick/[id]/components/VoteCardV2.tsx index 992e69f9..0922323d 100644 --- a/pages/pickpickpick/[id]/components/VoteCardV2.tsx +++ b/pages/pickpickpick/[id]/components/VoteCardV2.tsx @@ -35,7 +35,7 @@ export default function VoteCardV2({ pickOrder={pickOrder} />

{pickDetailOptionData?.title} From 7c1002fc0fa4dc494c5cebbda29c8307a82fcf06 Mon Sep 17 00:00:00 2001 From: "minyoung.kim" Date: Thu, 6 Nov 2025 00:00:49 +0900 Subject: [PATCH 5/7] =?UTF-8?q?fix:=20VoteCardV2=20layout=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[id]/components/VoteCardV2.tsx | 111 ++++++++++-------- 1 file changed, 61 insertions(+), 50 deletions(-) diff --git a/pages/pickpickpick/[id]/components/VoteCardV2.tsx b/pages/pickpickpick/[id]/components/VoteCardV2.tsx index 0922323d..38f4939e 100644 --- a/pages/pickpickpick/[id]/components/VoteCardV2.tsx +++ b/pages/pickpickpick/[id]/components/VoteCardV2.tsx @@ -35,63 +35,74 @@ export default function VoteCardV2({ pickOrder={pickOrder} />

-

- {pickDetailOptionData?.title} -

+
+
+

+ {pickDetailOptionData?.title} +

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

첨부 이미지

+ {pickDetailOptionData?.pickDetailOptionImages?.length !== 0 && ( + <> +

첨부 이미지

+
+ {pickDetailOptionData?.pickDetailOptionImages?.map((optionImage) => ( + {`픽픽픽 + ))} +
+ )} -
- {pickDetailOptionData?.pickDetailOptionImages?.map((optionImage) => ( - {`픽픽픽 - ))} -
+ )} +
- {/* gradient overlay */} - {!isFullContents && ( -
- )} -
+ {/* gradient overlay */} + {!isFullContents && + (pickDetailOptionData?.content || + pickDetailOptionData?.pickDetailOptionImages?.length !== 0) && ( +
+ )} +
- -
+ {(pickDetailOptionData?.content || + pickDetailOptionData?.pickDetailOptionImages?.length !== 0) && ( + )}
From 99ba818cad72155520f8543214499c0bfdd82b02 Mon Sep 17 00:00:00 2001 From: "minyoung.kim" Date: Thu, 13 Nov 2025 00:03:01 +0900 Subject: [PATCH 6/7] =?UTF-8?q?fix:=20[wip]=20=ED=94=BD=ED=94=BD=ED=94=BD?= =?UTF-8?q?=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20ui=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[id]/components/PickCommentSection.tsx | 2 +- .../[id]/components/VoteCardV2.tsx | 20 +++++++++---------- pages/pickpickpick/[id]/index.page.tsx | 10 +++++----- 3 files changed, 16 insertions(+), 16 deletions(-) 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 ( <> -
+
-
+

@@ -53,7 +53,7 @@ export default function VoteCardV2({ {(pickDetailOptionData?.content || pickDetailOptionData?.pickDetailOptionImages?.length !== 0) && ( -

+
{pickDetailOptionData?.content && ( )} @@ -81,14 +81,14 @@ export default function VoteCardV2({ {!isFullContents && (pickDetailOptionData?.content || pickDetailOptionData?.pickDetailOptionImages?.length !== 0) && ( -
+
)}
{(pickDetailOptionData?.content || pickDetailOptionData?.pickDetailOptionImages?.length !== 0) && (