Merge pull request #191 from FinalDoubleTen/FE-94--feat/Trips/DragAnd…

…Drop Feat: 여정페이지 여정아이템 순서변경(드래그앤드롭), 삭제, 날짜이동 구현
WePlanPlans · Jan 18, 2024 · 35b26ed · 35b26ed
2 parents 36d9547 + 64c71e0
commit 35b26ed
Show file tree

Hide file tree

Showing 41 changed files with 1,793 additions and 159 deletions.
diff --git a/package.json b/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",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/@types/service.ts b/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;
+  }[];
+}
diff --git a/src/@types/socket.types.ts b/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;
 }
 

diff --git a/src/api/socket.ts b/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),

diff --git a/src/api/trips.ts b/src/api/trips.ts
@@ -47,7 +47,13 @@ export const getTripsLike = async (
 
 // 우리의 관심 목록 등록
 export const postTripsLike = async (tripId: number, tourItemIds: number[]) => {
-  const res = await client.post(`trips/${tripId}/tripLikedTours`, tourItemIds);
+  const requestBody = {
+    tourItemIds: tourItemIds,
+  };
+  const res = await authClient.post(
+    `trips/${tripId}/tripLikedTours`,
+    requestBody,
+  );
   return res;
 };
 
@@ -68,3 +74,13 @@ export const getTripsSurvey = async (tripId: number) => {
   const res = await client.get(`trips/${tripId}/survey`);
   return res;
 };
+// 우리의 여행취향 참여/미참여 회원 조회
+export const getTripsSurveyMembers = async (tripId: number) => {
+  const res = await client.get(`trips/${tripId}/survey/members`);
+  return res;
+};
+// 여정을 공유하고 있는 회원 조회
+export const getTripsMembers = async (tripId: number) => {
+  const res = await client.get(`trips/${tripId}/members`);
+  return res;
+};
diff --git a/src/components/DetailSectionTop/DetailAddSchedule.tsx b/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>