[JR-863] 댓글 수정, 로딩컴포넌트 적용

apps/jurumarble/next.config.js

@@ -9,6 +9,15 @@ const nextConfig = {
     domains: [
       "shopping-phinf.pstatic.net",
       "elasticbeanstalk-ap-northeast-2-319210348301.s3.ap-northeast-2.amazonaws.com",
+      "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",
+      "lh3.googleusercontent.com",
     ],
   },
 };

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

@@ -79,6 +79,8 @@ function DrinkCommentContainer() {
               index,
             ) => (
               <Comment
+                postId={Number(postId)}
+                voteType="drinks"
                 comment={{
                   id,
                   content,
@@ -92,7 +94,6 @@ function DrinkCommentContainer() {
                   nickName,
                   userId: userId,
                 }}
-                mutateDeleteComment={() => void 0}
                 mutateLike={() => mutateLike(id)}
                 mutateHate={() => mutateHate(id)}
                 key={`comment_id_${index}`}

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

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { Button } from "components/button";
 import Chip from "components/Chip";
+import Loading from "components/Loading";
 import VoteHeader from "components/VoteHeader";
 import Image from "next/image";
 import { useParams, useRouter } from "next/navigation";
@@ -22,9 +23,9 @@ const DrinkInfoContainer = () => {
   const { colors } = useTheme();
   const stampColor = isStampedDrink?.enjoyed ? colors.main_01 : colors.black_05;
 
-  if (isLoading) return <div>loading...</div>;
-  if (isError) return <div>error...</div>;
-  if (!data) return <div>no data...</div>;
+  if (isLoading) return <Loading />;
+  if (isError) return <></>;
+  if (!data) return <></>;
 
   const {
     name,

apps/jurumarble/src/app/map/components/MapContainer.tsx

@@ -17,6 +17,7 @@ import SvgIcPin from "src/assets/icons/ic_pin.svg";
 import Image from "next/image";
 
 const MapContainer = () => {
+  const [onMap, toggleMap] = useToggle();
   const { error, location, toggleOnLocation, onLocation } = useGeoLocation();
   const [on, toggle] = useToggle();
   const mapRef = useRef<kakao.maps.Map>(null);
@@ -27,7 +28,11 @@ const MapContainer = () => {
     endY: 132.02500466772065,
   });
 
-  console.log(location);
+  useEffect(() => {
+    setTimeout(() => {
+      toggleMap();
+    }, 600);
+  }, []);
 
   const { drinksList } = useDrinksMapService({
     startX: mapXY.startX,
@@ -51,12 +56,22 @@ const MapContainer = () => {
     level: 13,
   });
 
-  useEffect(() => {
-    // 윈도우 리사이즈 실행
-    setTimeout(() => {
-      window.dispatchEvent(new Event("resize"));
-    }, 1000);
-  }, []);
+  // useEffect(() => {
+  //   const kakaoMapScript = document.createElement("script");
+  //   kakaoMapScript.async = false;
+  //   kakaoMapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=700d399006256f95732f06b19c046ba5&autoload=false`;
+  //   document.head.appendChild(kakaoMapScript);
+
+  //   const onLoadKakaoAPI = () => {
+  //     window.kakao.maps.load(() => {
+  //       var container = document.getElementById("map");
+
+  //       var map = new window.kakao.maps.Map(container);
+  //     });
+  //   };
+
+  //   kakaoMapScript.addEventListener("load", onLoadKakaoAPI);
+  // }, []);
 
   const onIdleMap = () => {
     const map = mapRef.current;
@@ -103,8 +118,15 @@ const MapContainer = () => {
         </div>
       </TopBox>
 
-      <div style={{ position: "relative" }}>
+      <div style={{ position: "relative", height: "375px" }}>
         <Map // 지도를 표시할 Container
+          id="map"
+          onLoadStart={() => {
+            window.dispatchEvent(new Event("resize"));
+          }}
+          onLoad={() => {
+            mapRef.current?.getNode();
+          }}
           center={state.center}
           isPanto={state.isPanto}
           style={{
@@ -155,8 +177,9 @@ const MapContainer = () => {
         />
       </FilterBox> */}
       <DrinkBox>
-        {drinksList.map(({ drinkId, name, latitude, longitude, image, manufacturer }) => (
+        {drinksList.map(({ drinkId, name, latitude, longitude, image, manufacturer }, index) => (
           <DrinkItem
+            key={`${drinkId}-${index}`}
             drinkInfo={{
               id: drinkId,
               name: name,

apps/jurumarble/src/app/map/page.tsx

@@ -4,8 +4,6 @@ import BottomBar from "components/BottomBar";
 import Header from "components/Header";
 import React from "react";
 import MapContainer from "./components/MapContainer";
-import { KAKAO_MAP_API_KEY } from "lib/constants";
-import Script from "next/script";
 
 declare global {
   interface Window {
@@ -15,11 +13,6 @@ declare global {
 const MapPage = () => {
   return (
     <>
-      <Script src="https://developers.kakao.com/sdk/js/kakao.js" async />
-      <Script
-        type="text/javascript"
-        src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_MAP_API_KEY}&libraries=services&autoload=false`}
-      ></Script>
       <Header />
       <MapContainer />
       <BottomBar />

apps/jurumarble/src/app/page.tsx

@@ -3,7 +3,9 @@
 import BottomBar from "components/BottomBar";
 import DivideLine from "components/DivideLine";
 import Header from "components/Header";
+import { KAKAO_MAP_API_KEY } from "lib/constants";
 import Image from "next/image";
+import Script from "next/script";
 import { MainBannerImage } from "public/images";
 import styled from "styled-components";
 import HotDrinkContainer from "./main/components/HotDrinkContainer";
@@ -13,7 +15,14 @@ import SearchInputWrapper from "./main/components/SearchInputWrapper";
 function MainPage() {
   return (
     <>
+      <Script src="https://developers.kakao.com/sdk/js/kakao.js" async />
+      <Script
+        type="text/javascript"
+        src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_MAP_API_KEY}&libraries=services&autoload=false`}
+      ></Script>
+
       <Header />
+
       <TopSection>
         <BannerImageWrapper>
           <Image alt="배너" src={MainBannerImage} fill style={{ borderRadius: "16px" }} />

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

@@ -5,16 +5,21 @@ 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 React, { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import useGetUserInfo from "services/useGetUserInfo";
 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";
 
 interface Props {
+  voteType: "drinks" | "votes";
+  postId: number;
   comment: {
     id: number;
     content: string;
@@ -28,12 +33,11 @@ interface Props {
     nickName: string;
     userId: number;
   };
-  mutateDeleteComment(): void;
   mutateLike?(): void;
   mutateHate?(): void;
 }
 
-function Comment({ comment, mutateDeleteComment, mutateLike, mutateHate }: Props) {
+function Comment({ comment, mutateLike, mutateHate, voteType, postId }: Props) {
   const { userInfo } = useGetUserInfo();
   const { mutate } = useCommentReportService();
   const {
@@ -57,6 +61,22 @@ function Comment({ comment, mutateDeleteComment, mutateLike, mutateHate }: Props
     toggleNonWriterMenu,
     onToggleNonWriterMenu,
   );
+  const { onDelete, onPutComment } = useCommentDeleteService(voteType, postId, id);
+
+  const [isModifying, setIsModifying] = useState(false);
+  const [commentForm, setCommentForm] = useState("");
+  const onChangeCommentForm = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setCommentForm(e.target.value);
+  };
+  const onSubmitComment = (content: string) => {
+    onPutComment(content);
+    setIsModifying(false);
+  };
+
+  useEffect(() => {
+    setCommentForm(content);
+  }, [comment]);
+
   return (
     <Container>
       <Image
@@ -90,19 +110,45 @@ function Comment({ comment, mutateDeleteComment, mutateLike, mutateHate }: Props
 
         <NickName> {nickName}</NickName>
 
-        <Contents>{content}</Contents>
-        {userId === userInfo?.userId && (
-          <AddRestaurants>
-            <Button variant="outline" width="104px" height="40px">
-              음식점 추가 <BigFont>﹢</BigFont>
-            </Button>
-          </AddRestaurants>
+        {isModifying ? (
+          <>
+            <InputWrapper>
+              <CommentPutForm
+                commentForm={commentForm}
+                onChangeCommentForm={onChangeCommentForm}
+                onSubmitComment={onSubmitComment}
+              />
+            </InputWrapper>
+            <PutFormWrapper>
+              <Button
+                variant="outline"
+                width="45px"
+                height="32px"
+                borderRadius="4px"
+                onClick={() => setIsModifying(false)}
+              >
+                취소
+              </Button>
+            </PutFormWrapper>
+          </>
+        ) : (
+          <>
+            <Contents>{content}</Contents>
+            {userId === userInfo?.userId && (
+              <AddRestaurants>
+                <Button variant="outline" width="104px" height="40px">
+                  음식점 추가 <BigFont>﹢</BigFont>
+                </Button>
+              </AddRestaurants>
+            )}
+            <CommentInfo>
+              <div>{createdDate.slice(0, 10)}</div>・
+              <InteractionButton onClick={mutateLike}>❤️ 좋아요 {likeCount ?? 0}</InteractionButton>{" "}
+              ・
+              <InteractionButton onClick={mutateHate}>🖤 싫어요 {hateCount ?? 0}</InteractionButton>{" "}
+            </CommentInfo>
+          </>
         )}
-        <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}>
@@ -113,7 +159,13 @@ function Comment({ comment, mutateDeleteComment, mutateLike, mutateHate }: Props
           <SvgIcMenu width={20} height={20} />
         </div>
       )}
-      {toggleMenu && <ModifyDeleteButtonBox onDelete={mutateDeleteComment} right="20px" />}
+      {toggleMenu && (
+        <ModifyDeleteButtonBox
+          onDelete={onDelete}
+          onModify={() => setIsModifying((prev) => !prev)}
+          right="20px"
+        />
+      )}
       {toggleNonWriterMenu && (
         <NonWriterBox
           onCopy={() => {
@@ -224,4 +276,15 @@ const AddRestaurants = styled.div`
 const BigFont = styled.span`
   font-size: 17px;
 `;
+
+const PutFormWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: right;
+`;
+
+const InputWrapper = styled.div`
+  padding: 12px 0 8px 0;
+`;
+
 export default Comment;

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

@@ -83,6 +83,8 @@ function CommentContainer({ postId }: Props) {
               index,
             ) => (
               <Comment
+                postId={Number(postId)}
+                voteType="votes"
                 comment={{
                   id,
                   content,
@@ -96,7 +98,6 @@ function CommentContainer({ postId }: Props) {
                   nickName,
                   userId: userId,
                 }}
-                mutateDeleteComment={() => void 0}
                 mutateLike={() => mutateLike(id)}
                 mutateHate={() => mutateHate(id)}
                 key={`comment_id_${index}`}