[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

@@ -0,0 +1,117 @@
+import { useQueryClient } from "@tanstack/react-query";
+import Comment from "app/vote/[id]/components/Comment";
+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";
+
+function DrinkCommentContainer() {
+  const params = useParams();
+  const postId = params.id;
+  const queryClient = useQueryClient();
+  const [sortBy, setSortBy] = useState<"ByTime" | "ByPopularity">("ByTime");
+  const onChangeFilter = (sort: "ByTime" | "ByPopularity") => {
+    setSortBy(sort);
+  };
+
+  // const { commentFilter, onChangeCommentFilter } = useCommentFilter();
+  const { comments, isError, isLoading, mutateHate, mutateLike, mutateComment } =
+    useCommentServices(Number(postId), sortBy, "drinks");
+
+  const [commentForm, setCommentForm] = useState("");
+  const onChangeCommentForm = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCommentForm(e.target.value);
+  };
+  const onSubmitComment = () => {
+    mutateComment(
+      {
+        content: commentForm,
+        parentId: null,
+      },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries([queryKeys.DETAIL_COMMENT_LIST]);
+          setCommentForm("");
+        },
+      },
+    );
+  };
+
+  if (isError) return <div>에러</div>;
+  if (!comments) return <div>데이터 없음</div>;
+
+  const commentList = comments.pages.flatMap((page) => page.content);
+
+  return (
+    <>
+      <Container>
+        <CommentToolBar
+          commentCount={comments.pages[0].numberOfElements}
+          onChangeFilter={onChangeFilter}
+          sortBy={sortBy}
+        />
+        <CommentForm
+          commentForm={commentForm}
+          onChangeCommentForm={onChangeCommentForm}
+          onSubmitComment={onSubmitComment}
+        />
+
+        {!isLoading &&
+          commentList.map(
+            (
+              {
+                id,
+                age,
+                content,
+                createdDate,
+                gender,
+                hateCount,
+                imageUrlstring,
+                likeCount,
+                mbti,
+                nickName,
+                userId,
+              },
+              index,
+            ) => (
+              <Comment
+                postId={Number(postId)}
+                voteType="drinks"
+                comment={{
+                  id,
+                  content,
+                  age,
+                  createdDate,
+                  gender,
+                  hateCount,
+                  imageUrlstring,
+                  likeCount,
+                  mbti,
+                  nickName,
+                  userId: userId,
+                }}
+                mutateLike={() => mutateLike(id)}
+                mutateHate={() => mutateHate(id)}
+                key={`comment_id_${index}`}
+              />
+            ),
+          )}
+        <br />
+      </Container>
+    </>
+  );
+}
+
+const Container = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 0 20px;
+`;
+
+export default DrinkCommentContainer;

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

@@ -173,6 +173,7 @@ const DescriptionRow = styled.div`
   .label {
     white-space: nowrap;
     width: 64px;
+    min-width: 64px;
     ${({ theme }) => theme.typography.body_long03};
     color: ${({ theme }) => theme.colors.black_03};
   }

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

@@ -2,12 +2,14 @@
 
 import BottomBar from "components/BottomBar";
 import React from "react";
+import DrinkCommentContainer from "./components/DrinkCommentContainer";
 import DrinkInfoContainer from "./components/DrinkInfoContainer";
 
 function DrinkInfoPage() {
   return (
     <>
       <DrinkInfoContainer />
+      <DrinkCommentContainer />
       <BottomBar />
     </>
   );

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,6 +15,11 @@ 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>

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

@@ -93,7 +93,6 @@ const ChipContainer = ({
           onDelete={() => {
             if (confirm("정말 삭제하시겠습니까?")) {
               onDelete();
-              alert("삭제되었습니다.");
             }
           }}
           onModify={() => {