Merge branch 'main' into feature/116

TripTory · May 27, 2024 · 3949728 · 3949728
2 parents 7afab39 + 39c347d
commit 3949728
Show file tree

Hide file tree

Showing 17 changed files with 750 additions and 65 deletions.
diff --git a/src/components/common/DiaryList.js b/src/components/common/DiaryList.js
@@ -4,17 +4,19 @@ import DiaryListItem from "./DiaryListItem";
 import { PropTypes } from "prop-types";
 
 export default function TripTable(props) {
+  console.log(props);
   return (
     <StTripTable>
-      {props.data.map((it)=> {
-        return <DiaryListItem key={it._id} data={it}/>;
-      })}
+      {
+        props.data.map((it) => {
+          return <DiaryListItem key={it._id} data={it.diary} img={it.url}/>;
+        })}
     </StTripTable>
   );
 }
 
 TripTable.propTypes = {
-  data: PropTypes.node.isRequired,
+  data: PropTypes.array.isRequired,
 };
 
 const StTripTable = styled.div`

diff --git a/src/components/common/DiaryListItem.js b/src/components/common/DiaryListItem.js
@@ -28,12 +28,12 @@ export default function DiaryListItem(props) {
             <TitleP>{props.data.title}</TitleP>
             <DateDiv>
               <DateP>{props.data.startdate}</DateP>
-              <UserP>{props.data.userId}</UserP>
+              <UserP>{props.data.userName}</UserP>
             </DateDiv>
           </InfoDiv>
         </ContentDiv>
         <ListItemAvatar>
-          <Avatar src={props.data.img.imgpath} sx={{ width: "5rem", height: "5rem" }}></Avatar>
+          <Avatar src={props.img} sx={{ width: "5rem", height: "5rem" }}></Avatar>
         </ListItemAvatar>
       </ListItem>
     </StDiaryListItem>
@@ -46,7 +46,6 @@ DiaryListItem.propTypes = {
   date: PropTypes.string.isRequired,
   img: PropTypes.node.isRequired,
   imgpath: PropTypes.string.isRequired,
-  userId: PropTypes.string.isRequired,
 };
 const StDiaryListItem = styled.div`
   display: flex;
@@ -55,7 +54,7 @@ const StDiaryListItem = styled.div`
   border: 0.2rem solid rgba(228, 228, 228);
   border-radius: 1rem;
   width: 100%;
-  height: 100%;
+  height: 10rem;
   margin-bottom: 0.8rem;
   box-shadow: 1px 1px 3px rgba(228, 228, 228);
 `;

diff --git a/src/components/common/ImageUploader.js b/src/components/common/ImageUploader.js
@@ -3,9 +3,9 @@ import PropTypes from "prop-types";
 import { AiFillCamera } from "react-icons/ai";
 // import axios from "axios";
 
