[JR-875] 투표 qa 작업 (#186)

* feat: 참여중일시 칩 추가 * feat: A or B 선택시 선택지 텍스트 컬러도 같이 변하게 구현 * feat: 참여한 투표 인원 표시 * feat: 투표 상세 페이지에도 참여 여부를 알 수 있는 칩 추기
choooz · Oct 16, 2023 · 551eb0c · 551eb0c
1 parent baf741f
commit 551eb0c
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 25 deletions.
diff --git 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 (
     <>
       <TagRow>
         <FlexRow>
           {region && <Chip variant="region">{region}</Chip>}
-          <Chip variant="numberOfParticipants">122명이 즐겼어요</Chip>
+          <Chip variant="numberOfParticipants">{votedCount}명이 즐겼어요</Chip>
         </FlexRow>
         <FlexRow>
           {isBookmark ? (

diff --git 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}
       />
       <VoteDescription imageA={imageA} imageB={imageB} />
     </Container>

diff --git 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 = ({
       <TagRow>
         <FlexRow>
           {region && <Chip variant="region">{region}</Chip>}
-          {/* <Chip variant="numberOfParticipants">122명이 즐겼어요</Chip> */}
+          {select && <Chip variant="isVote">참여중</Chip>}
         </FlexRow>
         <FlexRow>
           {isBookmark ? (

diff --git 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({
         </RightVote>
       </ImageWrapper>
       <FlexRow>
-        <SmallTitle>{titleA}</SmallTitle>
-
-        <SmallTitle>{titleB}</SmallTitle>
+        <SmallTitle isSelect={select === "A"}>
+          {select === "A" && <SvgIcCheck width={20} height={20} />}
+          {titleA}
+        </SmallTitle>
+        <SmallTitle isSelect={select === "B"}>
+          {select === "B" && <SvgIcCheck width={20} height={20} />}
+          {titleB}
+        </SmallTitle>
       </FlexRow>
     </Container>
   );
@@ -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
@@ -126,6 +126,7 @@ function Detail() {
           mutateBookMark={mutateBookMark}
           isBookmark={isBookmark}
           postedUserId={data.postedUserId}
+          select={select.choice}
         />
         <VoteDescription
           imageA={imageA}

diff --git a/apps/jurumarble/src/app/vote/page.tsx b/apps/jurumarble/src/app/vote/page.tsx
@@ -124,6 +124,7 @@ function VoteHomePage() {
               description={detail}
               mutateBookMark={mutateBookMark}
               isBookmark={isBookmark}
+              select={select.choice}
             />
             <VoteDescription
               voteType={voteType}

diff --git a/apps/jurumarble/src/components/Chip.tsx b/apps/jurumarble/src/components/Chip.tsx
@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 
 interface Props {
-  variant: "region" | "numberOfParticipants";
+  variant: "region" | "numberOfParticipants" | "isVote";
   children: React.ReactNode;
 }
 
@@ -21,7 +21,14 @@ const variantStyles = {
   numberOfParticipants: css`
     ${({ theme }) => 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;
     `}
   `,
 };