[AUD-100] TmapModule 과 WebSocket 간의 기능 연동 (#69)

* ♻️ TmapModule 내 메서드 정리 및 네이밍 일부 수정 * ✨ 코스 상세 API 타입 및 사용단 수정 * ✨ tmapModule 을 ref 기반에서 state 기반으로 수정 * 🔥 sequence 타입을 string 으로 변경 * ✨ tmapModule 을 state 기반으로 사용하도록 수정 * ✨ infoWindow confirm 이벤트 타입 추가 * ✨ StompJS Provider 기반의 구조로 수정 * ✨ StompProvider, TmapProvider 구조 수정 * ✨ TmapModule, StompClient 내 추가 기능 개발 * 🐛 지도 검색 장소 추가 및 기타 구조 개선
Nexters · Mar 1, 2024 · cf65257 · cf65257
1 parent 9936768
commit cf65257
Show file tree

Hide file tree

Showing 18 changed files with 618 additions and 396 deletions.
diff --git a/global.d.ts b/global.d.ts
@@ -1,3 +1,4 @@
+import type { CourseSocketPubType } from '@/apis/course/type';
 import type { MarkerType } from '@/types/map';
 
 // T-MAP API NameSpace
@@ -11,7 +12,11 @@ declare global {
     interface CustomEventMap {
         'marker:create': CustomEvent<MarkerType>;
         'marker:remove': CustomEvent<string>;
-        'duration:update': CustomEvent<number>
+        'infoWindow:confirm': CustomEvent<
+            Omit<CourseSocketPubType['addition'], 'courseId'>
+        >;
+        'infoWindow:revert': CustomEvent<string>,
+        'duration:update': CustomEvent<number>;
     }
 
     interface WindowEventMap extends CustomEventMap {}

diff --git a/src/apis/course/type.ts b/src/apis/course/type.ts
@@ -46,18 +46,18 @@ export interface CourseSocketPubType {
         courseId: number;
         pinName: string;
         originName: string;
-        latitude: number;
-        longitude: number;
+        latitude: string;
+        longitude: string;
         address: string;
-        sequence: number;
+        sequence: string;
     };
-    modificationName: {
+    modifyName: {
         pinId: string;
         pinName: string;
     };
-    modificationOrder: {
+    modifySequence: {
         pinId: string;
-        sequence: number;
+        sequence: string;
     };
     removal: {
         pinId: string;
@@ -70,18 +70,18 @@ export interface CourseSocketSubType {
         pinId: string;
         pinName: string;
         originName: string;
-        latitude: number;
-        longitude: number;
+        latitude: string;
+        longitude: string;
         address: string;
-        sequence: number;
+        sequence: string;
     };
-    modificationName: {
+    modifyName: {
         pinId: string;
         pinName: string;
     };
-    modificationOrder: {
+    modifySequence: {
         pinId: string;
-        sequence: number;
+        sequence: string;
     };
     removal: {
         pinId: string;

diff --git a/src/features/map/float-menu/FloatMenu.tsx b/src/features/map/float-menu/FloatMenu.tsx
@@ -11,22 +11,22 @@ import dayjs from '@/utils/dayjs';
 import * as S from './FloatMenu.css';
 
 const FloatMenu = () => {
-    const { tmapModuleRef } = useTmap();
+    const { tmapModule } = useTmap();
     const { value: isShowPath, toggle: toggleShowPath } = useDisclosure(true);
 
     const [pathType, setPathType] = useState<PathModeType>('Vehicle');
     const [currentDuration, setCurrentDuration] = useState<number | null>(null);
 
     const handleChangePathMode = async (updatedMode: PathModeType) => {
-        if (!tmapModuleRef.current) return;
+        if (!tmapModule) return;
         setPathType(updatedMode);
-        await tmapModuleRef.current.togglePathMode(updatedMode);
+        await tmapModule.togglePathMode(updatedMode);
     };
 
     const handleToggleShowPath = () => {
-        if (!tmapModuleRef.current) return;
+        if (!tmapModule) return;
         toggleShowPath();
-        tmapModuleRef.current.togglePathVisibility();
+        tmapModule.togglePathVisibility();
     };
 
     useEventListeners('duration:update', (event) =>

diff --git a/src/features/path/path-item/PathItem.tsx b/src/features/path/path-item/PathItem.tsx
@@ -33,7 +33,7 @@ const PathItem = ({ marker, order }: PropsType) => {
     const controls = useDragControls();
     const y = useMotionValue(0);
 
-    const isSelected = selectedId === marker.id;
+    const isSelected = selectedId === marker.pinId;
 
     const handleToggleHover = (updatedStatus: boolean) => {
         if (selectedId === null) setIsHover(updatedStatus);
@@ -78,11 +78,11 @@ const PathItem = ({ marker, order }: PropsType) => {
             <div className={S.orderBox}>{order}</div>
 
             <PathControlBox
-                id={marker.id}
-                name={marker.name}
+                id={marker.pinId}
+                name={marker.pinName}
                 address={marker.address}
             />
-            <ThreeDotButton markerId={marker.id} />
+            <ThreeDotButton pinId={marker.pinId} />
         </Reorder.Item>
     );
 };

diff --git a/src/features/path/path-item/ThreeDotButton.tsx b/src/features/path/path-item/ThreeDotButton.tsx
@@ -1,33 +1,42 @@
+import { useParams } from 'react-router-dom';
+
 import EditIcon from '@/assets/icons/edit.svg?react';
 import EyeClosedIcon from '@/assets/icons/eyeClosed.svg?react';
 import EyeOpenedIcon from '@/assets/icons/eyeOpened.svg?react';
 import ThreeDotIcon from '@/assets/icons/threeDot.svg?react';
 import TrashCanIcon from '@/assets/icons/trashCan.svg?react';
 import PopOver from '@/components/pop-over';
 import { useDisclosure } from '@/hooks/useDisclosure';
+import { useSocket } from '@/hooks/useSocket';
 import { useTmap } from '@/hooks/useTmap';
 
 import * as S from './ThreeDotButton.css';
 
 interface PropsType {
-    markerId: string;
+    pinId: string;
 }
 
-const ThreeDotButton = ({ markerId }: PropsType) => {
-    const { tmapModuleRef } = useTmap();
+const ThreeDotButton = ({ pinId }: PropsType) => {
+    const { courseId } = useParams();
+    const { tmapModule } = useTmap();
+
+    const stompClient = useSocket(Number(courseId));
 
-    const initPinHided =
-        !!tmapModuleRef.current?.getMarkerInfoFromId(markerId)?.isHidden;
+    const initPinHided = !!tmapModule?.getMarkerById(pinId)?.isHidden;
 
     const { value: isPinHided, toggle: togglePinHided } =
         useDisclosure(initPinHided);
 
     const handlePinHide = () => {
-        if (!tmapModuleRef.current) return;
-        tmapModuleRef.current.toggleMarkerHiddenState(markerId);
+        if (!tmapModule) return;
+        tmapModule.toggleMarkerHiddenState(pinId);
         togglePinHided();
     };
 
+    const handlePinRemove = () => {
+        stompClient.removePin({ pinId })
+    };
+
     return (
         <PopOver>
             <PopOver.Trigger className={S.threeDotButton}>
@@ -51,7 +60,7 @@ const ThreeDotButton = ({ markerId }: PropsType) => {
                     <p className={S.text}>장소명 수정</p>
                 </PopOver.Item>
 
-                <PopOver.Item>
+                <PopOver.Item onClick={handlePinRemove}>
                     <TrashCanIcon />
                     <p className={S.text}>장소 삭제</p>
                 </PopOver.Item>

diff --git a/src/features/path/path-view/PathView.tsx b/src/features/path/path-view/PathView.tsx
@@ -21,57 +21,64 @@ const REORDER_DELAY = 330;
 const PathView = () => {
     const { courseId } = useParams();
     const { debounce } = useDebounce();
-    const { tmapModuleRef } = useTmap();
+    const { tmapModule } = useTmap();
     const stompClient = useSocket(Number(courseId));
 
     const {
-        data: { pinList = [] },
+        data: { pinResList = [] },
     } = useGetCourseDetail({ courseId: Number(courseId) });
 
     const [markers, setMarkers] = useState<MarkerType[]>([]);
     const { isSearchMode } = useContext(SearchContextValue);
 
-    useEventListeners('marker:create', (event) => {
+    useEventListeners('infoWindow:confirm', (event) => {
         if (!courseId) return;
-        setMarkers((previous) => [...previous, event.detail]);
         stompClient.addPin({
-            pinName: event.detail.name,
-            originName: event.detail.originName,
             courseId: Number(courseId),
-            latitude: Number(event.detail.lat),
-            longitude: Number(event.detail.lng),
-            address: event.detail.address,
-            sequence: 1, // TODO : TmapModule 구현체 로직 변경 필요
+            ...event.detail,
         });
     });
 
+    useEventListeners('infoWindow:revert', (event) => {
+        console.log(event.detail);
+        const removedMarker = tmapModule?.getMarkerBySequence(event.detail);
+        console.log(removedMarker);
+        if (!removedMarker) return;
+        stompClient.removePin({ pinId: removedMarker.pinId });
+    });
+
+    useEventListeners('marker:create', (event) => {
+        const updatedMarkers = [...markers, event.detail];
+        setMarkers(updatedMarkers);
+    });
+
     useEventListeners('marker:remove', (event) => {
-        if (!courseId) return;
-        setMarkers(markers.filter((marker) => marker.id !== event.detail));
-        stompClient.removePin({ pinId: event.detail });
+        const updatedMarkers = markers.filter(
+            (marker) => marker.pinId !== event.detail,
+        );
+        setMarkers(updatedMarkers);
     });
 
     useEffect(() => {
-        if (!tmapModuleRef.current) return;
-        const initMarkerList: MarkerType[] = pinList
-            .map(({ pinName, pinId, address, latitude, longitude }) =>
-                tmapModuleRef.current?.createMarker({
-                    name: pinName,
-                    originName: pinName,
-                    address,
-                    id: pinId,
-                    lat: String(latitude),
-                    lng: String(longitude),
-                }),
-            )
+        if (!tmapModule) return;
+
+        const initMarkerList = pinResList
+            .map((pin) => tmapModule.createMarker(pin))
             .filter((marker): marker is MarkerType => !!marker);
+
         setMarkers(initMarkerList);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [pinResList, tmapModule]);
 
     const debouncedModifyMarker = debounce((newOrder: MarkerType[]) => {
-        if (!tmapModuleRef.current) return;
-        tmapModuleRef.current.modifyMarker(newOrder);
+        if (!tmapModule) return;
+
+        const modifiedMarkers = newOrder.map((marker, index) => ({
+            ...marker,
+            sequence: markers[index].sequence,
+        }));
+
+        tmapModule.reorderMarkers(modifiedMarkers);
+        setMarkers(modifiedMarkers);
     }, REORDER_DELAY);
 
     const handleReorderMarker = (newOrder: MarkerType[]) => {
@@ -93,7 +100,7 @@ const PathView = () => {
             >
                 {markers.map((marker, index) => (
                     <PathItem
-                        key={marker.id}
+                        key={marker.pinId}
                         marker={marker}
                         order={index + 1}
                     />