Skip to content

Commit

Permalink
Fix : 예약정보 페이지 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@seonwoonam
seonwoonam authored Dec 5, 2023
2 parents be9421a + 5452156 commit 2fc5346
Show file tree
Hide file tree
Showing 5 changed files with 147 additions and 34 deletions.
45 changes: 30 additions & 15 deletions frontend/dguonoff/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,47 @@ import useModalCreater from './modules/modal/Modal';
import ReservationInfo from './components/pages/service/information/ReservationInfo';
import LoginPage from './components/pages/service/login/LoginPage';
import SignupPage from './components/pages/service/signup/SignupPage';
import React, { createContext, useState } from 'react';
import Reservation from './types/Reservation';
// import UserInfo from './components/pages/service/information/UserInfo';
// import ReservationDetailPage from './components/pages/service/reservation/ReservationDetailPage';

export const ReservationContext = React.createContext({
reservationInfo : new Reservation(), // 기본값
setReservationInfo: (resrvation : Reservation) => {}, // 빈 함수로 초기화
});

function App() {
const [reservationInfo, setReservation] = useState<Reservation>(new Reservation());

const setReservationInfo = (reservation : Reservation): void => {
setReservation(reservation);
};
// Hook
useModalCreater();


// Render
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<MainPage/>} />
<Route path="/login" element={<LoginPage />} />
<Route path="/signup" element={<SignupPage />} />
<Route path="/reservationInfo" element={<ReservationInfo/>} />
{/* <Route path="/userInfo" element={<UserInfo/>} />
<Route path="/reservationPage" element={<ReservationPage />} />
<Route path="/onoffPage" element={<OnOffPage />} />
<Route path="/reservationdetailPage" element={<ReservationDetailPage />}/> */}
<Route path="/admin" element={<AdminHome />} />
<Route path="/admin/login" element={<AdminLogin />} />
<Route path="/admin/signup" element={<AdminSignup />} />
</Routes>
</BrowserRouter>
<ReservationContext.Provider value={{reservationInfo, setReservationInfo}}>
<BrowserRouter>
<Routes>
<Route path="/" element={<MainPage/>} />
<Route path="/reservationInfo" element={<ReservationInfo reservation={reservationInfo!}/>} />

<Route path="/login" element={<LoginPage />} />
<Route path="/signup" element={<SignupPage />} />
{/* <Route path="/userInfo" element={<UserInfo/>} />
<Route path="/reservationPage" element={<ReservationPage />} />
<Route path="/onoffPage" element={<OnOffPage />} />
<Route path="/reservationdetailPage" element={<ReservationDetailPage />}/> */}
<Route path="/admin" element={<AdminHome />} />
<Route path="/admin/login" element={<AdminLogin />} />
<Route path="/admin/signup" element={<AdminSignup />} />
</Routes>
</BrowserRouter>
</ReservationContext.Provider>
</div>
);
}
Expand Down
51 changes: 49 additions & 2 deletions frontend/dguonoff/src/api/dguonandoff.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -942,8 +942,6 @@ export async function getMyBookmark(token: string): Promise<Bookmark[]> {
}




/*****************************************************************
* 서버로부터 모든 공지사항 정보를 가져오는 API 메서드입니다.
*****************************************************************/
Expand Down Expand Up @@ -1157,4 +1155,53 @@ export async function getAnnouncementBody(token: string, boardId: number): Promi
console.error(error);
}
return responseData;
}

export async function deleteReservation(token: string, reservationId : number): Promise<boolean> {
let responseData: DeleteFixedScheduleResponse | undefined = undefined;
try {
const response = await axios.delete(
getApiUrl(`/api/fixedSchedules/${reservationId}`),
{
headers: {
"Authorization": `Bearer ${token}`
},
withCredentials: true
}
);
responseData = response.data;
} catch (error) {
if (axios.isAxiosError(error) && error.response) {
responseData = error.response.data;
}
}
return responseData === "success";
}

