Merge: merge feature/106 to main

Feat: diary write page diary edit, diary get, diary delete api connect

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) => {

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(

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);
     })

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 = () => {
 
@@ -21,8 +22,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 출력
+    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("date", moment(startDate).startOf("day").format("YYYY-MM-DDTHH:mm:ss.SSS[Z]"));
+    formData.append("travel", travelid); // travelid 대체
 
     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 = () => {
 
     <Uploader onFilesChange={handleImageUpload} files={files} setFiles={setFiles} />
 
-
     <BtnDiv>
       <CancelBtn onClick={openCancelModal}>취소</CancelBtn>
       <SaveBtn onClick={openSaveModal} disabled={!(startDate && title && content)} >저장</SaveBtn>