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(` + + + ${number} + + `); + return `data:image/svg+xml;charset=UTF-8,${svgString}`; + }; + + const SequenceMarker = (number: number) => { + const fillColor = getColor(number); + + return ` + + + + + ${number} + + + + + + + `; }; 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) => ( -
+
handleMarkerClick(index)} - image={{ - src: renderMarkerImage(index, selectedMarker === index), - size: { - width: 33, - height: 33, - }, - }} - /> - handleMarkerClick(index)} + onClick={() => handleMarkerClick(path.toSeqNum)} image={{ - src: renderMarkerImage(index, selectedMarker === index), + src: getSequenceIconUrl(path.toSeqNum - 1), size: { - width: 33, - height: 33, + width: 24, + height: 24, }, }} /> + {/* 마지막 항목인 경우, 목적지 위치에 마커 추가 */} + {index === paths.length - 1 && ( + handleMarkerClick(path.toSeqNum + 1)} // 마지막 seqNum을 위한 +1 + image={{ + src: getSequenceIconUrl(path.toSeqNum), + size: { + width: 24, + height: 24, + }, + }} + /> + )} = ({ size = 21 }) => { return ( = ({ size = 21 }) => { = ({ size = 21 }) => { ); }; - export const ThumbsUp: React.FC = ({ size = 16, fill = '#1E1E1E', @@ -1589,6 +1589,8 @@ export const SequenceIcon: React.FC = ({ className, number, }) => { + const currentColor = getColor(number || 0); + return ( = ({ preserveAspectRatio="none"> {number !== undefined && ( = ({ dominantBaseline="middle" textAnchor="middle" fontSize="small" + fontWeight="bold" fill="white"> {number} @@ -1674,35 +1677,3 @@ export const PaperIcon: React.FC = ({}) => { ); }; - -export const PlanColorIcon = () => { - return ( - - - - - - - ); -}; diff --git a/src/utils/getColor.ts b/src/utils/getColor.ts new file mode 100644 index 00000000..2fbed7ef --- /dev/null +++ b/src/utils/getColor.ts @@ -0,0 +1,7 @@ +// 번호에 따른 색상을 반환하는 함수 +export const getColor = (num: number) => { + const colors = ['#FF2167', '#7932FF', '#29DDF6', '#FFAC16', '#16E7A9']; + + // 색상 배열에서 번호에 해당하는 색상을 반환 (숫자가 6 이상일 경우에는 색상 순서 반복) + return colors[(num - 1) % colors.length]; +};