[JR-676] 음식점 추가 api 연동

apps/jurumarble/next.config.js

@@ -9,15 +9,18 @@ const nextConfig = {
     domains: [
       "shopping-phinf.pstatic.net",
       "elasticbeanstalk-ap-northeast-2-319210348301.s3.ap-northeast-2.amazonaws.com",
+      "tong.visitkorea.or.kr",
       "img.danawa.com",
       "sulsulsul.com",
       "shop-phinf.pstatic.net",
-      "www.sulseam.com",
-      "mblogthumb-phinf.pstatic.net",
-      "sogoodk.com",
       "modo-phinf.pstatic.net",
-      "cdn-pro-web-251-115.cdn-nhncommerce.com",
+      "cdn-pro-web",
       "lh3.googleusercontent.com",
+      "cdn-std-web",
+      "cdn.imweb.me",
+      "www.xn--2q1bq25atga3iu9cz95a.com",
+      "www.seenews365.com",
+      "www.seongpo.co.kr",
     ],
   },
 };

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

@@ -4,7 +4,6 @@ import CommentForm from "app/vote/[id]/components/CommentForm";
 import CommentToolBar from "app/vote/[id]/components/CommentToolbar";
 import useCommentServices from "app/vote/[id]/services/useCommentServices";
 import { queryKeys } from "lib/queryKeys";
-import Link from "next/link";
 import { useParams } from "next/navigation";
 import { useState } from "react";
 import styled from "styled-components";
@@ -70,11 +69,11 @@ function DrinkCommentContainer() {
                 createdDate,
                 gender,
                 hateCount,
-                imageUrlstring,
                 likeCount,
                 mbti,
                 nickName,
                 userId,
+                restaurant,
               },
               index,
             ) => (
@@ -88,11 +87,11 @@ function DrinkCommentContainer() {
                   createdDate,
                   gender,
                   hateCount,
-                  imageUrlstring,
                   likeCount,
                   mbti,
                   nickName,
                   userId: userId,
+                  restaurant,
                 }}
                 mutateLike={() => mutateLike(id)}
                 mutateHate={() => mutateHate(id)}

apps/jurumarble/src/app/layout.tsx

