Skip to content

수정 #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tpfls wants to merge 2 commits into
base: main
Choose a base branch
from
Open

수정 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
288af15
메인페이지
tpfls Aug 14, 2024
aae10ee
수정
tpfls Aug 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
REACT_APP_KAKAO_API_KEY = b1d6aed50bab9834340e45aa8d0a6b67
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
55 changes: 15 additions & 40 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';
Expand All @@ -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;
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -108,4 +83,4 @@ function AppWrapper() {
);
}

export default AppWrapper;
export default AppWrapper;
Binary file added src/buttonimage/exdown.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
61 changes: 52 additions & 9 deletions src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down
Loading