From 9ea95eef2ca47b6c1db823b7f14e79fef254100e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=96=B4=EC=8A=B9=EC=A4=80?= Date: Tue, 16 Jan 2024 19:37:32 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Fix:=20tailwind=20=EC=83=89=EC=83=81=20?= =?UTF-8?q?=ED=99=98=EA=B2=BD=EC=84=A4=EC=A0=95,=20=EC=97=AC=ED=96=89?= =?UTF-8?q?=EC=B7=A8=ED=96=A5=20=EB=84=88=EB=B9=84=20=EC=9E=AC=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Trip/TripPreference.tsx | 2 +- src/components/common/nav/InputComment.tsx | 6 +++--- tailwind.config.js | 5 +++++ 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/Trip/TripPreference.tsx b/src/components/Trip/TripPreference.tsx index 0a59f8c7..b1e26c6a 100644 --- a/src/components/Trip/TripPreference.tsx +++ b/src/components/Trip/TripPreference.tsx @@ -130,7 +130,7 @@ const TripPreference: React.FC = () => { } return ( -
+
n명 참여
diff --git a/src/components/common/nav/InputComment.tsx b/src/components/common/nav/InputComment.tsx index b186b9d4..3e3bb64d 100644 --- a/src/components/common/nav/InputComment.tsx +++ b/src/components/common/nav/InputComment.tsx @@ -106,8 +106,8 @@ export const InputComment: React.FC = () => { }; return ( -
-
+
+
ㅣ
= () => { onKeyPress={handleKeyPress} />
-
+
- + 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..fd70334c --- /dev/null +++ b/src/components/Trip/TripParticipant.tsx @@ -0,0 +1,56 @@ +import { getTripsSurveyMembers } from '@api/trips'; +import { useQuery } from '@tanstack/react-query'; +import { tripIdState } from '@recoil/socket'; +import { useRecoilValue } from 'recoil'; +import { ReactComponent as NullUser } from '@assets/images/NullUser.svg'; + +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 tripId = Number(useRecoilValue(tripIdState)); + + const { data: tripsSurveyMembers } = useQuery({ + queryKey: ['tripsSurveyMembers', tripId], + queryFn: () => getTripsSurveyMembers(tripId), + }); + + const participants = + status === '참여' + ? tripsSurveyMembers?.data?.data?.tripSurveySetMemberInfos + : tripsSurveyMembers?.data?.data?.nonTripSurveySetMemberInfos; + + return ( +
+
+ {participants && + `${participants.length}명 ${status === '참여' ? '참여' : '미참여'}`} +
+ {participants && } +
+ ); +}; diff --git a/src/components/Trip/TripPreference.tsx b/src/components/Trip/TripPreference.tsx index b1e26c6a..86bada0d 100644 --- a/src/components/Trip/TripPreference.tsx +++ b/src/components/Trip/TripPreference.tsx @@ -8,6 +8,8 @@ import { calculatePercentage, calculatePercentageRemain, } from '@utils/calculatePercentage'; +import { useSetRecoilState } from 'recoil'; +import { modalChildrenState, isModalOpenState } from '@recoil/modal'; interface RatioBarParams { value: number; @@ -94,6 +96,8 @@ const TripPreference: React.FC = () => { const [C, setC] = useState<[number, number]>([0, 0]); const [D, setD] = useState<[number, number]>([0, 0]); const [E, setE] = useState<[number, number]>([0, 0]); + const setModalChildren = useSetRecoilState(modalChildrenState); + const setIsModalOpen = useSetRecoilState(isModalOpenState); const { data: tripPreference, isLoading } = useQuery({ queryKey: ['tripPreference', tripId], @@ -129,10 +133,17 @@ const TripPreference: React.FC = () => { return
Loading...
; } + const handleButtonClick = () => { + setModalChildren('TripSurveyMember'); + setIsModalOpen(true); + }; + return (
-
+
n명 참여
diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx index 34060d49..c8ec7ed8 100644 --- a/src/components/common/modal/Modal.tsx +++ b/src/components/common/modal/Modal.tsx @@ -69,5 +69,25 @@ export const getModalStyles = (modalChildren: string) => { zIndex: 1, // 이거 해줘야 kakao-map도 dimmed됨 }, }; + } else if (modalChildren === 'TripSurveyMember') { + return { + content: { + top: 'auto', + left: '50%', + right: 'auto', + bottom: '0', + marginRight: '-50%', + transform: 'translate(-50%, 0)', + maxWidth: '412px', + width: '100%', + height: '280px', + borderTopLeftRadius: '2rem', + borderTopRightRadius: '2rem', + }, + overlay: { + backgroundColor: 'rgba(0, 0, 0, 0.25)', + zIndex: 1, // 이거 해줘야 kakao-map도 dimmed됨 + }, + }; } }; diff --git a/src/components/common/modal/children/TripSurveyMember.tsx b/src/components/common/modal/children/TripSurveyMember.tsx new file mode 100644 index 00000000..ee6551c6 --- /dev/null +++ b/src/components/common/modal/children/TripSurveyMember.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { ParticipantStatus } from '@components/Trip/TripParticipant'; +import Tab from '@components/common/tab/Tab'; + +const TripSurveyMember: React.FC = () => { + return ( +
+ , + , + ]} + /> +
+ ); +}; + +export default TripSurveyMember; diff --git a/src/recoil/socket.ts b/src/recoil/socket.ts index 89cd5b90..d722c733 100644 --- a/src/recoil/socket.ts +++ b/src/recoil/socket.ts @@ -7,7 +7,7 @@ export const tripIdState = atom({ export const visitDateState = atom<{ visitDate: string } | null>({ key: 'visitDateState', - default: { visitDate: '2024-01-05' }, + default: { visitDate: '2024-01-03' }, }); export const memberIdState = atom<{ memberId: number } | null>({ From e90bf3a085b1bfba11109cead3a3a1f87db4ee54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=96=B4=EC=8A=B9=EC=A4=80?= Date: Thu, 18 Jan 2024 06:31:27 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Feat:=20=EA=B3=B5=EC=9C=A0/=EC=B0=B8?= =?UTF-8?q?=EC=97=AC=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=20=EB=B0=8F?= =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Trip/PlanTripButton.tsx | 14 ++- src/components/Trip/TripInfo.tsx | 95 ++++++++++++++++++- src/components/Trip/TripParticipant.tsx | 31 +++--- src/components/Trip/TripPreference.tsx | 37 ++++++-- src/components/common/accordion/Accordion.tsx | 4 +- src/recoil/trip.ts | 22 +++++ 6 files changed, 164 insertions(+), 39 deletions(-) create mode 100644 src/recoil/trip.ts 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 8c437979..5594c89a 100644 --- a/src/components/Trip/TripInfo.tsx +++ b/src/components/Trip/TripInfo.tsx @@ -3,22 +3,107 @@ 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 ( <>
-
프로필
-
1명과 공유중
+
+ {members?.map((member: any, index: number) => ( +
+ {member.profileImageUrl && + member.profileImageUrl !== 'http://asiduheimage.jpg' ? ( + 유저 프로필 + ) : ( + + )} +
+ ))} +
+ +
+

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

+
+ +
+
+ + {isAccordion && }
@@ -28,9 +113,11 @@ const TripInfo = () => { 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 index fd70334c..934aa95e 100644 --- a/src/components/Trip/TripParticipant.tsx +++ b/src/components/Trip/TripParticipant.tsx @@ -1,8 +1,6 @@ -import { getTripsSurveyMembers } from '@api/trips'; -import { useQuery } from '@tanstack/react-query'; -import { tripIdState } from '@recoil/socket'; -import { useRecoilValue } from 'recoil'; import { ReactComponent as NullUser } from '@assets/images/NullUser.svg'; +import { useRecoilValue } from 'recoil'; +import { participantsState } from '@recoil/trip'; interface ParticipantStatusProps { status: string; @@ -32,25 +30,22 @@ const ParticipantList: React.FC<{ infos: any[] }> = ({ infos }) => ( export const ParticipantStatus: React.FC = ({ status, }) => { - const tripId = Number(useRecoilValue(tripIdState)); - - const { data: tripsSurveyMembers } = useQuery({ - queryKey: ['tripsSurveyMembers', tripId], - queryFn: () => getTripsSurveyMembers(tripId), - }); - - const participants = - status === '참여' - ? tripsSurveyMembers?.data?.data?.tripSurveySetMemberInfos - : tripsSurveyMembers?.data?.data?.nonTripSurveySetMemberInfos; + const participants = useRecoilValue(participantsState); return (
- {participants && - `${participants.length}명 ${status === '참여' ? '참여' : '미참여'}`} + {status == '참여' ? ( + <>{participants?.tripSurveyMemberCount}명 참여 + ) : ( + <>{participants?.nonTripSurveySetMemberInfos?.length}명 미참여 + )}
- {participants && } + {status == '참여' ? ( + + ) : ( + + )}
); }; diff --git a/src/components/Trip/TripPreference.tsx b/src/components/Trip/TripPreference.tsx index 86bada0d..02f71976 100644 --- a/src/components/Trip/TripPreference.tsx +++ b/src/components/Trip/TripPreference.tsx @@ -1,16 +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 { useSetRecoilState } from 'recoil'; 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; @@ -28,7 +28,12 @@ interface PercentageParams { const TripPreferenceButton: React.FC = () => { return (