Merge branch 'main' into feature/120

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/components/common/DiaryPreviewContent.js

@@ -136,6 +136,7 @@ const DiaryImage = styled.img`
   margin: 2rem 2rem 1rem 2rem;
   max-width: 100%;
   max-height: 100%;
+  object-fit: cover;
 `;
 
 const TitleDiv = styled.div`

src/components/common/map/MapDrawer.js

@@ -57,6 +57,7 @@ const TripImg = styled.img`
   width: 90%;
   height: 45%;
   border-radius: 1.5rem;
+  object-fit: cover;
 `;
 
 const InfoDiv = styled.div`

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/DiaryPage.js

@@ -21,7 +21,7 @@ const DiaryPage = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   useEffect(() => {
-    axios.get(`http://localhost:5000/diary/${diaryId}`, { withCredentials: true})
+    axios.get(`${process.env.REACT_APP_SERVER_URL}/diary/${diaryId}`, { withCredentials: true})
     .then((res) => {
       const data = res.data.diaryinfo;
       setDiaryInfo({
@@ -67,7 +67,7 @@ const DiaryPage = () => {
   };
 
   const closeModal = () => {
-    axios.delete(`http://localhost:5000/diary/${diaryId}`, { withCredentials: true})
+    axios.delete(`${process.env.REACT_APP_SERVER_URL}/diary/${diaryId}`, { withCredentials: true})
     .then((res) => {
       // console.log(res);
     })

src/pages/DiaryWritePage.js

@@ -59,7 +59,7 @@ const DiaryWritePage = () => {
       formData.append("images", file.fileObject);
     });
 
-    axios.post("http://localhost:5000/diary", formData, { withCredentials: true, headers: {"Content-Type": "multipart/form-data"} })
+    axios.post(`${process.env.REACT_APP_SERVER_URL}/diary`, formData, { withCredentials: true, headers: {"Content-Type": "multipart/form-data"} })
     .then((res) => {
       setDiaryId(res.data.diaryid);
       navigate("/showdiary");

src/pages/EditDiaryWritePage.js

@@ -79,7 +79,7 @@ const EditDiaryWritePage = () => {
     formData.append("originImage", files2PreviewURLs); // edit diary 시 수정이 아닌 원본 이미지
 
 
-    axios.put(`http://localhost:5000/diary/${diaryId}`, formData, { withCredentials: true, headers: {"Content-Type": "multipart/form-data"} })
+    axios.put(`${process.env.REACT_APP_SERVER_URL}/diary/${diaryId}`, formData, { withCredentials: true, headers: {"Content-Type": "multipart/form-data"} })
     .then((res) => {
       navigate("/showdiary");
     })

src/pages/EditProfilPage.js

@@ -41,7 +41,7 @@ const EditProfilPage = () => {
     }
 
 
-    axios.put("http://localhost:5000/user", formData,
+    axios.put(`${process.env.REACT_APP_SERVER_URL}/user`, formData,
       { withCredentials: true })
       .then((res) => {
         if (res === 404) {

src/pages/MainPage.js

@@ -7,13 +7,14 @@ import TagImgList from "../components/common/TagImgList";
 import AddTripDialog from "../components/common/AddTripDialog";
 import { React, useEffect, useState } from "react";
 import { useRecoilState } from "recoil";
-import { dialogState } from "../recoil/commonState";
+import { dialogState, userNameState } from "../recoil/commonState";
 import BottomNav from "../layout/BottomNav";
 import axios from "axios";
 
 const MainPage = () => {
   //db에서 get 해온 username or recoil에 저장한 내 정보
   const dummyName = "^get예정^";
+  const [userName, setUserName] = useRecoilState(userNameState);
 
   const [dialog, setDialog] = useRecoilState(dialogState);
   const handleOpen = () => {
@@ -24,7 +25,17 @@ const MainPage = () => {
   const [tagImages, setTagImages] = useState([]);
 
   useEffect(() => {
-    axios.get("http://localhost:5000/tag", { withCredentials: true})
+    axios.get(`${process.env.REACT_APP_SERVER_URL}/user`, { withCredentials: true})
+    .then((res) => {
+      setUserName(res.data.userinfo.name);
+    })
+  .catch((error) => {
+    console.log(error);
+  });
+  }, []);
+
+  useEffect(() => {
+    axios.get(`${process.env.REACT_APP_SERVER_URL}/tag`, { withCredentials: true})
     .then((res) => {
       const data = res.data.imageTags;
 
@@ -45,7 +56,7 @@ const MainPage = () => {
   return (
     <StMainPage>
       <IntroDiv>
-        <HiP>{dummyName}님&nbsp;반가워요!</HiP>
+        <HiP>{userName}님&nbsp;반가워요!</HiP>
         <WelcomeP>트립토리와 함께 여행을 기록해요.</WelcomeP>
       </IntroDiv>
       <MainDiv>

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);
@@ -45,7 +49,7 @@ const MypagePage = () => {
   }, []);
 
   const handleUserInfo = () => {
-    axios.get("http://localhost:5000/user", { withCredentials: true})
+    axios.get(`${process.env.REACT_APP_SERVER_URL}/user`, { withCredentials: true})
     .then((res) => {
       const data = res.data.userinfo;
       setUserInfo(
@@ -71,10 +75,13 @@ const MypagePage = () => {
   };
 
   const handleLogout = () => {
-    axios.delete("http://localhost:5000/user/logout", { withCredentials: true})
+    axios.delete(`${process.env.REACT_APP_SERVER_URL}/user/logout`, { withCredentials: true})
       .then((response) => {
         const status = response.status;
         if (status === 200) {
+          setTripName("");
+          setTripId("");
+          setDiaryId("");
           setMessage("로그아웃 성공");
         } else if (status === 401) {
           setMessage("로그인이 필요합니다.");
@@ -90,11 +97,14 @@ const MypagePage = () => {
 
 
   const DelAccount = () =>{
-    axios.delete("http://localhost:5000/user", { withCredentials: true})
+    axios.delete(`${process.env.REACT_APP_SERVER_URL}/user`, { withCredentials: true})
       .then((response) => {
         const status = response.status;
         console.log("res",status);
         if (status === 200) {
+          setTripName("");
+          setTripId("");
+          setDiaryId("");
           setMessage("계정이 성공적으로 삭제되었습니다.");
         } else if (status === 404) {
           setMessage("사용자를 찾을 수 없습니다.");

src/pages/TagPage.js

@@ -33,7 +33,7 @@ export default function TagPage() {
 
   const [tagImages, setTagImages] = useState([]);
   useEffect(() => {
-    axios.get(`http://localhost:5000/tag/${tagName}`, { withCredentials: true })
+    axios.get(`${process.env.REACT_APP_SERVER_URL}/tag/${tagName}`, { withCredentials: true })
       .then((res) => {
         const data = res.data.images;
         setTagImages(data);

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,15 +11,22 @@ 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 ({
+  key: "userName",
+  default: "",
+});

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"