Merge branch 'dev' of https://github.com/FinalDoubleTen/TenTenFE into…

… dev
WePlanPlans · Jan 19, 2024 · 2c63edd · 2c63edd
2 parents 72a9064 + e0bcf73
commit 2c63edd
Show file tree

Hide file tree

Showing 26 changed files with 682 additions and 123 deletions.
diff --git a/src/@types/socket.types.ts b/src/@types/socket.types.ts
@@ -132,7 +132,7 @@ interface pubDeleteItem {
 }
 
 interface pubMember {
-  memberId: number;
+  token: string;
 }
 
 interface pubGetPathAndItems {

diff --git a/src/@types/trips.types.ts b/src/@types/trips.types.ts
@@ -18,3 +18,35 @@ interface MyTripType {
   area: string;
   subArea: string;
 }
+
+interface ourTripType {
+  tripLikedItemId: number;
+  tourItemId: number;
+  contentTypeId: number;
+  ratingAverage: number;
+  reviewCount: number;
+  smallThumbnailUrl: string;
+  tourAddress: string;
+  prefer: boolean;
+  notPrefer: boolean;
+  preferTotalCount: number;
+  notPreferTotalCount: number;
+  title: string;
+}
+
+interface ThumbsProps {
+  tripId: number;
+  tourId: number;
+  prefer: boolean;
+  notPrefer: boolean;
+}
+
+interface AuthorityType {
+  status: number;
+  message: string;
+  data: {
+    memberId: number;
+    tripAuthority: string;
+    TripId: number;
+  };
+}
diff --git a/src/api/socket.ts b/src/api/socket.ts
@@ -102,8 +102,7 @@ export const pubUpdateTripItem = (
     body: JSON.stringify(pubUpdateTripItem),
   });
 
-  console.log(pubUpdateTripItem);
-  console.log('펍실행');
+  console.log('데이터', pubUpdateTripItem);
 };
 
 // 여행 날짜별 교통 수단 변경 이벤트 발생시 (01/16 업데이트)
@@ -157,10 +156,9 @@ export const pubDisconnectMember = (pubMember: pubMember, tripId: string) => {
 };
 
 // 여정 편집 페이지 입장 이벤트 발생시(모든 sub 다받음)
