From 766bf84684cb236a53965d80b55bda2e58a4b430 Mon Sep 17 00:00:00 2001 From: Janghan Noh Date: Tue, 24 Sep 2024 02:15:07 +0900 Subject: [PATCH] =?UTF-8?q?Feature:=20=EB=82=A0=EC=A7=9C=20=EC=84=A0?= =?UTF-8?q?=ED=83=9D=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 날짜선택 구현 - ~/reservation.js를 ~/reservation/index.js로 이동 - 모든 기능 및 url은 동일함 - apiTest.js: 테스트를 위한 파일 추가 --- src/pages/apiTest.js | 88 ++++++++++++++++++++ src/pages/reservation.js | 52 ------------ src/pages/reservation/index.js | 142 ++++++++++++++++++++++++++++++++ src/pages/reservation/select.js | 7 ++ 4 files changed, 237 insertions(+), 52 deletions(-) create mode 100644 src/pages/apiTest.js delete mode 100644 src/pages/reservation.js create mode 100644 src/pages/reservation/index.js create mode 100644 src/pages/reservation/select.js diff --git a/src/pages/apiTest.js b/src/pages/apiTest.js new file mode 100644 index 0000000..60e1e48 --- /dev/null +++ b/src/pages/apiTest.js @@ -0,0 +1,88 @@ +import React, { useState } from 'react' +import * as apiCall from '../scripts/libraryRequest' +import Header from '../components/header' +import Layout from '../components/layout' + +export default function Test() { + const [data, setData] = useState({}) + + if(process.env.NODE_ENV !== 'development') { + return
test
+ } + + async function login() { + let res = await apiCall.login('20235059', 'felkas3471!') + // res = res.json() + setData({ + ...res.data + }) + } + async function refresh() { + if(data.refresh_token == null) { + throw new Error("RefreshToken doesn't exist") + } + let res = await apiCall.refresh(data.refresh_token) + setData({ + ...res.data + }) + } + async function getDates() { + let res = await apiCall.getReservedDates(20235059, 20240901, 20241020, 210) + setData({ + ...res.data + }) + } + async function getInfo() { + let res = await apiCall.getUserInfo('20235059', '20241015') + setData({ + ...res.data + }) + } + async function getRoom() { + let res = await apiCall.getRoomInfo(20235059, 210, 20241015) + setData({ + ...res.data + }) + } + async function reserve() { + await apiCall.reserveRoom(20235059, 210, 20241015, 15, 'test', 'N') + } + return +
+ API TEST + GIST Library API TEST +
+
+ id: 20235059
+ date: 20241015
+ time: 15
+ startDate: 20240901
+ endDate: 20241020
+ remark: test +
+

+ ----DATA--- +

+
+ {JSON.stringify(data)} +
+ + + + + + + +} \ No newline at end of file diff --git a/src/pages/reservation.js b/src/pages/reservation.js deleted file mode 100644 index 5ab2b85..0000000 --- a/src/pages/reservation.js +++ /dev/null @@ -1,52 +0,0 @@ -import React, { useState } from "react" -import { DayPicker } from "react-day-picker" -import Header from "../components/header" -import Layout from "../components/layout" -import NavBar from "../components/navbar" - -import "react-day-picker/style.css"; -import * as styles from "../styles/elements.module.css" - - -export default function Reservation() { - const [date, setDate] = useState(new Date()) - let endDate = new Date() - endDate.setMonth(endDate.getMonth() + 1) - endDate.setDate(endDate.getDate() - 1) - - const disabledDateMatcher = { - after: new Date(endDate), - before: new Date(), - // TODO: 지스트 홈페이지 구현에 따라 수정이 필요 - } - function goNext(e) { - // TODO: 날짜를 받아서 다음 페이지로 넘어가기 - // 유효성 검사 필요? - console.log("Selected Date: " + date) - } - return <> - -
- 예약 날짜를
선택해주세요. -
- -
- -
- - - -} \ No newline at end of file diff --git a/src/pages/reservation/index.js b/src/pages/reservation/index.js new file mode 100644 index 0000000..2d38ff7 --- /dev/null +++ b/src/pages/reservation/index.js @@ -0,0 +1,142 @@ +import React, { useEffect, useState } from "react" +import { DayPicker } from "react-day-picker" +import Header from "../../components/header" +import Layout from "../../components/layout" +import NavBar from "../../components/navbar" + +import "react-day-picker/style.css"; +import * as styles from "../../styles/elements.module.css" +import { navigate } from "gatsby" +import { getUserInfo } from "../../scripts/libraryRequest" +import { useCookies } from "react-cookie" + +// 날짜를 YYYYMMDD로 변환 +function toYYYYMMDD(date) { + return `${date.getFullYear()}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getDate().toString().padStart(2,'0')}` +} + +export default function Reservation() { + const [selectedDate, setSelectedDate] = useState(new Date()) + const [userData, setUserData] = useState({}) + + function nextMonth(date) { + date.setMonth(date.getMonth() + 1) + return date + } + + // 마운트 될때 한 번만 실행 + const [cookies, setCookie, removeCookie] = useCookies(['userId']) + useEffect(() => { + console.log('[useEffect]') + if(!cookies.userId) { + navigate('../') + return + } + let userId = cookies['userId'] + + // 사용가능한 방들의 데이터, 휴관일 데이터, 사용자 정보를 가져옴. + // 이번달과 다음달의 infocount를 요청하기 위해서 Promise.all 사용 + const today = new Date() + const nextMonthDate = (() => { + let a = new Date() + a.setMonth(a.getMonth() + 1) + return a + }) () + Promise.all([getUserInfo(userId, toYYYYMMDD(today)), getUserInfo(userId, toYYYYMMDD(nextMonthDate))]).then(([res1, res2]) => { + if(res1.status === 200 && res1.data.info[0].USER_ID === userId.toString() && res2.status === 200 && res2.data.info[0].USER_ID === userId.toString()) { + let dataTmp = {...res1.data} + dataTmp.infoCount = [dataTmp.infoCount] + dataTmp.infoCount.push(res2.data.infoCount) + console.log('[dataTmp]' + JSON.stringify(dataTmp)) + setUserData(dataTmp) + } else { + throw Error('Failed: Cannot update userData') + } + }).catch(() => removeCookie('userId')) // 오류라면 쿠키를 삭제하여 로그인 페이지로 넘김 + }, [cookies, removeCookie]) + + + // 선택할 수 없는 날짜 정하는 함수 + // date를 받아서 이 날짜가 선택할 수 없으면 true + // date는 한국 시간으로 00시임. + function disabledDateMatcher(date) { + function isSameDate(a, b) { + if(a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getb() === b.getDate()) { + return true + } + else { + return false + } + } + let today = new Date() + today.setHours(0,0,0,0) // 대한민국 시간 기준 자정(GMT+9) + let endDate = new Date(today) + endDate.setMonth(endDate.getMonth() + 1) + + // 날짜가 앞으로 한달 이내에 없으면 false return + if(date < today || endDate <= date) { + return true + } + + // 날짜가 휴관일이면 true 리턴 + if(userData.notAvailableRoomDays) { + for(const data of userData.notAvailableRoomDays) { + // data 예시 테스트 안해봄 + // { + // "OFF_DT": 1726498800000, + // "REMARK": "대출휴관일데이터", + // "CREATE_ID": "lib13", + // "CREATE_DT": 1556515709530 + // } + if(isSameDate(date, new Date(data.OFF_DT))) { + return true + } + } + } + return false + } + function goNext(e) { + // 날짜를 받아서 다음 페이지로 넘어가기 + // 유효성 검사 필요 + const infoCountIndex = selectedDate.getMonth() - new Date().getMonth() + console.log(userData) + + // 예약 할 수 있는 시간이 얼마나 남았는지 체크 + // 여기서 넘겨도 나중에 다시 체크해야함 + const remainCount = userData.info[0].FAC_DUR5 - userData.infoCount[infoCountIndex] + if(remainCount<= 0) { + alert('해당 달에는 더이상 예약할 수 없습니다.') + return + } + console.log('[Remain Reserve Count] ' + remainCount) + console.log("Selected Date: " + selectedDate) + navigate('/reservation/select', {state: {selectedDate: selectedDate}}) + + } + + return <> + +
+ 예약 날짜를
선택해주세요. +
+ +
+ +
+ + + +} \ No newline at end of file diff --git a/src/pages/reservation/select.js b/src/pages/reservation/select.js new file mode 100644 index 0000000..907e242 --- /dev/null +++ b/src/pages/reservation/select.js @@ -0,0 +1,7 @@ +import React from 'react' +import { login } from '../../scripts/libraryRequest' + +export default function Room({ location }) { + console.log(location.state.selectedDate) + return
{location.state.selectedDate.toString()}
+} \ No newline at end of file