Merge pull request #40 from UOSTime/feature/#14

[#14] 공지사항 페이지 작성

package.json

@@ -26,6 +26,7 @@
     "@babel/preset-react": "^7.12.13",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.57",
     "axios": "^0.21.1",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.1.0",

src/App.jsx

@@ -9,6 +9,7 @@ import Timetable from './views/Timetable';
 import Login from './views/login/index';
 import PrivacyPolicy from './views/PrivacyPolicy';
 import Admin from './views/admin';
+import Notice from './views/notice';
 
 function ErrorPage() {
   return <h1>404 Not Found</h1>;
@@ -23,6 +24,7 @@ function App() {
             <Switch>
               <Route exact path="/" component={Timetable} />
               <Route exact path="/login" component={Login} />
+              <Route exact path="/notice" component={Notice} />
               <Route exact path="/admin" component={Admin} />
               <Route path="/privacy_policy" component={PrivacyPolicy} />
               <Route path="*" component={ErrorPage} />

src/views/notice/index.jsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react';
+import HtmlFromMarkdown from '@components/HtmlFromMarkdown';
+import { Box, Container, makeStyles, Typography } from '@material-ui/core';
+import { Timeline, TimelineConnector, TimelineContent, TimelineDot, TimelineItem, TimelineOppositeContent, TimelineSeparator } from '@material-ui/lab';
+import { API_GET_ALL_NOTICES, requestAPI } from '@utils/api';
+import { convertUTCtoYYYYMMDD } from '@utils/time';
+import theme from '@utils/styles/Theme';
+
+function NoticeListItem(props) {
+  const classes = useStyles();
+
+  // props
+  const {
+    notice: {
+      title,
+      content,
+      date,
+      is_hot: isHot,
+    },
+  } = props;
+
+  return (
+    <TimelineItem>
+      <TimelineOppositeContent className={classes.timelineOppositeContent}>
+        <Typography color="textSecondary">{convertUTCtoYYYYMMDD(date)}</Typography>
+        {
+          isHot && <Typography color="textSecondary">중요 공지</Typography>
+        }
+      </TimelineOppositeContent>
+      <TimelineSeparator className={classes.timelineSeparator}>
+        <TimelineDot color="primary" />
+        <TimelineConnector />
+      </TimelineSeparator>
+      <TimelineContent>
+        <Typography color="textSecondary" className={classes.timelineDate}>{convertUTCtoYYYYMMDD(date)}</Typography>
+        <Typography variant="h2">{title}</Typography>
+        <HtmlFromMarkdown markdown={content} />
+      </TimelineContent>
+    </TimelineItem>
+  );
+}
+
+export default function Notice() {
+  // state
+  const [notices, setNotices] = useState(null);
+
+  useEffect(async () => {
+    // update notice list
+    const { data: allNotices } = await requestAPI(API_GET_ALL_NOTICES());
+    setNotices(allNotices);
+  }, []);
+
+  const noticeList = notices?.filter(notice => notice.is_using).map((notice, i) => (
+    <NoticeListItem
+      key={notice.date}
+      notice={notice}
+    />
+  ));
+
+  return (
+    <Container>
+      <Typography variant="h1">공지사항</Typography>
+      {
+        noticeList && (
+          noticeList.length
+            ? <Timeline align="alternate">{noticeList}</Timeline>
+            : <Box>표시할 공지사항 없습니다.</Box>
+        )
+      }
+    </Container>
+  );
+}
+
+const useStyles = makeStyles({
+  timelineOppositeContent: {
+    display: 'none',
+    flex: 'unset',
+    [theme.breakpoints.up('lg')]: {
+      display: 'flex',
+    },
+  },
+  timelineSeparator: {
+    display: 'none',
+    [theme.breakpoints.up('lg')]: {
+      display: 'flex',
+    },
+  },
+  timelineDate: {
+    [theme.breakpoints.up('lg')]: {
+      display: 'none',
+    },
+  },
+});