-export const pubEnterMember = (pubMember: pubMember, tripId: string) => {
+export const pubEnterMember = (tripId: string) => {
   socketClient.publish({
     destination: `/pub/trips/${tripId}/enterMember`,
-    body: JSON.stringify(pubMember),
   });
 };
 

diff --git a/src/api/trips.ts b/src/api/trips.ts
@@ -35,14 +35,14 @@ export const postTrips = async (tripsData: TripRequest) => {
 // 우리의 관심목록 조회
 export const getTripsLike = async (
   tripId: number,
-  category: number,
   page: number,
   size: number,
 ) => {
-  const res = await client.get(
-    `trips/${tripId}/tripLikedTours?category=${category}&page=${page}$size=${size}`,
+  const res = await authClient.get(
+    `trips/${tripId}/tripLikedTours?page=${page}&size=${size}`,
   );
-  return res;
+
+  return res.data;
 };
 
 // 우리의 관심 목록 등록
@@ -62,9 +62,10 @@ export const postTripsLikeHate = async (
   tripId: number,
   tourId: number,
   prefer: boolean,
+  notPrefer: boolean,
 ) => {
-  const res = await client.post(
-    `trips/${tripId}/tripLikedTours/${tourId}?prefer=${prefer}`,
+  const res = await authClient.post(
+    `trips/${tripId}/tripLikedTours/${tourId}?prefer=${prefer}&notPrefer=${notPrefer}`,
   );
   return res;
 };
@@ -84,3 +85,9 @@ export const getTripsMembers = async (tripId: number) => {
   const res = await client.get(`trips/${tripId}/members`);
   return res;
 };
+
+// 편집권한 조회
+export const getTripsAuthority = async (tripId: string) => {
+  const res = await authClient.get(`trips/${tripId}/authority`);
+  return res;
+};
diff --git a/src/components/DetailSectionTop/DetailTopButton.tsx b/src/components/DetailSectionTop/DetailTopButton.tsx
@@ -1,51 +1,37 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { reviewCountState } from '@recoil/review';
 import { TopIcon } from '@components/common/icons/Icons';
 
-export default function DetailTopButton({ parentRef }: any) {
-  const [isVisible, setIsVisible] = useState<boolean>(false);
-  const [scrollPosition, setScrollPosition] = useState<number>(0);
-  const [viewportHeight, setViewportHeight] = useState<number>(0);
-
-  const scrollButtonRef = useRef<HTMLDivElement>(null);
+export default function DetailTopButton() {
+  const [visible, setVisible] = useState<boolean>(false);
+  const getReviewCount = useRecoilValue(reviewCountState);
 
   useEffect(() => {
-    const handleScroll = () => {
-      if (scrollButtonRef.current && parentRef.current) {
-        setViewportHeight(screen.height);
-
-        // 부모 요소의 높이보다 적을 때까지 스크롤 허용
-        if (window.scrollY < parentRef.current.clientHeight - 50) {
-          // 기기 높이의 절반 이상 스크롤 했을 때
-          if (window.scrollY >= viewportHeight / 2) {
-            setIsVisible(true);
-            setScrollPosition(window.scrollY);
-          } else {
-            setIsVisible(false);
-          }
-        }
-      }
-    };
-
-    window.addEventListener('scroll', handleScroll);
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [parentRef, scrollPosition, setScrollPosition]);
-
-  const scrollToTop = () => {
+    if (getReviewCount > 2) {
+      setVisible(true);
+    } else {
+      setVisible(false);
+    }
+  }, [getReviewCount]);
+
+  const scrollToTop = (e: React.MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
+  if (!visible) {
+    return null;
+  }
+
   return (
     <div
-      ref={scrollButtonRef}
-      className={`absolute right-2 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-white shadow-md transition-opacity duration-500 ${
-        isVisible ? 'opacity-100' : 'opacity-0'
-      }`}
-      onClick={scrollToTop}
-      style={{ top: `${scrollPosition}px` }}>
-      <TopIcon />
+      className="sticky bottom-5
+      mt-[-50px] flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-white shadow-md"
+      style={{ left: 'calc(100%)' }}>
+      <button onClick={scrollToTop}>
+        <TopIcon />
+      </button>
     </div>
   );
 }
diff --git a/src/components/DetailSectionTop/DetailToursRating.tsx b/src/components/DetailSectionTop/DetailToursRating.tsx
@@ -1,5 +1,8 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-scroll';
+import { useSetRecoilState } from 'recoil';
+import { reviewCountState } from '@recoil/review';
+
 interface ReviewData {
   ratingAverage: number;
   reviewTotalCount: number;
@@ -13,6 +16,7 @@ export default function DetailToursRating({
   reviewData,
 }: DetailToursRatingProps) {
   const { reviewTotalCount, ratingAverage } = reviewData;
+  const setReviewCount = useSetRecoilState(reviewCountState);
 
   const STAR_IDX_ARR = ['1', '2', '3', '4', '5'];
   const [ratedStarArr, setRatedStarArr] = useState([0, 0, 0, 0, 0]);
@@ -32,6 +36,7 @@ export default function DetailToursRating({
 
   useEffect(() => {
     setRatedStarArr(calculateRates(ratingAverage));
+    setReviewCount(reviewTotalCount);
   }, []);
 
   return (

diff --git a/src/components/Plan/PlanEditItemBox.tsx b/src/components/Plan/PlanEditItemBox.tsx
@@ -59,8 +59,6 @@ const PlanEditItemBox = ({
       visitDate: visitDate,
       tripItemOrder,
     });
-
-    console.log(newData);
   };
 
   useEffect(() => {

diff --git a/src/components/Plan/PlanItem.tsx b/src/components/Plan/PlanItem.tsx
@@ -4,51 +4,60 @@ import { useNavigate } from 'react-router-dom';
 import TripMap from './TripMap';
 import PlanItemBox from './PlanItemBox';
 import PlanEditItemBox from './PlanEditItemBox';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState, useRef } from 'react';
 import { socketContext } from '@hooks/useSocket';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { visitDateState } from '@recoil/socket';
 import { pubGetPathAndItems, pubUpdateTransportation } from '@api/socket';
 import { tripIdState } from '@recoil/socket';
-import { useRecoilValue } from 'recoil';
+import { tapState } from '@recoil/plan';
 
 type PlanItemProps = {
   date: string;
   day: string;
+  isMount: boolean;
 };
 
-const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
+const PlanItem: React.FC<PlanItemProps> = ({ date, day, isMount }) => {
   const navigate = useNavigate();
   const [isEdit, SetIsEdit] = useState(false);
 
   const tripId = useRecoilValue(tripIdState);
+  const tap = useRecoilValue(tapState);
+
   const [visitDate, setVisitDate] = useRecoilState(visitDateState);
   const { tripItem, tripPath, callBackPub } = useContext(socketContext);
 
   useEffect(() => {
-    setVisitDate({ visitDate: date });
-  }, [date]);
-
-  useEffect(() => {
-    if (visitDate && tripId) {
-      callBackPub(() => pubGetPathAndItems(visitDate, tripId));
+    if (isMount) {
+      setVisitDate({ visitDate: date });
+      if (date && tripId) {
+        callBackPub(() => pubGetPathAndItems({ visitDate: date }, tripId));
+        console.log('pubGetPathAndItems', tap);
+      }
     }
-  }, [visitDate]);
+  }, [tap]);
+
+  // useEffect(() => {
+  //   if (date && tripId) {
+  //     callBackPub(() => pubGetPathAndItems({ visitDate: date }, tripId));
+  //   }
+  // }, [tap]);
 
   const handleEdit = () => {
     SetIsEdit((prev) => !prev);
   };
 
   const handleTranspo = (
     transportation: 'CAR' | 'PUBLIC_TRANSPORTATION',
-    visitDate: string,
+    date: string,
     tripId: string,
   ) => {
     if (transportation !== transpo) {
       callBackPub(() =>
         pubUpdateTransportation(
           {
-            visitDate: visitDate,
+            visitDate: date,
             transportation: transportation,
           },
           tripId,
@@ -59,6 +68,7 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
 
   const transpo = tripItem?.data?.transportation || '';
 
+  // console.log(tripItem?.data?.tripItems.sort((a, b) => a.seqNum - b.seqNum));
   return (
     <>
       {tripPath && <TripMap paths={tripPath.data?.paths || []} />}
@@ -67,11 +77,9 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
         {isEdit ? (
           <div />
         ) : (
-          <div className="flex  items-center justify-center">
+          <div className="flex items-center justify-center">
             <div
-              onClick={() =>
-                handleTranspo('CAR', visitDate?.visitDate || '', tripId || '')
-              }
+              onClick={() => handleTranspo('CAR', date || '', tripId || '')}
               className="flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-l-md border border-solid border-gray3">
               <CarIcon
                 size={19}
@@ -80,11 +88,7 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
             </div>
             <div
               onClick={() =>
-                handleTranspo(
-                  'PUBLIC_TRANSPORTATION',
-                  visitDate?.visitDate || '',
-                  tripId || '',
-                )
+                handleTranspo('PUBLIC_TRANSPORTATION', date || '', 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
@@ -96,7 +100,6 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
             </div>
           </div>
         )}
-
         <button
           type="button"
           onClick={handleEdit}
@@ -110,7 +113,7 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
           <PlanEditItemBox
             item={tripItem?.data?.tripItems || []}
             day={day}
-            visitDate={visitDate?.visitDate || ''}
+            visitDate={date || ''}
             tripId={tripId || ''}
           />
         ) : (

diff --git a/src/components/Plan/PlanMoveItem.tsx b/src/components/Plan/PlanMoveItem.tsx
@@ -7,6 +7,7 @@ import { useContext } from 'react';
 import { socketContext } from '@hooks/useSocket';
 import { useState, useEffect } from 'react';
 import ToastPopUp from '@components/common/toastpopup/ToastPopUp';
+import { v4 as uuidv4 } from 'uuid';
 
 interface PlanMoveItemProps {
   isCheck: number | null;
@@ -96,7 +97,7 @@ const PlanMoveItem: React.FC<PlanMoveItemProps> = ({
                         {day.map((day, index) => (
                           <Dialog.Close asChild>
                             <button
-                              key={index}
+                              key={uuidv4()}
                               onClick={() => handleMoveItem(date[index])}
                               className="relative flex flex-shrink-0 flex-grow-0 justify-start gap-2">
                               <PaperIcon />