diff --git a/src/api/trips.ts b/src/api/trips.ts index 3441cb6b..3d2d2635 100644 --- a/src/api/trips.ts +++ b/src/api/trips.ts @@ -68,3 +68,13 @@ export const getTripsSurvey = async (tripId: number) => { const res = await client.get(`trips/${tripId}/survey`); return res; }; +// 우리의 여행취향 참여/미참여 회원 조회 +export const getTripsSurveyMembers = async (tripId: number) => { + const res = await client.get(`trips/${tripId}/survey/members`); + return res; +}; +// 여정을 공유하고 있는 회원 조회 +export const getTripsMembers = async (tripId: number) => { + const res = await client.get(`trips/${tripId}/members`); + return res; +}; diff --git a/src/components/Trip/PlanTripButton.tsx b/src/components/Trip/PlanTripButton.tsx index b2d5012b..9cfa2dfd 100644 --- a/src/components/Trip/PlanTripButton.tsx +++ b/src/components/Trip/PlanTripButton.tsx @@ -2,12 +2,16 @@ import { PlanIcon, RightIcon } from '@components/common/icons/Icons'; const PlanTripButton = () => { return ( - ); }; diff --git a/src/components/Trip/TripInfo.tsx b/src/components/Trip/TripInfo.tsx index c0f9a54f..5594c89a 100644 --- a/src/components/Trip/TripInfo.tsx +++ b/src/components/Trip/TripInfo.tsx @@ -1,20 +1,128 @@ import { UserIcon } from '@components/common/icons/Icons'; +import { useRecoilValue, useRecoilState } from 'recoil'; +import { isModalOpenState, modalChildrenState } from '@recoil/modal'; +import TripSurveyMember from '@components/common/modal/children/TripSurveyMember'; +import { Modal } from '@components/common/modal'; +import { useQuery } from '@tanstack/react-query'; +import { getTripsMembers } from '@api/trips'; +import { tripIdState } from '@recoil/socket'; +import { ReactComponent as NullUser } from '@assets/images/NullUser.svg'; +import { DownIcon } from '@components/common/icons/Icons'; +import { useState } from 'react'; + +const ShareList = () => { + const tripId = Number(useRecoilValue(tripIdState)); + const { data: tripsMembers } = useQuery({ + queryKey: ['tripsMembers', tripId], + queryFn: () => getTripsMembers(tripId), + }); + const members = tripsMembers?.data?.data?.tripMemberSimpleInfos; + + return ( + <> +
+
+ {members.map((member: any, index: number) => { + return ( +
+ {member.profileImageUrl && + member.profileImageUrl !== 'http://asiduheimage.jpg' ? ( + 유저 프로필 + ) : ( + + )} +
{member.nickname}
+
+ ); + })} +
+ + ); +}; const TripInfo = () => { + 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), + }); + const members = tripsMembers?.data?.data?.tripMemberSimpleInfos; + + const closeModal = () => { + setIsModalOpen(false); + }; + + const handleClickButton = () => { + setIsAccordion((prev) => !prev); + }; + return ( -
-
-
-
강릉 여행 일정
-
- - 5 + <> +
+
+
+ {members?.map((member: any, index: number) => ( +
+ {member.profileImageUrl && + member.profileImageUrl !== 'http://asiduheimage.jpg' ? ( + 유저 프로필 + ) : ( + + )} +
+ ))} +
+ +
+

+ {members?.length}명과 공유중 +

+
+ +
+
+
+ + {isAccordion && } +
+
+
+
강릉 여행 일정
+
+ + 5 +
+
- + 23.12.23 - 23.12.25
- 23.12.23 ~ 23.12.25 -
+ + {modalChildren === 'TripSurveyMember' && } + + ); }; diff --git a/src/components/Trip/TripParticipant.tsx b/src/components/Trip/TripParticipant.tsx new file mode 100644 index 00000000..934aa95e --- /dev/null +++ b/src/components/Trip/TripParticipant.tsx @@ -0,0 +1,51 @@ +import { ReactComponent as NullUser } from '@assets/images/NullUser.svg'; +import { useRecoilValue } from 'recoil'; +import { participantsState } from '@recoil/trip'; + +interface ParticipantStatusProps { + status: string; +} + +const ParticipantList: React.FC<{ infos: any[] }> = ({ infos }) => ( +
+ {infos.map((info: any) => ( +
+ {info.thumbnail && info.thumbnail !== 'http://asiduheimage.jpg' ? ( + 유저 프로필 + ) : ( + + )} +
{info.nickname}
+
+ ))} +
+); + +export const ParticipantStatus: React.FC = ({ + status, +}) => { + const participants = useRecoilValue(participantsState); + + return ( +
+
+ {status == '참여' ? ( + <>{participants?.tripSurveyMemberCount}명 참여 + ) : ( + <>{participants?.nonTripSurveySetMemberInfos?.length}명 미참여 + )} +
+ {status == '참여' ? ( + + ) : ( + + )} +
+ ); +}; diff --git a/src/components/Trip/TripPreference.tsx b/src/components/Trip/TripPreference.tsx index 0a59f8c7..02f71976 100644 --- a/src/components/Trip/TripPreference.tsx +++ b/src/components/Trip/TripPreference.tsx @@ -1,14 +1,16 @@ import React, { useState, useEffect } from 'react'; import { getTripsSurvey } from '@api/trips'; import { useQuery } from '@tanstack/react-query'; -import { useParams } from 'react-router-dom'; -import { MoreIcon } from '@components/common/icons/Icons'; -import { RightIcon } from '@components/common/icons/Icons'; +import { MoreIcon, RightIcon, HeartIcon } from '@components/common/icons/Icons'; import { calculatePercentage, calculatePercentageRemain, } 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 { participantsState } from '@recoil/trip'; interface RatioBarParams { value: number; total: number; @@ -26,7 +28,12 @@ interface PercentageParams { const TripPreferenceButton: React.FC = () => { return (