Env: 여정페이지 기능 구현 배포

package.json

@@ -24,11 +24,13 @@
     "@svgr/rollup": "^8.1.0",
     "@tanstack/react-query": "^5.14.6",
     "@tanstack/react-query-devtools": "^5.14.6",
+    "@types/react-beautiful-dnd": "^13.1.8",
     "axios": "^1.6.2",
     "date-fns": "^3.1.0",
     "msw": "0.36.3",
     "path": "^0.12.7",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.2",
     "react-infinite-scroller": "^1.2.6",

src/@types/service.ts

@@ -120,3 +120,11 @@ export type TripItem = {
   visitDate: string;
   price: number;
 };
+
+export interface pubUpdateTripItemReq {
+  visitDate: string;
+  tripItemOrder: {
+    tripItemId: number;
+    seqNum: number;
+  }[];
+}

src/@types/socket.types.ts

@@ -121,13 +121,13 @@ interface pubUpdateTransportation {
 }
 
 interface pubVisitDate {
-  tripId: number;
+  tripId: string;
   oldVisitDate: string;
   newVisitDate: string;
 }
 
 interface pubDeleteItem {
-  tripId: number;
+  tripId: string;
   visitDate: string;
 }
 

src/api/socket.ts

@@ -2,6 +2,8 @@ import * as StompJs from '@stomp/stompjs';
 
 export const socketClient = new StompJs.Client({
   brokerURL: import.meta.env.VITE_SOCKET_URL,
+  heartbeatIncoming: 1000,
+  heartbeatOutgoing: 1000,
 });
 
 // 소켓 구독
@@ -99,6 +101,9 @@ export const pubUpdateTripItem = (
     destination: `/pub/trips/${tripId}/updateTripItemOrder`,
     body: JSON.stringify(pubUpdateTripItem),
   });
+
+  console.log(pubUpdateTripItem);
+  console.log('펍실행');
 };
 
 // 여행 날짜별 교통 수단 변경 이벤트 발생시 (01/16 업데이트)
@@ -132,6 +137,7 @@ export const pubDeleteItem = (
     destination: `/pub/tripItems/${tripItemId}/deleteItem`,
     body: JSON.stringify(pubDeleteItem),
   });
+  console.log(pubDeleteItem);
 };
 
 // 멤버 여정 페이지로 입장 이벤트 발생시
@@ -163,7 +169,6 @@ export const pubGetPathAndItems = (
   pubGetPathAndItems: pubGetPathAndItems,
   tripId: string,
 ) => {
-  console.log('펍내부',pubGetPathAndItems);
   socketClient.publish({
     destination: `/pub/trips/${tripId}/getPathAndItems`,
     body: JSON.stringify(pubGetPathAndItems),

src/components/DetailSectionTop/DetailAddSchedule.tsx

@@ -38,21 +38,21 @@ const DetailAddSchedule = () => {
                     className="h-[52px] w-[52px] flex-shrink-0 flex-grow-0 rounded-lg object-cover"
                   />
                   <div className="relative flex flex-shrink-0 flex-grow-0 flex-col items-start justify-start gap-2">
-                    <p className="w-[270.04px] flex-shrink-0 flex-grow-0 text-left text-base font-bold text-[#1e1e1e]">
+                    <div className="w-[270.04px] flex-shrink-0 flex-grow-0 text-left text-base font-bold text-[#1e1e1e]">
                       강릉 속초 여행
-                    </p>
-                    <p className="h-[17px] w-[270.04px] flex-shrink-0 flex-grow-0 text-left text-sm font-medium text-[#888]">
+                    </div>
+                    <div className="h-[17px] w-[270.04px] flex-shrink-0 flex-grow-0 text-left text-sm font-medium text-[#888]">
                       2023.12.20 - 12.22 (3박 4일)
-                    </p>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
             <div className="flex items-start justify-start gap-1">
               <div className="relative flex h-10 flex-shrink-0 flex-grow-0 items-center justify-center gap-1 rounded-[168px] border-[1.25px] border-solid border-[#29ddf6] px-8 py-2">
-                <p className="flex-shrink-0 flex-grow-0 text-left text-sm font-medium text-[#29ddf6]">
+                <div className="flex-shrink-0 flex-grow-0 text-left text-sm font-medium text-[#29ddf6]">
                   Day 1
-                </p>
+                </div>
               </div>
             </div>
           </Dialog.Description>