+
+ {(provided) => (
+
+ ))}
+ {provided.placeholder}
+
+ )}
+ {day}
+ {items.map((item, index) => (
+
+
+ )}
+
+ handleRadioChange(item.tripItemId)}
+ checked={selectedItemId === item.tripItemId}>
+
+
+
+
+ 
+
+
+
+
+ {item.name}
+
+
+ {item.category}
+
+
+ {item.price} 원
+
+
+
+
+
+
+ );
+};
+
+export default PlanEditItemBox;
diff --git a/src/components/Plan/PlanItem.tsx b/src/components/Plan/PlanItem.tsx
index 89a28752..c27cf354 100644
--- a/src/components/Plan/PlanItem.tsx
+++ b/src/components/Plan/PlanItem.tsx
@@ -3,7 +3,8 @@ import { PlusIcon, CarIcon, BusIcon } from '@components/common/icons/Icons';
import { useNavigate } from 'react-router-dom';
import TripMap from './TripMap';
import PlanItemBox from './PlanItemBox';
-import { useContext, useEffect } from 'react';
+import PlanEditItemBox from './PlanEditItemBox';
+import { useContext, useEffect, useState } from 'react';
import { socketContext } from '@hooks/useSocket';
import { useRecoilState } from 'recoil';
import { visitDateState } from '@recoil/socket';
@@ -11,15 +12,22 @@ import { pubGetPathAndItems, pubUpdateTransportation } from '@api/socket';
import { tripIdState } from '@recoil/socket';
import { useRecoilValue } from 'recoil';
-const PlanItem = (date: any) => {
+type PlanItemProps = {
+ date: string;
+ day: string;
+};
+
+const PlanItem: React.FC
+ 선택한 장소를 삭제하시겠습니까?}
+ onConfirm={handleConfirm}
+ closeOnConfirm={true}
+ isCheck={selectedItemId}>
+
+
+
+
-
-
- handleTranspo('CAR', visitDate?.visitDate || '', tripId || '')
- }
- className="flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-l-md border border-solid border-gray3">
-
-
- handleTranspo(
- 'PUBLIC_TRANSPORTATION',
- visitDate?.visitDate || '',
- tripId || '',
- )
- }
- className="pointer-cursor -ml-[1px] flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-r-md border border-solid border-gray3">
-
-
+
-
+ handleTranspo('CAR', visitDate?.visitDate || '', tripId || '')
+ }
+ className="flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-l-md border border-solid border-gray3">
+
+
+ handleTranspo(
+ 'PUBLIC_TRANSPORTATION',
+ visitDate?.visitDate || '',
+ tripId || '',
+ )
}
- />
+ className="pointer-cursor -ml-[1px] flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-r-md border border-solid border-gray3">
+
-
- navigate('./place')}
- className="h-[40px] w-full">
-
+ {isEdit ? (
+ ''
+ ) : (
+ navigate('./place')}
+ className="h-[40px] w-full">
+
+ )}
);
diff --git a/src/components/Plan/PlanItemBox.tsx b/src/components/Plan/PlanItemBox.tsx
index 217e96c2..d54a922c 100644
--- a/src/components/Plan/PlanItemBox.tsx
+++ b/src/components/Plan/PlanItemBox.tsx
@@ -1,4 +1,9 @@
-import { PenIcon, CarIcon, BusIcon } from '@components/common/icons/Icons';
+import {
+ PenIcon,
+ CarIcon,
+ BusIcon,
+ SequenceIcon,
+} from '@components/common/icons/Icons';
import { TripItem, Paths } from '@/@types/service';
import { v4 as uuidv4 } from 'uuid';
@@ -6,9 +11,15 @@ type PlanItemBoxProps = {
item: TripItem[];
paths: Paths[];
transportation: string;
+ day: string;
};
-const PlanItemBox = ({ item, paths, transportation }: PlanItemBoxProps) => {
+const PlanItemBox = ({
+ item,
+ paths,
+ transportation,
+ day,
+}: PlanItemBoxProps) => {
if (!item || !paths) {
return
-
- 장소 추가하기
-
+
+ 장소 추가하기
+ Missing data
;
}
@@ -18,53 +29,62 @@ const PlanItemBox = ({ item, paths, transportation }: PlanItemBoxProps) => {
return (
<>
+
{day}
{item.map((item, index) => (
- <>
-
-
-
-
- {item.name}
-
-
- {item.category}
-
-
- {item.price} 원
+ = ({
+ isCheck,
+ tripId,
+ visitDate,
+}) => {
+ const { callBackPub } = useContext(socketContext);
+ const day = useRecoilValue(dayState);
+ const date = useRecoilValue(dateState);
+
+ const [toastPopUp, setToastPopUp] = useState({
+ isPopUp: false,
+ noun: '',
+ verb: '',
+ });
+
+ const handleMoveItem = (newVisitDate: string) => {
+ if (visitDate === newVisitDate) {
+ return;
+ }
+ if (tripId && isCheck && visitDate) {
+ callBackPub(() =>
+ pubUpdateVisitDate(
+ {
+ tripId: tripId,
+ oldVisitDate: visitDate,
+ newVisitDate: newVisitDate,
+ },
+ isCheck,
+ ),
+ );
+ }
+ setToastPopUp(() => ({
+ isPopUp: true,
+ noun: '날짜 이동',
+ verb: '완료',
+ }));
+ };
+
+ useEffect(() => {
+ if (toastPopUp.isPopUp) {
+ const timer = setTimeout(() => {
+ setToastPopUp(() => ({
+ isPopUp: false,
+ noun: '',
+ verb: '',
+ }));
+ }, 2000);
+ return () => clearTimeout(timer);
+ }
+ }, [toastPopUp]);
+
+ return (
+ <>
+ {toastPopUp.isPopUp && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default PlanMoveItem;
diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
index 37224884..c8ace510 100644
--- a/src/components/Plan/PlanSectionTop.tsx
+++ b/src/components/Plan/PlanSectionTop.tsx
@@ -8,7 +8,8 @@ import { socketContext } from '@hooks/useSocket';
import { useContext } from 'react';
import { pubEnterMember } from '@api/socket';
import { useEffect } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValue, useRecoilState } from 'recoil';
+import { dayState, dateState } from '@recoil/plan';
import { tripIdState, memberIdState } from '@recoil/socket';
import { calculateDayAndDate } from '@utils/utils';
@@ -16,6 +17,8 @@ const PlanSectionTop = () => {
const navigate = useNavigate();
const tripId = useRecoilValue(tripIdState);
const pubMember = useRecoilValue(memberIdState);
+ const [, setDay] = useRecoilState(dayState);
+ const [, setDate] = useRecoilState(dateState);
if (!pubMember || !tripId) {
return
{
(
-
diff --git a/src/components/Plan/TripBudget.tsx b/src/components/Plan/TripBudget.tsx
index 8838fb25..bac3e435 100644
--- a/src/components/Plan/TripBudget.tsx
+++ b/src/components/Plan/TripBudget.tsx
@@ -1,3 +1,4 @@
+import Alert from '@components/common/alert/Alert';
import { SettingIcons } from '@components/common/icons/Icons';
import { socketContext } from '@hooks/useSocket';
import * as Progress from '@radix-ui/react-progress';
@@ -13,7 +14,9 @@ const TripBudget = () => {
useEffect(() => {
if (budget) {
setTargetBudget(budget.budget || 0);
- setCurrentSpending(budget.calculatedPrice || 0);
+ setCurrentSpending(
+ budget.calculatedPrice >= 0 ? budget.calculatedPrice : 0,
+ );
}
}, [budget]);
@@ -25,52 +28,76 @@ const TripBudget = () => {
100,
);
- // 목표 경비 설정 함수
- const handleSetTargetBudget = (newTargetBudget: number) => {
- setTargetBudget(newTargetBudget);
- };
+ // // 목표 경비 설정 함수
+ // const handleSetTargetBudget = (newTargetBudget: number) => {
+ // setTargetBudget(newTargetBudget);
+ // };
return (
-
+
diff --git a/src/components/Plan/PlanMoveItem.tsx b/src/components/Plan/PlanMoveItem.tsx
new file mode 100644
index 00000000..9601061a
--- /dev/null
+++ b/src/components/Plan/PlanMoveItem.tsx
@@ -0,0 +1,122 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { PaperIcon } from '@components/common/icons/Icons';
+import { useRecoilValue } from 'recoil';
+import { dayState, dateState } from '@recoil/plan';
+import { pubUpdateVisitDate } from '@api/socket';
+import { useContext } from 'react';
+import { socketContext } from '@hooks/useSocket';
+import { useState, useEffect } from 'react';
+import ToastPopUp from '@components/common/toastpopup/ToastPopUp';
+
+interface PlanMoveItemProps {
+ isCheck: number | null;
+ tripId: string | null;
+ visitDate: string | null;
+}
+
+const PlanMoveItem: React.FC
+ {index !== 0 ? (
+
+ ) : (
+
+ )}
+
+
+
- {index < itemLength - 1 &&
- paths
- .filter((path) => path.fromSeqNum === item.seqNum)
- .map((path) => (
-
+
+
-
+
+ {item.name}
+
+
+ {item.category}
+
+
+ {item.price} 원
+
-
))}
-
+
- {transportation === 'CAR' ? (
-
-
- {(path.pathInfo.totalDistance / 1000).toFixed(2)}km,{' '}
- {path.pathInfo.totalTime}분,{' '}
- {path.pathInfo.price.toLocaleString()}원
+ {index < itemLength - 1 &&
+ paths
+ .filter((path) => path.fromSeqNum === item.seqNum)
+ .map((path) => (
+
- ))}
-
+ ))}
+
+
-
+
+ {transportation === 'CAR' ? (
+
+
+ {(path.pathInfo.totalDistance / 1000).toFixed(2)}km,{' '}
+ {path.pathInfo.totalTime}분,{' '}
+ {path.pathInfo.price.toLocaleString()}원
+
+
+
+
+
+
+
+
+ + 날짜 이동 +
+
+
+
+ {day.map((day, index) => (
+
+
+
+ ))}
+
+ 에러
;
@@ -36,7 +39,12 @@ const PlanSectionTop = () => {
if (startDate && endDate) {
({ DayArr, DateArr } = calculateDayAndDate(startDate, endDate));
}
-
+
+ useEffect(() => {
+ setDay(DayArr);
+ setDate(DateArr);
+ }, [startDate, endDate]);
+
return (
-
사용 경비
-
-
- {budget?.calculatedPrice.toLocaleString()}
-
- 원
-
+ <>
+
+
- = 100 ? 'bg-sub2' : 'bg-main2'
- } transition-transform duration-[660ms]`}
+ = 100 ? 0 : -100 + progress}%)`,
+ transform: 'translateZ(0)',
}}
- />
-
+ value={progress}>
+ = 100 ? 'bg-sub2' : 'bg-main2'
+ } transition-transform duration-[660ms]`}
+ style={{
+ transform: `translateX(${
+ progress >= 100 ? 0 : -100 + progress
+ }%)`,
+ }}
+ />
+
- (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:
+ // 기본 마커가 필요한 경우 기본 마커 이미지 URL을 제공합니다.
+ return 'default_marker_image_url';
+ }
+ return svgComponent;
+ };
+
+ // ... TripMap 컴포넌트 및 나머지 코드
+
return (
사용 경비
+
+
+ {currentSpending.toLocaleString()}
+
+ 원
+
-
-
+
);
};
diff --git a/src/components/Plan/TripMap.tsx b/src/components/Plan/TripMap.tsx
index 7c7cc026..9816403e 100644
--- a/src/components/Plan/TripMap.tsx
+++ b/src/components/Plan/TripMap.tsx
@@ -1,6 +1,16 @@
import { Paths } from '@/@types/service';
-import { useEffect, useRef } from 'react';
+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';
const VITE_KAKAO_MAP_API_KEY = import.meta.env.VITE_KAKAO_MAP_API_KEY;
@@ -87,6 +97,44 @@ const TripMap = ({ paths }: { paths: Paths[] }) => {
setBounds();
}, [paths]);
+ // 선택된 마커의 인덱스를 추적하기 위한 상태
+ const [selectedMarker, setSelectedMarker] = useState
- 목표 경비
-
-
-
- {budget?.budget.toLocaleString()}
- 원
+
-
+
+ 목표 경비
+ {
+ console.log('확인');
+ }}
+ onCancel={() => {
+ console.log('취소');
+ }}
+ children={
+
+ }
+ content={
+
+
+
+ 원
+
+ }
+ />
+
+ {targetBudget.toLocaleString()}
+ 원
+