스케쥴, 신청, 홈 페이지

server/client/src/Components/Schedule.js

@@ -5,6 +5,9 @@ import "tui-date-picker/dist/tui-date-picker.css";
 import "tui-time-picker/dist/tui-time-picker.css";
 import moment from 'moment';
 import axios from 'axios';
+import { Image, Button } from 'react-bootstrap';
+import leftArrow from '../caret-left-fill.svg';
+import rightArrow from '../caret-right-fill.svg';
 
 function Cal(props) {
   const calendarRef = useRef(null);
@@ -76,17 +79,17 @@ function Cal(props) {
 
   return (
     <div>
-      <div id="menu">
+      <div id="menu" className="p-2">
         <span id="menu-navi" onClick={(e) => onClickNavi(e)}>
-          <button type="button" className="btn btn-default btn-sm move-today" data-action="move-today">Today</button>
-          <button type="button" className="btn btn-default btn-sm move-day" data-action="move-prev">
-            <i class="calendar-icon ic-arrow-line-left" data-action="move-prev"></i>
-          </button>
-          <button type="button" className="btn btn-default btn-sm move-day" data-action="move-next">
-            <i className="calendar-icon ic-arrow-line-right" data-action="move-next"></i>
-          </button>
+          <Button variant="default" size="sm" className="move-today" data-action="move-today">Today</Button>
+          <Button variant="default" size="sm" className="move-day" data-action="move-prev">
+            <Image class="calendar-icon" src={leftArrow} data-action="move-prev"></Image>
+          </Button>
+          <Button variant="default" size="sm" className="move-day" data-action="move-next">
+            <Image className="calendar-icon" src={rightArrow} data-action="move-next"></Image>
+          </Button>
         </span>
-        <span id="renderRange" className="render-range" style={{ height: "5em" }}>{period}</span>
+        <span id="renderRange" className="render-range ml-2" style={{ height: "5em" }}>{period}</span>
       </div>
       <Calendar
         ref={calendarRef}

server/client/src/Pages/ACheckPage.js

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import Menu from '../Components/Menu';
 import axios from 'axios';
 import { Link, Redirect } from 'react-router-dom';
-import 'bootstrap/dist/css/bootstrap.css';
 
 function ACheck(props) {
   const [state, setState] = useState()

server/client/src/Pages/HomePage.js

 import React, { useState, useEffect } from 'react';
 import Menu from '../Components/Menu';
 import Schedule from '../Components/Schedule';
-import Tabs from 'react-bootstrap/Tabs';
-import Tab from 'react-bootstrap/Tab';
+import { Container, Tabs, Tab } from 'react-bootstrap';
 
 function Home() {
     const [key, setKey] = useState('9-116');
@@ -10,7 +9,7 @@ function Home() {
     return (
         <div>
             <Menu />
-            <div className="container mt-3">
+            <Container className="col-md-10 mt-3">
                 <h2>대관 현황</h2>
                 <p>
                     <strong>대관 가능 시간</strong>
@@ -41,7 +40,7 @@ function Home() {
                 <div className="bg-white">
                     <h6>고려대학교 대관시스템</h6>
                 </div>
-            </div>
+            </Container>
         </div>
     )
 }

server/client/src/caret-left-fill.svg

+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-caret-left-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.86 8.753l5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/>
+</svg>
\ No newline at end of file

server/client/src/caret-right-fill.svg

+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-caret-right-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
+</svg>
\ No newline at end of file