Merge pull request #11 from collie-jun/main

로그인 테스트 #3
100-hours-a-week · Aug 24, 2024 · 5aa783e · 5aa783e
2 parents d0ee4e4 + 7a583dc
commit 5aa783e
Show file tree

Hide file tree

Showing 14 changed files with 893 additions and 79 deletions.
diff --git a/travelday-fe/src/App.js b/travelday-fe/src/App.js
@@ -5,6 +5,7 @@ import FindPage from './pages/searchPage/searchingPage';
 import FlightResultPage from './pages/resultPage/flightResultPage';
 import HotelResultPage from './pages/resultPage/hotelResultPage';
 import MainPage from './pages/mainPage/mainPage';
+import MainDetailPage from './pages/mainPage/mainDetailPage';
 import LoginPage from './pages/userPage/loginPage';
 import Callback from './pages/userPage/oAuth2LoginSuccessPage';
 import MyPage from './pages/userPage/myPage';
@@ -18,6 +19,7 @@ import ScheduleDetail from './pages/schedulePage/scheduleDetailPage';
 import WishListPage from './pages/schedulePage/wishListPage';
 import MapLocationPage from './pages/schedulePage/mapLocationPage';
 import CreateSchedulePage from './pages/schedulePage/createSchedulePage';  
+import FixSchedulePage from './pages/schedulePage/fixschedulePage';  
 
 import './App.css';
 
