Merge pull request #199 from TripInfoWeb/dev_gathering

Dev gathering
TripInfoWeb · Aug 14, 2024 · 53d0ef1 · 53d0ef1
2 parents 2891f22 + d48a495
commit 53d0ef1
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 70 deletions.
diff --git a/src/components/gathering/GatheringFilterModal.tsx b/src/components/gathering/GatheringFilterModal.tsx
@@ -326,6 +326,7 @@ const GatheringFilterModal = ({closeModal}: IGatheringFilterModalProps) => {
                   {
                     SELECTED_SCHEDULE_DATA.map(i => (
                       <button
+                        key={i.name}
                         className={
                           "rounded-lg bg-main px-[.5rem] py-[.125rem] text-white"
                         }

diff --git a/src/components/gathering/GatheringKakaoMap.tsx b/src/components/gathering/GatheringKakaoMap.tsx
@@ -2,13 +2,10 @@
 
 import { PlaceResponse } from "@/types/GatheringDto";
 import Image from "next/image";
-import { useEffect, useState } from "react";
-import { useFormContext } from "react-hook-form";
-
-const GatheringKakaoMap = (placeResponse :PlaceResponse) => {
-  const formContext = useFormContext();
-      const [scriptLoaded, setScriptLoaded] = useState(false);
+import { useEffect } from "react";
 
+const GatheringKakaoMap = (placeResponse: PlaceResponse) => {
+
     useEffect(() => {
       if (
         placeResponse.name == "" ||
@@ -36,64 +33,6 @@ const GatheringKakaoMap = (placeResponse :PlaceResponse) => {
       });
     }, []);
 
-  useEffect(() => {
-    const loadScript = () => {
-      return new Promise<void>((resolve, reject) => {
-        const existingScript = document.getElementById("kakao-maps-sdk");
-        if (!existingScript) {
-          const script = document.createElement("script");
-          script.src = "/api/kakao-map"; // API 라우트에서 스크립트 로드
-          script.id = "kakao-maps-sdk";
-          script.onload = () => resolve();
-          script.onerror = () =>
-            reject(
-              new Error("Kakao Maps 스크립트를 로드하는 데 실패했습니다."),
-            );
-          document.head.appendChild(script);
-        } else {
-          resolve(); // 이미 스크립트가 로드된 경우
-        }
-      });
-    };
-
-    loadScript().then(() => {
-      setScriptLoaded(true);
-    });
-  }, []);
-
-  useEffect(() => {
-
-  if (!scriptLoaded) return;
-
-  const placeName = placeResponse.name;
-  if (!placeName) return;
-
-  const lat = Number(placeResponse.yaxis);
-  const lng = Number(placeResponse.xaxis);
-
-  const renderMap = () => {
-    const container = document.getElementById("map");
-    if (!container) return;
-
-    const options = {
-      center: new window.kakao.maps.LatLng(lat, lng),
-      level: 3,
-      draggable: false, // 지도를 움직이지 못하게 설정
-      scrollwheel: false, // 마우스 휠로 확대/축소 불가
-      disableDoubleClickZoom: true, // 더블클릭으로 확대 불가
-    };
-
-      const map = new window.kakao.maps.Map(container, options);
-      const markerPosition = new window.kakao.maps.LatLng(lat,lng);
-        new window.kakao.maps.Marker({
-          position: markerPosition,
-          map: map,
-        });
-  };
-
-  window.kakao.maps.load(renderMap);
-    }, [scriptLoaded, formContext]);
-
   return (
     <article className={"flex flex-col gap-[2rem]"}>
       <div

diff --git a/src/components/gathering/GatheringSubCategoryList.tsx b/src/components/gathering/GatheringSubCategoryList.tsx
@@ -15,8 +15,10 @@ const GatheringSubCategoryList = ({ gatheringCategoryList, activeGatheringCatego
               <button onClick={()=>changeGatheringCategoryHandler(0)} className={
             `rounded-full border-2 border-[#E9EBED] px-3 py-[0.375rem] text-sm font-medium hover:scale-105 ${activeGatheringCategoryId == 0 && "text-white bg-main"}`
           }> 전체 </button>
-      {gatheringCategoryList.map((i, index) => (
-        <button onClick={()=>changeGatheringCategoryHandler(i.id)} className={
+      {gatheringCategoryList.map((i) => (
+        <button
+          key={i.id}
+          onClick={() => changeGatheringCategoryHandler(i.id)} className={
             `rounded-full border-2 border-[#E9EBED] px-3 py-[0.375rem] text-sm font-medium hover:scale-105 ${activeGatheringCategoryId == i.id && "text-white bg-main"}`
           }> {i.name} </button>
       ))}

diff --git a/src/components/gathering/modal/GatheringPlaceModal.tsx b/src/components/gathering/modal/GatheringPlaceModal.tsx
@@ -150,6 +150,7 @@ const GatheringPlaceModal = (props: IGatheringPlaceModalProps) => {
         handleAddressSearch(debouncedKeyword);
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedKeyword]);
 
   return (

diff --git a/src/components/gathering/modal/GatheringSettingModal.tsx b/src/components/gathering/modal/GatheringSettingModal.tsx
@@ -75,7 +75,8 @@ const GatheringSettingModal = (props: IGatheringSettingModalProps) => {
       }
     });
       setDeadlineMinute(_minutes.length > 0 ?  _minutes[0] : 0); 
-  }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   },[])
 
 

diff --git a/src/containers/common/HeaderContainer.tsx b/src/containers/common/HeaderContainer.tsx
@@ -5,7 +5,7 @@ import useAuthStore from "@/store/authStore";
 import { userResponseDto } from "@/types/UserDto";
 import { fetchWithAuth } from "@/utils/fetchWithAuth";
 import { usePathname, useRouter } from "next/navigation";
-import { useEffect, useLayoutEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 const HeaderContainer = () => {
   const pathname = usePathname();
@@ -51,7 +51,7 @@ const HeaderContainer = () => {
     };
   }, []);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     // 자동 로그인
     const login = async () => {
       try {

diff --git a/src/containers/common/HeaderSidebarContainer.tsx b/src/containers/common/HeaderSidebarContainer.tsx
@@ -38,6 +38,7 @@ const HeaderSidebarContainer = ({ onClose }: Props) => {
     return () => {
       window.removeEventListener('resize', handleResize);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

diff --git a/src/containers/gathering/edit/GatheringEditorContainer.tsx b/src/containers/gathering/edit/GatheringEditorContainer.tsx
@@ -44,9 +44,9 @@ const GatheringEditorContainer = ({gatheringData}: IGatheringEditorContainer) =>
       subCategoryName: "",
     },
   });
+  const params = useParams();
 
   const updateGatheringHandler = async () => {
-  const params = useParams();
   const { id } = params;
     const { mainCategoryName, subCategoryName, mainCategoryId, allowedSex, hashtags, searchId, placeName, xAxis, yAxis, roadAddressName, subCategoryId, ...requestData } = methods.getValues();
     try {

diff --git a/src/containers/gathering/write/GatheringPlaceContainer.tsx b/src/containers/gathering/write/GatheringPlaceContainer.tsx
@@ -32,6 +32,7 @@ const GatheringPlaceContainer = (props: IGatheringPlaceContainerProps) => {
 
       new window.kakao.maps.StaticMap(container, options);
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [formContext.getValues("placeName")]);
 
   useEffect(() => {
-Original file line number
+Diff line change
@@ Expand Up @@
           }
         });
           setDeadlineMinute(_minutes.length > 0 ?  _minutes[0] : 0);
-      }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
       },[])
@@ Expand Down @@