diff --git a/src/assets/images/FifthMarker.png b/src/assets/images/FifthMarker.png deleted file mode 100644 index 617795ce..00000000 Binary files a/src/assets/images/FifthMarker.png and /dev/null differ diff --git a/src/assets/images/FifthSelectedMarker.png b/src/assets/images/FifthSelectedMarker.png deleted file mode 100644 index b931eb7b..00000000 Binary files a/src/assets/images/FifthSelectedMarker.png and /dev/null differ diff --git a/src/assets/images/FirstMarker.png b/src/assets/images/FirstMarker.png deleted file mode 100644 index b317d65c..00000000 Binary files a/src/assets/images/FirstMarker.png and /dev/null differ diff --git a/src/assets/images/FirstSelectedMarker.png b/src/assets/images/FirstSelectedMarker.png deleted file mode 100644 index 632130de..00000000 Binary files a/src/assets/images/FirstSelectedMarker.png and /dev/null differ diff --git a/src/assets/images/FourthMarker.png b/src/assets/images/FourthMarker.png deleted file mode 100644 index f1963795..00000000 Binary files a/src/assets/images/FourthMarker.png and /dev/null differ diff --git a/src/assets/images/FourthSelectedMarker.png b/src/assets/images/FourthSelectedMarker.png deleted file mode 100644 index 16fcbf5b..00000000 Binary files a/src/assets/images/FourthSelectedMarker.png and /dev/null differ diff --git a/src/assets/images/SecondMarker.png b/src/assets/images/SecondMarker.png deleted file mode 100644 index 741e7cdb..00000000 Binary files a/src/assets/images/SecondMarker.png and /dev/null differ diff --git a/src/assets/images/SecondSelectedMarker.png b/src/assets/images/SecondSelectedMarker.png deleted file mode 100644 index d236dc12..00000000 Binary files a/src/assets/images/SecondSelectedMarker.png and /dev/null differ diff --git a/src/assets/images/ThirdMarker.png b/src/assets/images/ThirdMarker.png deleted file mode 100644 index a55fa7fc..00000000 Binary files a/src/assets/images/ThirdMarker.png and /dev/null differ diff --git a/src/assets/images/ThirdSelectedMarker.png b/src/assets/images/ThirdSelectedMarker.png deleted file mode 100644 index bdfe7cb3..00000000 Binary files a/src/assets/images/ThirdSelectedMarker.png and /dev/null differ diff --git a/src/components/Plan/TripMap.tsx b/src/components/Plan/TripMap.tsx index 7c167103..4c91934c 100644 --- a/src/components/Plan/TripMap.tsx +++ b/src/components/Plan/TripMap.tsx @@ -1,16 +1,7 @@ import { Paths } from '@/@types/service'; import { useEffect, useRef, useState } from 'react'; import { Map, MapMarker, Polyline, useKakaoLoader } from 'react-kakao-maps-sdk'; -import FirstMarker from '@/assets/images/FirstMarker.png'; -import FirstSelectedMarker from '@/assets/images/FirstSelectedMarker.png'; -import SecondMarker from '@/assets/images/SecondMarker.png'; -import ThirdMarker from '@/assets/images/ThirdMarker.png'; -import FourthMarker from '@/assets/images/FourthMarker.png'; -import FifthMarker from '@/assets/images/FifthMarker.png'; -import SecondSelectedMarker from '@/assets/images/SecondSelectedMarker.png'; -import ThirdSelectedMarker from '@/assets/images/ThirdSelectedMarker.png'; -import FourthSelectedMarker from '@/assets/images/FourthSelectedMarker.png'; -import FifthSelectedMarker from '@/assets/images/FifthSelectedMarker.png'; +import { getColor } from '@utils/getColor'; const VITE_KAKAO_MAP_API_KEY = import.meta.env.VITE_KAKAO_MAP_API_KEY; @@ -104,30 +95,38 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { setSelectedMarker(index); }; - // 각 마커에 대한 이미지를 렌더링하는 함수 - const renderMarkerImage = (index: number, isSelected: boolean) => { - let svgComponent; - switch (index % 5) { - case 0: - svgComponent = isSelected ? FirstSelectedMarker : FirstMarker; - break; - case 1: - svgComponent = isSelected ? SecondSelectedMarker : SecondMarker; - break; - case 2: - svgComponent = isSelected ? ThirdSelectedMarker : ThirdMarker; - break; - case 3: - svgComponent = isSelected ? FourthSelectedMarker : FourthMarker; - break; - case 4: - svgComponent = isSelected ? FifthSelectedMarker : FifthMarker; - break; - default: - // 기본 마커 - return 'default_marker_image_url'; + // SVG 문자열을 Data URI로 변환하는 함수 + const getSequenceIconUrl = (number: number) => { + if (selectedMarker === number + 1) { + return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent( + SequenceMarker(number), + )}`; } - return svgComponent; + const svgString = encodeURIComponent(` + + `); + return `data:image/svg+xml;charset=UTF-8,${svgString}`; + }; + + const SequenceMarker = (number: number) => { + const fillColor = getColor(number); + + return ` + + `; }; return ( @@ -136,39 +135,42 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { key={VITE_KAKAO_MAP_API_KEY} center={centerPosition} style={MapStyle} - level={10} + level={4} className="relative object-fill" ref={mapRef}> {paths.map((path, index) => ( -