[JR-872] 투표 통계 버그 수정 + 자체 QA

apps/jurumarble/src/app/drink-info/[id]/components/DrinkCommentContainer.tsx

@@ -75,6 +75,7 @@ function DrinkCommentContainer() {
                 userId,
                 restaurant,
                 alcoholLimitType,
+                imageUrl,
               },
               index,
             ) => (
@@ -94,6 +95,7 @@ function DrinkCommentContainer() {
                   userId: userId,
                   restaurant,
                   alcoholLimitType,
+                  imageUrl,
                 }}
                 mutateLike={() => mutateLike(id)}
                 mutateHate={() => mutateHate(id)}

apps/jurumarble/src/app/drink-info/[id]/page.tsx

@@ -10,7 +10,6 @@ function DrinkInfoPage() {
     <>
       <DrinkInfoContainer />
       <DrinkCommentContainer />
-      <BottomBar />
     </>
   );
 }

apps/jurumarble/src/app/my/page.tsx

@@ -1,3 +1,4 @@
+import BottomBar from "components/BottomBar";
 import Header from "components/Header";
 import UserInfoContainer from "./components/UseInfoContainer";
 import VoteListContainer from "./components/VoteListContainer";
@@ -8,6 +9,7 @@ function MyPage() {
       <Header />
       <UserInfoContainer />
       <VoteListContainer />
+      <BottomBar />
     </>
   );
 }

apps/jurumarble/src/app/vote/[id]/components/ChipContainer.tsx

