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

… dev
WePlanPlans · Jan 26, 2024 · 8c4dfb2 · 8c4dfb2
2 parents c392227 + e7dec12
commit 8c4dfb2
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 59 deletions.
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.2",
     "react-icons": "^5.0.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/api/socket.ts b/src/api/socket.ts
@@ -125,6 +125,7 @@ export const pubUpdateTransportation = (
     destination: `/pub/trips/${tripId}/updateTransportation`,
     body: JSON.stringify(pubUpdateTransportation),
   });
+  console.log('펍실행');
 };
 
 // 여행 아이템 방문 날짜 변경 이벤트 발생시

diff --git a/src/components/MyTrip/MyTripIngItem.tsx b/src/components/MyTrip/MyTripIngItem.tsx
@@ -16,26 +16,26 @@ const MyTripIngItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
     <div
       className="relative flex h-16 w-full cursor-pointer items-center rounded-2xl border border-solid border-cyan-400 bg-cyan-400 px-3"
       onClick={() => navigate(`/trip/${tripId}`)}>
-      <div className="flex">
+      <div className="flex items-center">
         <div>
           <img
             className="h-10 min-h-10 w-10 rounded-3xl  object-cover"
             src={tripThumbnailUrl}
             alt="여행지 이미지"
           />
         </div>
-        <div className="absolute right-3 top-[20px] inline-flex h-[22px] w-[54px] items-center justify-center gap-[8px] rounded-2xl border border-solid border-cyan-400 bg-white px-[8px] py-[10px] pt-[13px]">
+        <div className="absolute right-3 top-[20px] inline-flex h-[22px] w-[54px] items-center justify-center gap-[8px] rounded-2xl border border-solid border-cyan-400 bg-white px-[8px] py-[10px] pt-[10px]">
           <span className="text-xs font-semibold text-cyan-400">
             {tripStatus}
           </span>
         </div>
         <div className="ml-[15px] flex max-w-[300px] flex-col items-start justify-between gap-[15px] ">
-          <div className="mt-[6px]">
+          <div className="mt-[3px]">
             <div className="w-56 truncate text-[15px] font-bold text-white ">
               {tripName}
             </div>
 
-            <div className="mt-[4px] text-xs font-semibold text-white">
+            <div className="mb-[5px] text-xs font-semibold text-white">
               {startDate.replace(/-/g, '.')} -{' '}
               {endDate.replace(/-/g, '.').split('2024.')}{' '}
               {tripDuration === '0박 1일' ? null : ` (${tripDuration})`}

diff --git a/src/components/MyTrip/MyTripItem.tsx b/src/components/MyTrip/MyTripItem.tsx
@@ -64,8 +64,8 @@ const MyTripItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
                 alt="여행지 이미지"
               />
             </div>
-            <div className="ml-[10px] flex w-full flex-col items-start justify-between  ">
-              <div className="mt-[1px] ">
+            <div className="ml-[10px] mt-[-2px] flex w-full flex-col items-start justify-between  ">
+              <div>
                 <div className="truncate text-[15px] text-base font-bold text-stone-900">
                   {tripName}
                 </div>
@@ -76,7 +76,7 @@ const MyTripItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
                 </div>
               </div>
 
-              <div className="mb-[5px] flex text-xs font-normal text-zinc-500">
+              <div className="flex pt-[2px] text-xs font-normal text-zinc-500">
                 <UserIcon size={13} fill="#888" color="none" />
                 <span>{numberOfTripMember}명과 공유중</span>
               </div>

diff --git a/src/components/Plan/PlanEditItemBox.tsx b/src/components/Plan/PlanEditItemBox.tsx
@@ -6,7 +6,7 @@ import {
   Draggable,
   DropResult,
 } from 'react-beautiful-dnd';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { pubUpdateTripItem, pubDeleteItem } from '@api/socket';
 import { pubUpdateTripItemReq } from '@/@types/service';
 import Alert from '@components/common/alert/Alert';
