[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/map/components/MapContainer.tsx

@@ -15,6 +15,7 @@ import { useGeoLocation } from "../hooks/useGeoLocation";
 import SvgIcMyLocationFloating from "src/assets/icons/ic_my_location_floating.svg";
 import SvgIcPin from "src/assets/icons/ic_pin.svg";
 import Image from "next/image";
+import Loading from "components/Loading";
 
 const MapContainer = () => {
   const [delayRender, setDelayRender] = useState(true);
@@ -107,7 +108,7 @@ const MapContainer = () => {
     }, 100);
   };
 
-  if (delayRender) return <></>;
+  if (delayRender) return <Loading />;
 
   return (
     <Container>

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

@@ -5,7 +5,7 @@ import { Button } from "components/button";
 import { convertAge, convertGender } from "lib/utils/formatUserInfo";
 import Image from "next/image";
 import { ExImg1 } from "public/images";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { toast } from "react-toastify";
 import useGetUserInfo from "services/useGetUserInfo";
 import { SvgIcMapPin } from "src/assets/icons/components";
@@ -14,10 +14,15 @@ import styled, { css } from "styled-components";
 import useCommentDeleteService from "../services/useCommentDeleteService";
 import useCommentReportService from "../services/useCommentReportService";
 import AlcholLevelTag from "./AlcholLevelTag";
-import CommentDeleteModal from "./CommentDeleteModal";
-import CommentForm from "./CommentForm";
 import CommentPutForm from "./CommentPutForm";
 import SearchRestaurantModal from "./SearchRestaurantModal";
+import {
+  DrinkCapacityHigh,
+  DrinkCapacityLow,
+  DrinkCapacityMedium,
+  Female,
+  Male,
+} from "public/images";
 
 interface Props {
   voteType: "drinks" | "votes";
@@ -34,6 +39,7 @@ interface Props {
     nickName: string;
     userId: number;
     alcoholLimitType: string;
+    imageUrl: string;
     restaurant: {
       restaurantName: string;
       restaurantImage: string;
@@ -59,6 +65,7 @@ function Comment({ comment, mutateLike, mutateHate, voteType, postId }: Props) {
     userId,
     restaurant,
     alcoholLimitType,
+    imageUrl,
   } = comment;
 
   const [toggleMenu, onToggleMenu] = useToggle(false);
@@ -85,10 +92,16 @@ function Comment({ comment, mutateLike, mutateHate, voteType, postId }: Props) {
   }, [comment]);
   const [isSearchRestaurantModal, onToggleSearchRestaurantModal] = useToggle();
 
+  const EmptyImage = useMemo(() => {
+    if (alcoholLimitType === "LOW") return DrinkCapacityLow;
+    if (alcoholLimitType === "MEDIUM") return DrinkCapacityMedium;
+    return DrinkCapacityHigh;
+  }, [alcoholLimitType]);
+
   return (
     <Container>
       <Image
-        src={ExImg1}
+        src={imageUrl ? imageUrl : EmptyImage}
         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

@@ -2,8 +2,7 @@
 
 import styled, { css } from "styled-components";
 import VoteWriterBox from "./components/VoteWriterBox";
-import { ExImg1 } from "public/images";
-import BottomBar from "components/BottomBar";
+import { DrinkCapacityHigh, DrinkCapacityLow, DrinkCapacityMedium } from "public/images";
 import VoteDescription from "./components/VoteDescription";
 import ChipContainer from "./components/ChipContainer";
 import CommentContainer from "./components/CommentContainer";
@@ -12,13 +11,10 @@ import useVoteLoadService from "./services/useVoteLoadService";
 import useExecuteVoteService from "./services/useExecuteVoteService";
 import useFilteredStatisticsService from "./services/useFilterStatisticsService";
 import VoteAnalyzeBar from "./components/VoteAnalyzeBar";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import useBookmarkService from "services/useBookmarkService";
 import Loading from "components/Loading";
-import RegionSmallSelect from "app/search/components/RegionSmallSelect";
 import {
-  DRINK_INFO_SORT_LIST,
-  MBTI_LIST,
   VOTE_AGE_FILTER_LIST,
   VOTE_ALCOHOL_FILTER_LIST,
   VOTE_GENDER_FILTER_LIST,
@@ -56,8 +52,9 @@ function Detail() {
   const { voteStatisticsQuery } = useFilteredStatisticsService(
     Number(postId),
     filter.gender,
-    filter.age,
     filter.mbti,
+    filter.age,
+    filter.alcohol,
   );
   const {
     data: statistics,
@@ -74,6 +71,12 @@ function Detail() {
     isError: isOriginalStatisticsError,
   } = originalStaticsQuery;
 
+  const EmptyImage = useMemo(() => {
+    if (data?.postedUserAlcoholLimit === "LOW") return DrinkCapacityLow;
+    if (data?.postedUserAlcoholLimit === "MEDIUM") return DrinkCapacityMedium;
+    return DrinkCapacityHigh;
+  }, [data?.postedUserAlcoholLimit]);
+
   if (isLoading || isStatisticsLoading || isOriginalStatisticsLoading) return <Loading />;
   if (isError || isStatisticsError || isOriginalStatisticsError) return <div>에러</div>;
   if (!data || !statistics || !originalStatistics) return <div></div>;
@@ -108,7 +111,7 @@ function Detail() {
           nickName: postedUserNickname,
           userAge: postedUserAge,
           userGender: postedUserGender,
-          userImage: postedUserImageUrl || ExImg1,
+          userImage: postedUserImageUrl || EmptyImage,
           alchol: postedUserAlcoholLimit,
           userMbti: postedUserMbti,
         }}
@@ -176,7 +179,6 @@ function Detail() {
 
         <CommentContainer postId={Number(postId)} />
       </PageInner>
-      <BottomBar />
     </Container>
   );
 }
@@ -207,7 +209,8 @@ const PageInner = styled.div`
 
 const FilterBox = styled.div`
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: 8px;
 `;
 
 export default Detail;

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/components/Loading.tsx

@@ -17,7 +17,6 @@ const Box = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: #4a3c3c53;
   z-index: 999;
   transition: all 0.2s ease;
 

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,15 +62,15 @@ 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 = [
-  { value: "", label: "도수값" },
+  { value: "", label: "술레벨" },
   { value: "LOW", label: "Lv.1" },
   { value: "MEDIUM", label: "Lv.2" },
   { value: "HIGH", label: "Lv.3" },

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,