Fe 96 feat/connected trip members/socket

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;

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 {

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),

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 <div>에러</div>;
-  }
+  // if (!pubMember.token || !tripId) {
+  //   return <div>에러</div>;
+  // }
 
   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 (
     <div className="min-h-screen">
       <BackBox
@@ -46,7 +51,8 @@ const PlanSectionTop = () => {
           navigate(-1);
         }}
       />
-      <TripInfo />
+      <TripRealtimeEditor />
+      <TripSchedule />
       <TripBudget />
       <Tab
         lists={DayArr}

src/components/Review/CommentItem.tsx

@@ -57,15 +57,15 @@ const CommentItem: React.FC<ItemProps> = (props: ItemProps) => {
   return (
     <div className="mb-4 border-t border-solid border-gray-300 pt-4">
       <div className=" flex items-center">
-        <div className="mr-2">
+        <div className="mr-4">
           {!(
             authorProfileImageUrl === 'http://asiduheimage.jpg' ||
             authorProfileImageUrl === null
           ) ? (
             <img
               src={authorProfileImageUrl}
               alt="유저 프로필"
-              className="w-[60px]rounded-full h-[60px]"
+              className="h-[60px] w-[60px] rounded-full"
             />
           ) : (
             <NullUser />
@@ -85,7 +85,7 @@ const CommentItem: React.FC<ItemProps> = (props: ItemProps) => {
           </div>
         )}
       </div>
-      <div className="ml-14 w-[275px] pl-3 text-sm text-gray7">{content}</div>
+      <div className="ml-16 w-[275px] pl-3 text-sm text-gray7">{content}</div>
     </div>
   );
 };

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');
+  };
 
-    <button className="body3 mb-10 mt-6 flex w-full items-center justify-between rounded-[8px] bg-[#F3F4F5] px-[15px] py-[15px] text-gray7 text-main1">
+  return (
+    <button
+      onClick={handleButtonClick}
+      className="body3 mb-10 mt-6 flex w-full items-center justify-between rounded-[8px] bg-[#F3F4F5] px-[15px] py-[15px] text-gray7 text-main1">
       <div className="flex items-center justify-start ">
-        <div>
-          <PlanIcon />
+        <div className="pt-0.5">
+          <PlanColorIcon />
         </div>
-        <p className="ml-1.5 text-gray5">여행 계획하기</p>
+        <p className="ml-2 text-[15px] text-gray5">여행 계획하기</p>
       </div>
-      <div>
+      <div className="pt-0.5">
         <RightIcon fill="#888888" />
-
       </div>
     </button>
   );

src/components/Trip/TripInfo.tsx

@@ -1,14 +1,15 @@
-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';
 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 (
     <>
       <hr className="my-3 border-solid border-gray2" />
-      <div>
+      <div className="max-h-[115px] overflow-y-auto">
         {members.map((member: any, index: number) => {
           return (
             <div
@@ -35,7 +36,13 @@ const ShareList = () => {
                   className="h-[32px] w-[32px] rounded-full"
                 />
               ) : (
-                <NullUser className="h-[32px] w-[32px]" />
+                <div
+                  className={
+                    'flex h-[32px] w-[32px] items-center justify-center rounded-full bg-[#EDEDED]'
+                  }>
+                  <UserIcon size={20} color="white" fill="white" />
+                </div>
+                // <NullUser className="h-[32px] w-[32px]" />
               )}
               <div className="ml-3">{member.nickname}</div>
             </div>
@@ -81,7 +88,13 @@ const TripInfo = () => {
                     className="h-[32px] w-[32px] rounded-full border-2 border-solid border-white"
                   />
                 ) : (
-                  <NullUser className="h-[32px] w-[32px] border-2 border-solid border-white" />
+                  <div
+                    className={
+                      'flex h-[32px] w-[32px] items-center justify-center rounded-full bg-[#EDEDED]'
+                    }>
+                    <UserIcon size={20} color="white" fill="white" />
+                  </div>
+                  // <NullUser className="h-[32px] w-[32px] border-2 border-solid border-white" />
                 )}
               </div>
             ))}
@@ -104,20 +117,7 @@ const TripInfo = () => {
         </div>
 
         {isAccordion && <ShareList />}
-        <hr className="mb-6 mt-3 border-solid border-gray2" />
-        <div className="flex items-center justify-between">
-          <div className="flex items-center">
-            <div className="title1 mb-[10px] mr-1">강릉 여행 일정</div>
-            <div className="flex items-center pb-[10px]">
-              <UserIcon size={20} fill="#888" color="#888" />
-              <span className="body4 pt-[1px] text-gray4">5</span>
-            </div>
-          </div>
-          <button className="body3 rounded-lg border-2 border-solid border-gray2 p-2 text-gray4">
-            편집
-          </button>
-        </div>
-        <span className="body1 text-gray4">23.12.23 - 23.12.25</span>
+        <TripSchedule />
       </div>
       <Modal isOpen={isModalOpen} closeModal={closeModal}>
         {modalChildren === 'TripSurveyMember' && <TripSurveyMember />}

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"
           />
         ) : (
-          <NullUser className="h-[32px] w-[32px]" />
+          <div
+            className={
+              'flex h-[32px] w-[32px] items-center justify-center rounded-full bg-[#EDEDED]'
+            }>
+            <UserIcon size={20} color="white" fill="white" />
+          </div>
+          // <NullUser className="h-[32px] w-[32px]" />
         )}
         <div className="ml-3">{info.nickname}</div>
       </div>

src/components/Trip/TripPreference.tsx

@@ -32,7 +32,9 @@ const TripPreferenceButton: React.FC = () => {
         <div>
           <HeartIcon fill="#888888" color="#888888" size={20} />
         </div>
-        <p className="ml-1.5">내 여행 취향 설정하러 가기</p>
+        <p className="ml-1.5 text-[14px] text-main1">
+          내 여행 취향 설정하러 가기
+        </p>
       </div>
       <div className="ml-auto">
         <RightIcon fill="#5E5E5E" />

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 (
+    <div className="my-5">
+      <Swiper
+        slidesPerView={5}
+        navigation={true}
+        modules={[Navigation]}
+        className="flex w-[375px] items-center justify-center">
+        {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 (
+            <SwiperSlide>
+              <div key={member?.memberId}>
+                {imageUrl ? (
+                  <img
+                    src={imageUrl}
+                    alt="유저 프로필"
+                    className={`h-[48px] w-[48px] rounded-full ${
+                      isConnected
+                        ? 'border-2 border-solid border-[#29DDF6]'
+                        : ''
+                    }`}
+                  />
+                ) : (
+                  <div
+                    className={`flex h-[48px] w-[48px] items-center justify-center rounded-full bg-[#EDEDED] ${
+                      isConnected
+                        ? 'border-2 border-solid border-[#29DDF6]'
+                        : ''
+                    }`}>
+                    <UserIcon size={30} color="white" fill="white" />
+                  </div>
+                )}
+                <div className="mt-1 flex w-[48px] items-center justify-center overflow-hidden whitespace-nowrap">
+                  <span className="inline-block max-w-full overflow-hidden text-ellipsis text-[12px]">
+                    {member?.name}
+                  </span>
+                </div>
+              </div>
+            </SwiperSlide>
+          );
+        })}
+      </Swiper>
+    </div>
+  );
+};
+
+export default TripRealtimeEditor;