-const ImageUploader = ({onChange}) => {
+const ImageUploader = ({onChange, url}) => {
   const [selectedFile, setSelectedFile] = useState(null);
-  const [previewUrl, setPreviewUrl] = useState(null);
+  const [previewUrl, setPreviewUrl] = useState(url);
   const fileInput = useRef(null);
   const setFile = (e) => {};
 
@@ -87,6 +87,7 @@ const ImageUploader = ({onChange}) => {
 
 ImageUploader.propTypes = {
   onChange: PropTypes.func,
+  url: PropTypes.string.isRequired,
 };
 
 export default ImageUploader;
diff --git 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/components/common/TripList.js b/src/components/common/TripList.js
@@ -10,6 +10,7 @@ export default function TripList() {
   const [tripName, setTripName] = useRecoilState(tripNameState);
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState([]);
+  const [url, setUrl] = useState("");
   useEffect(() => {
     let completed = false;
 
@@ -21,6 +22,7 @@ export default function TripList() {
       );
       if (!completed) {
         setData(result.data.travels);
+        setUrl(result.data.travelUrls);
       }
       setLoading(true);
     }
@@ -40,8 +42,8 @@ export default function TripList() {
         scrollbarWidth: "none",
       }}
     >
-      {data.map((it) => {
-        return <TripListItem key={it._id} data={it}/>;
+      {data && data.map((it,index) => {
+        return <TripListItem key={it._id} data={it} url={url[index]}/>;
       })}
     </StTripList>
   );

diff --git a/src/components/common/TripListItem.js b/src/components/common/TripListItem.js
@@ -21,6 +21,7 @@ export default function TripListItem(props) {
 
   const goToDiaryList = () => {
     setTripName(props.data.title);
+    // console.log("props.data._id: ", props.data._id);
     navigate("/triptable", {
       state: { id: props.data._id},
     });
@@ -45,14 +46,15 @@ export default function TripListItem(props) {
   };
 
   const goToEdit = () => {
-    navigate("/addtrip", { state: props.data._id });
+    console.log(props.data);
+    navigate("/edittrip", { state: {state: props.data, url: props.url }});
   };
 
   return (
     <StTripListItem>
       <ListItem>
         <ListItemAvatar>
-          <Avatar src={props.data.travelimg} />
+          <Avatar src={props.url} />
         </ListItemAvatar>
         <InfoDiv>
           <TitleP onClick={goToDiaryList}>{props.data.title}</TitleP>
@@ -98,11 +100,7 @@ export default function TripListItem(props) {
 
 TripListItem.propTypes = {
   data: PropTypes.node.isRequired,
-  _id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  startdate: PropTypes.string.isRequired,
-  enddate: PropTypes.string.isRequired,
-  travelimg: PropTypes.string.isRequired,
+  url: PropTypes.array.isRequired,
 };
 
 const CancelModal = styled(Modal)``;

diff --git a/src/components/common/map/MapDrawer.js b/src/components/common/map/MapDrawer.js
@@ -5,7 +5,18 @@ import { PropTypes } from "prop-types";
 import Jeju from "../../../assets/images/jeju.jpg";
 import Button from "@mui/material/Button";
 import LocationOnIcon from "@mui/icons-material/LocationOn";
+import { useNavigate } from "react-router";
+import { useRecoilState } from "recoil";
+import { tripNameState } from "../../../recoil/commonState";
 const MapDrawer = (props) => {
+  const navigate = useNavigate();
+  const [tripName, setTripName] = useRecoilState(tripNameState);
+  const goToDiary = () => {
+    setTripName(props.data.title);
+    navigate("/triptable", {
+      state: { id: props.data._id},
+    });
+  };
   return (
     <StMapDrawer>
       <TripImg src={props.url} />
@@ -17,7 +28,7 @@ const MapDrawer = (props) => {
           <LocationP>{props.data.location.region}</LocationP>
         </LocationDiv>
       </InfoDiv>
-      <GoToTripBtn>여행 보러 가기</GoToTripBtn>
+      <GoToTripBtn onClick={goToDiary}>여행 보러 가기</GoToTripBtn>
     </StMapDrawer>
   );
 };

diff --git a/src/pages/AddTripPage.js b/src/pages/AddTripPage.js
@@ -15,7 +15,6 @@ import axios from "axios";
 
 const AddTripPage = () => {
   const SERVER_URL = process.env.REACT_APP_SERVER_URL;
-
   const navigate = useNavigate();
 
   //모달창(여행지 검색) 관리 변수
@@ -131,7 +130,7 @@ const AddTripPage = () => {
       </TitleContainer>
       <EmptyContainer />
       <div>
-        <ImageUploader onChange={setImgUrl} />
+        <ImageUploader onChange={setImgUrl} url={null}/>
       </div>
       <EmptyContainer />
       <div></div>

diff --git a/src/pages/DiaryListPage.js b/src/pages/DiaryListPage.js
@@ -1,12 +1,10 @@
-import React, {useState, useEffect} from "react";
+import React, { useState, useEffect } from "react";
 import { COLOR } from "../styles/color";
 import styled from "styled-components";
 import DiaryList from "../components/common/DiaryList";
 import Greenbar from "../assets/icons/greenbar.svg";
 import Avatar from "@mui/material/Avatar";
 import Button from "@mui/material/Button";
-import Busan from "../assets/images/busan.jpg";
-import Gunsan from "../assets/images/gunsan.jpg";
 import Pencil from "../assets/images/pencil.svg";
 import { useNavigate } from "react-router-dom";
 import { useLocation } from "react-router";
@@ -15,40 +13,65 @@ import BottomNav from "../layout/BottomNav";
 import axios from "axios";
 import { useRecoilValue } from "recoil";
 import { tripNameState } from "../recoil/commonState";
+import { tripIdState } from "../recoil/commonState";
+import defaultImageSrc from "../assets/images/defaultProfileImg.svg";
 
 export default function DiaryListPage() {
   const tripName = useRecoilValue(tripNameState);
+  const tripId = useRecoilValue(tripIdState);
   const navigate = useNavigate();
+  //여행 id location으로 받음
   const location = useLocation();
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState([]);
+  const [userimg, setUserimg] = useState([]);
+  const [error, setError] = useState(null);
   useEffect(() => {
     let completed = false;
-
+    let userimgs = [];
+    console.log("아이디트립", tripId);
     // eslint-disable-next-line func-style
     async function get() {
-      const result = await axios.get(
-        `${process.env.REACT_APP_SERVER_URL}/diary/travel/${location.state.id}`,
-        { withCredentials: true },
-      );
-      if (!completed) {
-        setData(result.data.diarys);
+      try {
+        const result = await axios.get(
+          `${process.env.REACT_APP_SERVER_URL}/diary/travel/${location.state.id}`,
+          { withCredentials: true },
+        );
+        const Img = await axios.get(
+          `${process.env.REACT_APP_SERVER_URL}/travel/${location.state.id}`,
+          { 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);
+          setLoading(true);
+        }
+        console.error("데이터 가져오기 중 에러가 발생했습니다:", error);
       }
-      setLoading(true);
     }
+
     get();
     return () => {
       completed = true;
     };
-  }, []);
+  }, [location.state.id]);
 
   const goToAdd = () => {
-    navigate("/invitefriend", {state: location.state.id});
+    navigate("/invitefriend", { state: { id: location.state.id } });
   };
   const goToCreate = () => {
-    navigate("/diary", {state: location.state.id});
+    navigate("/diary", { state: { id: location.state.id } });
   };
-
   return (
     <StDiaryListPage>
       <TitleDiv>
@@ -57,15 +80,17 @@ export default function DiaryListPage() {
       </TitleDiv>
       <MainDiv>
         <FriendDiv>
-          <FriendAvt
-            sx={{ position: "absolute", left: "56%" }}
-            alt="1"
-            src={Busan}
-          />
+          {userimg[1]!==undefined && (
+            <FriendAvt
+              sx={{ position: "absolute", left: "56%" }}
+              alt="1"
+              src={userimg[1] ? userimg[1] : defaultImageSrc }
+            />
+          )}
           <FriendAvt
             sx={{ position: "absolute", left: "63%" }}
             alt="2"
-            src={Gunsan}
+            src={userimg[0]}
           />
           <AddFriendBtn variant="contained" onClick={goToAdd}>
             + 일행 추가
@@ -86,7 +111,13 @@ export default function DiaryListPage() {
             <PencilImg src={Pencil} onClick={goToCreate} />
           </SemiHeaderDiv>
           <DiaryListDiv>
-            <DiaryList data={data}/>
+            {error ? (
+              <div></div>
+            ) : data.length === 0 && loading ? (
+              <div>데이터가 없습니다.</div>
+            ) : (
+              <DiaryList data={data} />
+            )}
           </DiaryListDiv>
         </DiaryDiv>
       </MainDiv>

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