skku-npc · Jinu-Lee · Jan 27, 2021 · Jan 27, 2021 · Jan 27, 2021 · Jan 27, 2021
diff --git a/frontend/package.json b/frontend/package.json
@@ -10,9 +10,15 @@
     "lint": "eslint --ext .js ."
   },
   "dependencies": {
+    "@uiw/react-md-editor": "^2.1.10",
+    "animate.css": "^4.1.1",
+    "axios": "^0.21.1",
     "bootstrap": "^4.6.0",
+    "moment": "^2.29.1",
     "react": "^17.0.1",
+    "react-big-calendar": "^0.31.0",
     "react-dom": "^17.0.1",
+    "react-markdown": "^5.0.3",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "web-vitals": "^0.2.4"
@@ -32,5 +38,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "main": "index.js"
 }
diff --git a/frontend/public/assets/main_1.png b/frontend/public/assets/main_1.png
diff --git a/frontend/public/assets/main_2.png b/frontend/public/assets/main_2.png
diff --git a/frontend/public/assets/main_3.png b/frontend/public/assets/main_3.png
diff --git a/frontend/public/icons/Footer/baekjoon.png b/frontend/public/icons/Footer/baekjoon.png
diff --git a/frontend/public/icons/Footer/github.png b/frontend/public/icons/Footer/github.png
diff --git a/frontend/public/icons/Footer/mail.png b/frontend/public/icons/Footer/mail.png
diff --git a/frontend/public/icons/Footer/map.png b/frontend/public/icons/Footer/map.png
diff --git a/frontend/public/icons/baekjoon.png b/frontend/public/icons/baekjoon.png
diff --git a/frontend/public/icons/circled-plus.png b/frontend/public/icons/circled-plus.png
diff --git a/frontend/public/icons/codeforces.png b/frontend/public/icons/codeforces.png
diff --git a/frontend/public/icons/default-profile.jpg b/frontend/public/icons/default-profile.jpg
diff --git a/frontend/public/icons/github.png b/frontend/public/icons/github.png
diff --git a/frontend/public/icons/mail.png b/frontend/public/icons/mail.png
diff --git a/frontend/public/icons/map.png b/frontend/public/icons/map.png
diff --git a/frontend/public/icons/npc.png b/frontend/public/icons/npc.png
diff --git a/frontend/public/icons/pencil.png b/frontend/public/icons/pencil.png
diff --git a/frontend/public/icons/triangle-exclamation.png b/frontend/public/icons/triangle-exclamation.png
diff --git a/frontend/public/icons/triangle.png b/frontend/public/icons/triangle.png
diff --git a/frontend/public/icons/user.png b/frontend/public/icons/user.png
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="./icons/npc.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>NPC</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/public/pics/main_1.png b/frontend/public/pics/main_1.png
diff --git a/frontend/public/pics/main_2.png b/frontend/public/pics/main_2.png
diff --git a/frontend/public/pics/main_3.png b/frontend/public/pics/main_3.png
diff --git a/frontend/public/pics/main_4.png b/frontend/public/pics/main_4.png
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -1,21 +1,50 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import axios from 'axios';
 import Header from './components/Header';
 import Footer from './components/Footer';
 import Main from './components/Main';
