merge: Merge meetingroom into develop

package.json

@@ -12,23 +12,30 @@
     "@fullcalendar/react": "^5.10.1",
     "@material-ui/core": "4.9.10",
     "@material-ui/icons": "4.9.1",
+    "@reduxjs/toolkit": "^1.7.2",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.25.0",
     "bootstrap": "^5.1.3",
     "classnames": "^2.3.1",
+    "date-fns": "^2.28.0",
     "jquery": "3.5.0",
     "node-sass": "^7.0.1",
     "openvidu-browser": "2.20.0",
     "react": "^17.0.2",
     "react-async": "^10.0.1",
     "react-bootstrap": "^2.1.1",
     "react-calendar-heatmap": "^1.8.1",
+    "react-date-range": "^1.4.0",
+    "react-datepicker": "^4.6.0",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
+    "react-redux": "^7.2.6",
+    "react-js-pagination": "^3.0.3",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
+    "react-select": "^5.2.2",
     "react-tooltip": "^4.2.21",
     "styled-components": "^5.3.3",
     "web-vitals": "^2.1.4",

src/components/Schedule/calendar/calendar.js

@@ -6,32 +6,46 @@ import {
   faChevronLeft,
   faChevronRight,
 } from '@fortawesome/free-solid-svg-icons';
-import getCalendarData from './calendarData';
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import Card from 'react-bootstrap/Card';
+import { useSelector, useDispatch } from 'react-redux';
+import { toPrevWeek, toNextWeek, selectDay } from '../scheduleSlice';
+import axios from 'axios';
+import { useEffect } from 'react';
 
 const StudyCard = (event) => {
   const studies = event.arr;
   return (
     <>
-      {studies.map((study, index) => (
-        <Card
-          key={index}
-          style={{
-            margin: '1rem 0rem',
-            border: '0px',
-            backgroundColor: 'transparent',
-            padding: '0.5rem',
-          }}
-        >
-          <Card.Title style={{ fontWeight: 'bold' }}>
-            {study.studyName}
-          </Card.Title>
-          <Card.Subtitle>
-            {study.startTime}~{study.endTime}
-          </Card.Subtitle>
-        </Card>
-      ))}
+      <p
+        style={{
+          margin: '2rem 0rem',
+          fontFamily: 'pretandard',
+          fontSize: '26px',
+          paddingLeft: '0.5rem',
+        }}
+      >
+        {studies && studies.date.split('-')[2]}
+      </p>
+      {studies &&
+        studies.studySchedules.map((study, index) => (
+          <Card
+            key={index}
+            style={{
+              margin: '1rem 0rem',
+              border: '0px',
+              backgroundColor: 'transparent',
+              padding: '0.5rem',
+            }}
+          >
+            <Card.Title style={{ fontWeight: 'bold' }}>
+              {study.title}
+            </Card.Title>
+            <Card.Subtitle>
+              {study.startTime}~{study.endTime}
+            </Card.Subtitle>
+          </Card>
+        ))}
     </>
   );
 };
@@ -51,17 +65,33 @@ export default function Calendar() {
     'November',
     'December',
   ];
-  const days = [
-    'MON',
-    'TUE',
-    'WED',
-    'THU',
-    'FRI',
-    'SAT',
-    'SUN',
-  ];
-  const [today, setToday] = useState(new Date(), []);
-  const [weekly, setWeekly] = useState(getCalendarData);
+  const days = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];
+  const dispatch = useDispatch();
+  const today = useSelector((state) => state.schedule.today);
+  const startDay = useSelector((state) => state.schedule.startDay);
+  const [weekly, setWeekly] = useState([]);
+  console.log(startDay);
+  const getSchedule = () => {
+    try {
+      axios
+        .get(
+          process.env.REACT_APP_SERVER_URL +
+            `/schedules?date=${JSON.parse(startDay)}`,
+          {
+            headers: {
+              Authorization: `Bearer ` + localStorage.getItem('accessToken'),
+            },
+          }
+        )
+        .then((res) => {
+          console.log(res);
+          setWeekly(res.data.map);
+        });
+    } catch (err) {
+      console.log('Error:', err);
+    }
+  };
+  useEffect(() => getSchedule(), [startDay]);
   return (
     <>
       <Container
@@ -72,20 +102,22 @@ export default function Calendar() {
       >
         <Row>
           <p className={classNames('month-nav')}>
-            {monthNames[today.getMonth()]}{' '}
+            {monthNames[parseInt(startDay.split('-')[1]) - 1]}{' '}
             <FontAwesomeIcon
               icon={faChevronLeft}
               size="xs"
               style={{
                 opacity: 0.5,
               }}
+              onClick={() => dispatch(toPrevWeek())}
             />{' '}
             <FontAwesomeIcon
               icon={faChevronRight}
               size="xs"
               style={{
                 opacity: 0.5,
               }}
+              onClick={() => dispatch(toNextWeek())}
             />
           </p>
         </Row>
@@ -102,7 +134,13 @@ export default function Calendar() {
               <Col
                 key={index}
                 style={{ margin: '0.3rem' }}
-                selected={false}
+                onClick={() =>
+                  dispatch(
+                    selectDay(
+                      JSON.stringify(weekly ? weekly[index + 1]['date'] : null)
+                    )
+                  )
+                }
               >
                 <p style={{ marginTop: '1rem' }}>{day}</p>
                 <div
@@ -119,19 +157,7 @@ export default function Calendar() {
                     marginBottom: '2rem',
                   }}
                 >
-                  <p
-                    style={{
-                      margin: '2rem 0rem',
-                      fontFamily: 'pretandard',
-                      fontSize: '26px',
-                      paddingLeft: '0.5rem',
-                    }}
-                  >
-                    {parseInt(
-                      weekly[day].date.split('-').slice(2)
-                    )}
-                  </p>
-                  <StudyCard arr={weekly[day].studies} />
+                  {weekly && <StudyCard arr={weekly[index + 1]} />}
                 </div>
               </Col>
             ))}

src/components/Schedule/dailydetails.js

@@ -1,9 +1,10 @@
 import { Container, Row, Col } from 'react-bootstrap';
-import DailyTodoList from './Todo/todos';
 import Todaystudy from './todaystudy';
 import Diary from './diary';
+import { useSelector } from 'react-redux';
 
 export default function Dailydetails() {
+  const selectDay = useSelector((state) => state.schedule.selectedDay);
   return (
     <Container
       fluid
@@ -24,7 +25,9 @@ export default function Dailydetails() {
             textAlign: 'center',
           }}
         >
-          선택한 날짜
+          {JSON.parse(selectDay).split('-')[0]}년{' '}
+          {parseInt(JSON.parse(selectDay).split('-')[1])}월{' '}
+          {parseInt(JSON.parse(selectDay).split('-')[2])}일{' '}
         </h3>
       </Row>
       <Row
@@ -34,7 +37,7 @@ export default function Dailydetails() {
         }}
       >
         <Col sm={4} md={4} lg={4}>
-          <DailyTodoList />
+          {/* <DailyTodoList /> */}
         </Col>
         <Col sm={8} md={8} lg={8}>
           <Row>