@@ -6,6 +6,7 @@ import type { Metadata } from "next";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { injectStyle } from "react-toastify/dist/inject-style";
+import AuthProcess from "components/AuthProcess";
 
 export const metadata: Metadata = {
   title: "주루마블",
@@ -24,11 +25,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <ReactQueryProvider>
           <StyledComponents>
             <StyledLayout>
-              <>
-                <div id="portal" />
-                {children}
-                <ToastContainer position="top-center" autoClose={2000} hideProgressBar />
-              </>
+              <div id="portal" />
+              <AuthProcess />
+              {children}
+              <ToastContainer position="top-center" autoClose={2000} hideProgressBar />
             </StyledLayout>
           </StyledComponents>
         </ReactQueryProvider>

apps/jurumarble/src/app/my/components/UseInfoContainer.tsx

@@ -6,7 +6,6 @@ import styled, { css } from "styled-components";
 import Image from "next/image";
 import { DrinkImage } from "public/images";
 import useGetUserInfo from "services/useGetUserInfo";
-import { useRouter } from "next/navigation";
 
 function UserInfoContainer() {
   const { userInfo } = useGetUserInfo();
@@ -15,9 +14,6 @@ function UserInfoContainer() {
 
   const { gender, nickname, yearOfBirth, mbti, imageUrl } = userInfo;
 
-  const router = useRouter();
-  if (!(gender && yearOfBirth && mbti)) router.replace(Path.REGISTER_PAGE);
-
   const date = new Date();
   const age = date.getFullYear() - yearOfBirth;
   const ageRange = Math.floor(age / 10) * 10;

apps/jurumarble/src/app/my/components/VoteItem.tsx

@@ -1,14 +1,12 @@
 import Path from "lib/Path";
 import { useRouter } from "next/navigation";
-import { ExImg1 } from "public/images";
 import useBookmarkService from "services/useBookmarkService";
 import { Content } from "src/types/vote";
 import styled, { css } from "styled-components";
 import ChipContainer from "./ChipContainer";
 import VoteDescription from "./VoteDescription";
 
 type Props = Pick<Content, "voteId" | "region" | "title" | "imageA" | "imageB">;
-const getSafeImage = (image: string) => (image.includes("http") ? image : ExImg1);
 
 function VoteItem({ voteId, region, title, imageA, imageB }: Props) {
   const { isBookmark, mutateBookMark } = useBookmarkService(voteId);
@@ -27,7 +25,7 @@ function VoteItem({ voteId, region, title, imageA, imageB }: Props) {
         mutateBookMark={mutateBookMark}
         isBookmark={isBookmark}
       />
-      <VoteDescription imageA={getSafeImage(imageA)} imageB={getSafeImage(imageB)} />
+      <VoteDescription imageA={imageA} imageB={imageB} />
     </Container>
   );
 }

apps/jurumarble/src/app/search/components/DrinkVoteList.tsx

@@ -27,8 +27,6 @@ function DrinkVoteList({ searchText, sortOption, regionOption }: Props) {
     return <></>;
   }
 
-  console.log(voteDrinkList);
-
   return (
     <Container>
       {voteDrinkList.map((voteDrink, index) => (

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

@@ -2,20 +2,20 @@ 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, { useEffect, useState } 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 useCommentDeleteService from "../services/useCommentDeleteService";
 import useCommentReportService from "../services/useCommentReportService";
-
 import CommentDeleteModal from "./CommentDeleteModal";
 import CommentForm from "./CommentForm";
 import CommentPutForm from "./CommentPutForm";
+import SearchRestaurantModal from "./SearchRestaurantModal";
 
 interface Props {
   voteType: "drinks" | "votes";
@@ -27,11 +27,14 @@ interface Props {
     createdDate: string;
     gender: string;
     hateCount: number;
-    imageUrlstring: string;
     likeCount: number;
     mbti: string;
     nickName: string;
     userId: number;
+    restaurant: {
+      restaurantName: string;
+      restaurantImage: string;
+    };
   };
   mutateLike?(): void;
   mutateHate?(): void;
@@ -47,17 +50,17 @@ function Comment({ comment, mutateLike, mutateHate, voteType, postId }: 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,
   );
@@ -76,6 +79,7 @@ function Comment({ comment, mutateLike, mutateHate, voteType, postId }: Props) {
   useEffect(() => {
     setCommentForm(content);
   }, [comment]);
+  const [isSearchRestaurantModal, onToggleSearchRestaurantModal] = useToggle();
 
   return (
     <Container>
@@ -91,7 +95,7 @@ function Comment({ comment, mutateLike, mutateHate, voteType, postId }: Props) {
       />
       <ContentsBox>
         {(age || gender || mbti) && (
-          <Flex>
+          <FlexBetween>
             <TagBox>
               {gender && gender}
               {age && (
@@ -105,7 +109,16 @@ function Comment({ comment, mutateLike, mutateHate, voteType, postId }: 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>
@@ -134,13 +147,34 @@ function Comment({ comment, mutateLike, mutateHate, voteType, postId }: Props) {
         ) : (
           <>
             <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>{" "}
@@ -150,15 +184,6 @@ function Comment({ comment, mutateLike, mutateHate, voteType, postId }: Props) {
           </>
         )}
       </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={onDelete}
@@ -180,6 +205,13 @@ function Comment({ comment, mutateLike, mutateHate, voteType, postId }: Props) {
           right="20px"
         />
       )}
+      {isSearchRestaurantModal && (
+        <SearchRestaurantModal
+          commentId={id}
+          postId={postId}
+          onToggleSearchRestaurantModal={onToggleSearchRestaurantModal}
+        />
+      )}
     </Container>
   );
 }
@@ -191,9 +223,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;
 `;
 
@@ -212,6 +245,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;
@@ -248,6 +301,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,
             ) => (
@@ -92,11 +92,11 @@ function CommentContainer({ postId }: Props) {
                   createdDate,
                   gender,
                   hateCount,
-                  imageUrlstring,
                   likeCount,
                   mbti,
                   nickName,
                   userId: userId,
+                  restaurant,
                 }}
                 mutateLike={() => mutateLike(id)}
                 mutateHate={() => mutateHate(id)}