- 
-
);
diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
index d034b0f1..37224884 100644
--- a/src/components/Plan/PlanSectionTop.tsx
+++ b/src/components/Plan/PlanSectionTop.tsx
@@ -4,10 +4,39 @@ import { useNavigate } from 'react-router-dom';
import TripBudget from './TripBudget';
import Tab from '@components/common/tab/Tab';
import PlanItem from './PlanItem';
+import { socketContext } from '@hooks/useSocket';
+import { useContext } from 'react';
+import { pubEnterMember } from '@api/socket';
+import { useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+import { tripIdState, memberIdState } from '@recoil/socket';
+import { calculateDayAndDate } from '@utils/utils';
const PlanSectionTop = () => {
const navigate = useNavigate();
+ const tripId = useRecoilValue(tripIdState);
+ const pubMember = useRecoilValue(memberIdState);
+ if (!pubMember || !tripId) {
+ return
-
+ {index < itemLength - 1 &&
+ paths
+ .filter((path) => path.fromSeqNum === item.seqNum)
+ .map((path) => (
+
- {item.name}
-
-
-
- {item.category}
-
-
- {item.price} 원
+ {item.map((item, index) => (
+ <>
+
-
+
+
-
+
+ {item.name}
+
+
+ {item.category}
+
+
+ {item.price} 원
+
+
+
+ ))}
+
+ ))}
+
+
+ {transportation === 'CAR' ? (
+
+
+ {(path.pathInfo.totalDistance / 1000).toFixed(2)}km,{' '}
+ {path.pathInfo.totalTime}분,{' '}
+ {path.pathInfo.price.toLocaleString()}원
+
+ 에러
;
+ }
+
+ const { callBackPub, tripInfo } = useContext(socketContext);
+
+ useEffect(() => {
+ callBackPub(() => pubEnterMember(pubMember, tripId));
+ }, []);
+
+ let DayArr: string[] = [];
+ let DateArr: string[] = [];
+
+ const startDate = tripInfo?.data?.startDate;
+ const endDate = tripInfo?.data?.endDate;
+
+ if (startDate && endDate) {
+ ({ DayArr, DateArr } = calculateDayAndDate(startDate, endDate));
+ }
+
return (
Day2
, Day3
]}
+ lists={DayArr}
+ contents={DateArr.map((date) => (
+