feat: 음식점 api 연동에 따른 상세 페이지 수정

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<HTMLImageElement>(toggleMenu, onToggleMenu);
-  const { targetEl: targetEl2 } = useOutsideClick<HTMLImageElement>(
+  const { targetEl } = useOutsideClick<HTMLButtonElement>(toggleMenu, onToggleMenu);
+  const { targetEl: targetEl2 } = useOutsideClick<HTMLButtonElement>(
     toggleNonWriterMenu,
     onToggleNonWriterMenu,
   );
+  const [isSearchRestaurantModal, onToggleSearchRestaurantModal] = useToggle();
+
   return (
     <Container>
       <Image
@@ -71,7 +77,7 @@ function Comment({ comment, mutateDeleteComment, mutateLike, mutateHate }: Props
       />
       <ContentsBox>
         {(age || gender || mbti) && (
-          <Flex>
+          <FlexBetween>
             <TagBox>
               {gender && gender}
               {age && (
@@ -85,34 +91,55 @@ function Comment({ comment, mutateDeleteComment, mutateLike, mutateHate }: Props
                 </>
               )}
             </TagBox>
-          </Flex>
+            {userInfo?.userId === userId ? (
+              <button onClick={onToggleMenu} ref={targetEl}>
+                <SvgIcMenu width={20} height={20} />
+              </button>
+            ) : (
+              <button onClick={onToggleNonWriterMenu} ref={targetEl2}>
+                <SvgIcMenu width={20} height={20} />
+              </button>
+            )}
+          </FlexBetween>
         )}
 
         <NickName> {nickName}</NickName>
 
         <Contents>{content}</Contents>
-        {userId === userInfo?.userId && (
+        {restaurant ? (
+          <>
+            <RestaurantImage>
+              <Image
+                src={restaurant.restaurantImage}
+                alt="음식 이미지"
+                fill
+                style={{ borderRadius: "4px" }}
+                objectFit="cover"
+              />
+            </RestaurantImage>
+            <RestaurantNameBox>
+              <SvgIcMapPin width={12} height={12} />
+              {restaurant.restaurantName}
+            </RestaurantNameBox>
+          </>
+        ) : userInfo?.userId === userId ? (
           <AddRestaurants>
-            <Button variant="outline" width="104px" height="40px">
+            <Button
+              variant="outline"
+              width="104px"
+              height="40px"
+              onClick={onToggleSearchRestaurantModal}
+            >
               음식점 추가 <BigFont>﹢</BigFont>
             </Button>
           </AddRestaurants>
-        )}
+        ) : null}
         <CommentInfo>
           <div>{createdDate.slice(0, 10)}</div>・
           <InteractionButton onClick={mutateLike}>❤️ 좋아요 {likeCount ?? 0}</InteractionButton> ・
           <InteractionButton onClick={mutateHate}>🖤 싫어요 {hateCount ?? 0}</InteractionButton>{" "}
         </CommentInfo>
       </ContentsBox>
-      {userId === userInfo?.userId ? (
-        <div onClick={onToggleMenu} ref={targetEl}>
-          <SvgIcMenu width={20} height={20} />
-        </div>
-      ) : (
-        <div onClick={onToggleNonWriterMenu} ref={targetEl2}>
-          <SvgIcMenu width={20} height={20} />
-        </div>
-      )}
       {toggleMenu && <ModifyDeleteButtonBox onDelete={mutateDeleteComment} right="20px" />}
       {toggleNonWriterMenu && (
         <NonWriterBox
@@ -128,6 +155,13 @@ function Comment({ comment, mutateDeleteComment, mutateLike, mutateHate }: Props
           right="20px"
         />
       )}
+      {isSearchRestaurantModal && (
+        <SearchRestaurantModal
+          commentId={id}
+          postId={postId}
+          onToggleSearchRestaurantModal={onToggleSearchRestaurantModal}
+        />
+      )}
     </Container>
   );
 }
@@ -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}

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}
               />
             ),
           )}

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 (
     <Container>
       <Header />
-
       <VoteWriterBox
         writer={{
           nickName: postedUserNickname,
@@ -85,7 +80,6 @@ function Detail() {
           userMbti: postedUserMbti,
         }}
       />
-
       <PageInner>
         <ChipContainer
           voteId={Number(data.voteId)}
@@ -122,10 +116,6 @@ function Detail() {
         )}
         <CommentContainer postId={Number(postId)} />
       </PageInner>
-      {isSearchRestaurantModal && (
-        <SearchRestaurantModal onToggleSearchRestaurantModal={onToggleSearchRestaurantModal} />
-      )}
-
       <BottomBar />
     </Container>
   );

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;