export async function modifyReservation(token: string, reservationId: number ,outline : string): Promise<boolean>{
let responseData: DeleteFixedScheduleResponse | undefined = undefined;
const postData = {
"reservationId" : reservationId,
"outline" : outline,
"guestIds": []
};
try {
const response = await axios.post(
getApiUrl("/api/reservation/modification"),
postData,
{
headers: {
"Authorization": `Bearer ${token}`,
"Content-Type": "application/json"
},
withCredentials: true
}
);
responseData = response.data;
} catch (error) {
if (axios.isAxiosError(error) && error.response) {
responseData = error.response.data;
}
}
return responseData === "success";
}
2 changes: 1 addition & 1 deletion frontend/dguonoff/src/components/pages/service/Service.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
border-radius: 6px;
font-style: normal;
font-weight: 700;
font-size: 18px;
font-size: 16px;
line-height: 22px;
text-align: center;

Expand Down
17 changes: 12 additions & 5 deletions frontend/dguonoff/src/components/pages/service/home/MainPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { useEffect, useState } from "react";
import { useContext, useEffect, useState } from "react";
import { Box, Container, IconButton, Toolbar, Button } from "@mui/material";
import NotificationsIcon from '@mui/icons-material/Notifications';
import styles from "../Service.module.css";
import GrayBorderBox from "../../../../modules/GrayBorderBox";
import GrayCircle from "../../../../modules/GrayCircle";
import { Business, LocalLibrary, FilterHdr, BlindsClosedSharp } from '@mui/icons-material';
import { useNavigate } from "react-router-dom";
import { Route, Routes, useNavigate } from "react-router-dom";
import useAuth from "../../../../hooks/useAuth";
import Bookmark from "../../../../types/Bookmark";
import { getBuildings, getMyBookmark, getReservations } from "../../../../api/dguonandoff";
Expand All @@ -14,6 +14,7 @@ import { useModal } from "../../../../modules/modal/Modal";
import { ModalAnimationType } from "../../../../modules/modal/ModalAnimations";
import Building from "../../../../types/Building";
import Reservation from "../../../../types/Reservation";
import { ReservationContext } from "../../../../App";


