Fix: 글자수제한 19->16, 이런점이좋았어요 세로가운데정렬 적용

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",

src/api/socket.ts

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

src/components/DetailSectionBottom/DetailReviewStats.tsx

@@ -25,7 +25,7 @@ const DetailReviewStats = () => {
                   backgroundColor: getColor(data.keywordCount),
                 }}
               />
-              <div className="absolute left-[14.5px] top-[12.23px] flex w-[90%] items-center justify-start">
+              <div className="absolute left-[14.5px] top-[12.23px] flex h-[16px] w-[90%] items-center justify-start">
                 <div className="flex flex-grow items-start justify-start gap-2.5">
                   <p>{getEmoji(data.content)}</p>
                   <p className="font-bold text-gray6">{data.content}</p>

src/components/DetailSectionTop/DetailAddSchedule.tsx

@@ -265,9 +265,9 @@ const DetailAddSchedule = () => {
           title={'로그인'}
           message={
             <>
-              새로운 여행 생성 시 로그인이 필요합니다.
+              여정에 추가하려면 로그인이 필요해요.
               <br />
-              로그인 하시겠습니까?
+              로그인하러 가볼까요?
             </>
           }
           onConfirm={() => handleNavigate('/login')}>

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})`}

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>

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);
@@ -140,8 +133,8 @@ const PlanEditItemBox = ({
                           />
                           <div className="flex h-[88px] w-full flex-col px-[10px] py-[8px]">
                             <div className="flex text-left text-[14px] font-medium text-black">
-                              {item.name.length > 17
-                                ? item.name.slice(0, 17) + '...'
+                              {item.name.length > 16
+                                ? item.name.slice(0, 16) + '...'
                                 : item.name}
                             </div>
                             <div className="mb-[11px] mt-[4px] flex h-[16px] w-fit items-center justify-center rounded-[3px] bg-[#ededed] px-[4px] py-[8px] text-center text-[11px] text-black">

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

src/components/Plan/PlanItemBox.tsx

@@ -84,8 +84,8 @@ const PlanItemBox = ({
                 />
                 <div className="flex h-[88px] w-full flex-col px-[10px] py-[8px]">
                   <div className="text-left text-[14px] font-medium text-black">
-                    {item.name.length > 19
-                      ? item.name.slice(0, 19) + '...'
+                    {item.name.length > 16
+                      ? item.name.slice(0, 16) + '...'
                       : item.name}
                   </div>
                   <div className="mb-[11px] mt-[4px] flex h-[16px] w-fit items-center justify-center rounded-[3px] bg-[#ededed] px-[4px] py-[8px] text-center text-[11px] text-black">

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}