Feat: 소켓중간배포

src/@types/service.ts

@@ -8,8 +8,6 @@ export type subInfoRes = {
     numberOfPeople: number;
     tripName: string;
     tripStatus: string;
-    area: string;
-    subarea: string;
     budget: number;
   } | null;
 };
@@ -121,4 +119,4 @@ export type TripItem = {
   seqNum: number;
   visitDate: string;
   price: number;
-} | null;
+};

src/@types/socket.types.ts

@@ -8,8 +8,6 @@ type subInfoMessage = (message: {
     numberOfPeople: number;
     tripName: string;
     tripStatus: string;
-    area: string;
-    subarea: string;
     budget: number;
   } | null;
 }) => void;
@@ -93,8 +91,6 @@ interface pubInfo {
   endDate: string;
   numberOfPeople: number;
   tripName: string;
-  area: string;
-  subarea: string;
   budget: number;
 }
 

src/api/socket.ts

@@ -104,7 +104,7 @@ export const pubUpdateTripItem = (
 // 여행 날짜별 교통 수단 변경 이벤트 발생시 (01/16 업데이트)
 export const pubUpdateTransportation = (
   pubUpdateTransportation: pubUpdateTransportation,
-  trips: number,
+  trips: string,
 ) => {
   socketClient.publish({
     destination: `/pub/trips/${trips}/updateTransportation`,
@@ -163,6 +163,7 @@ export const pubGetPathAndItems = (
   pubGetPathAndItems: pubGetPathAndItems,
   tripId: string,
 ) => {
+  console.log('펍내부',pubGetPathAndItems);
   socketClient.publish({
     destination: `/pub/trips/${tripId}/getPathAndItems`,
     body: JSON.stringify(pubGetPathAndItems),

src/components/Plan/PlanItem.tsx

@@ -1,43 +1,107 @@
-import SubmitBtn from '@components/common/button/SubmitBtn';
-import { PlusIcon } from '@components/common/icons/Icons';
+import { ButtonWhite } from '@components/common/button/Button';
+import { PlusIcon, CarIcon, BusIcon } from '@components/common/icons/Icons';
 import { useNavigate } from 'react-router-dom';
 import TripMap from './TripMap';
 import PlanItemBox from './PlanItemBox';
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 import { socketContext } from '@hooks/useSocket';
-import { pubEnterMember } from '@api/socket';
-import { useEffect } from 'react';
+import { useRecoilState } from 'recoil';
+import { visitDateState } from '@recoil/socket';
+import { pubGetPathAndItems, pubUpdateTransportation } from '@api/socket';
+import { tripIdState } from '@recoil/socket';
 import { useRecoilValue } from 'recoil';
-import { tripIdState, memberIdState } from '@recoil/socket';
 
-const PlanItem = () => {
+const PlanItem = (date: any) => {
   const navigate = useNavigate();
   const tripId = useRecoilValue(tripIdState);
-  const pubMember = useRecoilValue(memberIdState);
-  const { callBackPub, tripItem, tripPath } = useContext(socketContext);
+  const [visitDate, setVisitDate] = useRecoilState(visitDateState);
+  const { tripItem, tripPath, callBackPub } = useContext(socketContext);
 
-  if (!pubMember || !tripId) {
-    return <div>에러</div>;
-  }
+  useEffect(() => {
+    setVisitDate({ visitDate: date.date });
+  }, [date.date]);
 
   useEffect(() => {
-    callBackPub(() => pubEnterMember(pubMember, tripId));
-  }, []);
+    if (visitDate && tripId) {
+      callBackPub(() => pubGetPathAndItems(visitDate, tripId));
+    }
+  }, [visitDate]);
+
+  const handleTranspo = (
+    transportation: 'CAR' | 'PUBLIC_TRANSPORTATION',
+    visitDate: string,
+    tripId: string,
+  ) => {
+    if (transportation !== transpo) {
+      callBackPub(() =>
+        pubUpdateTransportation(
+          {
+            visitDate: visitDate,
+            transportation: transportation,
+          },
+          tripId,
+        ),
+      );
+    }
+  };
+
+  const transpo = tripItem?.data?.transportation || '';
 
   return (
     <>
       {tripPath && <TripMap paths={tripPath.data?.paths || []} />}
+
+      <div className="mb-[31px] mt-[31px] flex items-center justify-between">
+        <div className="flex  items-center justify-center">
+          <div
+            onClick={() =>
+              handleTranspo('CAR', visitDate?.visitDate || '', tripId || '')
+            }
+            className="flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-l-md border border-solid border-gray3">
+            <CarIcon
+              size={19}
+              color={transpo === 'CAR' ? '#000000' : '#d7d7d7'}
+            />
+          </div>
+          <div
+            onClick={() =>
+              handleTranspo(
+                'PUBLIC_TRANSPORTATION',
+                visitDate?.visitDate || '',
+                tripId || '',
+              )
+            }
+            className="pointer-cursor -ml-[1px] flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-r-md border border-solid border-gray3">
+            <BusIcon
+              size={19}
+              color={
+                transpo === 'PUBLIC_TRANSPORTATION' ? '#000000' : '#d7d7d7'
+              }
+            />
+          </div>
+        </div>
+        <button className="flex h-8 w-[46px] cursor-pointer items-center justify-center gap-2 rounded-lg bg-[#f0f0f0] p-2 text-sm font-medium text-gray4">
+          편집
+        </button>
+      </div>
+
       <div className="flex flex-col gap-[5px]">
-        {tripItem?.data?.tripItems.map((item) => (
-          <PlanItemBox key={item.tripItemId} item={item} />
-        ))}
+        <PlanItemBox
+          item={tripItem?.data?.tripItems || []}
+          paths={tripPath?.data?.paths || []}
+          transportation={transpo}
+        />
+      </div>
+      <div className="mt-[18px]">
+        <ButtonWhite
+          onClick={() => navigate('./place')}
+          className="h-[40px] w-full">
+          <div className="flex items-center justify-center gap-[5px] font-bold text-gray4">
+            <PlusIcon size={15} color="#888" />
+            <div className="mt-[1px]">장소 추가하기</div>
+          </div>
+        </ButtonWhite>
       </div>
-      <SubmitBtn onClick={() => navigate('./place')}>
-        <div className="flex items-center justify-center gap-[5px]">
-          <PlusIcon color="white" />
-          장소 추가
-        </div>
-      </SubmitBtn>
     </>
   );
 };

src/components/Plan/PlanItemBox.tsx

@@ -1,38 +1,71 @@
-import { PenIcon } from '@components/common/icons/Icons';
-import { TripItem } from '@/@types/service';
+import { PenIcon, CarIcon, BusIcon } from '@components/common/icons/Icons';
+import { TripItem, Paths } from '@/@types/service';
+import { v4 as uuidv4 } from 'uuid';
 
 type PlanItemBoxProps = {
-  item: TripItem;
+  item: TripItem[];
+  paths: Paths[];
+  transportation: string;
 };
 
-const PlanItemBox = ({ item }: PlanItemBoxProps) => {
-  if (!item) {
-    return <div>error...</div>;
+const PlanItemBox = ({ item, paths, transportation }: PlanItemBoxProps) => {
+  if (!item || !paths) {
+    return <div>Missing data</div>;
   }
 
+  const itemLength = item.length;
+
   return (
     <>
       <div>
-        <div className="flex h-[87.5px] w-full rounded-lg border border-solid border-[#ededed] bg-white">
-          <img
-            className="h-[87.5px] w-[93px] rounded-bl-lg rounded-tl-lg"
-            src={item.thumbnailUrl}
-            alt="img"
-          />
-          <div className="flex w-full flex-col p-[10px]">
-            <div className="flex justify-between text-left text-[14px] font-medium text-black">
-              {item.name}
-              <PenIcon size={14} className="cursor-pointer" />
-            </div>
-
-            <div className="mt-[3px] flex h-fit w-fit items-center justify-center gap-2 rounded-[3px] bg-[#ededed] p-[4px] text-[11px] text-black">
-              {item.category}
-            </div>
-            <div className="mt-[15px] text-sm font-bold text-black">
-              {item.price} 원
+        {item.map((item, index) => (
+          <>
+            <div
+              key={item.tripItemId}
+              className="flex h-[87.5px] w-full rounded-lg border border-solid border-[#ededed] bg-white">
+              <img
+                className="h-[87px] w-[93px] rounded-bl-lg rounded-tl-lg "
+                src={item.thumbnailUrl}
+                alt="img"
+              />
+              <div className="flex w-full flex-col p-[10px]">
+                <div className="flex justify-between text-left text-[14px] font-medium text-black">
+                  {item.name}
+                  <PenIcon size={14} className="cursor-pointer" />
+                </div>
+                <div className="mt-[3px] flex h-fit w-fit items-center justify-center gap-2 rounded-[3px] bg-[#ededed] p-[4px] text-center text-[11px] text-black">
+                  {item.category}
+                </div>
+                <div className="mt-[15px] text-sm font-bold text-black">
+                  {item.price} 원
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
+            {index < itemLength - 1 &&
+              paths
+                .filter((path) => path.fromSeqNum === item.seqNum)
+                .map((path) => (
+                  <div
+                    key={uuidv4()}
+                    className="mb-[8px] mt-[8px] flex h-10 w-full items-center justify-center rounded-lg border border-solid border-[#ededed] bg-white">
+                    <div className="flex w-full items-center justify-center text-center text-[11px] text-black">
+                      <div className="mr-[7.5px] flex h-[24px] w-[24px] items-center justify-center rounded-xl bg-[#F3F4F5]">
+                        {transportation === 'CAR' ? (
+                          <CarIcon size={16} />
+                        ) : transportation === 'PUBLIC_TRANSPORTATION' ? (
+                          <BusIcon size={16} />
+                        ) : null}
+                      </div>
+                      <div className="mt-[3px]">
+                        {(path.pathInfo.totalDistance / 1000).toFixed(2)}km,{' '}
+                        {path.pathInfo.totalTime}분,{' '}
+                        {path.pathInfo.price.toLocaleString()}원
+                      </div>
+                    </div>
+                  </div>
+                ))}
+          </>
+        ))}
       </div>
     </>
   );

src/components/Plan/PlanSectionTop.tsx

@@ -4,10 +4,39 @@ import { useNavigate } from 'react-router-dom';
 import TripBudget from './TripBudget';
 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 { useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+import { tripIdState, memberIdState } from '@recoil/socket';
+import { calculateDayAndDate } from '@utils/utils';
 
 const PlanSectionTop = () => {
   const navigate = useNavigate();
+  const tripId = useRecoilValue(tripIdState);
+  const pubMember = useRecoilValue(memberIdState);
 
+  if (!pubMember || !tripId) {
+    return <div>에러</div>;
+  }
+
+  const { callBackPub, tripInfo } = useContext(socketContext);
+
+  useEffect(() => {
+    callBackPub(() => pubEnterMember(pubMember, tripId));
+  }, []);
+
+  let DayArr: string[] = [];
+  let DateArr: string[] = [];
+
+  const startDate = tripInfo?.data?.startDate;
+  const endDate = tripInfo?.data?.endDate;
+
+  if (startDate && endDate) {
+    ({ DayArr, DateArr } = calculateDayAndDate(startDate, endDate));
+  }
+
   return (
     <div className="min-h-screen">
       <BackBox
@@ -20,11 +49,11 @@ const PlanSectionTop = () => {
       <TripInfo />
       <TripBudget />
       <Tab
-        lists={['Day1', 'Day2', 'Day3']}
-        contents={[<div>Day1</div>, <div>Day2</div>, <div>Day3</div>]}
+        lists={DayArr}
+        contents={DateArr.map((date) => (
+          <PlanItem key={date} date={date} />
+        ))}
       />
-
-      <PlanItem />
     </div>
   );
 };

src/components/Plan/TripBudget.tsx

@@ -10,7 +10,13 @@ const TripBudget = () => {
   const [targetBudget, setTargetBudget] = useState(0); // 예시 목표 경비
   const [currentSpending, setCurrentSpending] = useState(0); // 초기 사용 경비
 
-  // 프로그레스 바 값 계산
+  useEffect(() => {
+    if (budget) {
+      setTargetBudget(budget.budget || 0);
+      setCurrentSpending(budget.calculatedPrice || 0);
+    }
+  }, [budget]);
+
   // 프로그레스 바 값 계산
   const progress = Math.min(
     currentSpending && targetBudget
@@ -19,19 +25,6 @@ const TripBudget = () => {
     100,
   );
 
-  useEffect(() => {
-    // 경비 수정 모달 추가 예정
-    const timer = setTimeout(() => setCurrentSpending(3000), 300);
-    return () => clearTimeout(timer);
-  }, []);
-
-  useEffect(() => {
-    if (budget) {
-      setTargetBudget(budget.budget || 0);
-      setCurrentSpending(budget.calculatedPrice || 0);
-    }
-  }, [budget]);
-
   // 목표 경비 설정 함수
   const handleSetTargetBudget = (newTargetBudget: number) => {
     setTargetBudget(newTargetBudget);
@@ -54,8 +47,12 @@ const TripBudget = () => {
         }}
         value={progress}>
         <Progress.Indicator
-          className="ease-[cubic-bezier(0.65, 0, 0.35, 1)] h-full w-full bg-main2 transition-transform duration-[660ms]"
-          style={{ transform: `translateX(-${100 - progress}%)` }}
+          className={`ease-[cubic-bezier(0.65, 0, 0.35, 1)] h-full w-full ${
+            progress >= 100 ? 'bg-sub2' : 'bg-main2'
+          } transition-transform duration-[660ms]`}
+          style={{
+            transform: `translateX(${progress >= 100 ? 0 : -100 + progress}%)`,
+          }}
         />
       </Progress.Root>