interface FacilityMenu {
Expand All @@ -31,6 +32,7 @@ export default function MainPage() {
const [isActive, setIsActive] = useState<boolean>(false);
const [nowUsingReservation, setNowUsingReservation] = useState<Reservation>(); // 현재 이용중인 예약
const [FacilityMenuModal, openFacilityMenuModal, closeFacilityMenuModal] = useModal(ModalAnimationType.ZOOM);
const {setReservationInfo } = useContext(ReservationContext);

let userToken : string = "";

Expand Down Expand Up @@ -93,6 +95,11 @@ export default function MainPage() {
setBuildings(buildings);
}

const handleOnClickMyResrvation = (reservation : Reservation) => {
setReservationInfo(reservation);
navigate('/reservationInfo');
}

const handleEndUsing = () => {

}
Expand All @@ -113,7 +120,7 @@ export default function MainPage() {
};

return (
<Container>
<Container>
<Toolbar>
<div className={styles.mainTitle}>
{appName}
Expand Down Expand Up @@ -180,7 +187,7 @@ export default function MainPage() {
{myBookmarks.length > 0 ?
<>
{myBookmarks.map((bookmark, index) => (
<div key={index}>
<div key={index} >
<div style={{ display: 'flex', flexDirection: 'row', gap: '10px', alignItems: 'center' }}>
<Business sx={{ color: '#959494', paddingTop : '12px' }}/>
<div style={{ paddingTop: '12px' }}>{bookmark.getBuildingName()}</div>
Expand All @@ -200,7 +207,7 @@ export default function MainPage() {
{myReservations.length > 0 ?
<>
{myReservations.map((reservation, index) => (
<div key={index}>
<div key={index} onClick={() => handleOnClickMyResrvation(reservation)}>
<div style={{ display: 'flex', flexDirection: 'row', gap: '10px', alignItems: 'center' }}>
<Business sx={{ color: '#959494', paddingTop : '12px' }}/>
<div>
Expand Down
66 changes: 55 additions & 11 deletions frontend/dguonoff/src/components/pages/service/information/ReservationInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,42 @@ import { Box, Container, IconButton, Toolbar, Button, Grid } from "@mui/material
import styles from "../Service.module.css";
import GrayBorderBox from "../../../../modules/GrayBorderBox";
import ReservationButton from "../../../../modules/reservationButton/ReservationButton";
import Reservation from "../../../../types/Reservation";
import { CookieStorageProvider } from "../../../../modules/storage/AppStorageProvider";
import { deleteReservation, modifyReservation } from "../../../../api/dguonandoff";
import { useNavigate } from 'react-router-dom';

export default function ReservationInfo() {

interface ReservationInfoProps {
reservation : Reservation;
}

export default function ReservationInfo({reservation} : ReservationInfoProps) {
const title : string = "예약 정보";
const reservationInfo : Reservation = reservation;
const [newOutline, setNewOutline] = useState<string>(reservation.getOutline());
const navigate = useNavigate();

const handleOutlineChange = (event : React.ChangeEvent<HTMLTextAreaElement>) => {
setNewOutline(event.target.value);
}

const handleOutlineSubmit = async () => {
let userToken = CookieStorageProvider.get('userAuthToken')!;
let success = await modifyReservation(userToken,reservationInfo.getReservationId(), newOutline);
if(success){
alert("메모가 수정 되었습니다.");
navigate(-1);
}
}

const onTapCancel = () => {
console.log("cancel clicked");
const handleCancel = async () => {
let userToken = CookieStorageProvider.get('userAuthToken')!;
let success = await deleteReservation(userToken,reservationInfo.getReservationId());
if(success){
alert("예약이 취소되었습니다.");
navigate(-1);
}
};

return (
Expand All @@ -21,37 +51,51 @@ export default function ReservationInfo() {
<Container>
<div className={styles.infoFacility}>
<div className={styles.usingFacilityTitle} >
신공학관(기숙사)
{reservationInfo.getBuildingName()}
</div>
<div className={styles.usingFacilityTitle}>
401-3107(3107 강의실)
{reservationInfo.getFacilityName()}
</div>
</div>
<Grid container justifyContent="space-between" sx={{ pt: 1.5, pb: 1.5}}>
<Grid item className={styles.infoMenuTitle}>날짜</Grid>
<Grid item className={styles.infoMenuContent}>2019.10.07(금)</Grid>
<Grid item className={styles.infoMenuContent}>{reservationInfo.getDate()}</Grid>
</Grid>
<Grid container justifyContent="space-between" sx={{ pt: 1.5, pb: 1.5}}>
<Grid item className={styles.infoMenuTitle}>시간</Grid>
<Grid item className={styles.infoMenuContent}>14:00 ~ 16:00</Grid>
<Grid item className={styles.infoMenuContent}>{reservationInfo.getStartTime().slice(0,5)} ~ {reservationInfo.getEndTime().slice(0,5)}</Grid>
</Grid>
<Grid container justifyContent="space-between" sx={{ pt: 1.5, pb: 1.5 }}>
<Grid item className={styles.infoMenuTitle}>예약자</Grid>
<Grid item className={styles.infoMenuContent}>남선우</Grid>
<Grid item className={styles.infoMenuContent}>{reservationInfo.getHost().getName()}</Grid>
</Grid>
<Grid container justifyContent="space-between" sx={{ pt: 1.5, pb: 1.5 }}>
<Grid item className={styles.infoMenuTitle}>예약 인원</Grid>
<Grid item className={styles.infoMenuContent}>2명</Grid>
<Grid item className={styles.infoMenuContent}>{reservation.getGuests.length}명</Grid>
</Grid>
<Grid container justifyContent="space-between" sx={{ pt: 1.5, pb: 0 }}>
<Grid item className={styles.infoMenuTitle}>메모</Grid>
</Grid>
<GrayBorderBox style={{
height : '124px'
}}>
<div className={styles.infoMenuContent}>이것은 메모입니다.</div>
<textarea style={{
width: '100%', // 상위 컴포넌트의 너비와 동일하게 설정
height: '100%', // 상위 컴포넌트의 높이와 동일하게 설정
border: 'none', // 테두리 제거
resize: 'none', // 사용자가 크기 조절하는 것을 방지
outline : 'none'
}}
className={styles.infoMenuContent} value={newOutline} onChange={handleOutlineChange} />
</GrayBorderBox>
<ReservationButton onClick={onTapCancel} buttonTitle="예약 취소"/>
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, paddingTop: '50px' }}>
<div style={{ flex: 1 }} onClick={handleOutlineSubmit}>
<button className={styles.loginButton}>메모 수정</button>
</div>
<div style={{ flex: 1 }} onClick={handleCancel}>
<button className={styles.loginButton}>예약 취소</button>
</div>
</div>
</Container>
</Container>
)
Expand Down

0 comments on commit 2fc5346

Please sign in to comment.