-
-
- 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">
+
+
-
-
-
+ {isEdit ? (
+
+ ) : (
+
+ )}
-
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.category}
-
-
- {item.price} 원
+
+
+ {index !== 0 ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+ {item.category}
+
+
+ {item.price} 원
+
-
- {index < itemLength - 1 &&
- paths
- .filter((path) => path.fromSeqNum === item.seqNum)
- .map((path) => (
-
-
-
- {transportation === 'CAR' ? (
-
- ) : transportation === 'PUBLIC_TRANSPORTATION' ? (
-
- ) : null}
-
-
- {(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' ? (
+
+ ) : transportation === 'PUBLIC_TRANSPORTATION' ? (
+
+ ) : null}
+
+
+ {(path.pathInfo.totalDistance / 1000).toFixed(2)}km,{' '}
+ {path.pathInfo.totalTime}분,{' '}
+ {path.pathInfo.price.toLocaleString()}원
+
-
- ))}
-
+ ))}
+
+
))}
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
= ({
+ 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 && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {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 (
{
(
-
+ contents={DateArr.map((date, index) => (
+
))}
/>
diff --git a/src/components/Trip/PlanTripButton.tsx b/src/components/Trip/PlanTripButton.tsx
index b218ef76..bd5ac6fc 100644
--- a/src/components/Trip/PlanTripButton.tsx
+++ b/src/components/Trip/PlanTripButton.tsx
@@ -2,12 +2,18 @@ import { PlanIcon, RightIcon } from '@components/common/icons/Icons';
const PlanTripButton = () => {
return (
-