diff --git a/src/components/common/DiaryPreviewContent.js b/src/components/common/DiaryPreviewContent.js
index e96483a..4d0da19 100644
--- a/src/components/common/DiaryPreviewContent.js
+++ b/src/components/common/DiaryPreviewContent.js
@@ -6,8 +6,13 @@ import { COLOR } from "../../styles/color";
 import leftBtn from "../../assets/icons/diary_left_btn.svg";
 import rightBtn from "../../assets/icons/diary_right_btn.svg";
 import moment from "moment";
+import { useRecoilState } from "recoil";
+import { tripIdState, diaryIdState } from "../../recoil/commonState";
 
 const DiaryPreviewContent = ({ diaries }) => {
+
+  const [tripId, setTripId] = useRecoilState(tripIdState);
+  const [diaryId, setDiaryId] = useRecoilState(diaryIdState);
   const navigate = useNavigate();
   const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
   const sliderRef = useRef(null);
@@ -31,8 +36,10 @@ const DiaryPreviewContent = ({ diaries }) => {
   };
 
   const goToDiary = () => {
-    const currentDiary = diaries[currentSlideIndex];
-    navigate("/showdiary", { state: currentDiary.diaryID });
+    setTripId(diaries[currentSlideIndex].travelID);
+    setDiaryId(diaries[currentSlideIndex].diaryID);
+
+    navigate("/showdiary");
   };
 
   let content = null; // 조건부 렌더링을 위한 변수
@@ -83,6 +90,7 @@ DiaryPreviewContent.propTypes = {
       diaryTitle: PropTypes.string.isRequired,
       imagePath: PropTypes.string.isRequired,
       username: PropTypes.string.isRequired,
+      travelID: PropTypes.string.isRequired,
     }),
   ).isRequired,
 };
diff --git a/src/components/common/TripCalendar.js b/src/components/common/TripCalendar.js
index 80a34d6..1949832 100644
--- a/src/components/common/TripCalendar.js
+++ b/src/components/common/TripCalendar.js
@@ -120,6 +120,7 @@ TripCalendar.propTypes = {
       diaryTitle: PropTypes.string.isRequired,
       imagePath: PropTypes.string.isRequired,
       username: PropTypes.string.isRequired,
+      travelID: PropTypes.string.isRequired,
     }),
   ).isRequired,
 };
diff --git a/src/pages/CalendarPage.js b/src/pages/CalendarPage.js
index 04b2a82..b4457ee 100644
--- a/src/pages/CalendarPage.js
+++ b/src/pages/CalendarPage.js
@@ -15,13 +15,15 @@ const CalendarPage = () => {
     axios
       .get(`${SERVER_URL}/diary`, { withCredentials: true })
       .then((res) => {
+        console.log(res);
         const transformedData = res.data.diarys_info.map((item) => {
           return {
             date: item.diary.date,
             username: item.diary.userName,
             diaryTitle: item.diary.title,
             imagePath: item.url,
-            diaryID: item.diary._id
+            diaryID: item.diary._id,
+            travelID: item.diary.travel,
           };
         });
         setDiaryInfo(transformedData);
diff --git a/src/pages/InviteFriendPage.js b/src/pages/InviteFriendPage.js
index 638a023..72a047c 100644
--- a/src/pages/InviteFriendPage.js
+++ b/src/pages/InviteFriendPage.js
@@ -6,19 +6,20 @@ import FriendList from "../components/common/FriendList.js";
 import copyIcon from "../assets/icons/copy.svg";
 import xicon from "../assets/icons/x-icon.svg";
 import BottomNav from "../layout/BottomNav";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import Modal from "../components/common/Modal";
 import SuccessCopyContent from "../components/common/SuccessCopyContent.js";
+import { tripIdState } from "../recoil/commonState";
+import { useRecoilValue } from "recoil";
 
 const InviteFriendPage = () => {
   const SERVER_URL = process.env.REACT_APP_SERVER_URL;
   const navigate = useNavigate();
-  // navigate 하면서 받은 travel id 값
-  const { state } = useLocation();
-  // const travelID = state; <----------------나중에 주석 풀고 다음 줄 지우기
-  const travelID = "664f3b79e7ecfaede85a7c1f"; // 임시로 쓴 것
+  
+  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/recoil/commonState.js b/src/recoil/commonState.js
index 484fc0c..6c27945 100644
--- a/src/recoil/commonState.js
+++ b/src/recoil/commonState.js
@@ -14,3 +14,10 @@ export const tripIdState = atom({
   key: "tripId",
   default: "",
 });
+
+export const diaryIdState = atom({
+  key: "diaryId",
+  default: "",
+});
+
+