theme.colors.black_02};
`;
+const SVGWrapper = styled.div`
+ width: 26px;
+ height: 26px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`;
export default ChipContainer;
diff --git a/apps/jurumarble/src/app/vote/[id]/components/Comment.tsx b/apps/jurumarble/src/app/vote/[id]/components/Comment.tsx
index 8ffe71db..9f180341 100644
--- a/apps/jurumarble/src/app/vote/[id]/components/Comment.tsx
+++ b/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 (
(
@@ -97,6 +98,7 @@ function CommentContainer({ postId }: Props) {
userId: userId,
restaurant,
alcoholLimitType,
+ imageUrl,
}}
mutateLike={() => mutateLike(id)}
mutateHate={() => mutateHate(id)}
diff --git a/apps/jurumarble/src/app/vote/[id]/page.tsx b/apps/jurumarble/src/app/vote/[id]/page.tsx
index 0a5ecf6b..b602a273 100644
--- a/apps/jurumarble/src/app/vote/[id]/page.tsx
+++ b/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 ;
if (isError || isStatisticsError || isOriginalStatisticsError) return 에러
;
if (!data || !statistics || !originalStatistics) return ;
@@ -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() {
-
);
}
@@ -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;
diff --git a/apps/jurumarble/src/app/vote/[id]/services/useFilterStatisticsService.ts b/apps/jurumarble/src/app/vote/[id]/services/useFilterStatisticsService.ts
index 3f39b411..254a9679 100644
--- a/apps/jurumarble/src/app/vote/[id]/services/useFilterStatisticsService.ts
+++ b/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,
},
diff --git a/apps/jurumarble/src/components/BottomBar.tsx b/apps/jurumarble/src/components/BottomBar.tsx
index 5ddcc25d..6e8fc40c 100644
--- a/apps/jurumarble/src/components/BottomBar.tsx
+++ b/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`
diff --git a/apps/jurumarble/src/components/Loading.tsx b/apps/jurumarble/src/components/Loading.tsx
index 3ac81af8..7e0f646e 100644
--- a/apps/jurumarble/src/components/Loading.tsx
+++ b/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;
diff --git a/apps/jurumarble/src/lib/apis/statistics.ts b/apps/jurumarble/src/lib/apis/statistics.ts
index 0d58df1b..db46ea66 100644
--- a/apps/jurumarble/src/lib/apis/statistics.ts
+++ b/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
(
`api/votes/${voteId}/select-statistics`,
@@ -22,6 +23,7 @@ export const getFilterStatisticsById = async (
gender,
mbti,
age,
+ alcoholLimit,
},
},
);
diff --git a/apps/jurumarble/src/lib/constants.tsx b/apps/jurumarble/src/lib/constants.tsx
index 5d7b7f3c..27f1bc05 100644
--- a/apps/jurumarble/src/lib/constants.tsx
+++ b/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" },
diff --git a/apps/jurumarble/src/lib/queryKeys.ts b/apps/jurumarble/src/lib/queryKeys.ts
index 5fcf8f19..fe5f6fac 100644
--- a/apps/jurumarble/src/lib/queryKeys.ts
+++ b/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,