Feature: 날짜 선택기능 구현

- 날짜선택 구현
- ~/reservation.js를 ~/reservation/index.js로 이동
    - 모든 기능 및 url은 동일함
- apiTest.js: 테스트를 위한 파일 추가

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 <div>test</div>
+    }
+
+    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 <Layout>
+        <Header>
+            <Header.Title><strong>API </strong>TEST</Header.Title>
+            <Header.Subtitle>GIST Library API TEST</Header.Subtitle>
+        </Header>
+        <div>
+            id: 20235059<br/>
+            date: 20241015<br/>
+            time: 15<br/>
+            startDate: 20240901<br/>
+            endDate: 20241020<br/>
+            remark: test
+        </div>
+        <h2>
+            ----DATA---
+        </h2>
+        <div>
+            {JSON.stringify(data)}
+        </div>
+        <button onClick={login}>
+            login
+        </button>
+        <button onClick={refresh}>
+            refresh
+        </button>
+        <button onClick={getDates}>
+            getReservedDates
+        </button>
+        <button onClick={getInfo}>
+            getUserInfo
+        </button>
+        <button onClick={getRoom}>
+            getRoomInfo/210
+        </button>
+        <button onClick={reserve}>
+            reserveRoom/210
+        </button>
+    </Layout>
+}

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 <>
+    <Layout>
+        <Header>
+            <Header.Title><strong>예약 날짜</strong>를<br/> 선택해주세요.</Header.Title>
+        </Header>
+        <DayPicker 
+            mode="single"
+            selected={selectedDate}
+            onSelect={setSelectedDate}
+            startMonth={new Date()}
+            endMonth={nextMonth(new Date())}
+            required
+            disabled={disabledDateMatcher}
+            // TODO: 테마에 맞게 스타일 수정 필요
+
+            style={{marginTop: "3rem"}}
+        />
+        <div className={styles.buttonContainer}>
+            <button type="button" onClick={goNext}>
+                다음
+            </button>
+        </div>
+    </Layout>
+    <NavBar />
+    </>
+}

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 <div>{location.state.selectedDate.toString()}</div>
+}