diff --git a/src/components/MyTrip.js b/src/components/MyTrip.js index 60583dd9710b495ff8669b1d5f16cded2046463a..e1abd2c597706cb8a1f86c29453c6f2121f99335 100644 --- a/src/components/MyTrip.js +++ b/src/components/MyTrip.js @@ -3,6 +3,7 @@ import '../styles/MyTrip.css'; import MyTripWeather from './MyTripWeather'; import { FaArrowDown, FaEllipsisV, FaTrash } from 'react-icons/fa'; import MyTripCollaborators from './MyTripCollaborators'; +import { toast } from 'react-toastify'; const formatDate = (dateString) => { const date = new Date(dateString); @@ -17,6 +18,8 @@ const MyTrip = ({ trips, onPlaceSelect, onAddPlace, onDirectionSelect, onTripSel const [expandedTripId, setExpandedTripId] = useState(null); const [draggedItemId, setDraggedItemId] = useState(null); const [openMenuId, setOpenMenuId] = useState(null); + const [editingTripId, setEditingTripId] = useState(null); + const [newTripName, setNewTripName] = useState(''); const handleDragStart = (e, placeId) => { setDraggedItemId(placeId); @@ -80,6 +83,27 @@ const MyTrip = ({ trips, onPlaceSelect, onAddPlace, onDirectionSelect, onTripSel } }; + const handleEditClick = (e, tripId, currentName) => { + e.stopPropagation(); + setEditingTripId(tripId); + setNewTripName(currentName); + setOpenMenuId(null); + }; + + const handleEditSubmit = (e, tripId) => { + e.preventDefault(); + e.stopPropagation(); + + if (!newTripName.trim()) { + toast.error('여행 이름을 입력해주세요'); + return; + } + + onRouteChange(tripId, null, null, null, newTripName.trim()); + setEditingTripId(null); + setNewTripName(''); + }; + return ( <div className="trip-list"> {trips.map((trip) => ( @@ -92,10 +116,24 @@ const MyTrip = ({ trips, onPlaceSelect, onAddPlace, onDirectionSelect, onTripSel }} > <div className="trip-title"> - <h3>{trip.name}</h3> - <span className="trip-date"> - {formatDate(trip.start_date)} ~ {formatDate(trip.end_date)} - </span> + {editingTripId === trip._id ? ( + <form onSubmit={(e) => handleEditSubmit(e, trip._id)} onClick={e => e.stopPropagation()}> + <input + type="text" + value={newTripName} + onChange={(e) => setNewTripName(e.target.value)} + autoFocus + onBlur={(e) => handleEditSubmit(e, trip._id)} + /> + </form> + ) : ( + <> + <h3>{trip.name}</h3> + <span className="trip-date"> + {formatDate(trip.start_date)} ~ {formatDate(trip.end_date)} + </span> + </> + )} </div> <div className="trip-menu"> <button @@ -109,6 +147,9 @@ const MyTrip = ({ trips, onPlaceSelect, onAddPlace, onDirectionSelect, onTripSel <button onClick={(e) => handleDeleteClick(e, trip._id)}> 삭제 </button> + <button onClick={(e) => handleEditClick(e, trip._id, trip.name)}> + 이름 수정 + </button> </div> )} </div> diff --git a/src/pages/Home.js b/src/pages/Home.js index 79ecf38c58f19cb778b45fc16642da224620162a..4f773f3a04cb386dafe599e568a89cea98d6577b 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -281,26 +281,36 @@ const Home = () => { setMarkers(newMarkers); }, [map, clearMap, handlePlaceSelect, createCustomOverlay]); - const handleRouteChange = async (tripId, day, newRoute, places) => { + const handleRouteChange = async (tripId, day, newRoute, places, newName) => { try { - const requestData = { - dayKey: day, - places: places, - route: newRoute - }; - - const response = await axios.put( - `${API_URL}/api/trips/trips/${tripId}/plans/day`, - requestData - ); - - if (response.status === 200) { - toast.success('경로가 성공적으로 업데이트되었습니다.'); - refreshTrips(); - } + if (newName) { + // 여행 이름 수정 + const response = await axios.put( + `${API_URL}/api/trips/trips/${tripId}`, + { name: newName } + ); + if (response.status === 200) { + refreshTrips(); + } + } else if (day && newRoute) { + // 기존 경로 수정 로직 + const requestData = { + dayKey: day, + places: places, + route: newRoute + }; + const response = await axios.put( + `${API_URL}/api/trips/trips/${tripId}/plans/day`, + requestData + ); + if (response.status === 200) { + toast.success('경로가 성공적으로 업데이트되었습니다.'); + refreshTrips(); + } + } } catch (error) { - console.error('경로 업데이트 실패:', error); - toast.error('경로 업데이트에 실패했습니다.'); + console.error('업데이트 실패:', error); + toast.error('업데이트에 실패했습니다.'); } }; diff --git a/src/styles/MyTrip.css b/src/styles/MyTrip.css index 1f4d1182c035c5243859caa5aa0f21cdb8453c01..7fb5e47e3284c97f3e84259455fc196791e05488 100644 --- a/src/styles/MyTrip.css +++ b/src/styles/MyTrip.css @@ -265,4 +265,29 @@ .delete-place-button:hover { color: #cc0000; +} + +.trip-title form { + width: 100%; +} + +.trip-title input { + width: 100%; + padding: 8px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 1rem; +} + +.menu-dropdown button { + width: 100%; + padding: 8px 12px; + text-align: left; + border: none; + background: none; + cursor: pointer; +} + +.menu-dropdown button:hover { + background-color: #f5f5f5; } \ No newline at end of file