Merge pull request #101 from boostcampwm-2022/feat/recruit-detail-fe

feat: 모집 상세 페이지 지도위에 코스 나타내기 성공

client/src/hooks/useShowMap.tsx

@@ -0,0 +1,57 @@
+import ZoomControl from "#components/MapControl/ZoomControl/ZoomControl";
+import { LatLng } from "#types/LatLng";
+import { MapProps } from "#types/MapProps";
+import { useCallback, useEffect, useRef, useState } from "react";
+import useZoomControl from "./useZoomControl";
+
+const useShowMap = ({ height = "100vh", center, level = 1, runningPath }: MapProps) => {
+    const container = useRef<HTMLDivElement>(null);
+    const map = useRef<kakao.maps.Map>();
+    const polyLineRef = useRef<kakao.maps.Polyline>();
+    const [path, setPath] = useState<kakao.maps.LatLng[]>([]);
+    const { zoomIn, zoomOut } = useZoomControl(map);
+
+    useEffect(() => {
+        if (!container.current) return;
+        map.current = new kakao.maps.Map(container.current, {
+            center: new kakao.maps.LatLng(center.lat, center.lng),
+            level,
+        });
+        polyLineRef.current = new kakao.maps.Polyline({
+            map: map.current,
+            path,
+        });
+        DrawPath(runningPath);
+    }, [runningPath]);
+    const getLaMaByLatLng = (point: LatLng): kakao.maps.LatLng => {
+        return new kakao.maps.LatLng(point.lat, point.lng);
+    };
+    const DrawPath = useCallback(
+        async (path: { lat: number; lng: number }[] | undefined) => {
+            if (!path) {
+                return;
+            }
+            if (!polyLineRef.current) return;
+            for (const point of path) {
+                const position = getLaMaByLatLng(point);
+                const newPath = [...polyLineRef.current.getPath(), position];
+                setPath(newPath);
+                polyLineRef.current.setPath(newPath);
+            }
+        },
+        [polyLineRef],
+    );
+
+    return {
+        map: map.current,
+        path,
+        renderMap: () => (
+            <div style={{ position: "relative" }}>
+                <div ref={container} style={{ width: "100vw", height }} />
+                <ZoomControl onClickZoomIn={zoomIn} onClickZoomOut={zoomOut} />
+            </div>
+        ),
+    };
+};
+
+export default useShowMap;

client/src/hooks/useWriteMap.tsx

@@ -46,6 +46,7 @@ const useWriteMap = ({ height = "100vh", center, level = 1 }: MapProps) => {
         async (mouseEvent: kakao.maps.event.MouseEvent) => {
             if (!polyLineRef.current) return;
             const position = mouseEvent.latLng;
+            console.log(mouseEvent.latLng);
             const isRoad = await checkIsRoad(position);
             if (isRoad) {
                 const newPath = [...polyLineRef.current.getPath(), position];

client/src/pages/RecruitDetail.tsx

@@ -7,7 +7,7 @@ import { useRecoilValue } from "recoil";
 import useHttpPost from "#hooks/http/useHttpPost";
 import useHttpGet from "#hooks/http/useHttpGet";
 import { useEffect, useState, useCallback } from "react";
-import ViewMap from "#components/Map/ViewMap/ViewMap";
+import useShowMap from "#hooks/useShowMap";
 
 const RecruitDetail = () => {
     const { id } = useParams();
@@ -21,6 +21,8 @@ const RecruitDetail = () => {
     const [author, setAuthor] = useState("게시자");
     const [maxPpl, setMaxPpl] = useState("최대 인원");
     const [currentPpl, setCurrentPpl] = useState("현재 인원");
+    const [path, setPath] = useState([]);
+    const [middlePoint, setMiddlePoint] = useState({ lat: 0, lng: 0 });
 
     const getPaceFormat = (sec: number): string => {
         return `${parseInt(String(sec / 60))}'${sec % 60}"`;
@@ -44,7 +46,36 @@ const RecruitDetail = () => {
             alert(error.message);
         }
     };
-
+    const renderMap = useCallback(
+        useShowMap({
+            height: `${window.innerHeight - 307}px`,
+            center: { lat: middlePoint.lat, lng: middlePoint.lng },
+            runningPath: path,
+            level: 5,
+        }).renderMap,
+        [path, middlePoint],
+    );
+    const getMiddlePoint = (path: { lat: number; lng: number }[]) => {
+        let minLat = 90;
+        let maxLat = -90;
+        let minLng = 180;
+        let maxLng = -180;
+        for (const point of path) {
+            if (minLat > point.lat) {
+                minLat = point.lat;
+            }
+            if (maxLat < point.lat) {
+                maxLat = point.lat;
+            }
+            if (minLng > point.lng) {
+                minLng = point.lng;
+            }
+            if (maxLng < point.lng) {
+                maxLng = point.lng;
+            }
+        }
+        return { lat: (minLat + maxLat) / 2, lng: (minLng + maxLng) / 2 };
+    };
     const getRecruitDetail = useCallback(async () => {
         try {
             const response = await get(`/recruit/${id}`);
@@ -55,6 +86,8 @@ const RecruitDetail = () => {
             setAuthor(response.userId);
             setMaxPpl(response.maxPpl);
             setCurrentPpl(response.currentPpl);
+            setPath(JSON.parse(response.path));
+            setMiddlePoint(getMiddlePoint(JSON.parse(response.path)));
         } catch {}
     }, []);
 
@@ -67,7 +100,7 @@ const RecruitDetail = () => {
     return (
         <>
             <Header loggedIn={true} text="모집 상세"></Header>
-            <ViewMap />
+            {renderMap()}
             <Title>{title}</Title>
             <Content>
                 <div>

client/src/types/MapProps.ts

@@ -11,4 +11,5 @@ export interface MapProps {
      * 숫자가 작을수록 zoom-in
      */
     level?: number;
+    runningPath?: { lat: number; lng: number }[];
 }