@@ -37,12 +39,13 @@ function App() {
     <Router>
       <Routes>
         <Route path="/" element={<MainPage />} />
+        <Route path="/maindetail/:id" element={<MainDetailPage />} />
         <Route path="/login" element={<LoginPage />} /> 
         <Route path="/search" element={<FindPage />} />
         <Route path="/flight" element={<FlightResultPage />} />
         <Route path="/hotel" element={<HotelResultPage />} /> 
         <Route path="/hotel/hotel-detail" element={<HotelDetailPage />} />
-        <Route path="/login/oauth2/successs" element={<Callback />} />
+        <Route path="/login/oauth2/success" element={<Callback />} />
         <Route path="/mypage" element={<MyPage />} />
         <Route path="/nickname" element={<Nickname />} />
         <Route path="/map" element={<MapPage />} />
@@ -52,7 +55,8 @@ function App() {
         <Route path="/maplocation/:travelRoomId" element={<MapLocationPage />} /> 
         <Route path="/alarm" element={<AlarmPage />} />
         <Route path="/intro" element={<IntroPage />} /> 
-        <Route path="/createschedule" element={<CreateSchedulePage />} /> {/* CreateSchedulePage 경로 추가 */}
+        <Route path="/createschedule" element={<CreateSchedulePage />} /> 
+        <Route path="/fixschedule/:travelRoomId" element={<FixSchedulePage />} />
       </Routes>
     </Router>
   );

diff --git a/travelday-fe/src/components/mainPage/brandHotelList.js b/travelday-fe/src/components/mainPage/brandHotelList.js
diff --git a/travelday-fe/src/components/mainPage/newFlightList.js b/travelday-fe/src/components/mainPage/newFlightList.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { useNavigate } from 'react-router-dom';
 import Image1 from '../../images/main/list1/1.png';
 import Image2 from '../../images/main/list1/2.png';
 import Image3 from '../../images/main/list1/3.png';
@@ -9,42 +10,47 @@ import Image6 from '../../images/main/list1/6.png';
 
 const flights = [
   {
+    id: 1,
     departure: '인천',
     destination: '푸꾸옥',
     date: '2024-09-28',
     price: '₩237,000',
     image: Image1,
-    //https://www.agoda.com/ko-kr/flights/airport/ICN/PQC/Seoul-Phu-Quoc-Island.html?cid=1834243&tag=73702578-adda-4b97-a1c7-12c1b3b0745d&gad_source=1&gclid=CjwKCAjwoJa2BhBPEiwA0l0ImKyJCooCWxpQRcJz6rbqi4CRayKdjFnnS-irkdVw0WIWcfNeVvlrghoC6xIQAvD_BwE
   },
   {
+    id: 2,
     departure: '인천',
     destination: '오이타',
     date: '2024-10-05',
     price: '₩600,000',
     image: Image2,
   },
   {
+    id: 3,
     departure: '인천',
     destination: '발리',
     date: '2024-11-10',
     price: '₩1,800,000',
     image: Image3,
   },
   {
+    id: 4,
     departure: '인천',
     destination: '도쿄',
     date: '2024-09-15',
     price: '₩1,200,000',
     image: Image4,
   },
   {
+    id: 5,
     departure: '부산',
     destination: '치앙마이',
     date: '2024-10-05',
     price: '₩600,000',
     image: Image5,
   },
   {
+    id: 6,
     departure: '청주',
     destination: '타이베이',
     date: '2024-11-10',
@@ -54,11 +60,17 @@ const flights = [
 ];
 
 const NewFlightList = () => {
+  const navigate = useNavigate();
+
+  const handleItemClick = (flight) => {
+    navigate(`/maindetail/${flight.id}`, { state: { flight } });
+  };
+
   return (
     <Wrapper>
       <ListContainer>
-        {flights.map((flight, index) => (
-          <ListItem key={index}>
+        {flights.map((flight) => (
+          <ListItem key={flight.id} onClick={() => handleItemClick(flight)}>
             <FlightImage src={flight.image} alt={`${flight.destination} image`} />
             <FlightDetails>
               <FlightRoute>{`${flight.departure} - ${flight.destination}`}</FlightRoute>
@@ -78,10 +90,10 @@ const Wrapper = styled.div`
   width: 100%;
   overflow-x: auto;
   padding-bottom: 10px; 
-  -webkit-overflow-scrolling: touch; /* 스크롤에 부드러운 효과를 주기 위한 속성 */
-  scrollbar-width: none; /* Firefox에서 스크롤바 숨기기 */
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none; 
   &::-webkit-scrollbar {
-    display: none; /* Webkit 기반 브라우저에서 스크롤바 숨기기 */
+    display: none;
   }
 `;
 
@@ -96,13 +108,14 @@ const ListItem = styled.div`
   display: flex;
   align-items: center;
   background-color: #ffffff;
+  cursor: pointer; /* 클릭 가능하도록 커서 변경 */
 `;
 
 const FlightImage = styled.img`
   width: 120px;
   height: 120px;
   border-radius: 5px;
-  object-fit: cover; /* 이미지가 박스에 맞게 크기 조정 */
+  object-fit: cover;
 `;
 
 const FlightDetails = styled.div`

diff --git a/travelday-fe/src/components/schedulePage/scheduleList.js b/travelday-fe/src/components/schedulePage/scheduleList.js
@@ -1,9 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
+import axios from 'axios';
+import TrashIcon from '../../images/trash.png';
 
-const ScheduleList = ({ schedules, onItemClick }) => {
+
+const ScheduleList = ({ schedules, onItemClick, onDeleteClick }) => {
   const [sortedSchedules, setSortedSchedules] = useState([]);
   const [sortOrder, setSortOrder] = useState('nearest');
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedScheduleId, setSelectedScheduleId] = useState(null);
 
   useEffect(() => {
     const today = new Date();
@@ -30,6 +35,27 @@ const ScheduleList = ({ schedules, onItemClick }) => {
     setSortedSchedules([...sortedUpcoming, { type: 'pastLabel' }, ...pastSchedules]);
   }, [schedules, sortOrder]);
 
+  const handleDeleteClick = (id) => {
+    setSelectedScheduleId(id);
+    setIsModalOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    if (selectedScheduleId) {
+      try {
+        await axios.delete(`https://api.thetravelday.co.kr/api/rooms/${selectedScheduleId}`);
+        onDeleteClick(selectedScheduleId); 
+        setIsModalOpen(false); 
+      } catch (error) {
+        console.error("일정 삭제 중 오류 발생:", error);
+      }
+    }
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
   return (
     <Container>
       <SortButtons>
@@ -57,23 +83,38 @@ const ScheduleList = ({ schedules, onItemClick }) => {
           return (
             <ScheduleItem
               key={index}
-              onClick={() => onItemClick(schedule.id)}
               isPast={isPast}
             >
-              <ScheduleTitle isPast={isPast}>{schedule.title}</ScheduleTitle>
-              <ScheduleDate isPast={isPast}>{schedule.date}</ScheduleDate>
+              <ScheduleContent onClick={() => onItemClick(schedule.id)}>
+                <ScheduleTitle isPast={isPast}>{schedule.title}</ScheduleTitle>
+                <ScheduleDate isPast={isPast}>{schedule.date}</ScheduleDate>
+              </ScheduleContent>
+              <TrashIconWrapper onClick={() => handleDeleteClick(schedule.id)}>
+                <img src={TrashIcon} alt="Delete" />
+              </TrashIconWrapper>
             </ScheduleItem>
           );
         })}
       </ListContainer>
+
+      {/* 모달 */}
+      {isModalOpen && (
+        <ModalOverlay>
+          <ModalContent>
+            <ModalMessage>정말 일정을 삭제하시겠습니까?</ModalMessage>
+            <ModalButtons>
+              <ModalButton onClick={confirmDelete}>예</ModalButton>
+              <ModalButton onClick={closeModal}>아니오</ModalButton>
+            </ModalButtons>
+          </ModalContent>
+        </ModalOverlay>
+      )}
     </Container>
   );
 };
 
 export default ScheduleList;
 
-// 스타일 컴포넌트는 이전과 동일합니다.
-
 const Container = styled.div`
   width: 100%;
   max-width: 340px;
@@ -121,6 +162,9 @@ const PastLabel = styled.div`
 `;
 
 const ScheduleItem = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   background-color: #ffffff;
   padding: 20px;
   border-radius: 8px;
@@ -132,10 +176,14 @@ const ScheduleItem = styled.div`
   &:hover {
     transform: scale(1.05);  
     border: 2px solid #f12e5e; 
-    background-color: ${(props) => (props.isPast ? '#ffffff' : '#fffff')}; 
   }
 `;
 
+const ScheduleContent = styled.div`
+  flex: 1;
+  margin-right: 10px;
+`;
+
 const ScheduleTitle = styled.h2`
   font-size: 15px;
   font-weight: bold;
@@ -147,3 +195,75 @@ const ScheduleDate = styled.p`
   font-size: 13px;
   color: ${(props) => (props.isPast ? '#aaa' : '#666')}; 
 `;
+
+const TrashIconWrapper = styled.div`
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+
+  img {
+    width: 20px;
+    height: auto;
+    object-fit: contain;
+  }
+
+  &:hover img {
+    filter: brightness(0.8);
+  }
+`;
+
+const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+`;
+
+const ModalContent = styled.div`
+  background-color: white;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  text-align: center;
+`;
+
+const ModalMessage = styled.p`
+  font-size: 16px;
+  margin-bottom: 20px;
+`;
+
+const ModalButtons = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const ModalButton = styled.button`
+  background: linear-gradient(135deg, #ff7e79, #ff9a8b); 
+  color: white;
+  border: none;
+  width:82px;
+  padding: 10px 20px;
+  border-radius: 50px; 
+  cursor: pointer;
+  font-size: 16px;
+  margin: 0 10px;
+  transition: all 0.3s ease; 
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
+
+  &:hover {
+    background: linear-gradient(135deg, #ff9a8b, #ff7e79);  
+    transform: translateY(-2px);  
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); 
+  }
+
+  &:active {
+    transform: translateY(0); 
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); 
+  }
+`;