diff --git a/src/components/common/SuccessAddTripContent.js b/src/components/common/SuccessAddTripContent.js new file mode 100644 index 0000000..1807689 --- /dev/null +++ b/src/components/common/SuccessAddTripContent.js @@ -0,0 +1,40 @@ +import React from "react"; +import styled from "styled-components"; + +const SuccessAddTripContent = () => { + return ( + + + + 여행이 추가되었습니다. + + + + ); +}; + +const SuccessContent = styled.div` + width: 100%; + height: fit-content; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 1rem; +`; + + +const ContentDiv =styled.div` + padding: 2rem 1em; + margin: 1rem; +`; + +const ContentP = styled.p` + font-size: 1.8rem; + text-align: center; + line-height: 1.5rem; + font-weight: 700; + line-height : normal; +`; + +export default SuccessAddTripContent; diff --git a/src/pages/AddTripPage.js b/src/pages/AddTripPage.js index 3f05b2a..3b4dbc8 100644 --- a/src/pages/AddTripPage.js +++ b/src/pages/AddTripPage.js @@ -3,6 +3,8 @@ import React, { useState } from "react"; import SelectDateRange from "../components/common/SelectDateRange"; import ImageUploader from "../components/common/ImageUploader"; import SearchPlaceModal from "../components/common/SearchPlaceModal"; +import Modal from "../components/common/Modal"; +import SuccessContent from "../components/common/SuccessAddTripContent"; import { PiMapPinFill } from "react-icons/pi"; import PropTypes from "prop-types"; import { useNavigate } from "react-router-dom"; @@ -19,6 +21,8 @@ const AddTripPage = () => { //모달창(여행지 검색) 관리 변수 const [isModal, setIsModal] = useState(false); + const [success, setIsSuccess] = useState(false); + // 사용자 입력 정보(여행이름) const [tripName, setTripName] = useState(""); //사용자 입력 정보(여행지역) @@ -32,6 +36,15 @@ const AddTripPage = () => { //사용자 업로드 이미지 url const [imgUrl, setImgUrl] = useState(null); + const openSuccessModal = () => { + setIsSuccess(true); + }; + + const closeSuccessModal = () => { + setIsSuccess(false); + navigate("/home"); + }; + // 여행 이름값 변경 const handleNameChange = (e) => { setTripName(e.target.value); @@ -50,25 +63,31 @@ const AddTripPage = () => { // 여행떠나기 버튼 클릭 const handleSubmit = () => { - const startDate = moment(dateRange[0]).toISOString(); - const endDate = moment(dateRange[1]).toISOString(); + const startdate = moment(startDate) + .startOf("day") + .format("YYYY-MM-DDTHH:mm:ss.SSS[Z]"); + const enddate = moment(endDate) + .endOf("day") + .format("YYYY-MM-DDTHH:mm:ss.SSS[Z]"); + console.log("---"); + console.log(startdate); + console.log(enddate); const formData = new FormData(); formData.append("title", tripName); - formData.append("startdate", startDate); - formData.append("enddate", endDate); + formData.append("startdate", startdate); + formData.append("enddate", enddate); + formData.append("location[region]", tripPlace); formData.append("location[latitude]", latitude); formData.append("location[longitude]", longitude); formData.append("image", imgUrl.fileObject); axios - .post("http://localhost:5000/travel", formData, { + .post(`${SERVER_URL}/travel`, formData, { withCredentials: true, headers: { "Content-Type": "multipart/form-data" }, }) .then((res) => { - console.log(res); - alert("저장 완료"); - navigate("/home"); + openSuccessModal(); }) .catch((error) => { console.log(error); @@ -93,6 +112,19 @@ const AddTripPage = () => { setLatitude={setLatitude} /> )} + {success && ( + } + closeModals={closeSuccessModal} + buttons={ + + + + } + w="80%" + h="22%" + /> + )} 어떤 여행을 만들까요? 취소 @@ -263,3 +295,22 @@ const DateWrapper = styled.div` margin: auto; font-size: 0; `; + +const ButtonContainer = styled.div` + display: flex; + justify-content: space-around; + align-items: center; + width: 100%; + height: 50%; +`; + +const OkBtn = styled.button` + background-color: ${COLOR.MAIN_GREEN}; + color: white; + width: 40%; + height: 3rem; + border: none; + border-radius: 2rem; + font-size: 1.3rem; + font-weight: bolder; +`;