Feat: 상품가격 수정 구현

src/@types/socket.types.ts

@@ -100,7 +100,7 @@ interface pubAddTripItem {
 interface pubUpdatePrice {
   tripId: string;
   visitDate: string;
-  price: number;
+  price: string;
 }
 
 interface pubUpdateTripItem {

src/api/socket.ts

@@ -84,7 +84,7 @@ export const pubAddTripItem = (
 // 여행 아이템 예상 가격 업데이트 이벤트 발생시
 export const pubUpdatePrice = (
   pubUpdatePrice: pubUpdatePrice,
-  tripItemId: string,
+  tripItemId: number,
 ) => {
   socketClient.publish({
     destination: `/pub/tripItems/${tripItemId}/updatePrice`,
@@ -106,10 +106,10 @@ export const pubUpdateTripItem = (
 // 여행 날짜별 교통 수단 변경 이벤트 발생시 (01/16 업데이트)
 export const pubUpdateTransportation = (
   pubUpdateTransportation: pubUpdateTransportation,
-  trips: string,
+  tripId: string,
 ) => {
   socketClient.publish({
-    destination: `/pub/trips/${trips}/updateTransportation`,
+    destination: `/pub/trips/${tripId}/updateTransportation`,
     body: JSON.stringify(pubUpdateTransportation),
   });
 };

src/components/Plan/PlanEditItemBox.tsx

@@ -1,4 +1,4 @@
-import { PenIcon, DragAndDropIcon } from '@components/common/icons/Icons';
+import { DragAndDropIcon } from '@components/common/icons/Icons';
 import { TripItem } from '@/@types/service';
 import {
   DragDropContext,
@@ -139,9 +139,10 @@ const PlanEditItemBox = ({
                             alt="img"
                           />
                           <div className="flex w-full flex-col p-[10px]">
-                            <div className="flex justify-between text-left text-[14px] font-medium text-black">
-                              {item.name}
-                              <PenIcon size={14} className="cursor-pointer" />
+                            <div className="flex text-left text-[14px] font-medium text-black">
+                              {item.name.length > 17
+                                ? item.name.slice(0, 17) + '...'
+                                : item.name}
                             </div>
                             <div className="mt-[3px] flex h-fit w-fit items-center justify-center gap-2 rounded-[3px] bg-[#ededed] p-[4px] text-center text-[11px] text-black">
                               {item.category}
@@ -166,7 +167,7 @@ const PlanEditItemBox = ({
           )}
         </Droppable>
       </DragDropContext>
-      <div className="justify-cente fixed bottom-0 left-0 right-0 z-10 flex">
+      <div className="fixed bottom-0 left-0 right-0 z-10 flex justify-center">
         <div className="mx-auto flex h-14 max-w-md">
           <Alert
             title={'여행지 삭제'}

src/components/Plan/PlanItem.tsx

@@ -116,6 +116,7 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
             item={tripItem?.data?.tripItems || []}
             paths={tripPath?.data?.paths || []}
             transportation={transpo}
+            visitDate={date || ''}
             day={day}
           />
         )}

src/components/Plan/PlanItemBox.tsx

@@ -3,28 +3,55 @@ import {
   CarIcon,
   BusIcon,
   SequenceIcon,
+  CloseIcon,
 } from '@components/common/icons/Icons';
 import { TripItem, Paths } from '@/@types/service';
 import { v4 as uuidv4 } from 'uuid';
+import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
+import Alert from '@components/common/alert/Alert';
+import { useContext, useState } from 'react';
+import { socketContext } from '@hooks/useSocket';
+import { pubUpdatePrice } from '@api/socket';
 
 type PlanItemBoxProps = {
   item: TripItem[];
   paths: Paths[];
   transportation: string;
   day: string;
+  visitDate: string;
 };
 
 const PlanItemBox = ({
   item,
   paths,
   transportation,
   day,
+  visitDate,
 }: PlanItemBoxProps) => {
   if (!item || !paths) {
     return <div>Missing data</div>;
   }
 
+  const { tripAuthority } = useGetTripsAuthority();
+  const { tripId } = useContext(socketContext);
+
   const itemLength = item.length;
+  const [inputPrice, setInputPrice] = useState('');
+  const showCloseIcon = inputPrice;
+
+  const handlePrice = (inputBudget: string, tripItemId: number) => {
+    if (inputBudget && tripItemId) {
+      pubUpdatePrice(
+        {
+          tripId: tripId,
+          visitDate: visitDate,
+          price: inputBudget,
+        },
+        tripItemId,
+      );
+      setInputPrice('');
+    }
+  };
 
   return (
     <>
@@ -49,8 +76,47 @@ const PlanItemBox = ({
                 />
                 <div className="flex w-full flex-col p-[10px]">
                   <div className="flex justify-between text-left text-[14px] font-medium text-black">
-                    {item.name}
-                    <PenIcon size={14} className="cursor-pointer" />
+                    {item.name.length > 19
+                      ? item.name.slice(0, 19) + '...'
+                      : item.name}
+                    {tripAuthority == 'WRITE' && (
+                      <Alert
+                        title={'비용을 입력해주세요'}
+                        message={''}
+                        onConfirm={() =>
+                          handlePrice(inputPrice, item.tripItemId)
+                        }
+                        closeOnConfirm={true}
+                        children={
+                          <button>
+                            <PenIcon size={14} className="cursor-pointer" />
+                          </button>
+                        }
+                        content={
+                          <div className="mb-6 mt-8 flex w-[80%] items-center justify-between border-b-[1px] border-solid border-gray4">
+                            <div className="flex w-full items-center justify-between">
+                              <input
+                                type="number"
+                                className="title3 text-gray6 placeholder:text-gray4 focus:outline-none"
+                                placeholder="금액"
+                                value={inputPrice}
+                                onChange={(e) => setInputPrice(e.target.value)}
+                              />
+                              <div
+                                className="cursor-pointer"
+                                onClick={() => setInputPrice('')}>
+                                {showCloseIcon && (
+                                  <CloseIcon size={16} fill="#D7D7D7" />
+                                )}
+                              </div>
+                            </div>
+                            <span className="title3 pl-[4.5px] text-gray4">
+                              원
+                            </span>
+                          </div>
+                        }
+                      />
+                    )}
                   </div>
                   <div className="mt-[3px] flex h-fit w-fit items-center justify-center gap-2 rounded-[3px] bg-[#ededed] p-[4px] text-center text-[11px] text-black">
                     {item.category}

src/components/Plan/TripBudget.tsx

@@ -8,7 +8,7 @@ import { useContext, useState } from 'react';
 
 const TripBudget = () => {
   const { tripAuthority } = useGetTripsAuthority();
-  const { tripBudget, tripId } = useContext(socketContext);
+  const { callBackPub, tripBudget, tripId } = useContext(socketContext);
 
   const budget = tripBudget?.data;
 
@@ -28,11 +28,13 @@ const TripBudget = () => {
   const handleSetTargetBudget = (inputBudget: string) => {
     const newTargetBudget = parseInt(inputBudget, 10); // 문자열 숫자로 변환
     if (!isNaN(newTargetBudget) && newTargetBudget !== budget?.budget) {
-      pubUpdateBudget(
-        {
-          budget: newTargetBudget,
-        },
-        tripId || '',
+      callBackPub(() =>
+        pubUpdateBudget(
+          {
+            budget: newTargetBudget,
+          },
+          tripId || '',
+        ),
       );
       setInputBudget('');
     }

src/hooks/useSocket.ts

@@ -92,9 +92,11 @@ export const useSocket = () => {
     if (tripId && visitDate) {
       socketConnect(tripId, visitDate.visitDate);
     }
+    console.log('소켓연결');
 
     return () => {
       socketClient.deactivate();
+      console.log('소켓해제');
     };
   }, [tripId, visitDate, socketCallback]);