@@ -35,14 +35,20 @@ const PlanEditItemBox = ({
 
   const [, setIsEdit] = useRecoilState(isEditState);
   const [items, setItems] = useState(item);
-  const [newData, setNewData] = useState<pubUpdateTripItemReq | null>(null);
   const [selectedItemId, setSelectedItemId] = useState<number | null>(null);
   const [toastPopUp, setToastPopUp] = useState({
     isPopUp: false,
     noun: '',
     verb: '',
   });
 
+  const debouncedPubUpdateTripItem = useCallback(
+    debounce((newData: pubUpdateTripItemReq, tripId: string) => {
+      pubUpdateTripItem(newData, tripId);
+    }, 3000),
+    [],
+  );
+
   const onDragEnd = (result: DropResult) => {
     if (!result.destination) return;
     const reorderedItems = Array.from(items);
@@ -55,22 +61,9 @@ const PlanEditItemBox = ({
       seqNum: index + 1,
     }));
 
-    setNewData({
-      visitDate: visitDate,
-      tripItemOrder,
-    });
+    debouncedPubUpdateTripItem({ visitDate: visitDate, tripItemOrder }, tripId);
   };
 
-  const debouncedPubUpdateTripItem = debounce((newData, tripId) => {
-    pubUpdateTripItem(newData, tripId);
-  }, 1000);
-
-  useEffect(() => {
-    if (newData && tripId) {
-      debouncedPubUpdateTripItem(newData, tripId);
-    }
-  }, [newData]);
-
   const handleConfirm = () => {
     if (tripId && visitDate && selectedItemId) {
       pubDeleteItem({ tripId: tripId, visitDate: visitDate }, selectedItemId);

diff --git a/src/components/Plan/PlanItem.tsx b/src/components/Plan/PlanItem.tsx
@@ -4,13 +4,14 @@ import { useNavigate } from 'react-router-dom';
 import TripMap from './TripMap';
 import PlanItemBox from './PlanItemBox';
 import PlanEditItemBox from './PlanEditItemBox';
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useCallback } from 'react';
 import { socketContext } from '@hooks/useSocket';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { visitDateState, isEditState } from '@recoil/socket';
 import { pubGetPathAndItems, pubUpdateTransportation } from '@api/socket';
 import { tapState } from '@recoil/plan';
 import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
+import { debounce } from 'lodash';
 
 type PlanItemProps = {
   date: string;
@@ -40,24 +41,23 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
     setIsEdit((prev) => !prev);
   };
 
-  const handleTranspo = (
-    transportation: 'CAR' | 'PUBLIC_TRANSPORTATION',
-    date: string,
-    tripId: string,
-  ) => {
-    if (transportation !== transpo) {
-      pubUpdateTransportation(
-        {
-          visitDate: date,
-          transportation: transportation,
-        },
-        tripId,
-      );
-    }
-  };
-
   const transpo = tripItem?.data?.transportation || '';
 
+  const debouncedHandleTranspo = useCallback(
+    debounce((transportation, date, tripId) => {
+      if (transportation !== transpo) {
+        pubUpdateTransportation(
+          {
+            visitDate: date,
+            transportation: transportation,
+          },
+          tripId,
+        );
+      }
+    }, 1000),
+    [transpo],
+  );
+
   return (
     <>
       {tripPath && <TripMap paths={tripPath.data?.paths || []} />}
@@ -67,7 +67,9 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
         ) : (
           <div className="flex items-center justify-center">
             <div
-              onClick={() => handleTranspo('CAR', date || '', tripId || '')}
+              onClick={() =>
+                debouncedHandleTranspo('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}
@@ -76,7 +78,11 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
             </div>
             <div
               onClick={() =>
-                handleTranspo('PUBLIC_TRANSPORTATION', date || '', tripId || '')
+                debouncedHandleTranspo(
+                  '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

diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
@@ -23,6 +23,7 @@ import PlanSchedule from './PlanSchedule';
 import PlanCursor from './PlanCursor';
 import PlanOtherCursor from './PlanOtherCursor';
 import ScrollTopButton from '@components/common/scrollTopButton/ScrollTopButton';
+import { isMobile } from 'react-device-detect';
 
 const PlanSectionTop = () => {
   const navigate = useNavigate();
@@ -82,7 +83,11 @@ const PlanSectionTop = () => {
   }, [isEnter]);
   return (
     <div className="cursor-area min-h-screen" ref={cursorAreaRef}>
-      <PlanCursor props={cursorAreaRef} />
+      {!isMobile && (
+        <>
+          <PlanCursor props={cursorAreaRef} />
+        </>
+      )}
       <PlanOtherCursor />
       <BackBox
         showBack={true}

diff --git a/src/components/common/nav/Nav.tsx b/src/components/common/nav/Nav.tsx
@@ -38,31 +38,31 @@ const Nav = () => {
             navigate('/');
             window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
           }}
-          className="cursor-pointer flex-col items-center justify-center px-2">
+          className="w-[53.12px] cursor-pointer flex-col items-center justify-center px-2">
           <div className="flex justify-center">
             <HomeIcon
               size={24}
               fill={isActive('/') ? 'currentColor' : 'none'}
             />
           </div>
-          <p className="caption1 mt-[3px] text-center font-normal text-gray7">
+          <p className="caption1 mt-[2px] text-center font-normal text-gray7">
             홈
           </p>
         </div>
 
         {isLoggedIn ? (
           <div
             onClick={() => navigate('/mytrip')}
-            className="cursor-pointer flex-col items-center justify-center px-2">
+            className="cursor-pointe w-[53.12px] flex-col items-center justify-center px-2">
             <div className="flex justify-center">
               {isActive('/mytrip') ? (
                 <CalendarIcon2 size={24} />
               ) : (
                 <CalendarIcon3 size={24} />
               )}
             </div>
-            <p className="caption1 mt-[6px] text-center text-xs/[11px] font-normal text-gray7">
-              일정
+            <p className="caption1 mt-[5px] text-center text-xs/[11px] font-normal text-gray7">
+              여정
             </p>
           </div>
         ) : (
@@ -76,15 +76,15 @@ const Nav = () => {
               </>
             }
             onConfirm={handleConfirm}>
-            <div className="cursor-pointer flex-col items-center justify-center px-2">
+            <div className="w-[53.12px] cursor-pointer flex-col items-center justify-center px-2">
               <div className="flex justify-center">
                 <CalendarIcon3
                   size={24}
                   fill={isActive('/mytrip') ? '#1E1E1E' : 'none'}
                 />
               </div>
-              <p className="caption1 mt-[6px] text-center text-xs/[11px] font-normal text-gray7">
-                일정
+              <p className="caption1 mt-[5px] text-center text-xs/[11px] font-normal text-gray7">
+                여정
               </p>
             </div>
           </Alert>
@@ -93,14 +93,14 @@ const Nav = () => {
         {isLoggedIn ? (
           <div
             onClick={() => navigate('/wishlist')}
-            className="cursor-pointer flex-col items-center justify-center px-2">
+            className="w-[53.12px] cursor-pointer flex-col items-center justify-center px-2">
             <div className="flex justify-center">
               <HeartIcon
                 size={24}
                 fill={isActive('/wishlist') ? 'currentColor' : 'none'}
               />
             </div>
-            <p className="caption1 mt-[5px] text-center text-xs/[11px] font-normal text-gray7">
+            <p className="caption1 mt-[4px] whitespace-nowrap text-center text-xs/[11px] font-normal text-gray7">
               관심목록
             </p>
           </div>
@@ -115,14 +115,14 @@ const Nav = () => {
               </>
             }
             onConfirm={handleConfirm}>
-            <div className="cursor-pointer flex-col items-center justify-center px-2">
+            <div className="w-[53.12px] cursor-pointer flex-col items-center justify-center px-2">
               <div className="flex justify-center">
                 <HeartIcon
                   size={24}
                   fill={isActive('/wishlist') ? 'currentColor' : 'none'}
                 />
               </div>
-              <p className="caption1 mt-[5px] text-center text-xs/[11px] font-normal text-gray7">
+              <p className="caption1 mt-[4px] whitespace-nowrap text-center text-xs/[11px] font-normal text-gray7">
                 관심목록
               </p>
             </div>
@@ -131,14 +131,14 @@ const Nav = () => {
 
         <div
           onClick={() => navigate('/mypage')}
-          className="cursor-pointer flex-col items-center justify-center px-1">
+          className="w-[53.12px] cursor-pointer flex-col items-center justify-center px-1 pt-[1px]">
           <div className="flex justify-center">
             <UserIcon
               size={24}
               fill={isActive('/mypage') ? 'currentColor' : 'none'}
             />
           </div>
-          <p className="caption1 mt-[4px] text-center font-normal text-gray7">
+          <p className="caption1 mt-[3px] text-center font-normal text-gray7">
             내정보
           </p>
         </div>

diff --git a/src/components/common/tab/Tab.tsx b/src/components/common/tab/Tab.tsx
@@ -29,14 +29,16 @@ const Tab = ({ lists, contents }: TabProps) => {
       defaultValue="tab0"
       onValueChange={handleTabChange}>
       <Tabs.List
-        className="border-b-1 no-scrollbar flex shrink-0 overflow-x-scroll"
+        className={`${
+          !isDayTab && 'justify-center'
+        } border-b-1 no-scrollbar flex shrink-0 overflow-x-scroll`}
         aria-label="Manage your account">
         {lists.map((list, index) => {
           return (
             <Tabs.Trigger
               key={index}
               className={`${
-                isDayTab ? 'caption1' : 'headline1 flex-1'
+                isDayTab ? 'caption1' : 'headline1 w-[136px]'
               } flex min-w-[57px] cursor-pointer select-none items-center justify-center border-b-2 border-solid border-gray2 py-[8px] leading-none text-gray4 outline-none data-[state=active]:border-b-2 data-[state=active]:border-solid data-[state=active]:border-black data-[state=active]:text-black`}
               value={`tab${index}`}>
               {list}