+import Intro from './components/Intro';
+import Settings from './components/User/Settings';
+import ResetPassword from './components/User/ResetPassword';
+import ModalWrapper from './components/ModalWrapper';
+import MemberList from './components/MemberList';
+import Calendar from './components/Calendar';
+import Study from './components/Study';
 
 const App = () => {
+  const [ modalOpen, setModalOpen ] = useState(false);
+  const [ isLoggedIn, setIsLoggedIn ] = useState(false);
+  const [ modalContent, setModalContent ] = useState(null);
+
+  axios.defaults.baseURL = 'http://localhost:4000';
+
   return (
     <Router>
       <div className="App">
-        <Header />
+        <Header setModalContent={setModalContent} setModalOpen={setModalOpen} isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} />
+        <ModalWrapper modalOpen={modalOpen} setModalOpen={setModalOpen} content={modalContent} />
         <Switch>
-          <Route exact path="/" component={Main} />
-          {/* 기타 페이지 */}
+          <Route exact path="/" component={Intro} />
+          <Route path="/main" component={Main} />
+          <Route path="/members/:year" render={({ match, history }) =>
+            <MemberList match={match} history={history} setModalContent={setModalContent} setModalOpen={setModalOpen} isLoggedIn={isLoggedIn} />}
+          />
+          <Route path="/calendar/:view/:date" render={({ match, history }) =>
+            <Calendar match={match} history={history} setModalContent={setModalContent} setModalOpen={setModalOpen} isLoggedIn={isLoggedIn} />}
+          />
+          <Route path="/study/:class/:index?" render={({ match, history }) =>
+            <Study match={match} history={history} isLoggedIn={isLoggedIn} />}
+          />
+          <Route path="/user/settings" render={({ history }) =>
+            <Settings history={history} setIsLoggedIn={setIsLoggedIn} />}
+          />
+          <Route path="/user/resetPassword/:passwordResetToken" component={ResetPassword} />
           <Route
             render={({ location }) => (
-              <div>
-                <h3>존재하지 않는 페이지 {location.pathname}</h3>
+              <div style={{margin: '150px 0', textAlign: 'center'}}>
+                <h1>존재하지 않는 페이지입니다!</h1>
+                <h2>{location.pathname}</h2>
               </div>
             )}
           />

diff --git a/frontend/src/App.test.js b/frontend/src/App.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
diff --git a/frontend/src/components/Calendar/Calendar.css b/frontend/src/components/Calendar/Calendar.css
@@ -0,0 +1,28 @@
+.calendar {
+  width: 125vh;
+  margin: 15vh calc((100vw - 125vh) / 2);
+}
+
+.calendar-title {
+  margin-left: 5%;
+  font-size: 3rem;
+  font-weight: 600;
+}
+
+.calendar .row {
+  margin: 4rem 0;
+}
+
+.calendar .button {
+  font-size: 1.5rem;
+  text-decoration: underline;
+  cursor: default;
+}
+
+@media (max-aspect-ratio: 5/4) {
+  .calendar {
+    width: 100%;
+    margin: 15vh 0;
+    padding: 0 5%;
+  }
+}
diff --git a/frontend/src/components/Calendar/Calendar.js b/frontend/src/components/Calendar/Calendar.js
@@ -0,0 +1,116 @@
+import React, { useState, useEffect } from 'react';
+import { Calendar as BigCalendar, momentLocalizer } from 'react-big-calendar';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import FixEvent from './FixEvent';
+import './Calendar.css';
+
+import 'react-big-calendar/lib/css/react-big-calendar.css';
+
+moment.locale('ko');
+const localizer = momentLocalizer(moment);
+
+const Calendar = ({ match, history, setModalContent, setModalOpen, isLoggedIn }) => {
+  const [ eventData, setEventData ] = useState([]);
+  const [ params, setParams ] = useState({});
+  const [ isAdmin, setIsAdmin ] = useState(false);
+
+  const loadData = async () => {
+    const { data } = await axios.get('/api/calendar/events', {
+      params: {
+        year: params.date.getFullYear(),
+        month: params.date.getMonth() + 1,
+      }
+    });
+    setEventData(data.map((data) => {
+      let result = {...data};
+      if (!result['allDay']) {
+        delete result['allDay'];
+      }
+      result['start'] = new Date(result['start']);
+      result['end'] = new Date(result['end']);
+      return result;
+    }));
+  };
+
+  useEffect(() => {
+    if (params.date) {
+      loadData();
+    }
+  }, [params]);
+
+  useEffect(() => {
+    setParams({
+      date: moment(match.params.date, 'YYYY-MM-DD').toDate(),
+      view: match.params.view
+    });
+  }, [match.params]);
+
+  useEffect(async () => {
+    if (isLoggedIn) {
+      const { data } = await axios.get('/api/user/profile');
+      if (data.role === 'Admin') {
+        setIsAdmin(true);
+      }
+    }
+  }, [isLoggedIn]);
+
+  const openModal = (mode, event) => {
+    if (isAdmin) {
+      setModalContent(<FixEvent setModalOpen={setModalOpen} mode={mode} event={event} loadData={loadData} />);
+      setModalOpen(true);
+    }
+  };
+
+  return (
+    <div className="calendar container-fluid p-0">
+      <div className="row">
+        <div className="col calendar-title p-0">
+          동아리 일정
+        </div>
+      </div>
+      <center>
+        <BigCalendar
+          step={15}
+          timeslots={8}
+          localizer={localizer}
+          events={eventData}
+          views={['month','week','day']}
+          date={params.date}
+          view={params.view}
+          onView={(view) => {
+            history.push(`/calendar/${view}/${moment(params.date).format('YYYY-MM-DD')}`);
+          }}
+          onNavigate={(newDate, view) => {
+            history.push(`/calendar/${view}/${moment(newDate).format('YYYY-MM-DD')}`);
+          }}
+          selectable={isAdmin}
+          onSelectEvent={(event) => openModal('edit', event)}
+          onSelectSlot={(slotInfo) => openModal('add', {
+            title: '',
+            start: slotInfo.start,
+            end: slotInfo.end,
+            allDay: false
+          })}
+          eventPropGetter={() => ({
+            style: {
+              backgroundColor: '#59861C',
+            },
+          })}
+          style={{ height: '70vh', width: '80%', margin: '0 10%'}}
+        />
+      </center>
+    </div>
+  );
+};
+
+Calendar.propTypes = {
+  match: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired,
+  setModalContent: PropTypes.func.isRequired,
+  setModalOpen: PropTypes.func.isRequired,
+  isLoggedIn: PropTypes.bool.isRequired
+};
+
+export default Calendar;
diff --git a/frontend/src/components/Calendar/FixEvent/FixEvent.css b/frontend/src/components/Calendar/FixEvent/FixEvent.css
@@ -0,0 +1,29 @@
+.fix-event {
+  width: 30vw;
+  height: auto;
+  padding: 10%;
+}
+
+.fix-event .title {
+  font-size: 2.5rem;
+}
+
+.fix-event .name {
+  font-size: 1.5rem;
+}
+
+.fix-event input {
+  font-size: 1.2rem;
+  font-family: "Manrope", "KoreanTITGD";
+  border-width: 0 0 0.1rem;
+  width: 100%;
+  height: 100%;
+}
+
+.fix-event button {
+  background: none;
+  border: none;
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: #8dc63f;
+}