Feat: connect put places api in edit page

src/api/spaces.ts

@@ -1,6 +1,13 @@
 import axios from 'axios';
 
-import {ExitSpaceParams, journeyParams, PlaceParams, SpaceDateParams, SpaceRegionParams} from '@/types/route';
+import {
+  ExitSpaceParams,
+  journeyParams,
+  journeyPutParams,
+  PlaceParams,
+  SpaceDateParams,
+  SpaceRegionParams,
+} from '@/types/route';
 
 export const spacesRequest = {
   getUpcoming: async () => {
@@ -89,7 +96,7 @@ export const postPlaces = async ({spaceId, journeyId, placeIds}: PlaceParams) =>
 };
 
 // [PUT] 일정 수정
-export const putPlaces = async ({spaceId, places}: journeyParams) => {
+export const putPlaces = async ({spaceId, places}: journeyPutParams) => {
   try {
     const response = await axios.put(`/api/spaces/${spaceId}/places`, {places: places}, {withCredentials: true});
     console.log('[SUCCESS]', response);

src/components/Route/DayRoute/DayRoute.tsx

@@ -3,12 +3,15 @@ import update from 'immutability-helper';
 import {useCallback, useEffect, useState} from 'react';
 import {useDrop} from 'react-dnd';
 import {AiOutlinePlus as PlusIcon} from 'react-icons/ai';
+import {useSetRecoilState} from 'recoil';
 
 import styles from './DayRoute.module.scss';
 
 import BottomSlide from '@/components/BottomSlide/BottomSlide';
 
+import {editedPlacesState} from '@/recoil/\bspaces/selectPlace';
 import {setRouteDate} from '@/utils/formatDate';
+import {findShortestPath} from '@/utils/optimizePlace';
 
 import AddPlace from '../AddPlace/AddPlace';
 import DraggablePlaceCard from '../DraggablePlaceCard/DraggablePlaceCard';
@@ -21,6 +24,7 @@ function DayRoute({
   date,
   placeList,
   editMode,
+  editPlaces,
   journeyId,
   selectedPlaces,
   setSelectedPlaces,
@@ -29,6 +33,7 @@ function DayRoute({
   const {isOpen, onOpen, onClose} = useDisclosure();
   const [placeCards, setPlaceCards] = useState(placeList);
   const [isOptimize, setIsOptimize] = useState(false);
+  const setEditedPlaces = useSetRecoilState(editedPlacesState);
 
   const handleModalClick = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -67,9 +72,15 @@ function DayRoute({
 
   const [, drop] = useDrop(() => ({accept: 'CARD'}));
 
+  const handleConfirmClick = () => {
+    setPlaceCards(findShortestPath(placeCards));
+    setIsOptimize(false);
+    editPlaces(journeyId, findShortestPath(placeCards));
+  };
+
   useEffect(() => {
-    console.log('placeList', placeList);
-  }, [placeList]);
+    setEditedPlaces({journeyId: journeyId, placeCards: placeCards});
+  }, [journeyId, placeCards]);
 
   return (
     <>
@@ -84,7 +95,14 @@ function DayRoute({
           </button>
         </header>
         <div>
-          <button className={styles.optimizationButton} onClick={() => setIsOptimize(true)}>
+          <button
+            className={styles.optimizationButton}
+            style={{
+              color: placeCards.length > 2 ? '#2388FF' : '#979C9E',
+              cursor: placeCards.length > 2 ? 'pointer' : 'default',
+            }}
+            onClick={() => setIsOptimize(placeCards.length > 2)}
+          >
             루트 최적화
           </button>
           <div ref={drop} className={styles.placeListContainer}>
@@ -124,7 +142,7 @@ function DayRoute({
               <p className={styles.wrapperText__body}>
                 일정 내 첫 번째 장소를 기준으로
                 <br />
-                N일차 일정이 최소 동선으로 재정렬 됩니다.
+                {day}일차 일정이 최소 동선으로 재정렬 됩니다.
               </p>
             </div>
             <div className={styles.wrapperButton}>
@@ -136,13 +154,7 @@ function DayRoute({
               >
                 취소
               </button>
-              <button
-                className={styles.wrapperButton__accept}
-                onClick={() => {
-                  // setPlaceCards(findShortestPath(placeList));
-                  setIsOptimize(false);
-                }}
-              >
+              <button className={styles.wrapperButton__accept} onClick={handleConfirmClick}>
                 확인
               </button>
             </div>

src/components/Route/DraggablePlaceCard/DraggablePlaceCard.tsx

@@ -61,7 +61,6 @@ function PlaceCard({
 
   const handleSelect = () => {
     setIsChecked(!isChecked);
-    // TODO: place id 넘기기
     onSelect(journeyId, selectedId, placeId);
   };
 

src/components/Route/RouteTabPanel/RouteTabPanel.tsx

@@ -2,15 +2,18 @@ import {useDisclosure} from '@chakra-ui/react';
 import {useEffect, useState} from 'react';
 import {HiOutlineTrash as DeleteIcon} from 'react-icons/hi';
 import {RiArrowUpDownFill as MoveIcon} from 'react-icons/ri';
-import {useNavigate} from 'react-router-dom';
+import {useNavigate, useParams} from 'react-router-dom';
+import {useRecoilValue} from 'recoil';
 
 import styles from './RouteTabPanel.module.scss';
 
+import {usePutPlaces} from '@/hooks/Spaces/space';
+
 import BottomSlideLeft from '@/components/BottomSlide/BottomSlideLeft';
 
 import ZoomInIcon from '@/assets/icons/zoomIn.svg?react';
+import {editedPlacesState} from '@/recoil/\bspaces/selectPlace';
 import {handlePlaceSelection, transformSelectedPlaces} from '@/utils/formatJourneyData';
-import {getSpaceId} from '@/utils/getSpaceId';
 
 import DayMove from '../DayMove/DayMove';
 import DayNavigationBar from '../DayNavigationBar/DayNavigationBar';
@@ -19,27 +22,36 @@ import DeletePlacesModal from '../DeletePlacesModal/DeletePlacesModal';
 import EmptyDate from '../EmptyDate/EmptyDate';
 import MapInTrip from '../MapInTrip/MapInTrip';
 
-import {DateItem, Journey, MapInTripProps, SelectedPlace} from '@/types/route';
+import {DateItem, Journey, MapInTripProps, PlaceList, SelectedPlace} from '@/types/route';
 
 function RouteTabPanel({mapRef, center, journeysData}: MapInTripProps) {
+  const navigate = useNavigate();
+  const {id} = useParams();
   const [isEditMode, setIsEditMode] = useState(false);
   const [selectedPlaces, setSelectedPlaces] = useState<SelectedPlace[]>([]);
   const {isOpen, onOpen, onClose} = useDisclosure();
   const {isOpen: isModalOpen, onOpen: onModalOpen, onClose: onModalClose} = useDisclosure();
+  const {journeyId, placeCards} = useRecoilValue(editedPlacesState);
+  const putPlaces = usePutPlaces();
+
+  const editPlaces = async (journeyId: number, placeCards: PlaceList[]) => {
+    const placeIds = placeCards.map((item) => item.place.placeId);
+    await putPlaces.mutateAsync({spaceId: Number(id), places: [{journeyId: journeyId, placeIds: placeIds}]});
+  };
 
   const handleEditMode = () => {
     setIsEditMode(!isEditMode);
 
-    // TODO: 완료 버튼 눌렀을 때 처리
+    // 완료 눌렀을 때
+    if (isEditMode) {
+      editPlaces(journeyId, placeCards);
+    }
   };
 
   useEffect(() => {
     console.log(transformSelectedPlaces(selectedPlaces));
   }, [selectedPlaces]);
 
-  const navigate = useNavigate();
-  const spaceId = getSpaceId();
-
   if (!journeysData?.journeys || journeysData?.journeys?.length === 0) {
     return <EmptyDate />;
   }
@@ -52,7 +64,7 @@ function RouteTabPanel({mapRef, center, journeysData}: MapInTripProps) {
     <div className={styles.panelContainer}>
       <div className={styles.mapContainer}>
         <MapInTrip mapRef={mapRef} center={center} journeysData={journeysData} />
-        <button className={styles.zoomInButton} onClick={() => navigate(`/trip/${spaceId}/map`)}>
+        <button className={styles.zoomInButton} onClick={() => navigate(`/trip/${id}/map`, {state: {id: id}})}>
           <ZoomInIcon />
         </button>
       </div>
@@ -68,6 +80,7 @@ function RouteTabPanel({mapRef, center, journeysData}: MapInTripProps) {
                 journeyId={journey.journeyId}
                 placeList={journey.places}
                 editMode={isEditMode}
+                editPlaces={editPlaces}
                 selectedPlaces={selectedPlaces}
                 setSelectedPlaces={setSelectedPlaces}
                 handlePlaceSelection={handlePlaceSelection}

src/hooks/Spaces/space.ts

@@ -9,6 +9,7 @@ import {
   postPlaces,
   putDates,
   putExitSpace,
+  putPlaces,
   putRegions,
 } from '@/api/spaces';
 
@@ -59,7 +60,7 @@ export const usePostPlaces = () => {
 export const usePutPlaces = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: putDates,
+    mutationFn: putPlaces,
     onSuccess: () => {
       return queryClient.invalidateQueries({queryKey: ['spaces', 'places']});
     },

src/recoil/spaces/selectPlace.ts

@@ -2,7 +2,22 @@ import {atom} from 'recoil';
 
 import {SelectedPlaces} from '@/components/Route/AddPlace/FromVote/VoteCard/VoteCard';
 
+import {PlaceList} from '@/types/route';
+
 export const selectedPlaceFromVoteState = atom<SelectedPlaces[]>({
   key: 'selectedPlaceFromVoteState',
   default: [],
 });
+
+interface editedPlaceSate {
+  journeyId: number;
+  placeCards: PlaceList[];
+}
+
+export const editedPlacesState = atom<editedPlaceSate>({
+  key: 'editedPlacesState',
+  default: {
+    journeyId: 0,
+    placeCards: [],
+  },
+});

src/types/route.ts

@@ -43,6 +43,7 @@ export interface DayRouteProps {
   journeyId: number;
   placeList: PlaceList[];
   editMode: boolean;
+  editPlaces: (journeyId: number, placeCards: PlaceList[]) => void;
   selectedPlaces: SelectedPlace[];
   setSelectedPlaces: React.Dispatch<React.SetStateAction<SelectedPlace[]>>;
   handlePlaceSelection: (
@@ -226,12 +227,22 @@ export interface journeyParams {
   places: TransformedDataItem[];
 }
 
+export interface journeyPutParams {
+  spaceId: number;
+  places: TransformedPutDataItem[];
+}
+
 export interface SelectedPlace {
   journeyId: number;
   selectedId: number;
   placeId: number;
 }
 
+export interface TransformedPutDataItem {
+  journeyId: number;
+  placeIds: number[];
+}
+
 export interface TransformedDataItem {
   journeyId: number;
   selectedIds: number[];