diff --git a/src/assets/images/defaultProfileImg.svg b/src/assets/images/defaultProfileImg.svg
new file mode 100644
index 0000000..0addb39
--- /dev/null
+++ b/src/assets/images/defaultProfileImg.svg
@@ -0,0 +1,3 @@
+<svg width="109" height="109" viewBox="0 0 109 109" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M54.1667 0C24.2504 0 0 24.2504 0 54.1667C0 84.0829 24.2504 108.333 54.1667 108.333C84.0829 108.333 108.333 84.0829 108.333 54.1667C108.333 24.2504 84.0829 0 54.1667 0ZM35.2083 40.625C35.2083 38.1354 35.6987 35.6701 36.6515 33.37C37.6042 31.0698 39.0007 28.9799 40.7611 27.2194C42.5215 25.459 44.6115 24.0625 46.9116 23.1098C49.2118 22.157 51.677 21.6667 54.1667 21.6667C56.6563 21.6667 59.1216 22.157 61.4217 23.1098C63.7218 24.0625 65.8118 25.459 67.5722 27.2194C69.3327 28.9799 70.7291 31.0698 71.6819 33.37C72.6346 35.6701 73.125 38.1354 73.125 40.625C73.125 45.6531 71.1276 50.4752 67.5722 54.0306C64.0169 57.5859 59.1947 59.5833 54.1667 59.5833C49.1386 59.5833 44.3165 57.5859 40.7611 54.0306C37.2057 50.4752 35.2083 45.6531 35.2083 40.625ZM88.0642 81.1633C84.0095 86.2638 78.8548 90.3823 72.9851 93.2111C67.1154 96.04 60.6825 97.5061 54.1667 97.5C47.6509 97.5061 41.2179 96.04 35.3482 93.2111C29.4786 90.3823 24.3239 86.2638 20.2692 81.1633C29.0496 74.8637 41.0313 70.4167 54.1667 70.4167C67.3021 70.4167 79.2838 74.8637 88.0642 81.1633Z" fill="#80BFB5"/>
+</svg>
diff --git a/src/components/common/AcceptJoinContent.js b/src/components/common/AcceptJoinContent.js
index ee1dd93..ce4a0c9 100644
--- a/src/components/common/AcceptJoinContent.js
+++ b/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,
+};
diff --git a/src/components/common/FailJoinContent.js b/src/components/common/FailJoinContent.js
index 0f1ed88..9e7fdef 100644
--- a/src/components/common/FailJoinContent.js
+++ b/src/components/common/FailJoinContent.js
@@ -6,7 +6,7 @@ const FailJoinContent = () => {
     <FailContent>
       <ContentDiv>
         <ContentP>
-          존재하지 않는 코드입니다.
+          이미 참여중이거나 <br/> 존재하지 않는 여행입니다.
         </ContentP>
       </ContentDiv>
     </FailContent>
diff --git a/src/components/common/FriendList.js b/src/components/common/FriendList.js
index 6012c51..13ebf99 100644
--- a/src/components/common/FriendList.js
+++ b/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;
diff --git a/src/components/common/SuccessCopyContent.js b/src/components/common/SuccessCopyContent.js
new file mode 100644
index 0000000..c86c443
--- /dev/null
+++ b/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;
diff --git a/src/components/common/SuccessJoinContent.js b/src/components/common/SuccessJoinContent.js
new file mode 100644
index 0000000..db928b7
--- /dev/null
+++ b/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;
diff --git a/src/pages/InviteFriendPage.js b/src/pages/InviteFriendPage.js
index 96d7be5..11c8b4c 100644
--- a/src/pages/InviteFriendPage.js
+++ b/src/pages/InviteFriendPage.js
@@ -1,24 +1,96 @@
-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}>
@@ -26,7 +98,7 @@ const InviteFriendPage = () => {
           </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;
+`;
diff --git a/src/pages/JoinTripPage.js b/src/pages/JoinTripPage.js
index a4e66cd..a75be97 100644
--- a/src/pages/JoinTripPage.js
+++ b/src/pages/JoinTripPage.js
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import axios from "axios";
 import styled, { css } from "styled-components";
 import { COLOR } from "../styles/color.js";
 import Modal from "../components/common/Modal";
@@ -7,13 +8,18 @@ import AcceptJoinContent from "../components/common/AcceptJoinContent.js";
 import FailJoinContent from "../components/common/FailJoinContent.js";
 import xicon from "../assets/icons/x-icon.svg";
 import BottomNav from "../layout/BottomNav";
+import SuccessJoinContent from "../components/common/SuccessJoinContent.js";
 
 const JoinTripPage = () => {
+  const SERVER_URL = process.env.REACT_APP_SERVER_URL;
   const navigate = useNavigate();
   const [inputCode, setInputCode] = useState("");
+  const [travelID, setTravelID] = useState("");
   const [isCheckModal, setIsCheckModal] = useState(false);
   const [isFailModal, setIsFailModal] = useState(false);
+  const [isSuccessModal, setIsSuccessModal] = useState(false);
 
+  const [inviter, setInviter] = useState("");
   // X 버튼 클릭
   const handleCancel = () => {
     navigate("/home");
@@ -26,18 +32,47 @@ const JoinTripPage = () => {
 
   // 초대 수락시 실행되는 함수
   const joinTrip = () => {
-    alert("남궁희 님의 여행에 참여되었습니다.");
-    closeCheckModal();
+    setIsCheckModal(false);
+    axios
+      .put(
+        `${SERVER_URL}/travel/invite`,
+        { travelid: travelID },
+        { withCredentials: true },
+      )
+      .then((res) => {
+        if (res.status === 200) {
+          openSuccessModal();
+        } else {
+          openFailModal();
+        }
+      })
+      .catch((error) => {
+        openFailModal();
+        console.log(error);
+      });
   };
 
   // 확인하기 버튼 클릭
   const handleSubmit = () => {
-    //코드가 유효한지 확인하는 로직
-    if (inputCode === "1234") {
-      openCheckModal();
-    } else {
-      openFailkModal();
-    }
+    axios
+      .post(
+        `${SERVER_URL}/travel/invite`,
+        { ivtoken: inputCode },
+        { withCredentials: true },
+      )
+      .then((res) => {
+        if (res.status === 200) {
+          setInviter(res.data.auth);
+          setTravelID(res.data.travelid);
+          openCheckModal();
+        } else {
+          openFailModal();
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+        openFailModal();
+      });
   };
 
   // check modal 열기
@@ -47,9 +82,10 @@ const JoinTripPage = () => {
   //check modal 닫기
   const closeCheckModal = () => {
     setIsCheckModal(false);
+    setInviter("");
   };
   //fail modal 열기
-  const openFailkModal = () => {
+  const openFailModal = () => {
     setIsFailModal(true);
   };
   //fail modal 닫기
@@ -57,11 +93,22 @@ const JoinTripPage = () => {
     setIsFailModal(false);
   };
 
+  //success join modal 열기
+  const openSuccessModal = () => {
+    setIsSuccessModal(true);
+  };
+
+  //success join modal 닫기
+  const closeSuccessModal = () => {
+    setIsSuccessModal(false);
+    // navigate("/triptable", { state:travelId});
+  };
+
   return (
     <div>
       {isCheckModal && (
         <Modal
-          content={<AcceptJoinContent />}
+          content={<AcceptJoinContent inviter={inviter} />}
           closeModals={closeCheckModal}
           buttons={
             <ButtonContainer>
@@ -70,7 +117,7 @@ const JoinTripPage = () => {
             </ButtonContainer>
           }
           w="80%"
-          h="23%"
+          h="25%"
         />
       )}
       {isFailModal && (
@@ -83,11 +130,26 @@ const JoinTripPage = () => {
             </ButtonContainer>
           }
           w="80%"
-          h="23%"
+          h="25%"
+        />
+      )}
+      {isSuccessModal && (
+        <Modal
+          content={<SuccessJoinContent />}
+          closeModals={closeSuccessModal}
+          buttons={
+            <ButtonContainer>
+              <OkBtn onClick={closeSuccessModal}>확인</OkBtn>
+            </ButtonContainer>
+          }
+          w="80%"
+          h="22%"
         />
       )}
       <div>
-        <XButton onClick={handleCancel}><img src={xicon} /></XButton>
+        <XButton onClick={handleCancel}>
+          <img src={xicon} />
+        </XButton>
         <EmptyDiv></EmptyDiv>
         <InputContainer>
           <Text className="tripName">친구 여행 참여하기</Text>
@@ -104,9 +166,7 @@ const JoinTripPage = () => {
             ></InputCode>
           </InputWrapper>
           <ButtonWrapper>
-            <SubmitButton
-              onClick={handleSubmit}
-              disabled={!inputCode.trim()}>
+            <SubmitButton onClick={handleSubmit} disabled={!inputCode.trim()}>
               <p>확인하기</p>
             </SubmitButton>
           </ButtonWrapper>
@@ -206,7 +266,6 @@ const ButtonContainer = styled.div`
   align-items: center;
   width: 100%;
   height: 50%;
-
 `;
 const YesBtn = styled.button`
   background-color: ${COLOR.MAIN_GREEN};
@@ -241,3 +300,13 @@ const CloseBtn = styled.button`
   font-weight: bolder;
 `;
 
+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;
+`;