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/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 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..68b6189 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 = () => {
 
@@ -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>
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 <div>
+    <div>
+      <DateDiv>
+        <CalenderImage src={calendar} />
+        <StyledDatePicker>
+          <DatePicker
+            placeholderText="날짜를 선택하세요"
+            selected={startDate}
+            dateFormat="yyyy-MM-dd"
+            onChange={(date) => setStartDate(date)}
+            selectsStart
+            startDate={startDate}
+          />
+        </StyledDatePicker>
+      </DateDiv>
+    </div>
+
+    <DiaryDiv>
+      <TitleBox
+        placeholder="제목을 입력하세요"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+      />
+      <ContentBox
+        type="text"
+        placeholder="내용을 입력하세요"
+        maxLength={1000}
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+      />
+    </DiaryDiv>
+
+    <Uploader onFilesChange={handleImageUpload} files={files2} setFiles={setFiles2} />
+
+    <BtnDiv>
+      <CancelBtn onClick={openCancelModal}>취소</CancelBtn>
+      <SaveBtn onClick={openSaveModal} disabled={!(startDate && title && content)} >저장</SaveBtn>
+    </BtnDiv>
+
+    {isCancelModalOpen && (
+      <Modal
+        content={
+          <ContentDiv>
+            작성을 취소하시겠습니까?
+          </ContentDiv>
+        }
+        w="70%"
+        h="15rem"
+        buttons={
+          <OkayDiv>
+            <OkayBtn className="no" onClick={closeModal}>아니오</OkayBtn>
+            <OkayBtn className="yes">예</OkayBtn>
+          </OkayDiv>
+        }
+      />
+    )}
+
+    {isSaveModalOpen && (
+      <Modal
+        content={
+          <ContentDiv>
+            일기를 저장할까요?
+          </ContentDiv>
+        }
+        w="70%"
+        h="15rem"
+        buttons={
+          <OkayDiv>
+            <OkayBtn className="no" onClick={closeModal}>취소</OkayBtn>
+            <OkayBtn className="yes" onClick={handleConfirm}>확인</OkayBtn>
+          </OkayDiv>
+        }
+      />
+    )}
+    <BottomNav />
+  </div>;
+};
+
+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/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: "",
+});
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 = () => {
         <Route path="/agree" element={<AgreePage />} />
         <Route path="/addtrip" element={<AddTripPage/>} />
         <Route path="/diary" element={<DiaryWritePage />} />
+        <Route path="/editdiary" element={<EditDiaryWritePage />} />
         <Route path="/mypage" element={<MypagePage />} />
         <Route path="/editprofil" element={<EditProfilPage />} />
         <Route path="/jointrip" element={<JoinTripPage />} />