Merge: merge from feature/78 to main

Update: complete invite friend page & join trip page

src/components/common/AcceptJoinContent.js

@@ -1,12 +1,13 @@
 import React from "react";
 import styled from "styled-components";
+import PropTypes from "prop-types";
 
-const AcceptJoinContent = () => {
+const AcceptJoinContent = ({inviter}) => {
   return (
     <AcceptContent>
       <ContentDiv>
         <ContentP>
-          남궁희님의 초대를 <br/>수락하시겠습니까?
+          {inviter}님의 초대를 <br/>수락하시겠습니까?
         </ContentP>
       </ContentDiv>
     </AcceptContent>
@@ -39,3 +40,7 @@ const ContentP = styled.p`
 `;
 
 export default AcceptJoinContent;
+
+AcceptJoinContent.propTypes = {
+  inviter: PropTypes.string.isRequired,
+};

src/components/common/FailJoinContent.js

@@ -6,7 +6,7 @@ const FailJoinContent = () => {
     <FailContent>
       <ContentDiv>
         <ContentP>
-          존재하지 않는 코드입니다.
+          이미 참여중이거나 <br/> 존재하지 않는 여행입니다.
         </ContentP>
       </ContentDiv>
     </FailContent>

src/components/common/FriendList.js

@@ -1,20 +1,20 @@
 import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
-import Karina from "../../assets/images/karina.png";
+import defaultImageSrc from "../../assets/images/defaultProfileImg.svg";
 
-const FriendList = ({ friends }) => {
+const FriendList = ({ usernames, userimgs }) => {
   return (
     <div>
       <MyFriend>내 일행</MyFriend>
       <ul>
-        {friends.map((friend, index) => (
+        {usernames.map((name, index) => (
           <li key={index}>
             <FriendItemDiv>
               <FriendImgDiv>
-                <FriendImg src={Karina}></FriendImg>
+                <FriendImg src={userimgs[index] || defaultImageSrc}></FriendImg>
               </FriendImgDiv>
-              <FriendNameDiv>{friend.friendName}</FriendNameDiv>
+              <FriendNameDiv>{name}</FriendNameDiv>
             </FriendItemDiv>
           </li>
         ))}
@@ -24,12 +24,8 @@ const FriendList = ({ friends }) => {
 };
 
 FriendList.propTypes = {
-  friends: PropTypes.arrayOf(
-    PropTypes.shape({
-      friendName: PropTypes.string.isRequired,
-      imagePath: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
+  usernames: PropTypes.string.isRequired,
+  userimgs: PropTypes.string.isRequired,
 };
 
 export default FriendList;

src/components/common/SuccessCopyContent.js

@@ -0,0 +1,40 @@
+import React from "react";
+import styled from "styled-components";
+
+const SuccessCopyContent = () => {
+  return (
+    <SuccessContent>
+      <ContentDiv>
+        <ContentP>
+          여행 코드를 복사했습니다.
+        </ContentP>
+      </ContentDiv>
+    </SuccessContent>
+  );
+};
+
+const SuccessContent = styled.div`
+  width: 100%;
+  height: fit-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 1rem;
+`;
+
+
+const ContentDiv =styled.div`
+  padding: 2rem 1em;
+  margin: 1rem;
+`;
+
+const ContentP = styled.p`
+  font-size: 1.8rem;
+  text-align: center;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
+  line-height: 1.5rem;
+  font-weight: 700;
+  line-height : normal;
+`;
+
+export default SuccessCopyContent;

src/components/common/SuccessJoinContent.js

@@ -0,0 +1,40 @@
+import React from "react";
+import styled from "styled-components";
+
+const SuccessCopyContent = () => {
+  return (
+    <SuccessContent>
+      <ContentDiv>
+        <ContentP>
+          여행에 참여되었습니다.
+        </ContentP>
+      </ContentDiv>
+    </SuccessContent>
+  );
+};
+
+const SuccessContent = styled.div`
+  width: 100%;
+  height: fit-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 1rem;
+`;
+
+
+const ContentDiv =styled.div`
+  padding: 2rem 1em;
+  margin: 1rem;
+`;
+
+const ContentP = styled.p`
+  font-size: 1.8rem;
+  text-align: center;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
+  line-height: 1.5rem;
+  font-weight: 700;
+  line-height : normal;
+`;
+
+export default SuccessCopyContent;

src/pages/InviteFriendPage.js

@@ -1,32 +1,104 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import axios from "axios";
 import styled from "styled-components";
 import { COLOR } from "../styles/color.js";
 import FriendList from "../components/common/FriendList.js";
-import jsonData from "../data/FriendData.json";
 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 Modal from "../components/common/Modal";
+import SuccessCopyContent from "../components/common/SuccessCopyContent.js";
 
 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 = "664c951554d29fb5ec75847b"; // 임시로 쓴 것
+  // travel의 정보
+  const [invitecode, setInvitecode] = useState("");
+  const [title, setTitle] = useState("");
+  const [username, setUsername] = useState([]);
+  const [userimg, setUserimg] = useState([]);
+
+  const [isModal, setIsModal] = useState(false);
+
+  const closeModal = () => {
+    setIsModal(false);
+  };
+
+  const openModal = () => {
+    setIsModal(true);
+  };
+
+  // 서버로부터 여행 정보 받아오기
+  useEffect(() => {
+    let usernames = [];
+    let userimgs = [];
+    axios
+      .get(`${SERVER_URL}/travel/${travelID}`)
+      .then((res) => {
+        console.log(res);
+        // 초대 코드 저장
+        setInvitecode(res.data.travel.ivtoken);
+        // 여행 제목 저장
+        setTitle(res.data.travel.title);
+        // 여행 참여자 이름 저장
+        res.data.travel.invited.forEach((item) => {
+          usernames.push(item.name);
+        });
+        setUsername(usernames);
+        // 여행 참여자 프로필사진 저장
+        res.data.invited_profile.forEach((item) => {
+          userimgs.push(item.url);
+        });
+        setUserimg(userimgs);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }, []);
+
+  // 취소 버튼
   const handleCancel = () => {
-    alert("일기 목록 화면으로 연결");
+    navigate("/triptable", { state:travelID } );
   };
-  //임시 작성
-  const copyCode = () => {
-    alert("코드가 복사되었습니다.");
+
+  // 코드 복사 버튼
+  const copyCode = async () => {
+    try {
+      await navigator.clipboard.writeText(invitecode);
+      openModal();
+    } catch (e) {
+      alert("failed");
+    }
   };
 
   return (
     <div>
+      {isModal && (
+        <Modal
+          content={<SuccessCopyContent />}
+          closeModals={closeModal}
+          buttons={
+            <ButtonContainer>
+              <OkBtn onClick={closeModal}>확인</OkBtn>
+            </ButtonContainer>
+          }
+          w="80%"
+          h="22%"
+        />
+      )}
       <FixedDiv>
         <div>
           <XButton onClick={handleCancel}>
             <img src={xicon} />
           </XButton>
         </div>
         <CopyCodeContainer>
-          <Text className="tripName">마루와 함께하는 부산</Text>
+          <Text className="tripName">{title}</Text>
           <Text className="tripFriend">트립토리 친구</Text>
           <Text className="explain">
             함께 여행간 친구나 가족을 초대해보세요.
@@ -43,7 +115,7 @@ const InviteFriendPage = () => {
         </CopyCodeContainer>
       </FixedDiv>
       <FriendListContainer>
-        <FriendList friends={jsonData.friends}></FriendList>
+        <FriendList usernames={username} userimgs={userimg}></FriendList>
       </FriendListContainer>
       <BottomNav />
     </div>
@@ -125,3 +197,22 @@ const FriendListContainer = styled.div`
 const CopyIconImg = styled.img`
   margin: 0.2rem;
 `;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 100%;
+  height: 50%;
+`;
+
+const OkBtn = styled.button`
+  background-color: ${COLOR.MAIN_GREEN};
+  color: white;
+  width: 40%;
+  height: 3rem;
+  border: none;
+  border-radius: 2rem;
+  font-size: 1.3rem;
+  font-weight: bolder;
+`;