@@ -57,19 +57,23 @@ const ChipContainer = ({
         </FlexRow>
         <FlexRow>
           {isBookmark ? (
-            <SvgIcBookmarkActive width={26} height={26} onClick={() => mutateBookMark()} />
+            <SVGWrapper>
+              <SvgIcBookmarkActive width={26} height={26} onClick={() => mutateBookMark()} />
+            </SVGWrapper>
           ) : (
-            <SvgIcBookmark width={20} height={20} onClick={() => mutateBookMark()} />
+            <SVGWrapper>
+              <SvgIcBookmark width={20} height={20} onClick={() => mutateBookMark()} />
+            </SVGWrapper>
           )}
 
           {userInfo?.userId === postedUserId ? (
-            <div onClick={onToggleMenu} ref={targetEl}>
+            <SVGWrapper onClick={onToggleMenu} ref={targetEl}>
               <SvgIcMenu width={20} height={20} />
-            </div>
+            </SVGWrapper>
           ) : (
-            <div onClick={onToggleNonWriterMenu} ref={targetEl2}>
+            <SVGWrapper onClick={onToggleNonWriterMenu} ref={targetEl2}>
               <SvgIcMenu width={20} height={20} />
-            </div>
+            </SVGWrapper>
           )}
           {/* 
           <div
@@ -155,4 +159,11 @@ const Description = styled.div`
   color: ${({ theme }) => theme.colors.black_02};
 `;
 
+const SVGWrapper = styled.div`
+  width: 26px;
+  height: 26px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
 export default ChipContainer;

apps/jurumarble/src/app/vote/[id]/components/Comment.tsx

@@ -34,6 +34,7 @@ interface Props {
     nickName: string;
     userId: number;
     alcoholLimitType: string;
+    imageUrl: string;
     restaurant: {
       restaurantName: string;
       restaurantImage: string;
@@ -59,6 +60,7 @@ function Comment({ comment, mutateLike, mutateHate, voteType, postId }: Props) {
     userId,
     restaurant,
     alcoholLimitType,
+    imageUrl,
   } = comment;
 
   const [toggleMenu, onToggleMenu] = useToggle(false);
@@ -88,7 +90,7 @@ function Comment({ comment, mutateLike, mutateHate, voteType, postId }: Props) {
   return (
     <Container>
       <Image
-        src={ExImg1}
+        src={imageUrl ? imageUrl : ExImg1}
         alt="댓글 프로필"
         width={40}
         height={40}

apps/jurumarble/src/app/vote/[id]/components/CommentContainer.tsx

@@ -78,6 +78,7 @@ function CommentContainer({ postId }: Props) {
                 userId,
                 restaurant,
                 alcoholLimitType,
+                imageUrl,
               },
               index,
             ) => (
@@ -97,6 +98,7 @@ function CommentContainer({ postId }: Props) {
                   userId: userId,
                   restaurant,
                   alcoholLimitType,
+                  imageUrl,
                 }}
                 mutateLike={() => mutateLike(id)}
                 mutateHate={() => mutateHate(id)}

apps/jurumarble/src/app/vote/[id]/page.tsx

@@ -56,8 +56,9 @@ function Detail() {
   const { voteStatisticsQuery } = useFilteredStatisticsService(
     Number(postId),
     filter.gender,
-    filter.age,
     filter.mbti,
+    filter.age,
+    filter.alcohol,
   );
   const {
     data: statistics,
@@ -176,7 +177,6 @@ function Detail() {
 
         <CommentContainer postId={Number(postId)} />
       </PageInner>
-      <BottomBar />
     </Container>
   );
 }

apps/jurumarble/src/app/vote/[id]/services/useFilterStatisticsService.ts

@@ -8,10 +8,11 @@ export default function useFilteredStatisticsService(
   gender?: string,
   mbti?: string,
   age?: string,
+  alcoholLimit?: string,
 ) {
   const voteStatisticsQuery = useQuery(
-    reactQueryKeys.detailFilterdAnalysis(voteId, gender, mbti, age),
-    () => getFilterStatisticsById(voteId, gender, mbti, age),
+    reactQueryKeys.detailFilterdAnalysis(voteId, gender, mbti, age, alcoholLimit),
+    () => getFilterStatisticsById(voteId, gender, mbti, age, alcoholLimit),
     {
       enabled: !!voteId,
     },

apps/jurumarble/src/components/BottomBar.tsx

@@ -85,6 +85,7 @@ const BarItem = styled.div<{ isActive: boolean }>`
   align-items: center;
   justify-content: center;
   color: ${({ isActive, theme }) => (isActive ? theme.colors.black_01 : theme.colors.black_05)};
+  cursor: pointer;
 `;
 
 const Padding = styled.div`

apps/jurumarble/src/lib/apis/statistics.ts

@@ -14,6 +14,7 @@ export const getFilterStatisticsById = async (
   gender?: string,
   mbti?: string,
   age?: string,
+  alcoholLimit?: string,
 ) => {
   const response = await baseApi.get<GetVoteStatisticsResponse>(
     `api/votes/${voteId}/select-statistics`,
@@ -22,6 +23,7 @@ export const getFilterStatisticsById = async (
         gender,
         mbti,
         age,
+        alcoholLimit,
       },
     },
   );

apps/jurumarble/src/lib/constants.tsx

@@ -62,11 +62,11 @@ export const VOTE_GENDER_FILTER_LIST = [
 
 export const VOTE_AGE_FILTER_LIST = [
   { value: "", label: "나이" },
-  { value: "10", label: "10대" },
-  { value: "20", label: "20대" },
-  { value: "30", label: "30대" },
-  { value: "40", label: "40대" },
-  { value: "50", label: "50대" },
+  { value: "teenager", label: "10대" },
+  { value: "twenties", label: "20대" },
+  { value: "thirties", label: "30대" },
+  { value: "fourties", label: "40대" },
+  { value: "fifties", label: "50대" },
 ];
 
 export const VOTE_ALCOHOL_FILTER_LIST = [

apps/jurumarble/src/lib/queryKeys.ts

@@ -40,8 +40,13 @@ export const reactQueryKeys = {
     sortBy?: string,
   ) => [queryKeys.DETAIL_COMMENT_LIST, typeId, commentType, size, page, sortBy] as const,
   detailVoteCount: (id: number) => [queryKeys.DETAIL_VOTE_COUNT, id] as const,
-  detailFilterdAnalysis: (id: number, mbti?: string, gender?: string, age?: string) =>
-    [queryKeys.DETAIL_FILTERED_ANALYSIS, id, mbti, gender, age] as const,
+  detailFilterdAnalysis: (
+    id: number,
+    mbti?: string,
+    gender?: string,
+    age?: string,
+    alcoholLimit?: string,
+  ) => [queryKeys.DETAIL_FILTERED_ANALYSIS, id, mbti, gender, age, alcoholLimit] as const,
   drinksMap: (
     startX: number,
     startY: number,