Merge: merge from feature/125 to main

Fix: fix recoil reset issue and diary list page

package.json

@@ -20,15 +20,14 @@
     "axios": "^1.6.8",
     "cors": "^2.8.5",
     "crypto": "^1.0.1",
-    "axios": "^1.6.8",
     "date-fns": "^3.6.0",
     "datepicker": "^0.0.0",
     "dayjs": "^1.11.10",
     "dotenv": "^16.4.5",
     "jquery": "^3.7.1",
     "moment": "^2.30.1",
-    "prop-types": "^15.8.1",
     "path": "^0.12.7",
+    "prop-types": "^15.8.1",
     "querystring": "^0.2.1",
     "react": "^18.2.0",
     "react-calendar": "^5.0.0",

src/pages/DiaryListPage.js

@@ -7,11 +7,13 @@ import Avatar from "@mui/material/Avatar";
 import Button from "@mui/material/Button";
 import Pencil from "../assets/images/pencil.svg";
 import { useNavigate } from "react-router-dom";
+import { useLocation } from "react-router";
 import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
 import BottomNav from "../layout/BottomNav";
 import axios from "axios";
 import { useRecoilValue } from "recoil";
-import { tripNameState, tripIdState} from "../recoil/commonState";
+import { tripNameState } from "../recoil/commonState";
+import { tripIdState } from "../recoil/commonState";
 import defaultImageSrc from "../assets/images/defaultProfileImg.svg";
 
 export default function DiaryListPage() {
@@ -25,38 +27,49 @@ export default function DiaryListPage() {
   useEffect(() => {
     let completed = false;
     let userimgs = [];
-    console.log("아이디트립", tripId);
-    // eslint-disable-next-line func-style
-    async function get() {
+
+    const fetchImages = async () => {
       try {
-        const result = await axios.get(
-          `${process.env.REACT_APP_SERVER_URL}/diary/travel/${tripId}`,
-          { withCredentials: true },
-        );
         const Img = await axios.get(
           `${process.env.REACT_APP_SERVER_URL}/travel/${tripId}`,
           { 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);
+          console.error("사진 가져오기 중 에러가 발생했습니다:", error);
+        }
+      }
+    };
+
+    const fetchData = async () => {
+      try {
+        const result = await axios.get(
+          `${process.env.REACT_APP_SERVER_URL}/diary/travel/${tripId}`,
+          { withCredentials: true }
+        );
+        if (!completed) {
+          setData(result.data.diarys_info);
+          setLoading(true);
         }
       } catch (error) {
         if (!completed) {
           setError(error);
           setLoading(true);
+          console.error("데이터 가져오기 중 에러가 발생했습니다:", error);
         }
-        console.error("데이터 가져오기 중 에러가 발생했습니다:", error);
       }
-    }
+    };
+
+    fetchImages();
+    fetchData();
 
-    get();
     return () => {
       completed = true;
     };

src/pages/MypagePage.js

@@ -15,13 +15,17 @@ import DoDisturbOutlinedIcon from "@mui/icons-material/DoDisturbOutlined";
 import CancelContent from "../components/common/CancelContent";
 import BottomNav from "../layout/BottomNav";
 import axios from "axios";
+import { useRecoilState } from "recoil";
+import { tripNameState, tripIdState, diaryIdState } from "../recoil/commonState";
 
 const MypagePage = () => {
-  //axios get으로 받아온 username location으로 전달
   const navigate = useNavigate();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [message, setMessage] = useState("");
   const [userInfo, setUserInfo] = useState({ name: "", email: "", profileimg: "" });
+  const [tripName, setTripName] = useRecoilState(tripNameState);
+  const [tripId, setTripId] = useRecoilState(tripIdState);
+  const [diaryID, setDiaryId] = useRecoilState(diaryIdState);
 
   const toggleModal = () => {
     console.log(isModalOpen);
@@ -75,6 +79,9 @@ const MypagePage = () => {
       .then((response) => {
         const status = response.status;
         if (status === 200) {
+          setTripName("");
+          setTripId("");
+          setDiaryId("");
           setMessage("로그아웃 성공");
         } else if (status === 401) {
           setMessage("로그인이 필요합니다.");
@@ -95,6 +102,9 @@ const MypagePage = () => {
         const status = response.status;
         console.log("res",status);
         if (status === 200) {
+          setTripName("");
+          setTripId("");
+          setDiaryId("");
           setMessage("계정이 성공적으로 삭제되었습니다.");
         } else if (status === 404) {
           setMessage("사용자를 찾을 수 없습니다.");

src/recoil/commonState.js

@@ -1,4 +1,7 @@
 import { atom } from "recoil";
+import { recoilPersist } from "recoil-persist";
+
+const { persistAtom } = recoilPersist();
 
 export const dialogState = atom({
   key: "dialogState",
@@ -8,16 +11,19 @@ export const dialogState = atom({
 export const tripNameState = atom({
   key: "tripName",
   default: "",
+  effects_UNSTABLE: [persistAtom],
 });
 
 export const tripIdState = atom({
   key: "tripId",
   default: "",
+  effects_UNSTABLE: [persistAtom],
 });
 
 export const diaryIdState = atom ({
   key: "diaryId",
   default: "",
+  effects_UNSTABLE: [persistAtom],
 });
 
 export const userNameState = atom ({

yarn.lock

@@ -8219,17 +8219,10 @@ react-calendar@^5.0.0:
     get-user-locale "^2.2.1"
     warning "^4.0.0"
 
-<<<<<<< HEAD
-react-datepicker@^6.5.0:
-  version "6.6.0"
-  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-6.6.0.tgz#0128547211c8fece08fef0b5406efffff2d36f1f"
-  integrity sha512-ERC0/Q4pPC9bNIcGUpdCbHc+oCxhkU3WI3UOGHkyJ3A9fqALCYpEmLc5S5xvAd7DuCDdbsyW97oRPM6pWWwjww==
-=======
 react-datepicker@^6.9.0:
   version "6.9.0"
   resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-6.9.0.tgz#0ad234dad81d567ae64cad79697bbad69c95490b"
   integrity sha512-QTxuzeem7BUfVFWv+g5WuvzT0c5BPo+XTCNbMTZKSZQLU+cMMwSUHwspaxuIcDlwNcOH0tiJ+bh1fJ2yxOGYWA==
->>>>>>> 62ba6a64f7bf4ebda34f803192e877702c92163b
   dependencies:
     "@floating-ui/react" "^0.26.2"
     clsx "^2.1.0"
@@ -10347,7 +10340,6 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-
 zlib@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zlib/-/zlib-1.0.5.tgz#6e7c972fc371c645a6afb03ab14769def114fcc0"