From 8205a0840c7d78d55ed85d1153817d15581fcf1f Mon Sep 17 00:00:00 2001 From: Hojin Date: Sat, 20 Jan 2024 02:32:50 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Feat:=20=EB=A6=AC=EB=B7=B0=ED=86=B5?= =?UTF-8?q?=EA=B3=84=20=EB=8D=94=EB=B3=B4=EA=B8=B0=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DetailSectionBottom/DetailReviewStats.tsx | 6 ++-- src/components/Plan/PlanSectionTop.tsx | 1 - src/components/Trip/TripRealtimeEditor.tsx | 20 +++++------ src/components/Trip/TripSchedule.tsx | 3 -- src/components/common/icons/Icons.tsx | 33 +++++-------------- 5 files changed, 22 insertions(+), 41 deletions(-) diff --git a/src/components/DetailSectionBottom/DetailReviewStats.tsx b/src/components/DetailSectionBottom/DetailReviewStats.tsx index c428443c..f87f181b 100644 --- a/src/components/DetailSectionBottom/DetailReviewStats.tsx +++ b/src/components/DetailSectionBottom/DetailReviewStats.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { useGetToursReviews } from '@hooks/useReviewStats'; import { v4 as uuidv4 } from 'uuid'; -import { DownIcon } from '@components/common/icons/Icons'; +import { DropdownIcon } from '@components/common/icons/Icons'; import useReviewStatsCalculator from '@hooks/useReviewStatsCalculator'; import { getEmoji } from '@utils/utils'; @@ -45,11 +45,11 @@ const DetailReviewStats = () => {
setShowAll(!showAll)} - className="cursor-pointer transition-transform duration-300" + className="mt-[9px] cursor-pointer transition-transform duration-300" style={{ transform: showAll ? 'rotate(180deg)' : 'rotate(0deg)', }}> - +
)} diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx index 5f99f5d4..114ee5a5 100644 --- a/src/components/Plan/PlanSectionTop.tsx +++ b/src/components/Plan/PlanSectionTop.tsx @@ -13,7 +13,6 @@ import { dayState, dateState } from '@recoil/plan'; import { tripIdState, memberIdState } from '@recoil/socket'; import { calculateDayAndDate } from '@utils/utils'; import { TripSchedule } from '@components/Trip/TripSchedule'; -import { getItem } from '@utils/localStorageFun'; const PlanSectionTop = () => { const navigate = useNavigate(); diff --git a/src/components/Trip/TripRealtimeEditor.tsx b/src/components/Trip/TripRealtimeEditor.tsx index 4d810455..7c5b9f1a 100644 --- a/src/components/Trip/TripRealtimeEditor.tsx +++ b/src/components/Trip/TripRealtimeEditor.tsx @@ -26,16 +26,16 @@ const TripRealtimeEditor = () => { setPubMember({ token: token || '' }); }, [token]); - useEffect(() => { - if (pubMember && tripId) { - callBackPub(() => { - pubConnectMember(pubMember, tripId); - }); - return () => { - callBackPub(() => pubDisconnectMember(pubMember, tripId)); - }; - } - }, [pubMember]); + // useEffect(() => { + // if (pubMember && tripId) { + // callBackPub(() => { + // pubConnectMember(pubMember, tripId); + // }); + // return () => { + // callBackPub(() => pubDisconnectMember(pubMember, tripId)); + // }; + // } + // }, [pubMember]); const tripMemberData = tripMember?.data; useEffect(() => { diff --git a/src/components/Trip/TripSchedule.tsx b/src/components/Trip/TripSchedule.tsx index ad55e20e..c68a60e3 100644 --- a/src/components/Trip/TripSchedule.tsx +++ b/src/components/Trip/TripSchedule.tsx @@ -12,9 +12,6 @@ export const TripSchedule = () => { 5 - 23.12.23 - 23.12.25 diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index ab793d75..1c66fb80 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -1299,7 +1299,6 @@ export const CounterIcon: React.FC< ); }; - export const PlanColorIcon: React.FC = ({ size = 21 }) => { return ( = ({ size = 21 }) => { ); }; - export const ThumbsUp: React.FC = ({ size = 16, fill = '#1E1E1E', @@ -1675,34 +1673,21 @@ export const PaperIcon: React.FC = ({}) => { ); }; -export const PlanColorIcon = () => { +export const DropdownIcon: React.FC = ({}) => { return ( + preserveAspectRatio="xMidYMid meet"> - - - ); }; From c70cdedb68581ca226fbe75ebe5df69a0fc31d22 Mon Sep 17 00:00:00 2001 From: Hojin Date: Sat, 20 Jan 2024 22:31:38 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Feat:=20=EC=97=AC=EC=A0=95=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A6=AC=ED=8E=99=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@types/service.ts | 1 + src/api/trips.ts | 8 +-- src/components/Plan/PlanItem.tsx | 7 +-- src/components/Plan/PlanSectionTop.tsx | 71 ++++++++++++++++------ src/components/Trip/TripInfo.tsx | 26 ++++++-- src/components/Trip/TripPreference.tsx | 19 ++++-- src/components/Trip/TripRealtimeEditor.tsx | 39 ++---------- src/components/Trip/TripSchedule.tsx | 19 ++++-- src/components/Trip/TripSectionTop.tsx | 4 -- src/components/common/icons/Icons.tsx | 8 +-- src/hooks/useGetTrips.ts | 43 +++++++++++++ src/hooks/useGetTripsAuthority.ts | 9 +-- src/hooks/useSocket.ts | 30 ++++++--- src/recoil/socket.ts | 9 +-- src/router/socketRouter.tsx | 10 +-- 15 files changed, 190 insertions(+), 113 deletions(-) create mode 100644 src/hooks/useGetTrips.ts diff --git a/src/@types/service.ts b/src/@types/service.ts index 4ea36ae0..de3751a9 100644 --- a/src/@types/service.ts +++ b/src/@types/service.ts @@ -103,6 +103,7 @@ export type SocketContextType = { tripPath: subPathRes | null; tripMember: subMemberRes | null; tripBudget: subBudgetRes | null; + tripId: string; callBackPub: (callback: () => void) => void; }; diff --git a/src/api/trips.ts b/src/api/trips.ts index d50faa39..675b6ee4 100644 --- a/src/api/trips.ts +++ b/src/api/trips.ts @@ -4,7 +4,7 @@ import authClient from './authClient'; // 여정 관련 API // 여정 상세조회 -export const getTrips = async (tripId: number) => { +export const getTrips = async (tripId: string) => { const res = await client.get(`trips/${tripId}`); return res; }; @@ -71,17 +71,17 @@ export const postTripsLikeHate = async ( }; // 우리의 여행취향 조회 -export const getTripsSurvey = async (tripId: number) => { +export const getTripsSurvey = async (tripId: string) => { const res = await client.get(`trips/${tripId}/survey`); return res; }; // 우리의 여행취향 참여/미참여 회원 조회 -export const getTripsSurveyMembers = async (tripId: number) => { +export const getTripsSurveyMembers = async (tripId: string) => { const res = await client.get(`trips/${tripId}/survey/members`); return res; }; // 여정을 공유하고 있는 회원 조회 -export const getTripsMembers = async (tripId: number) => { +export const getTripsMembers = async (tripId: string) => { const res = await client.get(`trips/${tripId}/members`); return res; }; 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 = ({ 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 114ee5a5..83892aea 100644 --- a/src/components/Plan/PlanSectionTop.tsx +++ b/src/components/Plan/PlanSectionTop.tsx @@ -6,47 +6,80 @@ 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'; 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 { 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 (
{ - 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
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 7c5b9f1a..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 imageUrl = isImageUrlValid ? thumbnailUrl : null; return ( - -
+ +
{imageUrl ? ( { + const { tripName, startDate, endDate, numberOfPeople } = useGetTrips(); + return ( <>
-
-
강릉 여행 일정
+
+
{tripName}
- 5 + {numberOfPeople}
+
+ +
- 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 59ef58eb..82e03c8e 100644 --- a/src/components/Trip/TripSectionTop.tsx +++ b/src/components/Trip/TripSectionTop.tsx @@ -5,13 +5,9 @@ import { BackBox } from '@components/common'; import { useNavigate } from 'react-router-dom'; import PlanTripButton from './PlanTripButton'; import { LikedToursList } from './LikedToursList'; -import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority'; const TripSectionTop = () => { const navigate = useNavigate(); - const { tripAuthority } = useGetTripsAuthority(); - - console.log(tripAuthority); return (
diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index 1c66fb80..5bc316d1 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -1314,14 +1314,14 @@ export const PlanColorIcon: React.FC = ({ size = 21 }) => { { + 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 e679617b..228c62b5 100644 --- a/src/router/socketRouter.tsx +++ b/src/router/socketRouter.tsx @@ -5,19 +5,11 @@ import { PlanAddPlace } from '@pages/plan/addPlace/PlanAddPlace.page'; import PlanPlaceSearch from '@pages/plan/planPlaceSearch.page'; import Trip from '@pages/trip/trip.page'; import MainLayout from './routerLayout'; -import { useRecoilValue } from 'recoil'; -import { tripIdState, visitDateState } from '@recoil/socket'; import { AddOurList } from '@pages/trip/AddOurList'; const SocketRoutes = () => { - const tripId = useRecoilValue(tripIdState); - const visitDate = useRecoilValue(visitDateState); - if (!tripId || !visitDate) { - return
에러
; - } - return ( - + } /> } /> From f58e6291b9728e77a2cbedba2ddd0fc90ff1c80b Mon Sep 17 00:00:00 2001 From: Hojin Date: Sun, 21 Jan 2024 11:08:07 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Feat:=20=EC=83=81=EC=84=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=9D=BC=EC=A0=95=EC=B6=94=EA=B0=80?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/trips.ts | 6 ++ .../DetailSectionTop/DetailAddSchedule.tsx | 78 ++++++++++++++----- src/components/common/icons/Icons.tsx | 4 +- src/hooks/useGetMyTrips.ts | 28 +++++++ src/utils/utils.ts | 19 +++-- 5 files changed, 110 insertions(+), 25 deletions(-) create mode 100644 src/hooks/useGetMyTrips.ts diff --git a/src/api/trips.ts b/src/api/trips.ts index 675b6ee4..c2fdf166 100644 --- a/src/api/trips.ts +++ b/src/api/trips.ts @@ -91,3 +91,9 @@ export const getTripsAuthority = async (tripId: string) => { const res = await authClient.get(`trips/${tripId}/authority`); return res; }; + +// 나의 여정목록 조회 +export const getMyTrips = async () => { + const res = await authClient.get(`trips`); + return res; +}; diff --git a/src/components/DetailSectionTop/DetailAddSchedule.tsx b/src/components/DetailSectionTop/DetailAddSchedule.tsx index d6fac6dd..faf5982a 100644 --- a/src/components/DetailSectionTop/DetailAddSchedule.tsx +++ b/src/components/DetailSectionTop/DetailAddSchedule.tsx @@ -2,14 +2,35 @@ import * as Dialog from '@radix-ui/react-dialog'; import { CalendarIcon } from '@components/common/icons/Icons'; import Alert from '@components/common/alert/Alert'; import { useNavigate } from 'react-router-dom'; +import { PlusIcon } from '@components/common/icons/Icons'; +import { useGetMyTrips } from '@hooks/useGetMyTrips'; +import { calculateTripDuration } from '@utils/calculateTripDuration'; +import { calculateDayAndDate } from '@utils/utils'; const DetailAddSchedule = () => { + const { myTrips } = useGetMyTrips(); + const tripDuration = calculateTripDuration( + myTrips[0]?.startDate, + myTrips[0]?.endDate, + ); + + const { SmallDayArr } = calculateDayAndDate( + myTrips[0]?.startDate, + myTrips[0]?.endDate, + ); + + console.log(SmallDayArr); + const navigate = useNavigate(); const handleConfirm = () => { navigate('/login'); }; + const handleCreate = () => { + navigate('/create'); + }; + return ( @@ -24,30 +45,51 @@ const DetailAddSchedule = () => { - -
-
-
- -
-
- 강릉 속초 여행 -
-
- 2023.12.20 - 12.22 (3박 4일) + {myTrips.map((trip, index) => { + // 각 여행에 대한 기간을 계산합니다. + const tripDuration = calculateTripDuration( + trip.startDate, + trip.endDate, + ); + + return ( +
+
+
+ {`Thumbnail +
+
+ {trip.tripName} +
+
+ {trip.startDate?.replace(/-/g, '.')} -{' '} + {trip.endDate?.substring(5).replace(/-/g, '.')} ( + {tripDuration}) +
+
-
-
+ ); + })} +
@@ -67,7 +109,7 @@ const DetailAddSchedule = () => { } onConfirm={handleConfirm}>
-
diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index 5bc316d1..9ae7a7f8 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -478,6 +478,7 @@ export const PlusIcon: React.FC = ({ size = 20, color = 'black', fill = 'none', + className, }) => { return ( = ({ width={size} height={size} viewBox="0 0 14 14" - fill={fill}> + fill={fill} + className={className}> { + 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/utils/utils.ts b/src/utils/utils.ts index b371a609..6176f3e0 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -30,13 +30,19 @@ export const getEmoji = (content: string) => { export function calculateDayAndDate(startDate: string, endDate: string) { let start = new Date(startDate); const end = new Date(endDate); - const differenceInDays: number = - (end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24); - - const DayArr = Array.from( - { length: Math.ceil(differenceInDays) + 1 }, - (_, i) => `DAY ${i + 1}`, + const differenceInDays: number = Math.round( + (end.getTime() - start.getTime()) / (1000 * 3600 * 24), ); + + const createDayArray = (prefix: string) => + Array.from( + { length: differenceInDays + 1 }, + (_, i) => `${prefix} ${i + 1}`, + ); + + const DayArr = createDayArray('DAY'); + const SmallDayArr = createDayArray('Day'); + const DateArr = []; while (start <= end) { @@ -47,5 +53,6 @@ export function calculateDayAndDate(startDate: string, endDate: string) { return { DayArr, DateArr, + SmallDayArr, }; }