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/PlanSchedule.tsx b/src/components/Plan/PlanSchedule.tsx new file mode 100644 index 00000000..4e96dc4f --- /dev/null +++ b/src/components/Plan/PlanSchedule.tsx @@ -0,0 +1,29 @@ +import { UserIcon } from '@components/common/icons/Icons'; +import { socketContext } from '@hooks/useSocket'; +import { useContext } from 'react'; + +const PlanSchedule = () => { + const { tripInfo } = useContext(socketContext); + const trip = tripInfo?.data; + + return ( +
+
+
+
{trip?.tripName}
+
+ + + {trip?.numberOfPeople} + +
+
+
+ + {trip?.startDate} ~ {trip?.endDate} + +
+ ); +}; + +export default PlanSchedule; diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx index 5f99f5d4..d8b60ad9 100644 --- a/src/components/Plan/PlanSectionTop.tsx +++ b/src/components/Plan/PlanSectionTop.tsx @@ -12,8 +12,7 @@ import { useRecoilValue, useRecoilState } from 'recoil'; import { dayState, dateState } from '@recoil/plan'; import { tripIdState, memberIdState } from '@recoil/socket'; import { calculateDayAndDate } from '@utils/utils'; -import { TripSchedule } from '@components/Trip/TripSchedule'; -import { getItem } from '@utils/localStorageFun'; +import PlanSchedule from './PlanSchedule'; const PlanSectionTop = () => { const navigate = useNavigate(); @@ -58,7 +57,7 @@ const PlanSectionTop = () => { }} /> - + { + const { tripAuthority } = useGetTripsAuthority(); const { tripBudget } = useContext(socketContext); const tripId = useRecoilValue(tripIdState); @@ -71,63 +73,67 @@ const TripBudget = () => {
목표 경비 - handleSetTargetBudget(inputBudget)} - closeOnConfirm={true} - children={ - + } + content={ +
+
+ setInputBudget(e.target.value)} + /> +
setInputBudget('')}> + {showCloseIcon && ( + + )}
- - - -
- )} - - } - content={ -
-
- setInputBudget(e.target.value)} - /> -
setInputBudget('')}> - {showCloseIcon && }
-
- 원 -
- } - /> + 원 +
+ } + /> + )}
{budget?.budget.toLocaleString() ?? '- '} diff --git a/src/components/Plan/TripMap.tsx b/src/components/Plan/TripMap.tsx index 7c167103..94dac763 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; @@ -19,13 +10,15 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { const latitude = firstPath?.fromLatitude; const longitude = firstPath?.fromLongitude; - // Kakao Maps SDK 로드 상태 + const mapRef = useRef(null); + const [selectedMarker, setSelectedMarker] = useState(null); + + const defaultPosition = { lat: Number(latitude), lng: Number(longitude) }; + const [_] = useKakaoLoader({ appkey: VITE_KAKAO_MAP_API_KEY, }); - const defaultPosition = { lat: Number(latitude), lng: Number(longitude) }; - const getCenterPosition = () => { if (paths.length === 0) { return defaultPosition; @@ -68,8 +61,6 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { }); } - const mapRef = useRef(null); - // 지도 범위 재설정 함수 const setBounds = () => { if (mapRef.current) { @@ -96,38 +87,97 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { setBounds(); }, [paths]); - // 선택된 마커의 인덱스를 추적하기 위한 상태 - const [selectedMarker, setSelectedMarker] = useState(null); - // 마커를 클릭할 때 호출되는 함수 const handleMarkerClick = (index: number) => { 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) => { + let svgString; + let width, height; + + if (selectedMarker === number + 1) { + width = 32; + height = 39; + svgString = encodeURIComponent(` + + + + + ${number} + + + + + + + + + + + + + + + `); + } else { + width = 24; + height = 24; + svgString = encodeURIComponent(` + + + ${number} + + `); } - return svgComponent; + + return { + src: `data:image/svg+xml;charset=UTF-8,${svgString}`, + size: { width, height }, + }; }; return ( @@ -136,39 +186,30 @@ 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)} - image={{ - src: renderMarkerImage(index, selectedMarker === index), - size: { - width: 33, - height: 33, - }, - }} + onClick={() => handleMarkerClick(path.toSeqNum)} + image={getSequenceIconUrl(path.toSeqNum - 1)} /> + {/* 마지막 항목인 경우, 목적지 위치에 마커 추가 */} + {index === paths.length - 1 && ( + handleMarkerClick(path.toSeqNum + 1)} + image={getSequenceIconUrl(path.toSeqNum)} + /> + )} { const imageUrl = isImageUrlValid ? thumbnailUrl : null; return ( - -
+ +
{imageUrl ? ( { 5
-
23.12.23 - 23.12.25 diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index ab793d75..6d6767ff 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -1,3 +1,5 @@ +import { getColor } from '@utils/getColor'; + interface IconProps { size?: number; color?: string; @@ -1299,7 +1301,6 @@ export const CounterIcon: React.FC< ); }; - export const PlanColorIcon: React.FC = ({ 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]; +};