diff --git a/src/@types/service.ts b/src/@types/service.ts index 8706a8da..26d684d6 100644 --- a/src/@types/service.ts +++ b/src/@types/service.ts @@ -78,15 +78,11 @@ export type subMemberRes = { message: string; data: { tripId: number; - connectedMembers: { - memberId: number; - name: string; - thumbnailUrl: string; - }[]; tripMembers: { memberId: number; name: string; thumbnailUrl: string; + connected: boolean; }[]; numberOfPeople: number; } | null; diff --git a/src/@types/socket.types.ts b/src/@types/socket.types.ts index be9c82fa..5b9697ef 100644 --- a/src/@types/socket.types.ts +++ b/src/@types/socket.types.ts @@ -62,15 +62,11 @@ type subMemberMessage = (response: { message: string; data: { tripId: number; - connectedMembers: { - memberId: number; - name: string; - thumbnailUrl: string; - }[]; tripMembers: { memberId: number; name: string; thumbnailUrl: string; + connected: boolean; }[]; numberOfPeople: number; }; @@ -132,7 +128,7 @@ interface pubDeleteItem { } interface pubMember { - memberId: number; + token: string; } interface pubGetPathAndItems { diff --git a/src/api/socket.ts b/src/api/socket.ts index 94033e68..2f84b64c 100644 --- a/src/api/socket.ts +++ b/src/api/socket.ts @@ -163,7 +163,7 @@ export const pubGetPathAndItems = ( pubGetPathAndItems: pubGetPathAndItems, tripId: string, ) => { - console.log('펍내부',pubGetPathAndItems); + console.log('펍내부', pubGetPathAndItems); socketClient.publish({ destination: `/pub/trips/${tripId}/getPathAndItems`, body: JSON.stringify(pubGetPathAndItems), diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx index 37224884..e37c6089 100644 --- a/src/components/Plan/PlanSectionTop.tsx +++ b/src/components/Plan/PlanSectionTop.tsx @@ -1,4 +1,4 @@ -import TripInfo from '@components/Trip/TripInfo'; +import TripRealtimeEditor from '@components/Trip/TripRealtimeEditor'; import { BackBox } from '@components/common'; import { useNavigate } from 'react-router-dom'; import TripBudget from './TripBudget'; @@ -11,20 +11,25 @@ import { useEffect } from 'react'; import { useRecoilValue } from 'recoil'; 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(); const tripId = useRecoilValue(tripIdState); - const pubMember = useRecoilValue(memberIdState); + const token = getItem('accessToken'); + const pubMember = { token: token || '' }; - if (!pubMember || !tripId) { - return
에러
; - } + // if (!pubMember.token || !tripId) { + // return
에러
; + // } const { callBackPub, tripInfo } = useContext(socketContext); useEffect(() => { - callBackPub(() => pubEnterMember(pubMember, tripId)); + if (pubMember && tripId) { + callBackPub(() => pubEnterMember(pubMember, tripId)); + } }, []); let DayArr: string[] = []; @@ -36,7 +41,7 @@ const PlanSectionTop = () => { if (startDate && endDate) { ({ DayArr, DateArr } = calculateDayAndDate(startDate, endDate)); } - + return (
{ navigate(-1); }} /> - + + = (props: ItemProps) => { return (
-
+
{!( authorProfileImageUrl === 'http://asiduheimage.jpg' || authorProfileImageUrl === null @@ -65,7 +65,7 @@ const CommentItem: React.FC = (props: ItemProps) => { 유저 프로필 ) : ( @@ -85,7 +85,7 @@ const CommentItem: React.FC = (props: ItemProps) => {
)}
-
{content}
+
{content}
); }; diff --git a/src/components/Trip/PlanTripButton.tsx b/src/components/Trip/PlanTripButton.tsx index bd5ac6fc..34ce58a5 100644 --- a/src/components/Trip/PlanTripButton.tsx +++ b/src/components/Trip/PlanTripButton.tsx @@ -1,18 +1,25 @@ -import { PlanIcon, RightIcon } from '@components/common/icons/Icons'; +import { PlanColorIcon, RightIcon } from '@components/common/icons/Icons'; +import { useNavigate } from 'react-router-dom'; const PlanTripButton = () => { - return ( + const navigate = useNavigate(); + + const handleButtonClick = () => { + navigate('plan'); + }; - ); diff --git a/src/components/Trip/TripInfo.tsx b/src/components/Trip/TripInfo.tsx index 5594c89a..8dd648a5 100644 --- a/src/components/Trip/TripInfo.tsx +++ b/src/components/Trip/TripInfo.tsx @@ -1,4 +1,4 @@ -import { UserIcon } from '@components/common/icons/Icons'; +import { TripSchedule } from './TripSchedule'; import { useRecoilValue, useRecoilState } from 'recoil'; import { isModalOpenState, modalChildrenState } from '@recoil/modal'; import TripSurveyMember from '@components/common/modal/children/TripSurveyMember'; @@ -6,9 +6,10 @@ 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 { ReactComponent as NullUser } from '@assets/images/NullUser.svg'; import { DownIcon } from '@components/common/icons/Icons'; import { useState } from 'react'; +import { UserIcon } from '@components/common/icons/Icons'; const ShareList = () => { const tripId = Number(useRecoilValue(tripIdState)); @@ -21,7 +22,7 @@ const ShareList = () => { return ( <>
-
+
{members.map((member: any, index: number) => { return (
{ className="h-[32px] w-[32px] rounded-full" /> ) : ( - +
+ +
+ // )}
{member.nickname}
@@ -81,7 +88,13 @@ const TripInfo = () => { className="h-[32px] w-[32px] rounded-full border-2 border-solid border-white" /> ) : ( - +
+ +
+ // )}
))} @@ -104,20 +117,7 @@ const TripInfo = () => {
{isAccordion && } -
-
-
-
강릉 여행 일정
-
- - 5 -
-
- -
- 23.12.23 - 23.12.25 +
{modalChildren === 'TripSurveyMember' && } diff --git a/src/components/Trip/TripParticipant.tsx b/src/components/Trip/TripParticipant.tsx index 934aa95e..f8fac765 100644 --- a/src/components/Trip/TripParticipant.tsx +++ b/src/components/Trip/TripParticipant.tsx @@ -1,6 +1,7 @@ -import { ReactComponent as NullUser } from '@assets/images/NullUser.svg'; +// import { ReactComponent as NullUser } from '@assets/images/NullUser.svg'; import { useRecoilValue } from 'recoil'; import { participantsState } from '@recoil/trip'; +import { UserIcon } from '@components/common/icons/Icons'; interface ParticipantStatusProps { status: string; @@ -19,7 +20,13 @@ const ParticipantList: React.FC<{ infos: any[] }> = ({ infos }) => ( className="h-[32px] w-[32px] rounded-full" /> ) : ( - +
+ +
+ // )}
{info.nickname}
diff --git a/src/components/Trip/TripPreference.tsx b/src/components/Trip/TripPreference.tsx index 02f71976..368086d7 100644 --- a/src/components/Trip/TripPreference.tsx +++ b/src/components/Trip/TripPreference.tsx @@ -32,7 +32,9 @@ const TripPreferenceButton: React.FC = () => {
-

내 여행 취향 설정하러 가기

+

+ 내 여행 취향 설정하러 가기 +

diff --git a/src/components/Trip/TripRealtimeEditor.tsx b/src/components/Trip/TripRealtimeEditor.tsx new file mode 100644 index 00000000..4d810455 --- /dev/null +++ b/src/components/Trip/TripRealtimeEditor.tsx @@ -0,0 +1,95 @@ +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 tripMemberData = tripMember?.data; + useEffect(() => { + console.log('tripMemberData', tripMemberData); + }, [tripMemberData]); + return ( +
+ + {tripMemberData?.tripMembers?.map((member) => { + const isConnected = member?.connected; + const thumbnailUrl = member?.thumbnailUrl; + const isImageUrlValid = + thumbnailUrl && thumbnailUrl !== 'http://asiduheimage.jpg'; + const imageUrl = isImageUrlValid ? thumbnailUrl : null; + + return ( + +
+ {imageUrl ? ( + 유저 프로필 + ) : ( +
+ +
+ )} +
+ + {member?.name} + +
+
+ + ); + })} + +
+ ); +}; + +export default TripRealtimeEditor; diff --git a/src/components/Trip/TripSchedule.tsx b/src/components/Trip/TripSchedule.tsx new file mode 100644 index 00000000..ad55e20e --- /dev/null +++ b/src/components/Trip/TripSchedule.tsx @@ -0,0 +1,22 @@ +import { UserIcon } from '@components/common/icons/Icons'; + +export const TripSchedule = () => { + return ( + <> +
+
+
+
강릉 여행 일정
+
+ + 5 +
+
+ +
+ 23.12.23 - 23.12.25 + + ); +}; diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index 3d70d69e..bbd4e328 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -1297,3 +1297,35 @@ export const CounterIcon: React.FC< ); }; + +export const PlanColorIcon: React.FC = ({ size = 21 }) => { + return ( + + + + + + + ); +}; diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx index c8ec7ed8..bb558735 100644 --- a/src/components/common/modal/Modal.tsx +++ b/src/components/common/modal/Modal.tsx @@ -43,8 +43,8 @@ export const getModalStyles = (modalChildren: string) => { maxWidth: '412px', width: '100%', height: '186px', - borderTopLeftRadius: '2rem', - borderTopRightRadius: '2rem', + borderTopLeftRadius: '16px', + borderTopRightRadius: '16px', }, overlay: { backgroundColor: 'rgba(0, 0, 0, 0.25)', @@ -62,7 +62,7 @@ export const getModalStyles = (modalChildren: string) => { transform: 'translate(-50%, -50%)', width: '309px', height: '192px', - borderRadius: '2rem', + borderRadius: '16px', }, overlay: { backgroundColor: 'rgba(0, 0, 0, 0.25)', @@ -81,8 +81,8 @@ export const getModalStyles = (modalChildren: string) => { maxWidth: '412px', width: '100%', height: '280px', - borderTopLeftRadius: '2rem', - borderTopRightRadius: '2rem', + borderTopLeftRadius: '16px', + borderTopRightRadius: '16px', }, overlay: { backgroundColor: 'rgba(0, 0, 0, 0.25)', diff --git a/src/components/common/modal/children/MyAlert.tsx b/src/components/common/modal/children/MyAlert.tsx index e5f50f7e..7e226d68 100644 --- a/src/components/common/modal/children/MyAlert.tsx +++ b/src/components/common/modal/children/MyAlert.tsx @@ -69,7 +69,7 @@ const MyAlert: React.FC = ({ title, content }) => {
{title}
- {content.split('. ').map((sentence, index) => ( + {content.split(/(?<=\.) /).map((sentence, index) => (
{sentence}
diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts index 50c9e2d6..ba204b5b 100644 --- a/src/hooks/useSocket.ts +++ b/src/hooks/useSocket.ts @@ -63,6 +63,7 @@ export const useSocket = (tripId: string, visitDate: string) => { subMember(tripId, (res) => { if (res) { + // console.log('subMemberRes', res); setTripMember(res); } }); diff --git a/src/recoil/socket.ts b/src/recoil/socket.ts index d722c733..ab7bb76b 100644 --- a/src/recoil/socket.ts +++ b/src/recoil/socket.ts @@ -10,7 +10,7 @@ export const visitDateState = atom<{ visitDate: string } | null>({ default: { visitDate: '2024-01-03' }, }); -export const memberIdState = atom<{ memberId: number } | null>({ +export const memberIdState = atom<{ token: number | null }>({ key: 'memberIdState', - default: { memberId: 1 }, + default: { token: null }, });