diff --git a/src/components/common/DiaryList.js b/src/components/common/DiaryList.js index 82f64e0..06bb7ef 100644 --- a/src/components/common/DiaryList.js +++ b/src/components/common/DiaryList.js @@ -4,17 +4,19 @@ import DiaryListItem from "./DiaryListItem"; import { PropTypes } from "prop-types"; export default function TripTable(props) { + console.log(props); return ( - {props.data.map((it)=> { - return ; - })} + { + props.data.map((it) => { + return ; + })} ); } TripTable.propTypes = { - data: PropTypes.node.isRequired, + data: PropTypes.array.isRequired, }; const StTripTable = styled.div` diff --git a/src/components/common/DiaryListItem.js b/src/components/common/DiaryListItem.js index e59aafc..24d11c4 100644 --- a/src/components/common/DiaryListItem.js +++ b/src/components/common/DiaryListItem.js @@ -28,12 +28,12 @@ export default function DiaryListItem(props) { {props.data.title} {props.data.startdate} - {props.data.userId} + {props.data.userName} - + @@ -46,7 +46,6 @@ DiaryListItem.propTypes = { date: PropTypes.string.isRequired, img: PropTypes.node.isRequired, imgpath: PropTypes.string.isRequired, - userId: PropTypes.string.isRequired, }; const StDiaryListItem = styled.div` display: flex; @@ -55,7 +54,7 @@ const StDiaryListItem = styled.div` border: 0.2rem solid rgba(228, 228, 228); border-radius: 1rem; width: 100%; - height: 100%; + height: 10rem; margin-bottom: 0.8rem; box-shadow: 1px 1px 3px rgba(228, 228, 228); `; diff --git a/src/components/common/ImageUploader.js b/src/components/common/ImageUploader.js index a3dc1b8..707bf68 100644 --- a/src/components/common/ImageUploader.js +++ b/src/components/common/ImageUploader.js @@ -3,9 +3,9 @@ import PropTypes from "prop-types"; import { AiFillCamera } from "react-icons/ai"; // import axios from "axios"; -const ImageUploader = ({onChange}) => { +const ImageUploader = ({onChange, url}) => { const [selectedFile, setSelectedFile] = useState(null); - const [previewUrl, setPreviewUrl] = useState(null); + const [previewUrl, setPreviewUrl] = useState(url); const fileInput = useRef(null); const setFile = (e) => {}; @@ -87,6 +87,7 @@ const ImageUploader = ({onChange}) => { ImageUploader.propTypes = { onChange: PropTypes.func, + url: PropTypes.string.isRequired, }; export default ImageUploader; diff --git a/src/components/common/MultipleImageUploader.js b/src/components/common/MultipleImageUploader.js index 28788ca..0a5b79a 100644 --- a/src/components/common/MultipleImageUploader.js +++ b/src/components/common/MultipleImageUploader.js @@ -1,11 +1,11 @@ -import React, { useRef } from "react"; +import React, { useRef, useEffect } from "react"; import styled from "styled-components"; import { COLOR } from "../../styles/color"; import CancelIcon from "@mui/icons-material/Cancel"; import CameraAltIcon from "@mui/icons-material/CameraAlt"; import PropTypes from "prop-types"; -const Uploader = ({ onFilesChange, files, setFiles }) => { +const Uploader = ({ onFilesChange, files=[], setFiles }) => { const inputRef = useRef(null); const saveImage = (e) => { diff --git a/src/components/common/TripList.js b/src/components/common/TripList.js index 9a4aef7..310ff82 100644 --- a/src/components/common/TripList.js +++ b/src/components/common/TripList.js @@ -10,6 +10,7 @@ export default function TripList() { const [tripName, setTripName] = useRecoilState(tripNameState); const [loading, setLoading] = useState(false); const [data, setData] = useState([]); + const [url, setUrl] = useState(""); useEffect(() => { let completed = false; @@ -21,6 +22,7 @@ export default function TripList() { ); if (!completed) { setData(result.data.travels); + setUrl(result.data.travelUrls); } setLoading(true); } @@ -40,8 +42,8 @@ export default function TripList() { scrollbarWidth: "none", }} > - {data.map((it) => { - return ; + {data && data.map((it,index) => { + return ; })} ); diff --git a/src/components/common/TripListItem.js b/src/components/common/TripListItem.js index 6e87a5b..51d529b 100644 --- a/src/components/common/TripListItem.js +++ b/src/components/common/TripListItem.js @@ -21,6 +21,7 @@ export default function TripListItem(props) { const goToDiaryList = () => { setTripName(props.data.title); + // console.log("props.data._id: ", props.data._id); navigate("/triptable", { state: { id: props.data._id}, }); @@ -45,14 +46,15 @@ export default function TripListItem(props) { }; const goToEdit = () => { - navigate("/addtrip", { state: props.data._id }); + console.log(props.data); + navigate("/edittrip", { state: {state: props.data, url: props.url }}); }; return ( - + {props.data.title} @@ -98,11 +100,7 @@ export default function TripListItem(props) { TripListItem.propTypes = { data: PropTypes.node.isRequired, - _id: PropTypes.string.isRequired, - title: PropTypes.string.isRequired, - startdate: PropTypes.string.isRequired, - enddate: PropTypes.string.isRequired, - travelimg: PropTypes.string.isRequired, + url: PropTypes.array.isRequired, }; const CancelModal = styled(Modal)``; diff --git a/src/components/common/map/MapDrawer.js b/src/components/common/map/MapDrawer.js index b6e552c..c5c2a6c 100644 --- a/src/components/common/map/MapDrawer.js +++ b/src/components/common/map/MapDrawer.js @@ -5,7 +5,18 @@ import { PropTypes } from "prop-types"; import Jeju from "../../../assets/images/jeju.jpg"; import Button from "@mui/material/Button"; import LocationOnIcon from "@mui/icons-material/LocationOn"; +import { useNavigate } from "react-router"; +import { useRecoilState } from "recoil"; +import { tripNameState } from "../../../recoil/commonState"; const MapDrawer = (props) => { + const navigate = useNavigate(); + const [tripName, setTripName] = useRecoilState(tripNameState); + const goToDiary = () => { + setTripName(props.data.title); + navigate("/triptable", { + state: { id: props.data._id}, + }); + }; return ( @@ -17,7 +28,7 @@ const MapDrawer = (props) => { {props.data.location.region} - 여행 보러 가기 + 여행 보러 가기 ); }; diff --git a/src/pages/AddTripPage.js b/src/pages/AddTripPage.js index 3b4dbc8..4fda2be 100644 --- a/src/pages/AddTripPage.js +++ b/src/pages/AddTripPage.js @@ -15,7 +15,6 @@ import axios from "axios"; const AddTripPage = () => { const SERVER_URL = process.env.REACT_APP_SERVER_URL; - const navigate = useNavigate(); //모달창(여행지 검색) 관리 변수 @@ -131,7 +130,7 @@ const AddTripPage = () => {
- +
diff --git a/src/pages/DiaryListPage.js b/src/pages/DiaryListPage.js index 3b3ee0d..8355353 100644 --- a/src/pages/DiaryListPage.js +++ b/src/pages/DiaryListPage.js @@ -1,12 +1,10 @@ -import React, {useState, useEffect} from "react"; +import React, { useState, useEffect } from "react"; import { COLOR } from "../styles/color"; import styled from "styled-components"; import DiaryList from "../components/common/DiaryList"; import Greenbar from "../assets/icons/greenbar.svg"; import Avatar from "@mui/material/Avatar"; import Button from "@mui/material/Button"; -import Busan from "../assets/images/busan.jpg"; -import Gunsan from "../assets/images/gunsan.jpg"; import Pencil from "../assets/images/pencil.svg"; import { useNavigate } from "react-router-dom"; import { useLocation } from "react-router"; @@ -15,40 +13,65 @@ import BottomNav from "../layout/BottomNav"; import axios from "axios"; import { useRecoilValue } from "recoil"; import { tripNameState } from "../recoil/commonState"; +import { tripIdState } from "../recoil/commonState"; +import defaultImageSrc from "../assets/images/defaultProfileImg.svg"; export default function DiaryListPage() { const tripName = useRecoilValue(tripNameState); + const tripId = useRecoilValue(tripIdState); const navigate = useNavigate(); + //여행 id location으로 받음 const location = useLocation(); const [loading, setLoading] = useState(false); const [data, setData] = useState([]); + const [userimg, setUserimg] = useState([]); + const [error, setError] = useState(null); useEffect(() => { let completed = false; - + let userimgs = []; + console.log("아이디트립", tripId); // eslint-disable-next-line func-style async function get() { - const result = await axios.get( - `${process.env.REACT_APP_SERVER_URL}/diary/travel/${location.state.id}`, - { withCredentials: true }, - ); - if (!completed) { - setData(result.data.diarys); + try { + const result = await axios.get( + `${process.env.REACT_APP_SERVER_URL}/diary/travel/${location.state.id}`, + { withCredentials: true }, + ); + const Img = await axios.get( + `${process.env.REACT_APP_SERVER_URL}/travel/${location.state.id}`, + { withCredentials: true }, + ); + if (!completed) { + setData(result.data.diarys_info); + setLoading(true); + Img.data.invited_profile.forEach((item) => { + userimgs.push(item.url); + }); + setUserimg(userimgs); + console.log(userimg[1]); + console.log(userimg[2]); + } + } catch (error) { + if (!completed) { + setError(error); + setLoading(true); + } + console.error("데이터 가져오기 중 에러가 발생했습니다:", error); } - setLoading(true); } + get(); return () => { completed = true; }; - }, []); + }, [location.state.id]); const goToAdd = () => { - navigate("/invitefriend", {state: location.state.id}); + navigate("/invitefriend", { state: { id: location.state.id } }); }; const goToCreate = () => { - navigate("/diary", {state: location.state.id}); + navigate("/diary", { state: { id: location.state.id } }); }; - return ( @@ -57,15 +80,17 @@ export default function DiaryListPage() { - + {userimg[1]!==undefined && ( + + )} + 일행 추가 @@ -86,7 +111,13 @@ export default function DiaryListPage() { - + {error ? ( +
+ ) : data.length === 0 && loading ? ( +
데이터가 없습니다.
+ ) : ( + + )} diff --git a/src/pages/DiaryPage.js b/src/pages/DiaryPage.js index 6e87fa3..15a55fe 100644 --- a/src/pages/DiaryPage.js +++ b/src/pages/DiaryPage.js @@ -9,18 +9,22 @@ import BottomNav from "../layout/BottomNav"; import { COLOR } from "../styles/color"; import axios from "axios"; import Modal from "../components/common/Modal"; +import { useRecoilState } from "recoil"; +import { tripIdState } from "../recoil/commonState"; const DiaryPage = () => { const navigate = useNavigate(); const [diaryInfo, setDiaryInfo] = useState({ _id: "", title: "", content: "", date: "", travel: "", userId: "", userName: "", url: [], userUrl: "",}); const { state } = useLocation(); - const [id, setId] = useState(state.diaryid); + const [id, setId] = useState(state); + const [tripId, setTripId] = useRecoilState(tripIdState); const [isModalOpen, setIsModalOpen] = useState(false); useEffect(() => { - axios.get(`http://localhost:5000/diary/${id}`, { withCredentials: true}) + console.log("응???", id.diaryid); + axios.get(`http://localhost:5000/diary/${id.diaryid}`, { withCredentials: true}) .then((res) => { const data = res.data.diaryinfo; setDiaryInfo({ @@ -42,6 +46,8 @@ const DiaryPage = () => { const goToTriptable = () => { + setTripId(diaryInfo.travel); + // navigate("/triptable", {state: { id: setDiaryInfo.travel }}); navigate("/triptable"); }; @@ -53,12 +59,12 @@ const DiaryPage = () => { formData.append("date", diaryInfo.date); formData.append("images", diaryInfo.url); - axios.put(`http://localhost:5000/diary/${id}`, formData, { withCredentials: true}) - .catch((error) => { - console.log(error); - }); + // axios.put(`http://localhost:5000/diary/${id.diaryid}`, formData, { withCredentials: true}) + // .catch((error) => { + // console.log(error); + // }); - navigate("/diary"); // {diaryid} 추가 + navigate("/editdiary", { state: { diaryInfo: diaryInfo, id: id} }); }; @@ -71,7 +77,7 @@ const DiaryPage = () => { }; const closeModal = () => { - axios.delete(`http://localhost:5000/diary/${id}`, { withCredentials: true}) + axios.delete(`http://localhost:5000/diary/${id.diaryid}`, { withCredentials: true}) .then((res) => { console.log(res); }) diff --git a/src/pages/DiaryWritePage.js b/src/pages/DiaryWritePage.js index dadbee6..e39a052 100644 --- a/src/pages/DiaryWritePage.js +++ b/src/pages/DiaryWritePage.js @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { React, useState } from "react"; +import { React, useState, useEffect } from "react"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import calendar from "../assets/images/calendar.svg"; @@ -10,6 +10,7 @@ import BottomNav from "../layout/BottomNav"; import axios from "axios"; import { useNavigate } from "react-router-dom"; import { useLocation } from "react-router"; +import moment from "moment"; const DiaryWritePage = () => { @@ -20,9 +21,13 @@ const DiaryWritePage = () => { const [isSaveModalOpen, setIsSaveModalOpen] = useState(false); // Save 버튼을 위한 모달 상태 const [imagePreview, setImagePreview] = useState(null); const [files, setFiles] = useState([]); - const { state } = useLocation(); - // const [travelid, setTravelId] = useState(state); + const location = useLocation(); + const [travelid, setTravelId] = useState(""); const [diaryId, setDiaryId] = useState({ diaryid: "" }); + useEffect(() => { + console.log("Travel ID:", travelid); // Travel ID 출력 + console.log("일기 생성 files:", files); + }); const navigate = useNavigate(); @@ -46,8 +51,8 @@ const DiaryWritePage = () => { const formData = new FormData(); formData.append("title", title); formData.append("content", content); - formData.append("date", startDate.toISOString().split("T")[0]); - formData.append("travel", "664c257dac93cdbc69a66bf5"); // travelid 대체 + formData.append("travel", location.state.id); // travelid 대체 + formData.append("date", moment(startDate).startOf("day").format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")); files.forEach((file) => { formData.append("images", file.fileObject); @@ -63,7 +68,7 @@ const DiaryWritePage = () => { diaryid: res.data.diaryid, }); const diary_id = res.data.diaryid; - navigate("/showdiary", { state: { diaryid: diary_id } }); + navigate("/showdiary", { state: { diaryid: diary_id, travelid: travelid } }); }) .catch((error) => { console.log("에러", error); @@ -104,7 +109,6 @@ const DiaryWritePage = () => { - 취소 저장 diff --git a/src/pages/EditDiaryWritePage.js b/src/pages/EditDiaryWritePage.js new file mode 100644 index 0000000..3ef3b2a --- /dev/null +++ b/src/pages/EditDiaryWritePage.js @@ -0,0 +1,306 @@ +import styled from "styled-components"; +import { React, useState, useEffect } from "react"; +import DatePicker from "react-datepicker"; +import "react-datepicker/dist/react-datepicker.css"; +import calendar from "../assets/images/calendar.svg"; +import Modal from "../components/common/Modal"; +import Uploader from "../components/common/MultipleImageUploader"; +import { COLOR } from "../styles/color"; +import BottomNav from "../layout/BottomNav"; +import axios from "axios"; +import { useNavigate } from "react-router-dom"; +import { useLocation } from "react-router"; +import moment from "moment"; + +const EditDiaryWritePage = () => { + const { state } = useLocation(); + const { diaryInfo } = state || {}; + + const [startDate, setStartDate] = useState(diaryInfo?.date ? new Date(diaryInfo.date) : null); + const [title, setTitle] = useState(diaryInfo?.title || ""); + const [content, setContent] = useState(diaryInfo?.content || ""); + const [files, setFiles] = useState(diaryInfo?.url || []); + const [files2, setFiles2] = useState(); + + const transformFiles = (filesArray) => { + return filesArray.map((file) => ({ preview_URL: file })); + }; + + useEffect(() => { + console.log("안녕?",state.id.diaryid); + const transformedFiles = transformFiles(files); + setFiles2(transformedFiles); + }, []); + + const [isCancelModalOpen, setIsCancelModalOpen] = useState(false); // Cancel 버튼을 위한 모달 상태 + const [isSaveModalOpen, setIsSaveModalOpen] = useState(false); // Save 버튼을 위한 모달 상태 + const [imagePreview, setImagePreview] = useState(null); + const [diaryId, setDiaryId] = useState({ diaryid: "" }); + + const navigate = useNavigate(); + + const openCancelModal = () => { + setIsCancelModalOpen(true); + }; + const openSaveModal = () => { + setIsSaveModalOpen(true); + }; + + const closeModal = () => { + setIsCancelModalOpen(false); + setIsSaveModalOpen(false); + }; + + const handleImageUpload = (preview) => { + setImagePreview(preview); + }; + + const handleConfirm = () => { + const formData = new FormData(); + formData.append("title", title); + formData.append("content", content); + formData.append("date", moment(startDate).startOf("day").format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")); + formData.append("img", files2); + + files.forEach((file) => { + formData.append("images", file.fileObject); + }); + + for (const [key, value] of formData.entries()) { + console.log(`${key}: ${value}`); + } + + axios.put(`http://localhost:5000/diary/${state.id.diaryid}`, formData, { withCredentials: true, headers: {"Content-Type": "multipart/form-data"} }) + .then((res) => { + setDiaryId({ + diaryid: res.data.diaryid, + }); + const diary_id = res.data.diaryid; + console.log("응?",diary_id); + navigate("/showdiary", { state: { diaryid: diary_id } }); + }) + .catch((error) => { + console.log("에러", error); + }); + }; + + return
+
+ + + + setStartDate(date)} + selectsStart + startDate={startDate} + /> + + +
+ + + setTitle(e.target.value)} + /> + setContent(e.target.value)} + /> + + + + + + 취소 + 저장 + + + {isCancelModalOpen && ( + + 작성을 취소하시겠습니까? + + } + w="70%" + h="15rem" + buttons={ + + 아니오 + 예 + + } + /> + )} + + {isSaveModalOpen && ( + + 일기를 저장할까요? + + } + w="70%" + h="15rem" + buttons={ + + 취소 + 확인 + + } + /> + )} + +
; +}; + +const DateDiv = styled.div` + display: flex; + align-items: center; + background-color: none; + width: 80%; + border: none; + font-size: 15px; + border-bottom: solid #bfbfbf 1px; + margin-left: auto; + margin-right: auto; + margin-top: 10%; +`; +const CalenderImage = styled.img` + padding: 1.2%; +`; + +const StyledDatePicker = styled.div` + .react-datepicker-wrapper{ + width: 70%; + } + .react-datepicker__input-container{ + width: 100%; + } + .react-datepicker__input-container input { + background-color: none; + width: 100%; + border: none; + font-size: 15px; + &::placeholder { + color: #bfbfbf; + } + } +`; + + +const TitleBox = styled.input` + display: flex; + background-color: none; + width: 92%; + border: none; + font-size: 15px; + border-bottom: solid ${COLOR.MAIN_SKY} 1px; + margin: auto; + margin-top: 2rem; + padding-bottom: 1rem; + &::placeholder { + color: #bfbfbf; + } +`; + +const ContentBox = styled.textarea` + display: flex; + background-color: none; + width: 92%; + height: 37rem; + border: none; + font-size: 15px; + margin: auto; + margin-top: 1rem; + &::placeholder { + color: #bfbfbf; + } +`; + +const DiaryDiv = styled.div` + display: flex; + flex-direction: column; + background-color: none; + font-size: 15px; + color: #BFBFBF; + border: 1px solid ${COLOR.MAIN_SKY}; + border-radius: 1.8rem; + margin-top: 2.5rem; + margin-left: 8%; + margin-right: 8%; +`; + +const BtnDiv = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin-top: 4%; + margin-bottom: 5rem; +`; +const CancelBtn = styled.button` + height: 4rem; + width: 14.5rem; + font-size: 1.8rem; + font-weight: 600; + background-color: white; + border: none; + border-radius: 3rem; + box-shadow: 2px 3px 5px 0px rgba(0, 0, 0, 0.3); + margin-right: 3%; +`; +const SaveBtn = styled.button` + height: 4rem; + width: 14.5rem; + font-size: 1.8rem; + font-weight: 600; + color: white; + background-color: #2EABA1; + border: none; + border-radius: 3rem; + box-shadow: 2px 3px 5px 0px rgba(0, 0, 0, 0.4); + margin-left: 3%; + background-color: ${(props) => props.disabled ? "rgba(46, 171, 161, 0.3)" : "${COLOR.MAIN_EMER}"} +`; +const OkayBtn = styled.button` + height: 2.5rem; + width: 10rem; + font-size: 1.7rem; + font-weight: 600; + text-align: center; + vertical-align: center; + color: white; + border: none; + border-radius: 3rem; + &.no { + color: black; + background-color: #D9D9D9; + margin-right: 1rem; + } + &.yes { + background-color: ${COLOR.MAIN_GREEN}; + } +`; +const OkayDiv = styled.div` + margin-top: 3rem; +`; + +const ContentDiv = styled.div` + text-align: center; + font-size: 1.8rem; + margin-top: 4rem; +`; + + +export default EditDiaryWritePage; + + diff --git a/src/pages/EditTripPage.js b/src/pages/EditTripPage.js new file mode 100644 index 0000000..711e991 --- /dev/null +++ b/src/pages/EditTripPage.js @@ -0,0 +1,323 @@ +import styled, { css } from "styled-components"; +import React, { useState } from "react"; +import SelectDateRange from "../components/common/SelectDateRange"; +import ImageUploader from "../components/common/ImageUploader"; +import SearchPlaceModal from "../components/common/SearchPlaceModal"; +import { PiMapPinFill } from "react-icons/pi"; +import PropTypes from "prop-types"; +import { useNavigate } from "react-router-dom"; +import { useLocation } from "react-router"; +import { COLOR } from "../styles/color"; +import moment from "moment"; +import axios from "axios"; +import BottomNav from "../layout/BottomNav"; +import Modal from "../components/common/Modal"; +import SuccessContent from "../components/common/SuccessAddTripContent"; + +const EditTripPage = () => { + const { state } = useLocation(); + const navigate = useNavigate(); + //모달창(여행지 검색) 관리 변수 + const [isModal, setIsModal] = useState(false); + + const [success, setIsSuccess] = useState(false); + // 사용자 입력 정보(여행이름) + const [tripName, setTripName] = useState(state.state.title); + //사용자 입력 정보(여행지역) + const [tripPlace, setTripPlace] = useState(state.state.location.region); + const [longitude, setLongitude] = useState(state.state.location.longitude); + const [latitude, setLatitude] = useState(state.state.location.latitude); + //사용자 입력 정보(여행날짜) + const [dateRange, setDateRange] = useState([ + state.state.startdate, + state.state.enddate, + ]); + const [startDate, setStartDate] = useState(state.state.startdate); + const [endDate, setEndDate] = useState(state.state.enddate); + //사용자 업로드 이미지 url + const [imgUrl, setImgUrl] = useState(state.url); + + const openSuccessModal = () => { + setIsSuccess(true); + }; + const closeSuccessModal = () => { + setIsSuccess(false); + navigate("/home"); + }; + + // 여행 이름값 변경 + const handleNameChange = (e) => { + setTripName(e.target.value); + }; + // 여행 장소 값 변경 + const handlePlaceChange = (e) => { + setTripPlace(e.target.value); + }; + // 여행 날짜 값 변경 + const handleDateChange = (e) => { + setDateRange(e); + const [start, end] = e; + setStartDate(start); + setEndDate(end); + }; + + // 여행떠나기 버튼 클릭 + const handleSubmit = () => { + 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]"); + const formData = new FormData(); + formData.append("title", tripName); + 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 + .put(`${process.env.REACT_APP_SERVER_URL}/travel/${state.state._id}`, formData, { + withCredentials: true, + headers: { "Content-Type": "multipart/form-data" }, + }) + .then((res) => { + openSuccessModal(); + }) + .catch((error) => { + console.log(error); + }); + }; + + const handleCancel = () => { + navigate("/home"); + }; + + const openModal = () => { + setIsModal(true); + }; + + return ( +
+ {isModal && ( + + )} + {success && ( + } + closeModals={closeSuccessModal} + buttons={ + + 예 + + } + w="80%" + h="22%" + /> + )} + + 여행 수정하기 + 취소 + + +
+ +
+ +
+ + + + + + + + + + + + + + + + + + + +
+ ); +}; + +EditTripPage.propTypes = { + data: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + startdate: PropTypes.string.isRequired, + enddate: PropTypes.string.isRequired, + location: PropTypes.node.isRequired, + region: PropTypes.string.isRequired, + longitude: PropTypes.number.isRequired, + latitude: PropTypes.number.isRequired, + travelimg: PropTypes.string.isRequired, +}; + +export default EditTripPage; + +const Title = styled.h1` + color: ${COLOR.MAIN_GREEN}; + font-weight: 900; + font-size: 2.3rem; + padding: 3rem 2rem 3rem; + margin-right: auto; +`; + +const TitleContainer = styled.div` + display: flex; +`; + +const Button = styled.button` + background-color: ${COLOR.MAIN_EMER}; + width: 90%; + height: 4rem; + border: none; + border-radius: 2rem; + font-size: 1.8rem; + color: white; + font-weight: bolder; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + bottom: 3rem; + right: 5%; + left: 5%; + margin-bottom: 5rem; + + //버튼 비활성화일때 색상 + ${(props) => + props.disabled && + css` + background-color: #ccc; /* 비활성화된 상태일 때의 배경색 */ + color: #666; /* 비활성화된 상태일 때의 글자색 */ + cursor: not-allowed; /* 비활성화된 상태일 때의 커서 스타일 변경 */ + `} +`; + +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; +`; + +const CancelBtn = styled.button` + height: 3rem; + margin: auto; + background-color: transparent; + border: none; + margin-right: 2rem; + font-size: 1.7rem; + color: ${COLOR.MAIN_GREEN}; +`; + +const Label = styled.div` + font-size: 1.5rem; + width: 90%; + height: 3.5rem; + display: block; + margin-left: auto; + margin-right: auto; + padding: 0.8rem 0rem; + font-weight: bolder; +`; + +const EmptyContainer = styled.div` + width: 100%; + height: 3rem; +`; + +const InputContainer = styled.div` + margin: 2rem; +`; + +const Input = styled.input` + background-color: none; + width: 90%; + border: none; + font-size: 1.5rem; + border-bottom: solid #bfbfbf 1px; + display: block; + margin-left: auto; + margin-right: auto; +`; + +const SearchPlaceBtn = styled.button` + background-color: transparent; + width: 100%; + border: none; + font-size: 1.5rem; + padding: 0rem; + display: block; + margin-left: auto; + margin-right: auto; +`; + +const PinIcon = styled(PiMapPinFill)` + width: 1.7rem; + height: 1.7rem; + color: #545454; +`; + +const DateWrapper = styled.div` + width: 90%; + display: flex; + justify-content: start; + border-bottom: solid #bfbfbf 1px; + margin: auto; + font-size: 0; +`; diff --git a/src/pages/InviteFriendPage.js b/src/pages/InviteFriendPage.js index 625b323..72a047c 100644 --- a/src/pages/InviteFriendPage.js +++ b/src/pages/InviteFriendPage.js @@ -15,11 +15,11 @@ import { useRecoilValue } from "recoil"; const InviteFriendPage = () => { const SERVER_URL = process.env.REACT_APP_SERVER_URL; const navigate = useNavigate(); - - // navigate 하면서 받은 travel id 값 + const travelID = useRecoilValue(tripIdState); // travel의 정보 const [invitecode, setInvitecode] = useState(""); + const [title, setTitle] = useState(""); const [username, setUsername] = useState([]); const [userimg, setUserimg] = useState([]); diff --git a/src/pages/MypagePage.js b/src/pages/MypagePage.js index 2a07b72..ef9d041 100644 --- a/src/pages/MypagePage.js +++ b/src/pages/MypagePage.js @@ -45,7 +45,6 @@ const MypagePage = () => { }, []); const handleUserInfo = () => { - console.log(12123123); axios.get("http://localhost:5000/user", { withCredentials: true}) .then((res) => { const data = res.data.userinfo; diff --git a/src/recoil/commonState.js b/src/recoil/commonState.js index 920740d..6c27945 100644 --- a/src/recoil/commonState.js +++ b/src/recoil/commonState.js @@ -20,3 +20,4 @@ export const diaryIdState = atom({ default: "", }); + diff --git a/src/routes/router.js b/src/routes/router.js index 18fd8ab..6d6e260 100644 --- a/src/routes/router.js +++ b/src/routes/router.js @@ -9,7 +9,8 @@ import EditProfilPage from "../pages/EditProfilPage"; import JoinTripPage from "../pages/JoinTripPage"; import InviteFriendPage from "../pages/InviteFriendPage"; import TagPage from "../pages/TagPage"; - +import EditTripPage from "../pages/EditTripPage"; +import EditDiaryWritePage from "../pages/EditDiaryWritePage"; import React from "react"; import DiaryListPage from "../pages/DiaryListPage"; import MapPage from "../pages/MapPage"; @@ -25,6 +26,7 @@ const Router = () => { } /> } /> } /> + } /> } /> } /> } /> @@ -33,6 +35,7 @@ const Router = () => { } /> } /> } /> + } /> } />