-
-
- 
-
-
-
+ );
+ })}
+
- 강릉 속초 여행
-
-
- 2023.12.20 - 12.22 (3박 4일)
+ {myTrips.map((trip, index) => {
+ // 각 여행에 대한 기간을 계산합니다.
+ const tripDuration = calculateTripDuration(
+ trip.startDate,
+ trip.endDate,
+ );
+
+ return (
+
-
+
-
+
+ 
+
+
+ {trip.tripName}
+
+
+ {trip.startDate?.replace(/-/g, '.')} -{' '}
+ {trip.endDate?.substring(5).replace(/-/g, '.')} (
+ {tripDuration})
+
+
@@ -67,7 +109,7 @@ const DetailAddSchedule = () => {
}
onConfirm={handleConfirm}>
= ({ date, day }) => {
const navigate = useNavigate();
const { tripAuthority } = useGetTripsAuthority();
const [isEdit, SetIsEdit] = useState(false);
- const tripId = useRecoilValue(tripIdState);
const tap = useRecoilValue(tapState);
- const [visitDate, setVisitDate] = useRecoilState(visitDateState);
- const { tripItem, tripPath, callBackPub } = useContext(socketContext);
- console.log(visitDate);
+ const [, setVisitDate] = useRecoilState(visitDateState);
+ const { tripItem, tripPath, callBackPub, tripId } = useContext(socketContext);
useEffect(() => {
if (tap) {
diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
index 6200827c..f089f621 100644
--- a/src/components/Plan/PlanSectionTop.tsx
+++ b/src/components/Plan/PlanSectionTop.tsx
@@ -6,47 +6,82 @@ 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 {
+ pubEnterMember,
+ pubConnectMember,
+ pubDisconnectMember,
+} from '@api/socket';
import { useEffect } from 'react';
-import { useRecoilValue, useRecoilState } from 'recoil';
+import { 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 { useGetTrips } from '@hooks/useGetTrips';
+import { visitDateState } from '@recoil/socket';
+import { useState } from 'react';
+import { getItem } from '@utils/localStorageFun';
import PlanSchedule from './PlanSchedule';
+
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
{
- const tripId = Number(useRecoilValue(tripIdState));
+ const { tripId } = useGetTripsAuthority();
+
const { data: tripsMembers } = useQuery({
queryKey: ['tripsMembers', tripId],
- queryFn: () => getTripsMembers(tripId),
+ queryFn: () =>
+ tripId != null
+ ? getTripsMembers(tripId)
+ : Promise.reject('tripId is null'),
+ enabled: !!tripId,
});
const members = tripsMembers?.data?.data?.tripMemberSimpleInfos;
-
+ console.log(tripsMembers);
return (
<>
@@ -54,15 +59,20 @@ const ShareList = () => { }; const TripInfo = () => { + const { tripId } = useGetTripsAuthority(); const modalChildren = useRecoilValue(modalChildrenState); const [isModalOpen, setIsModalOpen] = useRecoilState(isModalOpenState); - const tripId = Number(useRecoilValue(tripIdState)); const [isAccordion, setIsAccordion] = useState(false); const { data: tripsMembers } = useQuery({ queryKey: ['tripsMembers', tripId], - queryFn: () => getTripsMembers(tripId), + queryFn: () => + tripId != null + ? getTripsMembers(tripId) + : Promise.reject('tripId is null'), + enabled: !!tripId, }); + const members = tripsMembers?.data?.data?.tripMemberSimpleInfos; const closeModal = () => { @@ -73,6 +83,10 @@ const TripInfo = () => { setIsAccordion((prev) => !prev); }; + if (!tripId) { + return
-
diff --git a/src/components/Plan/PlanItem.tsx b/src/components/Plan/PlanItem.tsx
index a4342a68..10ae900f 100644
--- a/src/components/Plan/PlanItem.tsx
+++ b/src/components/Plan/PlanItem.tsx
@@ -9,7 +9,6 @@ import { socketContext } from '@hooks/useSocket';
import { useRecoilState, useRecoilValue } from 'recoil';
import { visitDateState } from '@recoil/socket';
import { pubGetPathAndItems, pubUpdateTransportation } from '@api/socket';
-import { tripIdState } from '@recoil/socket';
import { tapState } from '@recoil/plan';
import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
@@ -22,11 +21,9 @@ const PlanItem: React.FC에러
;
- }
-
- const { callBackPub, tripInfo } = useContext(socketContext);
-
- useEffect(() => {
- callBackPub(() => pubEnterMember(tripId));
- }, []);
+ const {
+ callBackPub,
+ tripId,
+ tripInfo,
+ tripItem,
+ tripPath,
+ tripMember,
+ tripBudget,
+ } = useContext(socketContext);
+ const [, setVisitDate] = useRecoilState(visitDateState);
+ const { startDate, endDate } = useGetTrips();
+ const [isEnter, setIsEnter] = useState(false);
let DayArr: string[] = [];
let DateArr: string[] = [];
- const startDate = tripInfo?.data?.startDate;
- const endDate = tripInfo?.data?.endDate;
-
if (startDate && endDate) {
({ DayArr, DateArr } = calculateDayAndDate(startDate, endDate));
}
useEffect(() => {
+ if (startDate) {
+ setVisitDate({ visitDate: startDate });
+ }
setDay(DayArr);
setDate(DateArr);
}, [startDate, endDate]);
+ useEffect(() => {
+ callBackPub(() => pubEnterMember(tripId));
+ }, []);
+
+ useEffect(() => {
+ if (tripInfo && tripItem && tripPath && tripMember && tripBudget) {
+ setIsEnter(true);
+ }
+ }, [tripInfo, tripItem, tripPath, tripMember, tripBudget]);
+
+ useEffect(() => {
+ if (isEnter) {
+ const accessToken = getItem('accessToken');
+ if (accessToken) {
+ callBackPub(() => {
+ pubConnectMember({ token: accessToken || '' }, tripId);
+ });
+
+ return () => {
+ callBackPub(() =>
+ pubDisconnectMember({ token: accessToken || '' }, tripId),
+ );
+ };
+ }
+ }
+ }, [isEnter]);
+
return (
@@ -54,15 +59,20 @@ const ShareList = () => { }; const TripInfo = () => { + const { tripId } = useGetTripsAuthority(); const modalChildren = useRecoilValue(modalChildrenState); const [isModalOpen, setIsModalOpen] = useRecoilState(isModalOpenState); - const tripId = Number(useRecoilValue(tripIdState)); const [isAccordion, setIsAccordion] = useState(false); const { data: tripsMembers } = useQuery({ queryKey: ['tripsMembers', tripId], - queryFn: () => getTripsMembers(tripId), + queryFn: () => + tripId != null + ? getTripsMembers(tripId) + : Promise.reject('tripId is null'), + enabled: !!tripId, }); + const members = tripsMembers?.data?.data?.tripMemberSimpleInfos; const closeModal = () => { @@ -73,6 +83,10 @@ const TripInfo = () => { setIsAccordion((prev) => !prev); }; + if (!tripId) { + return
error
;
+ }
+
return (
<>
diff --git a/src/components/Trip/TripPreference.tsx b/src/components/Trip/TripPreference.tsx
index ca11afda..432c72f2 100644
--- a/src/components/Trip/TripPreference.tsx
+++ b/src/components/Trip/TripPreference.tsx
@@ -8,9 +8,10 @@ import {
} from '@utils/calculatePercentage';
import { modalChildrenState, isModalOpenState } from '@recoil/modal';
import { getTripsSurveyMembers } from '@api/trips';
-import { tripIdState } from '@recoil/socket';
-import { useRecoilValue, useSetRecoilState, useRecoilState } from 'recoil';
+import { useSetRecoilState, useRecoilState } from 'recoil';
import { participantsState } from '@recoil/trip';
+import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
+
interface RatioBarParams {
value: number;
total: number;
@@ -96,6 +97,7 @@ const Percentage = ({ value, total, color }: PercentageParams) => (
);
const TripPreference: React.FC = () => {
+ const { tripId } = useGetTripsAuthority();
const [A, setA] = useState<[number, number]>([0, 0]);
const [B, setB] = useState<[number, number]>([0, 0]);
const [C, setC] = useState<[number, number]>([0, 0]);
@@ -103,12 +105,15 @@ const TripPreference: React.FC = () => {
const [E, setE] = useState<[number, number]>([0, 0]);
const setModalChildren = useSetRecoilState(modalChildrenState);
const setIsModalOpen = useSetRecoilState(isModalOpenState);
- const tripId = Number(useRecoilValue(tripIdState));
const [participants, setParticipants] = useRecoilState(participantsState);
const { data: tripsSurveyMembers } = useQuery({
queryKey: ['tripsSurveyMembers', tripId],
- queryFn: () => getTripsSurveyMembers(tripId),
+ queryFn: () =>
+ tripId != null
+ ? getTripsSurveyMembers(tripId)
+ : Promise.reject('tripId is null'),
+ enabled: !!tripId,
});
useEffect(() => {
@@ -118,7 +123,11 @@ const TripPreference: React.FC = () => {
const { data: tripPreference, isLoading } = useQuery({
queryKey: ['tripPreference', tripId],
- queryFn: () => getTripsSurvey(tripId),
+ queryFn: () =>
+ tripId != null
+ ? getTripsSurvey(tripId)
+ : Promise.reject('tripId is null'),
+ enabled: !!tripId,
});
useEffect(() => {
diff --git a/src/components/Trip/TripRealtimeEditor.tsx b/src/components/Trip/TripRealtimeEditor.tsx
index 895b51e4..b7f83c6d 100644
--- a/src/components/Trip/TripRealtimeEditor.tsx
+++ b/src/components/Trip/TripRealtimeEditor.tsx
@@ -1,46 +1,15 @@
-import { useRecoilValue } from 'recoil';
-import { tripIdState } from '@recoil/socket';
import { useEffect, useState } from 'react';
import { socketContext } from '@hooks/useSocket';
import { useContext } from 'react';
-import { pubConnectMember, pubDisconnectMember } from '@api/socket';
import { UserIcon } from '@components/common/icons/Icons';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation } from 'swiper/modules';
-import { getItem } from '@utils/localStorageFun';
const TripRealtimeEditor = () => {
- const tripId = useRecoilValue(tripIdState);
- const { callBackPub, tripMember } = useContext(socketContext);
- const [token, setToken] = useState('');
- const [pubMember, setPubMember] = useState({ token: '' });
-
- useEffect(() => {
- const accessToken = getItem('accessToken');
- if (accessToken) {
- setToken(accessToken);
- }
- }, []);
-
- useEffect(() => {
- setPubMember({ token: token || '' });
- }, [token]);
-
- useEffect(() => {
- if (pubMember && tripId) {
- callBackPub(() => {
- pubConnectMember(pubMember, tripId);
- });
- return () => {
- callBackPub(() => pubDisconnectMember(pubMember, tripId));
- };
- }
- }, [pubMember]);
+ const { tripMember } = useContext(socketContext);
const tripMemberData = tripMember?.data;
- useEffect(() => {
- console.log('tripMemberData', tripMemberData);
- }, [tripMemberData]);
+
return (
{
+ const { tripName, startDate, endDate, numberOfPeople } = useGetTrips();
+
return (
<>
-
= ({
size = 20,
color = 'black',
fill = 'none',
+ className,
}) => {
return (
);
};
+
+export const DropdownIcon: React.FC = ({}) => {
+ return (
+
+ );
+};
+
+
diff --git a/src/hooks/useGetMyTrips.ts b/src/hooks/useGetMyTrips.ts
new file mode 100644
index 00000000..754188ed
--- /dev/null
+++ b/src/hooks/useGetMyTrips.ts
@@ -0,0 +1,28 @@
+import { useQuery } from '@tanstack/react-query';
+import { getMyTrips } from '@api/trips';
+
+interface Trip {
+ tripId: number;
+ tripName: string;
+ startDate: string;
+ endDate: string;
+ numberOfPeople: number;
+ tripStatus: string;
+ tripThumbnailUrl: string;
+}
+
+export const useGetMyTrips = (): { myTrips: Trip[] } => {
+ const { data, isLoading, isError } = useQuery({
+ queryKey: ['getMyTrips'],
+ queryFn: () => getMyTrips(),
+ staleTime: 60000,
+ });
+
+ const myTrips = data?.data.data;
+
+ if (isLoading || isError) {
+ return { myTrips: [] };
+ }
+
+ return { myTrips };
+};
diff --git a/src/hooks/useGetTrips.ts b/src/hooks/useGetTrips.ts
new file mode 100644
index 00000000..7e1c0445
--- /dev/null
+++ b/src/hooks/useGetTrips.ts
@@ -0,0 +1,43 @@
+import { useQuery } from '@tanstack/react-query';
+import { getTrips } from '@api/trips';
+import { useParams } from 'react-router-dom';
+
+type useGetTripsReturn = {
+ tripName: string | null;
+ startDate: string | null;
+ endDate: string | null;
+ numberOfPeople: number | null;
+};
+
+export const useGetTrips = (): useGetTripsReturn => {
+ const { id } = useParams();
+
+ const defaultReturn = {
+ tripName: null,
+ startDate: null,
+ endDate: null,
+ numberOfPeople: null,
+ };
+
+ if (!id) {
+ return defaultReturn;
+ }
+
+ const { data, isLoading, isError } = useQuery({
+ queryKey: ['getTrips', id],
+ queryFn: () => getTrips(id),
+ enabled: !!id,
+ staleTime: 60000,
+ });
+
+ const tripName = data?.data.data.tripName;
+ const startDate = data?.data.data.startDate;
+ const endDate = data?.data.data.endDate;
+ const numberOfPeople = data?.data.data.numberOfPeople;
+
+ if (isLoading || isError) {
+ return defaultReturn;
+ }
+
+ return { tripName, startDate, endDate, numberOfPeople };
+};
diff --git a/src/hooks/useGetTripsAuthority.ts b/src/hooks/useGetTripsAuthority.ts
index efef5695..1dd72859 100644
--- a/src/hooks/useGetTripsAuthority.ts
+++ b/src/hooks/useGetTripsAuthority.ts
@@ -6,7 +6,7 @@ import { useParams } from 'react-router-dom';
type useGetTripsAuthorityReturn = {
tripAuthority: string | null;
memberId: number | null;
- TripId: number | null;
+ tripId: string | null;
};
export const useGetTripsAuthority = (): useGetTripsAuthorityReturn => {
@@ -15,7 +15,7 @@ export const useGetTripsAuthority = (): useGetTripsAuthorityReturn => {
const defaultReturn = {
tripAuthority: null,
memberId: null,
- TripId: null,
+ tripId: null,
};
if (!id) {
@@ -25,15 +25,16 @@ export const useGetTripsAuthority = (): useGetTripsAuthorityReturn => {
queryKey: ['getTripsAuthority', id],
queryFn: () => getTripsAuthority(id),
enabled: !!id,
+ staleTime: 60000,
});
const tripAuthority = data?.data.data.tripAuthority;
const memberId = data?.data.data.memberId;
- const TripId = data?.data.data.TripId;
+ const tripId = data?.data.data.TripId;
if (isLoading || isError) {
return defaultReturn;
}
- return { tripAuthority, memberId, TripId };
+ return { tripAuthority, memberId, tripId };
};
diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts
index 6f07b0ca..37b7831a 100644
--- a/src/hooks/useSocket.ts
+++ b/src/hooks/useSocket.ts
@@ -16,6 +16,9 @@ import {
} from '@/@types/service';
import { createContext } from 'react';
import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import { visitDateState } from '@recoil/socket';
export const socketContext = createContext({
tripInfo: null,
@@ -23,16 +26,20 @@ export const socketContext = createContext({
tripPath: null,
tripMember: null,
tripBudget: null,
+ tripId: '',
callBackPub: () => {},
});
-export const useSocket = (tripId: string, visitDate: string) => {
+export const useSocket = () => {
+ const { id } = useParams();
+ const tripId = id ?? '';
+ const visitDate = useRecoilValue(visitDateState);
+
const [tripInfo, setTripInfo] = useState(null);
const [tripItem, setTripItem] = useState(null);
const [tripPath, setTripPath] = useState(null);
const [tripMember, setTripMember] = useState(null);
const [tripBudget, setTripBudget] = useState(null);
-
const [socketCallback, setSocketCallback] = useState<(() => void) | null>(
null,
);
@@ -41,7 +48,7 @@ export const useSocket = (tripId: string, visitDate: string) => {
setSocketCallback(() => callback);
};
- const socketConnect = () => {
+ const socketConnect = (tripId: string, visitDate: string) => {
socketClient.onConnect = () => {
subInfo(tripId, (res) => {
if (res) {
@@ -63,7 +70,6 @@ export const useSocket = (tripId: string, visitDate: string) => {
subMember(tripId, (res) => {
if (res) {
- // console.log('subMemberRes', res);
setTripMember(res);
}
});
@@ -83,13 +89,23 @@ export const useSocket = (tripId: string, visitDate: string) => {
};
useEffect(() => {
- socketConnect();
- console.log('소켓연결');
+ if (tripId && visitDate) {
+ socketConnect(tripId, visitDate.visitDate);
+ console.log(visitDate);
+ }
return () => {
socketClient.deactivate();
};
}, [tripId, visitDate, socketCallback]);
- return { tripInfo, tripItem, tripPath, tripMember, tripBudget, callBackPub };
+ return {
+ tripInfo,
+ tripItem,
+ tripPath,
+ tripMember,
+ tripBudget,
+ tripId,
+ callBackPub,
+ };
};
diff --git a/src/recoil/socket.ts b/src/recoil/socket.ts
index ab7bb76b..fca451c7 100644
--- a/src/recoil/socket.ts
+++ b/src/recoil/socket.ts
@@ -2,15 +2,10 @@ import { atom } from 'recoil';
export const tripIdState = atom({
key: 'tripIdState',
- default: '1',
+ default: '',
});
export const visitDateState = atom<{ visitDate: string } | null>({
key: 'visitDateState',
- default: { visitDate: '2024-01-03' },
-});
-
-export const memberIdState = atom<{ token: number | null }>({
- key: 'memberIdState',
- default: { token: null },
+ default: { visitDate: '' },
});
diff --git a/src/router/socketRouter.tsx b/src/router/socketRouter.tsx
index fd1115bf..9892bd95 100644
--- a/src/router/socketRouter.tsx
+++ b/src/router/socketRouter.tsx
@@ -13,14 +13,8 @@ import { AddOurList } from '@pages/trip/AddOurList';
const SocketRoutes = () => {
- const tripId = useRecoilValue(tripIdState);
- const visitDate = useRecoilValue(visitDateState);
- if (!tripId || !visitDate) {
- return
+
-
- 23.12.23 - 23.12.25
+
+ {startDate?.substring(2).replace(/-/g, '.') || ''} -{' '}
+ {endDate?.substring(5).replace(/-/g, '.') || ''}
+
);
};
diff --git a/src/components/Trip/TripSectionTop.tsx b/src/components/Trip/TripSectionTop.tsx
index d1388108..a966bab9 100644
--- a/src/components/Trip/TripSectionTop.tsx
+++ b/src/components/Trip/TripSectionTop.tsx
@@ -5,6 +5,10 @@ import { BackBox } from '@components/common';
import { useNavigate } from 'react-router-dom';
import PlanTripButton from './PlanTripButton';
import { LikedToursList } from './LikedToursList';
+
+
+const TripSectionTop = () => {
+ const navigate = useNavigate();
import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
import { useEffect, useState } from 'react';
import IsEditableModal from '@components/Share/IsEditableModal';
@@ -22,6 +26,7 @@ const TripSectionTop = () => {
}
}, [tripAuthority]);
+
return (
강릉 여행 일정
+
+
+
+ {tripName}
+
+
에러
;
- }
-
return (
-