From 288af1585683e225f46a049c80d9299e4937c78b Mon Sep 17 00:00:00 2001
From: tpfls <165572388+tpfls@users.noreply.github.com>
Date: Wed, 14 Aug 2024 22:19:32 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=EB=A9=94=EC=9D=B8=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json          |   2 +-
 package.json               |   1 +
 src/App.js                 |  55 ++++----------
 src/pages/Main.jsx         | 150 ++++++++++++++++++++++++++-----------
 src/pages/MyPage.jsx       |  12 +--
 src/styles/MyPagestyle.jsx |  42 +++++++----
 6 files changed, 155 insertions(+), 107 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 585621a..3fdabd9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19303,4 +19303,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index d6a4e1a..83c81e1 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "react-scripts": "^5.0.1",
     "react-time-picker": "^7.0.0",
     "styled-components": "^6.1.12",
+    "tailwind": "^4.0.0",
     "tailwindcss": "^3.4.9",
     "web-vitals": "^2.1.4",
     "xlsx": "^0.18.5"
diff --git a/src/App.js b/src/App.js
index 2ce4115..47acb02 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-  BrowserRouter as Router,
-  Route,
-  Routes,
-  useLocation,
-} from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';
 import Main from './pages/Main';
 import Home from './pages/Home';
 import Login from './pages/Login';
@@ -14,9 +9,7 @@ import MyLocationList from './pages/MyLocationList';
 import Setting from './pages/Setting';
 import MakePlanRoom1 from './pages/MakePlanRoom1';
 import MakePlanRoom2 from './pages/MakePlanRoom2';
-import PlanRoomResult from './pages/PlanRoomResult';
 import PlanRoom1 from './pages/PlanRoom1';
-import PlanRoom2 from './pages/PlanRoom2';
 import NotFound from './pages/NotFound';
 import Navbar from './components/Navbar';
 import Sidebar from './components/Sidebar';
@@ -25,9 +18,12 @@ import FindPassword from './pages/FindPassword';
 import FindPasswordSend from './pages/FindPasswordsend';
 import EmailCheck from './pages/emailcheck';
 import StartPlanRoom from './pages/StartPlanRoom';
-import Notice from './pages/Notice';
-import PrNavbar from './components/PrNavbar';
+import PrNavbar from './components/PrNavbar'; 
 import MainNavbar from './components/MainNavbar';
