diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
index d034b0f1..fb84e0fa 100644
--- a/src/components/Plan/PlanSectionTop.tsx
+++ b/src/components/Plan/PlanSectionTop.tsx
@@ -4,9 +4,42 @@ 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
에러
;
+ }
+
+ const { callBackPub, tripInfo } = useContext(socketContext);
+
+ useEffect(() => {
+ callBackPub(() => pubEnterMember(pubMember, tripId));
+ }, []);
+
+ console.log(tripInfo);
+
+ let DayArr: string[] = [];
+ let DateArr: string[] = [];
+
+ const startDate = tripInfo?.data?.startDate;
+ const endDate = tripInfo?.data?.endDate;
+
+ if (startDate && endDate) {
+ ({ DayArr, DateArr } = calculateDayAndDate(startDate, endDate));
+ }
+
+ console.log(DateArr);
return (
@@ -20,11 +53,11 @@ const PlanSectionTop = () => {
Day1
,
Day2
,
Day3
]}
+ lists={DayArr}
+ contents={DateArr.map((date) => (
+
+ ))}
/>
-
-