diff --git a/apps/jurumarble/src/app/search/components/ChipContainer.tsx b/apps/jurumarble/src/app/search/components/ChipContainer.tsx index 1ff0a1cb..d08530c8 100644 --- a/apps/jurumarble/src/app/search/components/ChipContainer.tsx +++ b/apps/jurumarble/src/app/search/components/ChipContainer.tsx @@ -11,15 +11,16 @@ interface Props { region: string; mutateBookMark: UseMutateFunction; isBookmark: boolean; + votedCount: number; } -const ChipContainer = ({ date, title, region, mutateBookMark, isBookmark }: Props) => { +const ChipContainer = ({ date, title, region, mutateBookMark, isBookmark, votedCount }: Props) => { return ( <> {region && {region}} - 122명이 즐겼어요 + {votedCount}명이 즐겼어요 {isBookmark ? ( diff --git a/apps/jurumarble/src/app/search/components/DrinkVoteItem.tsx b/apps/jurumarble/src/app/search/components/DrinkVoteItem.tsx index 9784430d..c61ec0d8 100644 --- a/apps/jurumarble/src/app/search/components/DrinkVoteItem.tsx +++ b/apps/jurumarble/src/app/search/components/DrinkVoteItem.tsx @@ -14,7 +14,7 @@ interface Props { * @Todo 타입 더 깔끔하게 정의 필요 */ function DrinkVoteItem({ voteDrink }: Props) { - const { voteId, region, title, imageA, imageB } = voteDrink; + const { voteId, region, title, imageA, imageB, votedCount } = voteDrink; const { isBookmark, mutateBookMark } = useBookmarkService(voteId); @@ -31,6 +31,7 @@ function DrinkVoteItem({ voteDrink }: Props) { region={region} mutateBookMark={mutateBookMark} isBookmark={isBookmark} + votedCount={votedCount} /> diff --git a/apps/jurumarble/src/app/vote/[id]/components/ChipContainer.tsx b/apps/jurumarble/src/app/vote/[id]/components/ChipContainer.tsx index 62001cfa..02cfefde 100644 --- a/apps/jurumarble/src/app/vote/[id]/components/ChipContainer.tsx +++ b/apps/jurumarble/src/app/vote/[id]/components/ChipContainer.tsx @@ -15,6 +15,7 @@ import { formatDate } from "lib/utils/formatDate"; import NonWriterBox from "app/vote/components/NonWriterBox"; import { toast } from "react-toastify"; import useVoteReportService from "../services/useVoteReportService"; +import { AorB } from "lib/apis/vote"; interface Props { title: string; @@ -25,6 +26,7 @@ interface Props { isBookmark: boolean; postedUserId: number; voteId: number; + select: AorB | null; } const ChipContainer = ({ @@ -36,6 +38,7 @@ const ChipContainer = ({ mutateBookMark, isBookmark, postedUserId, + select, }: Props) => { const { userInfo } = useGetUserInfo(); const { onDelete } = useVoteDeleteService(voteId); @@ -53,7 +56,7 @@ const ChipContainer = ({ {region && {region}} - {/* 122명이 즐겼어요 */} + {select && 참여중} {isBookmark ? ( diff --git a/apps/jurumarble/src/app/vote/[id]/components/VoteDescription.tsx b/apps/jurumarble/src/app/vote/[id]/components/VoteDescription.tsx index 2e8a243d..0a757ee6 100644 --- a/apps/jurumarble/src/app/vote/[id]/components/VoteDescription.tsx +++ b/apps/jurumarble/src/app/vote/[id]/components/VoteDescription.tsx @@ -1,16 +1,13 @@ import AorBMark from "components/AorBMark"; -import { postExecuteVote } from "lib/apis/vote"; import Path from "lib/Path"; import { media } from "lib/styles"; import depths from "lib/styles/depths"; -import Image, { StaticImageData } from "next/image"; -import { useParams, useRouter } from "next/navigation"; +import Image from "next/image"; +import { useRouter } from "next/navigation"; import { ExImg1 } from "public/images"; import React from "react"; -import useGetUserInfo from "services/useGetUserInfo"; -import SvgIcPrev from "src/assets/icons/components/IcPrev"; +import { SvgIcCheck } from "src/assets/icons/components"; import styled, { css } from "styled-components"; -import useExecuteVoteService from "../services/useExecuteVoteService"; type AorB = "A" | "B"; type ActiveType = "active" | "inactive" | null; @@ -58,7 +55,6 @@ function VoteDescription({ drinkAId, drinkBId, }: Props) { - const { userInfo } = useGetUserInfo(); const router = useRouter(); const getAB = (direction: Direction) => { @@ -131,9 +127,14 @@ function VoteDescription({ - {titleA} - - {titleB} + + {select === "A" && } + {titleA} + + + {select === "B" && } + {titleB} + ); @@ -151,16 +152,17 @@ const ImageWrapper = styled.div` gap: 9px; `; -const SmallTitle = styled.div` - margin-top: 20px; - padding: 4px; - width: 100%; - display: flex; - align-items: center; - gap: 8px; - ${({ theme }) => css` - border-bottom: 1px solid ${theme.colors.line_01}; +const SmallTitle = styled.div<{ isSelect: boolean }>` + ${({ theme, isSelect }) => css` ${theme.typography.body_long03} + color: ${isSelect ? theme.colors.main_01 : theme.colors.black_01}; + border-bottom: 1px solid ${theme.colors.line_01}; + margin-top: 20px; + padding: 4px; + width: 100%; + display: flex; + align-items: center; + gap: 8px; `}; `; @@ -272,6 +274,7 @@ const VoteImageWrapper = styled.div` flex-direction: column; align-items: center; justify-content: center; + border-radius: 10px; ${media.medium} { height: 340px; diff --git a/apps/jurumarble/src/app/vote/[id]/page.tsx b/apps/jurumarble/src/app/vote/[id]/page.tsx index b602a273..dccba602 100644 --- a/apps/jurumarble/src/app/vote/[id]/page.tsx +++ b/apps/jurumarble/src/app/vote/[id]/page.tsx @@ -126,6 +126,7 @@ function Detail() { mutateBookMark={mutateBookMark} isBookmark={isBookmark} postedUserId={data.postedUserId} + select={select.choice} /> css` background-color: ${theme.colors.bg_01}; - color: ${theme.colors.black_02}; + color: ${theme.colors.black_01}; + `} + `, + isVote: css` + ${({ theme }) => css` + background-color: ${theme.colors.bg_01}; + color: ${theme.colors.black_01}; + line-height: 12px; `} `, };