From 3277adefeeb21ef6e9edc3d54fefbd82db794a2a Mon Sep 17 00:00:00 2001 From: hummingbbird Date: Tue, 21 May 2024 13:11:12 +0900 Subject: [PATCH 01/23] Feat: create EditTripPage #100 --- src/components/common/TripListItem.js | 2 +- src/pages/AddTripPage.js | 2 - src/pages/EditTripPage.js | 290 ++++++++++++++++++++++++++ src/pages/MypagePage.js | 1 - src/routes/router.js | 3 +- 5 files changed, 293 insertions(+), 5 deletions(-) create mode 100644 src/pages/EditTripPage.js diff --git a/src/components/common/TripListItem.js b/src/components/common/TripListItem.js index f976349..c52a5c5 100644 --- a/src/components/common/TripListItem.js +++ b/src/components/common/TripListItem.js @@ -40,7 +40,7 @@ export default function TripListItem(props) { }; const goToEdit = () => { - navigate("/addtrip", { state: props.data._id }); + navigate("/edittrip", { state: props.data }); }; return ( diff --git a/src/pages/AddTripPage.js b/src/pages/AddTripPage.js index 3f05b2a..1dec69b 100644 --- a/src/pages/AddTripPage.js +++ b/src/pages/AddTripPage.js @@ -12,8 +12,6 @@ import moment from "moment"; import axios from "axios"; const AddTripPage = () => { - const SERVER_URL = process.env.REACT_APP_SERVER_URL; - const navigate = useNavigate(); //모달창(여행지 검색) 관리 변수 diff --git a/src/pages/EditTripPage.js b/src/pages/EditTripPage.js new file mode 100644 index 0000000..8c7a4ac --- /dev/null +++ b/src/pages/EditTripPage.js @@ -0,0 +1,290 @@ +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 BottomNav from "../layout/BottomNav"; +import moment from "moment"; +import axios from "axios"; + +const EditTripPage = () => { + const { state } = useLocation(); + const navigate = useNavigate(); + //모달창(여행지 검색) 관리 변수 + const [isModal, setIsModal] = useState(false); + + // 사용자 입력 정보(여행이름) + const [tripName, setTripName] = useState(state.title); + //사용자 입력 정보(여행지역) + const [tripPlace, setTripPlace] = useState(state.location.region); + const [longitude, setLongitude] = useState(state.location.longitude); + const [latitude, setLatitude] = useState(state.location.latitude); + //사용자 입력 정보(여행날짜) + const [dateRange, setDateRange] = useState([state.startdate, state.enddate]); + const [startDate, setStartDate] = useState(state.startdate); + const [endDate, setEndDate] = useState(state.enddate); + //사용자 업로드 이미지 url + const [imgUrl, setImgUrl] = useState(state.travelimg); + + // //모달창(여행지 검색) 관리 변수 + // const [isModal, setIsModal] = useState(false); + + // // 사용자 입력 정보(여행이름) + // const [tripName, setTripName] = useState(""); + // //사용자 입력 정보(여행지역) + // const [tripPlace, setTripPlace] = useState(""); + // const [longitude, setLongitude] = useState(""); + // const [latitude, setLatitude] = useState(""); + // //사용자 입력 정보(여행날짜) + // const [dateRange, setDateRange] = useState([null, null]); + // const [startDate, setStartDate] = useState(null); + // const [endDate, setEndDate] = useState(null); + // //사용자 업로드 이미지 url + // const [imgUrl, setImgUrl] = useState(null); + + // 여행 이름값 변경 + 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(dateRange[0]).toISOString(); + const endDate = moment(dateRange[1]).toISOString(); + const formData = new FormData(); + formData.append("title", tripName); + formData.append("startdate", startDate); + formData.append("enddate", endDate); + formData.append("location[latitude]", latitude); + formData.append("location[longitude]", longitude); + formData.append("image", imgUrl.fileObject); + + axios + .post(`${process.env.REACT_APP_SERVER_URL}`, formData, { + withCredentials: true, + headers: { "Content-Type": "multipart/form-data" }, + }) + .then((res) => { + console.log(res); + alert("저장 완료"); + navigate("/home"); + }) + .catch((error) => { + console.log(error); + }); + }; + + const handleCancel = () => { + navigate("/home"); + }; + + const openModal = () => { + setIsModal(true); + }; + + return ( +
+ {isModal && ( + + )} + + 여행 수정하기 + 취소 + + +
+ +
+ +
+ + + + + + + + + + + + + + + + + + + +
+ ); +}; + +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 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/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/routes/router.js b/src/routes/router.js index 18fd8ab..f874ff8 100644 --- a/src/routes/router.js +++ b/src/routes/router.js @@ -9,7 +9,7 @@ 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 React from "react"; import DiaryListPage from "../pages/DiaryListPage"; import MapPage from "../pages/MapPage"; @@ -33,6 +33,7 @@ const Router = () => { } /> } /> } /> + } /> } /> From ab6e74eae7f19e5596479edcec51893e26a20b4c Mon Sep 17 00:00:00 2001 From: hummingbbird Date: Tue, 21 May 2024 15:13:52 +0900 Subject: [PATCH 02/23] Feat: modify navigate data #100 --- src/pages/DiaryListPage.js | 2 +- src/pages/EditTripPage.js | 47 +++++++++++++++++++------------------- 2 files changed, 24 insertions(+), 25 deletions(-) diff --git a/src/pages/DiaryListPage.js b/src/pages/DiaryListPage.js index 2417459..391a50b 100644 --- a/src/pages/DiaryListPage.js +++ b/src/pages/DiaryListPage.js @@ -44,7 +44,7 @@ export default function DiaryListPage() { }; const goToCreate = () => { console.log(data); - navigate("/diary", {travelid: location.state.id}); + navigate("/diary", {state: location.state.id}); }; return ( diff --git a/src/pages/EditTripPage.js b/src/pages/EditTripPage.js index 8c7a4ac..48df099 100644 --- a/src/pages/EditTripPage.js +++ b/src/pages/EditTripPage.js @@ -9,8 +9,6 @@ import { useNavigate } from "react-router-dom"; import { useLocation } from "react-router"; import { COLOR } from "../styles/color"; import BottomNav from "../layout/BottomNav"; -import moment from "moment"; -import axios from "axios"; const EditTripPage = () => { const { state } = useLocation(); @@ -65,29 +63,30 @@ const EditTripPage = () => { // 여행떠나기 버튼 클릭 const handleSubmit = () => { - const startDate = moment(dateRange[0]).toISOString(); - const endDate = moment(dateRange[1]).toISOString(); - const formData = new FormData(); - formData.append("title", tripName); - formData.append("startdate", startDate); - formData.append("enddate", endDate); - formData.append("location[latitude]", latitude); - formData.append("location[longitude]", longitude); - formData.append("image", imgUrl.fileObject); + console.log(imgUrl); + // const startDate = moment(dateRange[0]).toISOString(); + // const endDate = moment(dateRange[1]).toISOString(); + // const formData = new FormData(); + // formData.append("title", tripName); + // formData.append("startdate", startDate); + // formData.append("enddate", endDate); + // formData.append("location[latitude]", latitude); + // formData.append("location[longitude]", longitude); + // formData.append("image", imgUrl.fileObject); - axios - .post(`${process.env.REACT_APP_SERVER_URL}`, formData, { - withCredentials: true, - headers: { "Content-Type": "multipart/form-data" }, - }) - .then((res) => { - console.log(res); - alert("저장 완료"); - navigate("/home"); - }) - .catch((error) => { - console.log(error); - }); + // axios + // .post(`${process.env.REACT_APP_SERVER_URL}`, formData, { + // withCredentials: true, + // headers: { "Content-Type": "multipart/form-data" }, + // }) + // .then((res) => { + // console.log(res); + // alert("저장 완료"); + // navigate("/home"); + // }) + // .catch((error) => { + // console.log(error); + // }); }; const handleCancel = () => { From e6add3de4e6ba17a654ff952b91341e09cc25648 Mon Sep 17 00:00:00 2001 From: HeeNamgoong Date: Tue, 21 May 2024 15:57:13 +0900 Subject: [PATCH 03/23] Feat: add edit diary write page #106 --- src/pages/DiaryPage.js | 2 +- src/pages/EditDiaryWritePage.js | 293 ++++++++++++++++++++++++++++++++ src/routes/router.js | 2 + 3 files changed, 296 insertions(+), 1 deletion(-) create mode 100644 src/pages/EditDiaryWritePage.js diff --git a/src/pages/DiaryPage.js b/src/pages/DiaryPage.js index 6e87fa3..518209d 100644 --- a/src/pages/DiaryPage.js +++ b/src/pages/DiaryPage.js @@ -58,7 +58,7 @@ const DiaryPage = () => { console.log(error); }); - navigate("/diary"); // {diaryid} 추가 + navigate("/editdiary"); // {diaryid} 추가 }; diff --git a/src/pages/EditDiaryWritePage.js b/src/pages/EditDiaryWritePage.js new file mode 100644 index 0000000..42cfba7 --- /dev/null +++ b/src/pages/EditDiaryWritePage.js @@ -0,0 +1,293 @@ +import styled from "styled-components"; +import { React, useState } 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"; + +const EditDiaryWritePage = () => { + + const [startDate, setStartDate] = useState(); + const [title, setTitle] = useState(""); + const [content, setContent] = useState(""); + const [isCancelModalOpen, setIsCancelModalOpen] = useState(false); // Cancel 버튼을 위한 모달 상태 + const [isSaveModalOpen, setIsSaveModalOpen] = useState(false); // Save 버튼을 위한 모달 상태 + const [imagePreview, setImagePreview] = useState(null); + const [files, setFiles] = useState([]); + const { state } = useLocation(); + // const [travelid, setTravelId] = useState(state); + 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", startDate.toISOString().split("T")[0]); + formData.append("travel", "664c257dac93cdbc69a66bf5"); // travelid 대체 + + files.forEach((file) => { + formData.append("images", file.fileObject); + }); + + for (const [key, value] of formData.entries()) { + console.log(`${key}: ${value}`); + } + + axios.post("http://localhost:5000/diary", formData, { withCredentials: true, headers: {"Content-Type": "multipart/form-data"} }) + .then((res) => { + setDiaryId({ + diaryid: res.data.diaryid, + }); + const diary_id = res.data.diaryid; + 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/routes/router.js b/src/routes/router.js index 18fd8ab..f7822fa 100644 --- a/src/routes/router.js +++ b/src/routes/router.js @@ -9,6 +9,7 @@ import EditProfilPage from "../pages/EditProfilPage"; import JoinTripPage from "../pages/JoinTripPage"; import InviteFriendPage from "../pages/InviteFriendPage"; import TagPage from "../pages/TagPage"; +import EditDiaryWritePage from "../pages/EditDiaryWritePage"; import React from "react"; import DiaryListPage from "../pages/DiaryListPage"; @@ -25,6 +26,7 @@ const Router = () => { } /> } /> } /> + } /> } /> } /> } /> From 7c05f7ae6763669762663cd0473cf59a452dcd7f Mon Sep 17 00:00:00 2001 From: HeeNamgoong Date: Tue, 21 May 2024 16:20:35 +0900 Subject: [PATCH 04/23] Feat: succeed edit diary get date, ttitle, content state(except url image) #106 --- src/pages/DiaryPage.js | 2 +- src/pages/DiaryWritePage.js | 2 +- src/pages/EditDiaryWritePage.js | 13 ++++++++----- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/pages/DiaryPage.js b/src/pages/DiaryPage.js index 518209d..bdfa880 100644 --- a/src/pages/DiaryPage.js +++ b/src/pages/DiaryPage.js @@ -58,7 +58,7 @@ const DiaryPage = () => { console.log(error); }); - navigate("/editdiary"); // {diaryid} 추가 + navigate("/editdiary", { state: { diaryInfo } }); }; diff --git a/src/pages/DiaryWritePage.js b/src/pages/DiaryWritePage.js index dadbee6..a896e9b 100644 --- a/src/pages/DiaryWritePage.js +++ b/src/pages/DiaryWritePage.js @@ -47,7 +47,7 @@ const DiaryWritePage = () => { formData.append("title", title); formData.append("content", content); formData.append("date", startDate.toISOString().split("T")[0]); - formData.append("travel", "664c257dac93cdbc69a66bf5"); // travelid 대체 + formData.append("travel", "664c3dc4300f7b0c6126c483"); // travelid 대체 files.forEach((file) => { formData.append("images", file.fileObject); diff --git a/src/pages/EditDiaryWritePage.js b/src/pages/EditDiaryWritePage.js index 42cfba7..8217d1d 100644 --- a/src/pages/EditDiaryWritePage.js +++ b/src/pages/EditDiaryWritePage.js @@ -12,15 +12,18 @@ import { useNavigate } from "react-router-dom"; import { useLocation } from "react-router"; 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 [startDate, setStartDate] = useState(); - const [title, setTitle] = useState(""); - const [content, setContent] = useState(""); const [isCancelModalOpen, setIsCancelModalOpen] = useState(false); // Cancel 버튼을 위한 모달 상태 const [isSaveModalOpen, setIsSaveModalOpen] = useState(false); // Save 버튼을 위한 모달 상태 const [imagePreview, setImagePreview] = useState(null); - const [files, setFiles] = useState([]); - const { state } = useLocation(); + // const [files, setFiles] = useState([]); // const [travelid, setTravelId] = useState(state); const [diaryId, setDiaryId] = useState({ diaryid: "" }); From 6363a04a7d53aa2785cc417e9c030869cb6043bd Mon Sep 17 00:00:00 2001 From: hummingbbird Date: Tue, 21 May 2024 18:00:17 +0900 Subject: [PATCH 05/23] Feat: change get travelData form #100 --- src/components/common/TripList.js | 8 ++++++-- src/components/common/TripListItem.js | 4 ++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/common/TripList.js b/src/components/common/TripList.js index 3374bca..b8893c9 100644 --- a/src/components/common/TripList.js +++ b/src/components/common/TripList.js @@ -7,6 +7,8 @@ import axios from "axios"; export default function TripList() { const [loading, setLoading] = useState(false); const [data, setData] = useState([]); + const [url, setUrl] = useState(""); + // const [tripInfo, setTripInfo] = useState({ _id:"", startdate:"", enddate:"", invited:[], ivtoken:"", location: {}, title:"", travelimg:"" }); useEffect(() => { let completed = false; @@ -18,6 +20,8 @@ export default function TripList() { ); if (!completed) { setData(result.data.travels); + setUrl(result.data.travelUrls); + console.log(result); } setLoading(true); } @@ -37,8 +41,8 @@ export default function TripList() { scrollbarWidth: "none", }} > - {data.map((it) => { - return ; + {data.map((it,index) => { + return ; })} ); diff --git a/src/components/common/TripListItem.js b/src/components/common/TripListItem.js index c52a5c5..075c8f6 100644 --- a/src/components/common/TripListItem.js +++ b/src/components/common/TripListItem.js @@ -47,7 +47,7 @@ export default function TripListItem(props) { - + {props.data.title} @@ -97,7 +97,7 @@ TripListItem.propTypes = { title: PropTypes.string.isRequired, startdate: PropTypes.string.isRequired, enddate: PropTypes.string.isRequired, - travelimg: PropTypes.string.isRequired, + url: PropTypes.string.isRequired, }; const CancelModal = styled(Modal)``; From 366c52b42f36ebc9d4803a964aaca22d93e25f7a Mon Sep 17 00:00:00 2001 From: hummingbbird Date: Wed, 22 May 2024 14:09:05 +0900 Subject: [PATCH 06/23] Chore: delete console codes #100 --- src/components/common/TripList.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/common/TripList.js b/src/components/common/TripList.js index b8893c9..2cd98fa 100644 --- a/src/components/common/TripList.js +++ b/src/components/common/TripList.js @@ -21,7 +21,6 @@ export default function TripList() { if (!completed) { setData(result.data.travels); setUrl(result.data.travelUrls); - console.log(result); } setLoading(true); } From 4c524391a26f476251c1bf5da402d7fa143962ea Mon Sep 17 00:00:00 2001 From: HeeNamgoong Date: Wed, 22 May 2024 14:41:47 +0900 Subject: [PATCH 07/23] Feat: add travel id showdiary to diarylistpage #106 --- src/pages/DiaryPage.js | 9 +++++---- src/pages/DiaryWritePage.js | 12 ++++++++---- src/pages/EditDiaryWritePage.js | 2 +- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/pages/DiaryPage.js b/src/pages/DiaryPage.js index bdfa880..9c1c670 100644 --- a/src/pages/DiaryPage.js +++ b/src/pages/DiaryPage.js @@ -15,12 +15,13 @@ const DiaryPage = () => { 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 [isModalOpen, setIsModalOpen] = useState(false); useEffect(() => { - axios.get(`http://localhost:5000/diary/${id}`, { withCredentials: true}) + console.log("안녕2?",setDiaryInfo.travel); + axios.get(`http://localhost:5000/diary/${id.diaryid}`, { withCredentials: true}) .then((res) => { const data = res.data.diaryinfo; setDiaryInfo({ @@ -42,7 +43,7 @@ const DiaryPage = () => { const goToTriptable = () => { - navigate("/triptable"); + navigate("/triptable", {state: { id: setDiaryInfo.travel }}); }; const goToEditDiary = () => { @@ -53,7 +54,7 @@ const DiaryPage = () => { formData.append("date", diaryInfo.date); formData.append("images", diaryInfo.url); - axios.put(`http://localhost:5000/diary/${id}`, formData, { withCredentials: true}) + axios.put(`http://localhost:5000/diary/${id.diaryid}`, formData, { withCredentials: true}) .catch((error) => { console.log(error); }); diff --git a/src/pages/DiaryWritePage.js b/src/pages/DiaryWritePage.js index a896e9b..66a1a54 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"; @@ -21,8 +21,12 @@ const DiaryWritePage = () => { const [imagePreview, setImagePreview] = useState(null); const [files, setFiles] = useState([]); const { state } = useLocation(); - // const [travelid, setTravelId] = useState(state); + const [travelid, setTravelId] = useState(state); const [diaryId, setDiaryId] = useState({ diaryid: "" }); + useEffect(() => { + console.log("Travel ID:", travelid); // Travel ID 출력 + // + }); const navigate = useNavigate(); @@ -47,7 +51,7 @@ const DiaryWritePage = () => { formData.append("title", title); formData.append("content", content); formData.append("date", startDate.toISOString().split("T")[0]); - formData.append("travel", "664c3dc4300f7b0c6126c483"); // travelid 대체 + formData.append("travel", travelid); // travelid 대체 files.forEach((file) => { formData.append("images", file.fileObject); @@ -63,7 +67,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); diff --git a/src/pages/EditDiaryWritePage.js b/src/pages/EditDiaryWritePage.js index 8217d1d..f332479 100644 --- a/src/pages/EditDiaryWritePage.js +++ b/src/pages/EditDiaryWritePage.js @@ -60,7 +60,7 @@ const EditDiaryWritePage = () => { console.log(`${key}: ${value}`); } - axios.post("http://localhost:5000/diary", formData, { withCredentials: true, headers: {"Content-Type": "multipart/form-data"} }) + axios.put("http://localhost:5000/diary", formData, { withCredentials: true, headers: {"Content-Type": "multipart/form-data"} }) .then((res) => { setDiaryId({ diaryid: res.data.diaryid, From d68088c8ef611c25eebe2c2dee083ff70057c4bc Mon Sep 17 00:00:00 2001 From: HeeNamgoong Date: Wed, 22 May 2024 15:59:58 +0900 Subject: [PATCH 08/23] Feat: add tripId recoil #106 --- src/recoil/commonState.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/recoil/commonState.js b/src/recoil/commonState.js index 56bbd8d..484fc0c 100644 --- a/src/recoil/commonState.js +++ b/src/recoil/commonState.js @@ -9,3 +9,8 @@ export const tripNameState = atom({ key: "tripName", default: "", }); + +export const tripIdState = atom({ + key: "tripId", + default: "", +}); From ecd02e5d95f5a1ab004b8edc12677f5792bbf5b7 Mon Sep 17 00:00:00 2001 From: hummingbbird Date: Wed, 22 May 2024 16:56:48 +0900 Subject: [PATCH 09/23] Chore: delete unused comment #100 --- src/components/common/TripList.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/common/TripList.js b/src/components/common/TripList.js index 2cd98fa..59528fe 100644 --- a/src/components/common/TripList.js +++ b/src/components/common/TripList.js @@ -8,7 +8,6 @@ export default function TripList() { const [loading, setLoading] = useState(false); const [data, setData] = useState([]); const [url, setUrl] = useState(""); - // const [tripInfo, setTripInfo] = useState({ _id:"", startdate:"", enddate:"", invited:[], ivtoken:"", location: {}, title:"", travelimg:"" }); useEffect(() => { let completed = false; From f1fa1bc0056a09c6fa61500c05feb1c79b8c8773 Mon Sep 17 00:00:00 2001 From: HeeNamgoong Date: Wed, 22 May 2024 17:08:38 +0900 Subject: [PATCH 10/23] Fix: modify travel id navigate to recoil #106 --- src/pages/DiaryListPage.js | 4 +++- src/pages/DiaryPage.js | 8 ++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/pages/DiaryListPage.js b/src/pages/DiaryListPage.js index 3b3ee0d..a61a01a 100644 --- a/src/pages/DiaryListPage.js +++ b/src/pages/DiaryListPage.js @@ -15,16 +15,18 @@ import BottomNav from "../layout/BottomNav"; import axios from "axios"; import { useRecoilValue } from "recoil"; import { tripNameState } from "../recoil/commonState"; +import { tripIdState } from "../recoil/commonState"; export default function DiaryListPage() { const tripName = useRecoilValue(tripNameState); + const tripId = useRecoilValue(tripIdState); const navigate = useNavigate(); const location = useLocation(); const [loading, setLoading] = useState(false); const [data, setData] = useState([]); useEffect(() => { let completed = false; - + console.log("아이디트립",tripId); // eslint-disable-next-line func-style async function get() { const result = await axios.get( diff --git a/src/pages/DiaryPage.js b/src/pages/DiaryPage.js index 9c1c670..93a7ec2 100644 --- a/src/pages/DiaryPage.js +++ b/src/pages/DiaryPage.js @@ -9,6 +9,8 @@ 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(); @@ -16,11 +18,11 @@ const DiaryPage = () => { const { state } = useLocation(); const [id, setId] = useState(state); + const [tripId, setTripId] = useRecoilState(tripIdState); const [isModalOpen, setIsModalOpen] = useState(false); useEffect(() => { - console.log("안녕2?",setDiaryInfo.travel); axios.get(`http://localhost:5000/diary/${id.diaryid}`, { withCredentials: true}) .then((res) => { const data = res.data.diaryinfo; @@ -43,7 +45,9 @@ const DiaryPage = () => { const goToTriptable = () => { - navigate("/triptable", {state: { id: setDiaryInfo.travel }}); + setTripId(diaryInfo.travel); + // navigate("/triptable", {state: { id: setDiaryInfo.travel }}); + navigate("/triptable"); }; const goToEditDiary = () => { From c1090ec4e6701388c9ffe81bbdeb61409850a34b Mon Sep 17 00:00:00 2001 From: hummingbbird Date: Wed, 22 May 2024 18:21:45 +0900 Subject: [PATCH 11/23] Feat: change edit page #100 --- src/components/common/ImageUploader.js | 5 +- src/components/common/TripListItem.js | 3 +- src/pages/AddTripPage.js | 3 +- src/pages/EditTripPage.js | 142 +++++++++++++++---------- 4 files changed, 95 insertions(+), 58 deletions(-) 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/TripListItem.js b/src/components/common/TripListItem.js index a3df22a..144ce4e 100644 --- a/src/components/common/TripListItem.js +++ b/src/components/common/TripListItem.js @@ -45,7 +45,8 @@ export default function TripListItem(props) { }; const goToEdit = () => { - navigate("/edittrip", { state: props.data }); + console.log(props.data); + navigate("/edittrip", { state: {state: props.data, url: props.url }}); }; return ( diff --git a/src/pages/AddTripPage.js b/src/pages/AddTripPage.js index 979dd82..4fda2be 100644 --- a/src/pages/AddTripPage.js +++ b/src/pages/AddTripPage.js @@ -14,6 +14,7 @@ import moment from "moment"; import axios from "axios"; const AddTripPage = () => { + const SERVER_URL = process.env.REACT_APP_SERVER_URL; const navigate = useNavigate(); //모달창(여행지 검색) 관리 변수 @@ -129,7 +130,7 @@ const AddTripPage = () => {
- +
diff --git a/src/pages/EditTripPage.js b/src/pages/EditTripPage.js index 48df099..711e991 100644 --- a/src/pages/EditTripPage.js +++ b/src/pages/EditTripPage.js @@ -8,7 +8,11 @@ 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(); @@ -16,34 +20,30 @@ const EditTripPage = () => { //모달창(여행지 검색) 관리 변수 const [isModal, setIsModal] = useState(false); + const [success, setIsSuccess] = useState(false); // 사용자 입력 정보(여행이름) - const [tripName, setTripName] = useState(state.title); + const [tripName, setTripName] = useState(state.state.title); //사용자 입력 정보(여행지역) - const [tripPlace, setTripPlace] = useState(state.location.region); - const [longitude, setLongitude] = useState(state.location.longitude); - const [latitude, setLatitude] = useState(state.location.latitude); + 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.startdate, state.enddate]); - const [startDate, setStartDate] = useState(state.startdate); - const [endDate, setEndDate] = useState(state.enddate); + 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.travelimg); + const [imgUrl, setImgUrl] = useState(state.url); - // //모달창(여행지 검색) 관리 변수 - // const [isModal, setIsModal] = useState(false); - - // // 사용자 입력 정보(여행이름) - // const [tripName, setTripName] = useState(""); - // //사용자 입력 정보(여행지역) - // const [tripPlace, setTripPlace] = useState(""); - // const [longitude, setLongitude] = useState(""); - // const [latitude, setLatitude] = useState(""); - // //사용자 입력 정보(여행날짜) - // const [dateRange, setDateRange] = useState([null, null]); - // const [startDate, setStartDate] = useState(null); - // const [endDate, setEndDate] = useState(null); - // //사용자 업로드 이미지 url - // const [imgUrl, setImgUrl] = useState(null); + const openSuccessModal = () => { + setIsSuccess(true); + }; + const closeSuccessModal = () => { + setIsSuccess(false); + navigate("/home"); + }; // 여행 이름값 변경 const handleNameChange = (e) => { @@ -63,30 +63,32 @@ const EditTripPage = () => { // 여행떠나기 버튼 클릭 const handleSubmit = () => { - console.log(imgUrl); - // const startDate = moment(dateRange[0]).toISOString(); - // const endDate = moment(dateRange[1]).toISOString(); - // const formData = new FormData(); - // formData.append("title", tripName); - // formData.append("startdate", startDate); - // formData.append("enddate", endDate); - // formData.append("location[latitude]", latitude); - // formData.append("location[longitude]", longitude); - // formData.append("image", imgUrl.fileObject); + 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 - // .post(`${process.env.REACT_APP_SERVER_URL}`, formData, { - // withCredentials: true, - // headers: { "Content-Type": "multipart/form-data" }, - // }) - // .then((res) => { - // console.log(res); - // alert("저장 완료"); - // navigate("/home"); - // }) - // .catch((error) => { - // console.log(error); - // }); + 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 = () => { @@ -107,13 +109,26 @@ const EditTripPage = () => { setLatitude={setLatitude} /> )} + {success && ( + } + closeModals={closeSuccessModal} + buttons={ + + 예 + + } + w="80%" + h="22%" + /> + )} 여행 수정하기 취소
- +
@@ -150,13 +165,13 @@ const EditTripPage = () => {