+import Home2 from './pages/home2';
+import Notice from './pages/Notice';
+import PlanRoom2 from './pages/PlanRoom2';
+
 
 const AppContainer = styled.div`
   display: flex;
@@ -40,35 +36,14 @@ const ContentContainer = styled.div`
 
 function App() {
   const location = useLocation();
-  const MainNavBarPages = [
-    '/',
-    '/login',
-    '/SignUp',
-    '/emailcheck',
-    '/findpassword',
-  ];
-  const sideBarPages = [
-    '/Home',
-    '/MakePlanRoom1',
-    '/MakePlanRoom2',
-    '/StartPlanRoom',
-    '/MyPage',
-    '/MyPage2',
-    '/MyPage3',
-    '/Notice',
-    '/Setting',
-    '/MyLocationList',
-  ];
+  const MainNavBarPages=['/','/login','/SignUp','/emailcheck','/findpassword'];
+  const sideBarPages=['/Home','/MakePlanRoom1','/MakePlanRoom2','/StartPlanRoom',
+    '/MyPage','/MyPage2','/MyPage3','/Notice','/Setting','/MyLocationList' ];
 
   return (
     <>
-      {MainNavBarPages.includes(location.pathname) ? (
-        <MainNavbar />
-      ) : location.pathname === '/PlanRoom1' ? (
-        <PrNavbar />
-      ) : (
-        <Navbar />
-      )}
+      {MainNavBarPages.includes(location.pathname) ? <MainNavbar /> :
+         (location.pathname==='/PlanRoom1' ? <PrNavbar /> :  <Navbar />)}
       <AppContainer>
         {sideBarPages.includes(location.pathname) && <Sidebar />}
         <ContentContainer>
@@ -81,17 +56,17 @@ function App() {
             <Route path="/MakePlanRoom1" element={<MakePlanRoom1 />} />
             <Route path="/MakePlanRoom2" element={<MakePlanRoom2 />} />
             <Route path="/StartPlanRoom" element={<StartPlanRoom />} />
-            <Route path="/PlanRoomResult" element={<PlanRoomResult />} />
             <Route path="/MyLocationList" element={<MyLocationList />} />
+            <Route path="/Setting" element={<Setting />} />
             <Route path="/MakePlanRoom1" element={<MakePlanRoom1 />} />
             <Route path="/MakePlanRoom2" element={<MakePlanRoom2 />} />
             <Route path="/findpassword" element={<FindPassword />} />
             <Route path="/find-password-send" element={<FindPasswordSend />} />
             <Route path="/emailcheck" element={<EmailCheck />} />
             <Route path="/PlanRoom1" element={<PlanRoom1 />} />
-            <Route path="/Setting" element={<Setting />} />
-            <Route path="/Notice" element={<Notice />} />
             <Route path="/PlanRoom2" element={<PlanRoom2 />} />
+            <Route path="/Notice" element={<Notice />} />
+            <Route path="/Home2" element={<Home2 />} />
             <Route path="/*" element={<NotFound />} />
           </Routes>
         </ContentContainer>
@@ -108,4 +83,4 @@ function AppWrapper() {
   );
 }
 
-export default AppWrapper;
+export default AppWrapper;
\ No newline at end of file
diff --git a/src/pages/Main.jsx b/src/pages/Main.jsx
index b09a533..3d1ac10 100644
--- a/src/pages/Main.jsx
+++ b/src/pages/Main.jsx
@@ -1,6 +1,13 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom'; // useHistory 대신 useNavigate 사용
+
 const Main = () => {
+  const navigate = useNavigate(); // useHistory 대신 useNavigate 사용
+
+  const handleButtonClick = () => {
+    navigate('/startplanroom'); // startplanroom으로 이동
+  };
+
   const containerStyle = {
     display: 'flex',
     flexDirection: 'column',
@@ -32,94 +39,147 @@ const Main = () => {
   };
 
   const videoContainerStyle = {
-    marginBottom: '40px',
-    height: '300px',
-    backgroundColor: '#ccc',
+    marginBottom: '50px',
+    height: '450px',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    fontSize: '1.5em',
-    color: 'black',
   };
 
-  const cardContainerStyle = {
-    display: 'flex',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    marginTop: '40px',
+  const videoStyle = {
+    width: '100%',
+    height: '100%',
+    borderRadius: '10px',
+    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
   };
 
-  const cardStyle = {
+  const footerStyle = {
+    marginTop: '40px',
+    padding: '20px',
     backgroundColor: '#343a40',
     color: 'white',
+    textAlign: 'center',
+    width: '100%',
+  };
+
+  // 카드 컨테이너 1
+  const cardContainer1Style = {
+    backgroundColor: '#f8f9fa',
+    color: 'black',
+    borderRadius: '10px',
+    padding: '15px',
+    margin: '10px',
+    width: '350px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginRight: '500px',
+  };
+
+  // 카드 컨테이너 2
+  const cardContainer2Style = {
+    backgroundColor: '#f8f9fa',
+    color: 'black',
     borderRadius: '10px',
     padding: '20px',
     margin: '10px',
     width: '300px',
-    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
+    marginLeft: '500px',
+    marginTop:'-180px',
   };
 
-  const footerStyle = {
-    marginTop: '40px',
+  // 카드 컨테이너 3
+  const cardContainer3Style = {
+    backgroundColor: '#f8f9fa',
+    color: 'black',
+    borderRadius: '10px',
     padding: '20px',
-    backgroundColor: '#343a40',
-    color: 'white',
-    textAlign: 'center',
-    width: '100%',
+    margin: '10px',
+    width: '300px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginRight: '500px',
+    marginTop:'-150px',
   };
 
-  const navigate = useNavigate();
+  
+
+
+// 이미지 스타일 추가
+const image1Style = {
+    width: '100%', // 원하는 크기로 조정
+    height: '300PX',
+    position: 'relative', // 부모 요소의 position을 relative로 설정
+    left: '500px', // 카드 컨테이너와 같은 위치로 설정
+    top: '-250px', // 이미지 위치를 위로 올리기 위해 음수 값 설정
+};
+
+
+const image2Style={
+    width:'100%',
+    height:'300px',
+    position:'relative',
+    right:'480px',
+    top:'-250px',
+};
+
+const image3Style={
+  width:'100%',
+  height:'300px',
+  position:'relative',
+  left:'480px',
+  top:'-270px',
+};
 
-  const handleOutClick = () => {
-    navigate('/MakePlanRoom1');
-  };
 
   return (
     <div style={containerStyle}>
       <h1 style={headingStyle}>국내 여행을 계획하고 있으신가요?</h1>
-      <p style={paragraphStyle}>
-        가볼까?와 동행자와 함께 여행을 빠르고 쉽게 계획할 수 있어요!
-      </p>
-      <button style={buttonStyle} onClick={handleOutClick}>
-        여행 계획 하러 가기
-      </button>
+      <p style={paragraphStyle}>가볼까?와 동행자와 함께 여행을 빠르고 쉽게 계획할 수 있어요!</p>
+      <button style={buttonStyle} onClick={handleButtonClick}>여행 계획 하러 가기</button>
 
-      <div style={videoContainerStyle}>(서비스 소개 영상)</div>
+      <div style={videoContainerStyle}>
+        <video style={videoStyle} controls>
+          <source src="/videos/intro.mp4" type="video/mp4" />
+          비디오를 지원하지 않는 브라우저입니다.
+        </video>
+      </div>
 
-      <div style={cardContainerStyle}>
-        <div style={cardStyle}>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: '40px' }}>
+        <div style={cardContainer1Style}>
           <h2>여행 동행자와 함께 여행 계획을!</h2>
-          <p>
-            가볼까에서는 모두 다함께 참여할 수 있어요! 더 이상 따로 찾고 따로
-            계획하지 않아도 돼요!
-          </p>
+          <p>가볼까에서는 모두 다함께 참여할 수 있어요! 더 이상 따로 찾고 따로 계획하지 않아도 돼요!</p>
           <button style={buttonStyle}>바로 시작하기</button>
+          <img src="/path/to/image1.jpg" alt="" style={image1Style} /> {/* 이미지 추가 */}
         </div>
-        <div style={cardStyle}>
+
+        <div style={cardContainer2Style}>
           <h2>가볼까의 주요 장점 제목 222</h2>
           <p>가볼까의 장점 설명글 가볼까의 장점 설명글 가볼까의 장점 설명글</p>
           <button style={buttonStyle}>바로 시작하기</button>
+          <img src="/path/to/image2.jpg" alt="" style={image2Style} />
         </div>
-        <div style={cardStyle}>
+
+        <div style={cardContainer3Style}>
           <h2>가볼까의 주요 장점 제목 444</h2>
           <p>가볼까의 장점 설명글 가볼까의 장점 설명글 가볼까의 장점 설명글</p>
           <button style={buttonStyle}>바로 시작하기</button>
+          <img src="/path/to/image3.jpg" alt="" style={image3Style} />
         </div>
       </div>
 
       <footer style={footerStyle}>
-        UMC 6기 타이거지부 ‘가볼까’
-        <br />
-        메일: 010711yj@swu.ac.kr | 고객센터: 0000-0000
-        <br />
-        서울시 OO구 OO로OO길 OO OOOO (우편번호00000)
-        <br />© GABOLKKA ALL RIGHTS RESERVED.
+        UMC 6기 타이거지부 ‘가볼까’<br />
+        메일: 010711yj@swu.ac.kr | 고객센터: 0000-0000<br />
+        서울시 OO구 OO로OO길 OO OOOO (우편번호00000)<br />
+        © GABOLKKA ALL RIGHTS RESERVED.
       </footer>
     </div>
   );
 };
 
-export default Main;
+export default Main;
\ No newline at end of file
diff --git a/src/pages/MyPage.jsx b/src/pages/MyPage.jsx
index 15db237..8b1710b 100644
--- a/src/pages/MyPage.jsx
+++ b/src/pages/MyPage.jsx
@@ -18,11 +18,11 @@ import {
     Input, 
     Button, 
     StyledH2,
-    WithdrawSection, // 추가된 컴포넌트
-    NoticeBox, // 추가된 컴포넌트
-    NoticeItem, // 추가된 컴포넌트
-    Checkbox, // 추가된 컴포넌트
-    WithdrawButton // 추가된 컴포넌트
+    WithdrawSection, 
+    NoticeBox, 
+    NoticeItem, 
+    Checkbox, 
+    WithdrawButton 
 } from '../styles/MyPagestyle';
 
 const Mypage = () => {
@@ -79,7 +79,7 @@ const Mypage = () => {
             
             {activeTab === 'memberInfo' && (  // 회원정보 버튼이 클릭되었을 때만 표시
                 <ProfileSection>
-                    <h2>회원 정보</h2>
+                    <h1>회원 정보</h1>
                     <ProfilePicture>
                         <PicturePlaceholder>
                             <EditIcon>✏️</EditIcon>
diff --git a/src/styles/MyPagestyle.jsx b/src/styles/MyPagestyle.jsx
index 7830667..72724cc 100644
--- a/src/styles/MyPagestyle.jsx
+++ b/src/styles/MyPagestyle.jsx
@@ -18,13 +18,13 @@ export const Title = styled.h1`
 
 export const StyledH2 = styled.h2`
     font-size: 2rem; /* 원하는 글자 크기 */
-    margin: 20px 0; /* 위 아래 여백 조정 */
-    text-align: left; /* 제목을 왼쪽 정렬 */
+    margin: 30px 20px; /* 위 아래 여백 조정 */
+    text-align: center; /* 제목을 왼쪽 정렬 */
     /* 필요에 따라 추가적인 스타일을 적용 */
 `;
 
 export const Tabs = styled.div`
-    margin-bottom: 25px;
+    margin-bottom: 30px;
     text-align: left;
     justify-content: flex-start;
 `;
@@ -46,24 +46,24 @@ export const TabButton = styled.button`
 `;
 
 export const ProfileSection = styled.div`
-    text-align: left;
+    text-align: center;
     background-color: #EDEDED;
-    padding: 140px;
+    padding: 80px 40px 40px 40px; /* 위쪽 여백을 100px로 줄였습니다 */
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* box-shadow 추가 */
 `;
 
 export const ProfilePicture = styled.div`
     display: flex;
-    justify-content: left;
+    justify-content: center;
     align-items: center;
     margin-bottom: 60px; /* 간격 조정 */
 `;
 
 export const PicturePlaceholder = styled.div`
-    width: 70px; /* 원의 크기 */
-    height: 70px;
-    border-radius: 50%;
+    width: 200px; /* 원의 크기 */
+    height: 200px;
+    border-radius:50%;
     background-color: gray;
     display: flex;
     justify-content: center;
@@ -73,8 +73,8 @@ export const PicturePlaceholder = styled.div`
 
 export const EditIcon = styled.div`
     position: absolute; /* 부모 요소에 상대적으로 위치 */
-    bottom: -5px; /* 아래로 살짝 이동 */
-    right: -5px; /* 오른쪽으로 살짝 이동 */
+    bottom: -1px; /* 아래로 살짝 이동 */
+    right: -1px; /* 오른쪽으로 살짝 이동 */
     background-color: white;
     color: black;
     border-radius: 50%;
@@ -85,13 +85,15 @@ export const EditIcon = styled.div`
 export const InfoItem = styled.div`
     margin-bottom: 30px;
     display: flex;
-    justify-content: left;
+    justify-content: center;
     align-items: center;
+    flex-direction: column; /* 세로 정렬을 위해 추가 */
 `;
 
 export const InfoContent = styled.div`
     display: flex;
     align-items: center;
+    justify-content: center; /* 정보 내용 가운데 정렬 */
 
     span {
         margin-right: 10px;
@@ -153,9 +155,9 @@ export const ValidateButton = styled.button`
 
 export const SecuritySection = styled.div`
     background-color: #EDEDED;
-    padding: 50px;
+    padding: 60px;
     border-radius: 8px;
-    text-align: left;
+    text-align: center;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* box-shadow 추가 */
 `;
 
@@ -197,12 +199,22 @@ export const Button = styled.button`
     }
 `;
 
+export const Box = styled.div`
+    width: 100%;
+    margin-top: 10px;
+    padding: 10px;
+    background-color: #F0F0F0; 
+    border-radius: 4px;
+    text-align: left; /* 텍스트 왼쪽 정렬 
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
+`;
+
 // 추가된 스타일 컴포넌트
 export const WithdrawSection = styled.div`
     background-color: #EDEDED;
     padding: 50px;
     border-radius: 8px;
-    text-align: left;
+    text-align: center;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* box-shadow 추가 */
 `;
 

From aae10eeb4554319de4249679d13e358afc5c850e Mon Sep 17 00:00:00 2001
From: tpfls <165572388+tpfls@users.noreply.github.com>
Date: Tue, 20 Aug 2024 00:59:28 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                          |   1 +
 src/buttonimage/exdown.png    | Bin 0 -> 4216 bytes
 src/pages/Home.jsx            |  61 +++++++++++++++++++++++++++-----
 src/pages/MakePlanRoom1.jsx   |  53 ++++++++++++++++++++++++++--
 src/pages/MakePlanRoom2.jsx   |   9 +++--
 src/pages/PlanRoom1.jsx       |  36 +++++++++++++------
 src/pages/PlanRoom2.jsx       |  29 +++++++++-------
 src/pages/PlanRoomResult.jsx  |  63 +++++++++++++++++++++++-----------
 src/pages/SignUp.jsx          |  17 +++++++--
 src/pages/home2.jsx           |  10 ++++--
 src/redux/appWrapper.js       |  13 +++++++
 src/redux/dataSlice.js        |  34 ++++++++++++++++++
 src/redux/store.js            |  10 ++++++
 src/styles/PlanRoom2style.jsx |   4 +--
 src/styles/homestyle.jsx      |   2 +-
 15 files changed, 275 insertions(+), 67 deletions(-)
 create mode 100644 .env
 create mode 100644 src/buttonimage/exdown.png
 create mode 100644 src/redux/appWrapper.js
 create mode 100644 src/redux/dataSlice.js
 create mode 100644 src/redux/store.js

diff --git a/.env b/.env
new file mode 100644
index 0000000..87a5b60
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+REACT_APP_KAKAO_API_KEY = b1d6aed50bab9834340e45aa8d0a6b67
diff --git a/src/buttonimage/exdown.png b/src/buttonimage/exdown.png
new file mode 100644
index 0000000000000000000000000000000000000000..8082ec81c6ac9dd4af33a0e0c3985b0ae7608546
GIT binary patch
literal 4216
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
JN$<hS{{eej1wQ})

literal 0
HcmV?d00001

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index bbfb31b..32b3725 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,24 +1,58 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import sea from '../assets/images/sea.png';
 
 function Home() {
     const navigate = useNavigate();
+    const [travelPlans, setTravelPlans] = useState([]);
 
+    // 백엔드에서 데이터 가져오기
+    useEffect(() => {
+        const fetchTravelPlans = async () => {
+            try {
+                const response = await fetch('https://your-backend-server-address/travel-plans/myRooms', {
+                    method: 'GET',
+                    headers: {
+                        'Authorization': 'Bearer <YOUR_JWT_TOKEN>'
+                    }
+                });
+
+                if (response.ok) {
+                    const data = await response.json();
+                    setTravelPlans(data);
+                } else {
+                    console.error('Failed to fetch data');
+                }
+            } catch (error) {
+                console.error('Error:', error);
+            }
+        };
+
+        fetchTravelPlans();
+    }, []);
+
+    // 계획 만들기 버튼 클릭 핸들러
     const handleCreatePlan = () => {
         navigate('/MakePlanRoom1');
     };
 
     return (
-        <div className="min-h-screen bg-gray-100 p-4">
+        <div className="min-h-screen bg-white p-4">
             <div className="flex items-center justify-between mb-4">
                 <div className="flex items-center">
                     <h1 className="text-2xl font-bold">내가 참여한 여행</h1>
                 </div>
                 <div className="relative">
-                    <input type="text" className="w-96 h-10 px-4 py-2 border border-gray-300 rounded-full" placeholder="검색" />
+                    <input
+                        type="text"
+                        className="w-96 h-10 px-4 py-2 border border-gray-300 rounded-full"
+                        placeholder="검색"
+                    />
                 </div>
-                <button className="w-44 h-10 bg-blue-500 text-white rounded-full" onClick={handleCreatePlan}>
+                <button
+                    className="w-44 h-10 bg-blue-500 text-white rounded-full"
+                    onClick={handleCreatePlan}
+                >
                     계획 만들기
                 </button>
             </div>
@@ -29,15 +63,24 @@ function Home() {
                 <button className="px-4 py-2 bg-gray-200 text-gray-800 rounded-full">동선단계</button>
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                {Array(9).fill(0).map((_, index) => (
-                    <div key={index} className="bg-white rounded-2xl shadow-lg" style={{ width: '378px', height: '354px', flexShrink: 0 }}>
+                {travelPlans.map((plan, index) => (
+                    <div
+                        key={index}
+                        className="bg-white rounded-2xl shadow-lg"
+                        style={{ width: '378px', height: '354px', flexShrink: 0 }}
+                    >
                         <div className="w-full h-40 rounded-t-2xl overflow-hidden">
                             <img src={sea} alt="여행" className="w-full h-full object-cover" />
                         </div>
                         <div className="p-4">
-                            <span className="inline-block bg-yellow-400 text-white py-1 px-2 rounded-full">강원도</span>
-                            <h2 className="mt-2 text-xl font-bold">여행 제목</h2>
-                            <p className="text-gray-600">2024. 07. 13 - 2024. 8. 27</p>
+                            <span className="inline-block bg-yellow-400 text-white py-1 px-2 rounded-full">
+                                {plan.region}
+                            </span>
+                            <h2 className="mt-2 text-xl font-bold">{plan.title}</h2>
+                            <p className="text-gray-600">
+                                {new Date(plan.start_date).toLocaleDateString()} -{' '}
+                                {new Date(plan.end_date).toLocaleDateString()}
+                            </p>
                             <div className="flex items-center mt-4">
                                 <div className="w-8 h-8 bg-gray-300 rounded-full mr-2"></div>
                                 <div className="w-8 h-8 bg-gray-300 rounded-full mr-2"></div>
diff --git a/src/pages/MakePlanRoom1.jsx b/src/pages/MakePlanRoom1.jsx
index c5f79ba..7256075 100644
--- a/src/pages/MakePlanRoom1.jsx
+++ b/src/pages/MakePlanRoom1.jsx
@@ -8,6 +8,7 @@ import 'react-calendar/dist/Calendar.css';
 import 'react-time-picker/dist/TimePicker.css';
 import { format } from 'date-fns';
 import moment from 'moment';
+import axios from 'axios';
 
 /*컨테이너 및 구역 나눔*/
 const FullContainner = styled.div`
@@ -181,16 +182,22 @@ const Time = styled.div``;
 
 function MakePlanRoom1() {
   const [image, setImage] = useState(ImgUpload);
+  const [title, setTitle] = useState(''); // 여행 제목 상태 관리
+  const [explain, setExplain] = useState(''); // 여행 설명 상태 관리
   const [dateRange, setDateRange] = useState([new Date(), new Date()]);
   const [startDate, endDate] = dateRange;
   const [startTime, setStartTime] = useState('00:00');
   const [endTime, setEndTime] = useState('00:00');
   const [showTime, setShowTime] = useState(false);
+  const [imageFile, setImageFile] = useState(null); 
   const fileInputRef = useRef(null);
+  const region='지역'; // MakePlanRoom2 이전에 미리 초기값 설정 (formData 넘기려고..)
+  const status=1;
 
   const handleImageUpload = (event) => {
     const file = event.target.files[0];
     if (file) {
+      setImageFile(file);
       setImage(URL.createObjectURL(file));
     }
   };
@@ -205,9 +212,48 @@ function MakePlanRoom1() {
 
   const navigate = useNavigate();
 
-  const handleLink = () => {
-    navigate('/MakePlanroom2');
+  const handleLink = async (travelId) => {
+    const [startDate, endDate] = dateRange;
+    const token = localStorage.getItem('token'); 
+    console.log('JWT Token:', JSON.stringify(token));
+    // FormData 생성
+    const formData = new FormData();
+    formData.append('title', title); 
+    formData.append('start_date', format(startDate, 'yyyy-MM-dd'));
+    formData.append('end_date', format(endDate, 'yyyy-MM-dd'));
+    formData.append('explain', explain); 
+    formData.append('start_time', showTime ? startTime : '00:00');
+    formData.append('end_time', showTime ? endTime : '00:00');
+    formData.append('region', region); // 추가된 지역
+    formData.append('status', status); 
+
+    if (image) {
+      formData.append('travel_image', imageFile); // 선택된 파일 추가
+
+    try {
+      const response = await axios.post('http://43.200.238.249:5000/travel-plans/makeRoom', formData, {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      const travelId = response.data.travel_id;
+      console.log('응답 데이터(FormData):', response.data);
+      console.log('여행 계획방 ID:', travelId);
+
+      navigate('/MakePlanroom2', { state: { travelId } });
+
+    } catch (error) {
+      console.error('에러 발생:', error.response ? error.response.data : error.message);
+      if (error.response) {
+        console.error('서버 응답 오류:', error.response.data);
+    }
+    }
+  }
   };
+
+
   return (
     <FullContainner>
       <h1>여행 계획방 만들기 (1/2)</h1>
@@ -241,12 +287,13 @@ function MakePlanRoom1() {
           <PlanBottom>
             <Text>
               <div>여행 제목</div>
-              <input type="text" placeholder="여행 제목을 입력하세요." />
+              <input type="text" placeholder="여행 제목을 입력하세요." onChange={(e)=>{setTitle(e.target.value)}}/>
               <div>여행 설명</div>
               <textarea
                 cols="55"
                 rows="10"
                 placeholder="여행 설명을 입력하세요."
+                onChange={(e)=>{setExplain(e.target.value)}}
               />
             </Text>
           </PlanBottom>
diff --git a/src/pages/MakePlanRoom2.jsx b/src/pages/MakePlanRoom2.jsx
index 7af1f3c..e9b444b 100644
--- a/src/pages/MakePlanRoom2.jsx
+++ b/src/pages/MakePlanRoom2.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import {
   MapContainer as LeafletMapContainer,
   TileLayer,
@@ -181,7 +181,8 @@ const route = [[37.5665, 126.978]];
 function MakePlanRoom2() {
   const [accommodation, setAccommodation] = useState('');
   const [registeredAccommodations, setRegisteredAccommodations] = useState([]);
-
+  const location = useLocation();
+  
   const handleAddAccommodation = () => {
     if (accommodation.trim() === '') return;
     setRegisteredAccommodations([
@@ -209,7 +210,9 @@ function MakePlanRoom2() {
   const navigate = useNavigate();
 
   const handleLink = () => {
-    navigate('/StartPlanRoom');
+    const travelId = location.state?.travelId; //MakePlanRoom1에서 받은 travelId
+
+    navigate('/StartPlanRoom', { state: { travelId }});
   };
 
   return (
diff --git a/src/pages/PlanRoom1.jsx b/src/pages/PlanRoom1.jsx
index 8b8a506..a635b36 100644
--- a/src/pages/PlanRoom1.jsx
+++ b/src/pages/PlanRoom1.jsx
@@ -6,6 +6,7 @@ import ToggleListPlace from "../toggleLists/TogglesListPlace";
 import ToggleListVote from "../toggleLists/ToggleListVote";
 import MyPlaceModal from "../modals/MyPlaceModal";
 import KakaoMap from "../components/KakaoMap";
+import axios from 'axios';
 
 /*구역 나눔*/
 const Container=styled.div`
@@ -264,9 +265,11 @@ function PlanRoom1(){
     const [isModalOpen, setIsModalOpen] = useState(false); // 채팅 모달 상태
     const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 })
     const [chatValue,setChatValue]=useState('');
+    const [lists,setLists]=useState([]);//나의 장소 불러오기
     const inputRef = useRef(null);
     const spanRef = useRef(null);
     const navigate=useNavigate();
+    const token = localStorage.getItem('token');
 
     const shareVoteDetails = (details) => {
         setVoteDetails(details);
@@ -283,7 +286,6 @@ function PlanRoom1(){
     const closeModal2  = () =>{
         setModal2(false);
     };
-
     const handleListClick = (list) => {
         if (selectedLists.includes(list)) {
           setSelectedLists(selectedLists.filter((item) => item !== list)); 
@@ -291,11 +293,9 @@ function PlanRoom1(){
           setSelectedLists([...selectedLists, list]); 
         }
     };
-
     const handleCandidate=()=>{
         setCandidateList([...candidateList, `나의 후보 리스트 ${candidateList.length+1}`]); 
     };
-
     const handlePlace=()=>{
         setPlaceLists([...placeLists, inputValue]); 
     };
@@ -366,14 +366,28 @@ function PlanRoom1(){
     const handleMouseMove = (e) => {
         setCursorPosition({ x: e.clientX, y: e.clientY });
     };
+    // const lists=[
+    //     '나의 장소 리스트1','나의 장소 리스트2','나의 장소 리스트3','나의 장소 리스트4','나의 장소 리스트5','나의 장소 리스트6',];
 
-    useEffect(() => {
-        console.log("modal1 상태 변경:", modal1);
-    }, [modal1]);
-
-    const lists=[
-        '나의 장소 리스트1','나의 장소 리스트2','나의 장소 리스트3','나의 장소 리스트4','나의 장소 리스트5','나의 장소 리스트6',];
-
+    /*백 연결*/
+    useEffect(()=>{
+        const fetchLists=async()=>{
+            try{
+                const response=await axios.get(
+                    'http://43.200.238.249:5000/users/lists',
+                    {
+                        headers: {
+                          Authorization: `Bearer ${token}`,
+                        },
+                      }
+                    );
+                    setLists(response.data);  
+                  } catch (error) {
+                    console.error('Error fetching lists:', error);
+                  }
+                };
+                fetchLists();  
+            }, [token]); 
     return(
         <Container>
             <Left>
@@ -415,7 +429,7 @@ function PlanRoom1(){
                     </>
                 }
             </Right>
-            {/*모달들*/}
+            {/*채팅, 모달들*/}
             <div style={{ position: 'relative' }}>
             {isModalOpen && (
                 <Overlay style={{ left: cursorPosition.x, top: cursorPosition.y-1000}}>
diff --git a/src/pages/PlanRoom2.jsx b/src/pages/PlanRoom2.jsx
index 44e1ad5..cdf6002 100644
--- a/src/pages/PlanRoom2.jsx
+++ b/src/pages/PlanRoom2.jsx
@@ -1,22 +1,27 @@
 import React, { useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom'; // useLocation 임포트
+import KakaoMap from '../components/KakaoMap'; // KakaoMap 컴포넌트 임포트
 import { planroomStyle } from '../styles/PlanRoom2style';
 /** @jsxImportSource @emotion/react */
 
-const PlanRoom2 = ({ selectedDates }) => {
-  const [zoomLevel, setZoomLevel] = useState(1);
+const PlanRoom2 = () => {
+  const navigate = useNavigate(); // useNavigate 훅 사용
+  const location = useLocation(); // useLocation 훅 사용
+  const selectedDates = location.state?.selectedDates; // 전달된 날짜 정보 받기
+  const [zoomLevel, setZoomLevel] = useState(3); // 기본 줌 레벨 설정
   const [expandedAccommodation, setExpandedAccommodation] = useState(false);
   const [expandedCandidates, setExpandedCandidates] = useState(null);
 
   const handleZoomIn = () => {
-    setZoomLevel(prev => prev + 0.1);
+    setZoomLevel(prev => Math.min(prev + 1, 10)); // 최대 줌 레벨 제한
   };
 
   const handleZoomOut = () => {
-    setZoomLevel(prev => Math.max(prev - 0.1, 1));
+    setZoomLevel(prev => Math.max(prev - 1, 1)); // 최소 줌 레벨 제한
   };
 
   const handleCompletePlan = () => {
-    alert('여행 계획이 완료되었습니다!');
+    navigate('/planroomresult'); // PlanRoomResult 페이지로 이동
   };
 
   const handleAccommodationClick = () => {
@@ -32,13 +37,13 @@ const PlanRoom2 = ({ selectedDates }) => {
   return (
     <div css={planroomStyle} className="planroom">
       <h2 className="travel-title">여행 기간: {selectedDates}</h2>
-      <div className="map-container" style={{ transform: `scale(${zoomLevel})` }}>
-        <div className="map" />
-        <div className="zoom-controls">
-          <button className="zoom-button" onClick={handleZoomIn}>+</button>
-          <button className="zoom-button" onClick={handleZoomOut}>-</button>
-        </div>
+      <KakaoMap zoomLevel={zoomLevel} /> {/* KakaoMap 컴포넌트 추가 */}
+
+      <div className="zoom-controls">
+        <button className="zoom-button" onClick={handleZoomIn}>+</button>
+        <button className="zoom-button" onClick={handleZoomOut}>-</button>
       </div>
+
       <div className="info-section">
         <div className="location-info">
           <h3 className="section-title">장소 정보</h3>
@@ -93,4 +98,4 @@ const PlanRoom2 = ({ selectedDates }) => {
   );
 };
 
-export default PlanRoom2;
+export default PlanRoom2;
\ No newline at end of file
diff --git a/src/pages/PlanRoomResult.jsx b/src/pages/PlanRoomResult.jsx
index 54d0fa1..781647e 100644
--- a/src/pages/PlanRoomResult.jsx
+++ b/src/pages/PlanRoomResult.jsx
@@ -13,6 +13,7 @@ import L from 'leaflet';
 import OutImage from '../buttonimage/outbutton.png';
 import prevImage from '../buttonimage/prebutton.png';
 import DownImage from '../buttonimage/down.png';
+import ExdownImage from '../buttonimage/exdown.png';
 import SaveImage from '../buttonimage/save.png';
 import TravelImage from '../buttonimage/travel.png';
 import RouteImage from '../buttonimage/route.png';
@@ -236,8 +237,8 @@ const Save = styled.button`
 const Modal = styled.div`
   display: ${(props) => (props.open ? 'block' : 'none')};
   position: fixed;
-  top: 70%;
-  left: 80%;
+  top: 80%;
+  left: 70%;
   transform: translate(-50%, -50%);
   width: 400px;
   padding: 20px;
@@ -274,6 +275,19 @@ const DownImageContainer = styled.div`
   z-index: 1000;
 `;
 
+const ExdownImageContainer = styled.div`
+  display: ${(props) => (props.show ? 'flex' : 'none')};
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 300px;
+  height: 300px;
+  background: url(${ExdownImage}) no-repeat center center;
+  background-size: contain;
+  z-index: 1000;
+`;
+
 // 기본 마커 아이콘 설정
 delete L.Icon.Default.prototype._getIconUrl;
 L.Icon.Default.mergeOptions({
@@ -323,18 +337,8 @@ function PlanRoomResult() {
   const [activeRoute, setActiveRoute] = useState(1);
   const [showTime, setShowTime] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isSaved, setIsSaved] = useState(false);
-  const [showDownImage, setShowDownImage] = useState(false);
-
-  useEffect(() => {
-    let timer;
-    if (showDownImage) {
-      timer = setTimeout(() => {
-        setShowDownImage(false);
-      }, 1000);
-    }
-    return () => clearTimeout(timer); // Cleanup the timer on component unmount
-  }, [showDownImage]);
+  const [isExcelDownload, setIsExcelDownload] = useState(false);
+  const [isImageDownload, setIsImageDownload] = useState(false);
 
   const handleRouteClick = (routeId) => {
     setActiveRoute(routeId);
@@ -344,6 +348,26 @@ function PlanRoomResult() {
     setShowTime(!showTime);
   };
 
+  useEffect(() => {
+    let timer;
+    if (isImageDownload) {
+      timer = setTimeout(() => {
+        setIsImageDownload(false);
+      }, 1000);
+    }
+    return () => clearTimeout(timer);
+  }, [isImageDownload]);
+
+  useEffect(() => {
+    let timer;
+    if (isExcelDownload) {
+      timer = setTimeout(() => {
+        setIsExcelDownload(false);
+      }, 1000);
+    }
+    return () => clearTimeout(timer);
+  }, [isExcelDownload]);
+
   // 동선에 포함된 여행지만 필터링
   const activeRouteLocations = activeRoute
     ? routes[activeRoute].map((point) =>
@@ -364,7 +388,7 @@ function PlanRoomResult() {
   };
 
   const handleSaveClick = () => {
-    setIsModalOpen(true);
+    setIsModalOpen((prevState) => !prevState); // 현재 상태의 반대로 설정
   };
 
   const handleSaveAsImage = () => {
@@ -376,9 +400,8 @@ function PlanRoomResult() {
       link.download = 'travel-plan.png';
       link.click();
     });
-    setIsSaved(true);
     setIsModalOpen(false);
-    setShowDownImage(true);
+    setIsImageDownload(true);
   };
 
   const handleSaveAsExcel = () => {
@@ -407,9 +430,8 @@ function PlanRoomResult() {
     // 엑셀 파일 생성 및 다운로드
     XLSX.writeFile(wb, 'travel-plan.xlsx');
 
-    setIsSaved(true);
     setIsModalOpen(false);
-    setShowDownImage(true);
+    setIsExcelDownload(true);
   };
 
   //장소위치조정
@@ -534,7 +556,8 @@ function PlanRoomResult() {
         <ModalButton onClick={handleSaveAsImage}>사진으로 저장</ModalButton>
         <ModalButton onClick={handleSaveAsExcel}>엑셀로 저장</ModalButton>
       </Modal>
-      <DownImageContainer show={showDownImage} />
+      <DownImageContainer show={isImageDownload} />
+      <ExdownImageContainer show={isExcelDownload} />
     </Container>
   );
 }
diff --git a/src/pages/SignUp.jsx b/src/pages/SignUp.jsx
index e77ea2d..c259a79 100644
--- a/src/pages/SignUp.jsx
+++ b/src/pages/SignUp.jsx
@@ -5,7 +5,7 @@ import InputSignup from '../styles/input-signup'; // 사용자 정의 입력 컴
 import SearchIcon from "../assets/images/searchIcon.png";
 import { useNavigate } from 'react-router-dom';
 
-const API_URL = 'https://jsonplaceholder.typicode.com/users';
+const API_URL = 'http://43.200.238.249:5000/users/user'; // 서버 URL
 
 const LogoImage = styled.img`
     width: 280px;
@@ -80,7 +80,18 @@ const SignUp = () => {
     const handlePassword = (event) => {
         const value = event.target.value;
         setPassword(value);
-        setPasswordError(value.length < 4 ? "비밀번호는 4자리 이상이어야 합니다." : '');
+        const passwordPattern = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*?_])/;
+        if (!value) {
+            setPasswordError("비밀번호를 입력해주세요.");
+        } else if (value.length < 4) {
+            setPasswordError("비밀번호는 4자리 이상이어야 합니다.");
+        } else if (value.length > 12) {
+            setPasswordError("비밀번호는 최대 12자리까지 입력 가능합니다.");
+        } else if (!passwordPattern.test(value)) {
+            setPasswordError("비밀번호는 영어, 숫자, 특수문자를 포함해야 합니다.");
+        } else {
+            setPasswordError('');
+        }
     };
 
     const handleConfirmPassword = (event) => {
@@ -92,7 +103,7 @@ const SignUp = () => {
     const handleSignup = async () => {
         if (!emailError && !passwordError && !confirmPasswordError && isAgreed) {
             try {
-                const userData = { email, password };
+                const userData = { email, password, confirmPassword };
                 const response = await axios.post(API_URL, userData);
                 if (response.status === 201) {
                     console.log(response);
diff --git a/src/pages/home2.jsx b/src/pages/home2.jsx
index 6d52cbb..6c7574f 100644
--- a/src/pages/home2.jsx
+++ b/src/pages/home2.jsx
@@ -12,7 +12,11 @@ const Home2 = () => {
     useEffect(() => {
         const fetchData = async () => {
             try {
-                const response = await axios.get('');
+                const response = await axios.get('/travel-plans/myRooms', {
+                    headers: {
+                        Authorization: `Bearer <YOUR_JWT_TOKEN>`,
+                    },
+                });
                 setTravel(response.data);
             } catch (error) {
                 console.error('Error:', error);
@@ -28,9 +32,9 @@ const Home2 = () => {
 
     const sortedTravel = [...travel].sort((a, b) => {
         if (sortOption === 'latest') {
-            return new Date(b.date) - new Date(a.date);
+            return new Date(b.start_date) - new Date(a.start_date);
         } else if (sortOption === 'name') {
-            return a.name.localeCompare(b.name);
+            return a.title.localeCompare(b.title);
         }
         return 0;
     });
diff --git a/src/redux/appWrapper.js b/src/redux/appWrapper.js
new file mode 100644
index 0000000..872eccb
--- /dev/null
+++ b/src/redux/appWrapper.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import App from '../App';
+
+const AppWrapper = () => {
+  return (
+    <Router>
+      <App />
+    </Router>
+  );
+};
+
+export default AppWrapper;
\ No newline at end of file
diff --git a/src/redux/dataSlice.js b/src/redux/dataSlice.js
new file mode 100644
index 0000000..1b0e72f
--- /dev/null
+++ b/src/redux/dataSlice.js
@@ -0,0 +1,34 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+// 비동기 데이터 로딩을 위한 Thunk 생성
+export const fetchData = createAsyncThunk('data/fetchData', async () => {
+  const response = await axios.get('http://43.200.238.249:5000/your-endpoint');
+  return response.data;
+});
+
+export const dataSlice = createSlice({
+  name: 'data',
+  initialState: {
+    data: null,
+    status: 'idle',
+    error: null,
+  },
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchData.pending, (state) => {
+        state.status = 'loading';
+      })
+      .addCase(fetchData.fulfilled, (state, action) => {
+        state.status = 'succeeded';
+        state.data = action.payload;
+      })
+      .addCase(fetchData.rejected, (state, action) => {
+        state.status = 'failed';
+        state.error = action.error.message;
+      });
+  },
+});
+
+export default dataSlice.reducer;
\ No newline at end of file
diff --git a/src/redux/store.js b/src/redux/store.js
new file mode 100644
index 0000000..953a3f6
--- /dev/null
+++ b/src/redux/store.js
@@ -0,0 +1,10 @@
+import { configureStore } from '@reduxjs/toolkit';
+import dataReducer from './dataSlice';
+
+export const store = configureStore({
+  reducer: {
+    data: dataReducer,
+  },
+});
+
+export default store;
\ No newline at end of file
diff --git a/src/styles/PlanRoom2style.jsx b/src/styles/PlanRoom2style.jsx
index 5b1d15d..d03b373 100644
--- a/src/styles/PlanRoom2style.jsx
+++ b/src/styles/PlanRoom2style.jsx
@@ -17,10 +17,10 @@ export const planroomStyle = css`
 
   .map-container {
     width: 50%; 
-    height: 450px; 
+    height: 400px; 
     background-color: lightgray; 
     position: relative; 
-    overflow: hidden; 
+     
   }
 
   .map {
diff --git a/src/styles/homestyle.jsx b/src/styles/homestyle.jsx
index bede26f..42532a2 100644
--- a/src/styles/homestyle.jsx
+++ b/src/styles/homestyle.jsx
@@ -5,7 +5,7 @@ const Home = () => {
   const containerStyle = {
     textAlign: 'center',
     padding: '50px',
-    backgroundColor: '#f8f9fa',
+    backgroundColor: '#ffffff',
   };
 
   const headingStyle = {