diff --git a/apps/jurumarble/src/app/vote/[id]/components/Comment.tsx b/apps/jurumarble/src/app/vote/[id]/components/Comment.tsx index fbae238d..5ac4d396 100644 --- a/apps/jurumarble/src/app/vote/[id]/components/Comment.tsx +++ b/apps/jurumarble/src/app/vote/[id]/components/Comment.tsx @@ -2,17 +2,17 @@ import { useOutsideClick, useToggle } from "@monorepo/hooks"; import ModifyDeleteButtonBox from "app/vote/components/MenuBox"; import NonWriterBox from "app/vote/components/NonWriterBox"; import { Button } from "components/button"; -import { CommentResponse } from "lib/apis/comment"; import Image from "next/image"; import { ExImg1 } from "public/images"; import React from "react"; import { toast } from "react-toastify"; import useGetUserInfo from "services/useGetUserInfo"; +import { SvgIcMapPin } from "src/assets/icons/components"; import SvgIcMenu from "src/assets/icons/components/IcMenu"; import styled, { css } from "styled-components"; import useCommentReportService from "../services/useCommentReportService"; - import CommentDeleteModal from "./CommentDeleteModal"; +import SearchRestaurantModal from "./SearchRestaurantModal"; interface Props { comment: { @@ -22,18 +22,22 @@ interface Props { createdDate: string; gender: string; hateCount: number; - imageUrlstring: string; likeCount: number; mbti: string; nickName: string; userId: number; + restaurant: { + restaurantName: string; + restaurantImage: string; + }; }; mutateDeleteComment(): void; mutateLike?(): void; mutateHate?(): void; + postId: number; } -function Comment({ comment, mutateDeleteComment, mutateLike, mutateHate }: Props) { +function Comment({ comment, mutateDeleteComment, mutateLike, mutateHate, postId }: Props) { const { userInfo } = useGetUserInfo(); const { mutate } = useCommentReportService(); const { @@ -43,20 +47,22 @@ function Comment({ comment, mutateDeleteComment, mutateLike, mutateHate }: Props createdDate, gender, hateCount, - // imageUrl, likeCount, mbti, nickName, userId, + restaurant, } = comment; const [toggleMenu, onToggleMenu] = useToggle(false); const [toggleNonWriterMenu, onToggleNonWriterMenu] = useToggle(false); - const { targetEl } = useOutsideClick(toggleMenu, onToggleMenu); - const { targetEl: targetEl2 } = useOutsideClick( + const { targetEl } = useOutsideClick(toggleMenu, onToggleMenu); + const { targetEl: targetEl2 } = useOutsideClick( toggleNonWriterMenu, onToggleNonWriterMenu, ); + const [isSearchRestaurantModal, onToggleSearchRestaurantModal] = useToggle(); + return ( {(age || gender || mbti) && ( - + {gender && gender} {age && ( @@ -85,34 +91,55 @@ function Comment({ comment, mutateDeleteComment, mutateLike, mutateHate }: Props )} - + {userInfo?.userId === userId ? ( + + ) : ( + + )} + )} {nickName} {content} - {userId === userInfo?.userId && ( + {restaurant ? ( + <> + + 음식 이미지 + + + + {restaurant.restaurantName} + + + ) : userInfo?.userId === userId ? ( - - )} + ) : null}
{createdDate.slice(0, 10)}
❤️ 좋아요 {likeCount ?? 0}🖤 싫어요 {hateCount ?? 0}{" "}
- {userId === userInfo?.userId ? ( -
- -
- ) : ( -
- -
- )} {toggleMenu && } {toggleNonWriterMenu && ( )} + {isSearchRestaurantModal && ( + + )}
); } @@ -139,9 +173,10 @@ const Container = styled.div` position: relative; `; -const Flex = styled.div` +const FlexBetween = styled.div` display: flex; align-items: center; + justify-content: space-between; gap: 6px; `; @@ -160,6 +195,26 @@ const Contents = styled.div` `} `; +const RestaurantImage = styled.div` + width: 100%; + aspect-ratio: 16 / 9; + position: relative; +`; + +const RestaurantNameBox = styled.div` + ${({ theme }) => css` + ${theme.typography.caption_chip} + color: ${theme.colors.black_04}; + background-color: ${theme.colors.bg_01}; + padding: 4px 8px; + border-radius: 4px; + gap: 4px; + display: flex; + align-items: center; + margin-top: 8px; + `} +`; + const TagBox = styled.div` display: flex; align-items: center; @@ -196,6 +251,7 @@ const CommentInfo = styled.div` display: flex; align-items: center; gap: 4px; + margin-top: 12px; ${({ theme }) => css` color: ${theme.colors.black_04}; ${theme.typography.caption_chip} diff --git a/apps/jurumarble/src/app/vote/[id]/components/CommentContainer.tsx b/apps/jurumarble/src/app/vote/[id]/components/CommentContainer.tsx index ba397750..3d27e53e 100644 --- a/apps/jurumarble/src/app/vote/[id]/components/CommentContainer.tsx +++ b/apps/jurumarble/src/app/vote/[id]/components/CommentContainer.tsx @@ -74,11 +74,11 @@ function CommentContainer({ postId }: Props) { createdDate, gender, hateCount, - imageUrlstring, likeCount, mbti, nickName, userId, + restaurant, }, index, ) => ( @@ -90,16 +90,17 @@ function CommentContainer({ postId }: Props) { createdDate, gender, hateCount, - imageUrlstring, likeCount, mbti, nickName, userId: userId, + restaurant, }} mutateDeleteComment={() => void 0} mutateLike={() => mutateLike(id)} mutateHate={() => mutateHate(id)} key={`comment_id_${index}`} + postId={postId} /> ), )} diff --git a/apps/jurumarble/src/app/vote/[id]/page.tsx b/apps/jurumarble/src/app/vote/[id]/page.tsx index 07cc3da2..9be92dfa 100644 --- a/apps/jurumarble/src/app/vote/[id]/page.tsx +++ b/apps/jurumarble/src/app/vote/[id]/page.tsx @@ -9,8 +9,6 @@ import VoteDescription from "./components/VoteDescription"; import ChipContainer from "./components/ChipContainer"; import CommentContainer from "./components/CommentContainer"; import { useParams } from "next/navigation"; -import { useToggle } from "@monorepo/hooks"; -import SearchRestaurantModal from "./components/SearchRestaurantModal"; import useVoteLoadService from "./services/useVoteLoadService"; import useExecuteVoteService from "./services/useExecuteVoteService"; import useFilteredStatisticsService from "./services/useFilterStatisticsService"; @@ -28,8 +26,6 @@ function Detail() { const postId = params.id; - const [isSearchRestaurantModal, onToggleSearchRestaurantModal] = useToggle(false); - const { data, isError, isLoading } = useVoteLoadService(Number(postId)); const { mutateBookMark, isBookmark } = useBookmarkService(Number(postId)); @@ -74,7 +70,6 @@ function Detail() { return (
- - - {isSearchRestaurantModal && ( - - )} - ); diff --git a/apps/jurumarble/src/lib/apis/comment.ts b/apps/jurumarble/src/lib/apis/comment.ts index ffd2f95d..f6deb093 100644 --- a/apps/jurumarble/src/lib/apis/comment.ts +++ b/apps/jurumarble/src/lib/apis/comment.ts @@ -22,7 +22,7 @@ export interface CommentResponse { nickName: string; parentId: number; content: string; - imageUrlstring: string; + imageUrl: string; gender: string; age: string; mbti: string;