calendar management page (#75)

components/board/board.menubar.jsx

@@ -12,6 +12,9 @@ export default class BoardMenubar extends Component {
         <Link href={'/board/notice'} passHref>
           <Menu.Item>공지사항</Menu.Item>
         </Link>
+        <Link href={'/board/calendar'} passHref>
+          <Menu.Item>학사일정</Menu.Item>
+        </Link>
         <Menu.Item href={'/board/rc-students-list'} passHref>
           RC 사생 명단 업로드
         </Menu.Item>

components/board/calendar/calendar.table.jsx

@@ -0,0 +1,50 @@
+import Link from 'next/link';
+import moment from 'moment';
+import { Table } from 'semantic-ui-react';
+
+const CalendarTable = ({ calendars }) => {
+  return (
+    <Table celled selectable textAlign={'center'}>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell width={6}>제목</Table.HeaderCell>
+          <Table.HeaderCell width={4}>날짜</Table.HeaderCell>
+          <Table.HeaderCell width={2}>D-Day</Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {calendars.map((calendar) => {
+          const isDisabled = moment().isAfter(moment(calendar.event_date));
+          const dDay = moment(calendar.event_date).diff(moment(), 'days');
+
+          return (
+            <Link
+              href={`/board/calendar/update/${calendar.id}`}
+              key={calendar.id}
+            >
+              <Table.Row key={calendar.id} disabled={isDisabled}>
+                <Table.Cell>
+                  {calendar.link ? (
+                    <a
+                      href={calendar.link}
+                      target={'_blank'}
+                      rel={'noreferrer'}
+                    >
+                      {calendar.title}
+                    </a>
+                  ) : (
+                    calendar.title
+                  )}
+                </Table.Cell>
+                <Table.Cell>{calendar.event_date}</Table.Cell>
+                <Table.Cell>{dDay ? `D-${dDay}` : 'D-Day'}</Table.Cell>
+              </Table.Row>
+            </Link>
+          );
+        })}
+      </Table.Body>
+    </Table>
+  );
+};
+
+export default CalendarTable;

pages/board/calendar/create.jsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+import { Form, Message } from 'semantic-ui-react';
+import ReactDatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+import { PoPoAxios } from '@/utils/axios.instance';
+import BoardLayout from '@/components/board/board.layout';
+
+const CalendarCreatePage = () => {
+  const router = useRouter();
+
+  const [title, setTitle] = useState('');
+  const [event_date, setEventDate] = useState();
+
+  const dDay = moment(event_date).diff(moment(), 'days');
+
+  const handleSubmit = async () => {
+    const body = {
+      title: title,
+      event_date: event_date,
+    };
+
+    PoPoAxios.post('/calendar', body, { withCredentials: true })
+      .then(() => {
+        alert('학사일정이 등록 되었습니다!');
+        router.push('/board/calendar');
+      })
+      .catch((err) => {
+        const errMsg = err.response.data.message;
+        alert(`학사일정 등록에 실패했습니다.\n${errMsg}`);
+      });
+  };
+
+  return (
+    <BoardLayout>
+      <h3>학사일정 생성</h3>
+
+      <Form onSubmit={handleSubmit}>
+        <Form.Input
+          required
+          label={'제목'}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+
+        <div style={{ display: 'flex', gap: 12 }}>
+          <div className={'required field'}>
+            <label>시작 날짜</label>
+            <ReactDatePicker
+              selected={event_date ? moment(event_date).toDate() : null}
+              onChange={(date) =>
+                setEventDate(moment(date).format('YYYY-MM-DD'))
+              }
+              onKeyDown={(e) => e.preventDefault()}
+              dateFormat="yyyy-MM-dd"
+            />
+          </div>
+        </div>
+        <Message>
+          {!event_date
+            ? '게시 시작 날짜와 종료 날짜를 입력해주세요.'
+            : `D-${dDay}`}
+        </Message>
+
+        <Form.Button type={'submit'}>생성</Form.Button>
+      </Form>
+    </BoardLayout>
+  );
+};
+
+export default CalendarCreatePage;

pages/board/calendar/index.jsx

@@ -0,0 +1,40 @@
+import Link from 'next/link';
+import { Button, Message } from 'semantic-ui-react';
+
+import BoardLayout from '@/components/board/board.layout';
+import { PoPoAxios } from '@/utils/axios.instance';
+import CalendarTable from '@/components/board/calendar/calendar.table';
+
+const AnnouncementPage = ({ calendarList }) => {
+  return (
+    <BoardLayout>
+      <h3>학사 일정</h3>
+      <div style={{ marginBottom: '1rem' }}>
+        <Link href={'/board/calendar/create'}>
+          <Button>학사일정 추가</Button>
+        </Link>
+      </div>
+
+      <Message>학사일정은 시작 일자로 정렬되어 표시됩니다!</Message>
+      <Message>
+        만약 이틀 이상 진행되는 일정이라면 시작/종료 일정으로 분리해주세요.{' '}
+        <br />
+        (ex. 2학기 수강 신청 (05.20 ~ 05.28) → 2학기 수강신청 수강신청
+        시작(05.20) / 2학기 수강신청 마감(05.28))
+      </Message>
+
+      <div>
+        <CalendarTable calendars={calendarList} />
+      </div>
+    </BoardLayout>
+  );
+};
+
+export default AnnouncementPage;
+
+export async function getServerSideProps() {
+  const res1 = await PoPoAxios.get('calendar');
+  const calendarList = res1.data;
+
+  return { props: { calendarList } };
+}

pages/board/calendar/update/[id].jsx

@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+import { Button, Form, Icon, Message } from 'semantic-ui-react';
+import ReactDatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+import { PoPoAxios } from '@/utils/axios.instance';
+import BoardLayout from '@/components/board/board.layout';
+import DeleteConfirmModal from '@/components/common/delete.confirm.modal';
+
+const CalendarUpdatePage = ({ calendarInfo }) => {
+  const router = useRouter();
+
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+
+  const id = calendarInfo.id;
+  const [title, setTitle] = useState(calendarInfo.title);
+  const [event_date, setEventDate] = useState(calendarInfo.event_date);
+
+  const dDay = moment(event_date).diff(moment(), 'days');
+
+  const handleSubmit = async () => {
+    const body = {
+      title: title,
+      event_date: event_date,
+    };
+
+    PoPoAxios.put(`/calendar/${id}`, body, { withCredentials: true })
+      .then(() => {
+        alert('학사일정이 업데이트 되었습니다!');
+        router.push('/board/calendar');
+      })
+      .catch((err) => {
+        const errMsg = err.response.data.message;
+        alert(`학사일정 업데이트에 실패했습니다.\n${errMsg}`);
+      });
+  };
+
+  return (
+    <BoardLayout>
+      <h3>학사일정 수정</h3>
+
+      <Form>
+        <Form.Input
+          required
+          label={'제목'}
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+
+        <div style={{ display: 'flex', gap: 12 }}>
+          <div className={'required field'}>
+            <label>시작 날짜</label>
+            <ReactDatePicker
+              selected={event_date ? moment(event_date).toDate() : null}
+              onChange={(date) =>
+                setEventDate(moment(date).format('YYYY-MM-DD'))
+              }
+              onKeyDown={(e) => e.preventDefault()}
+              dateFormat="yyyy-MM-dd"
+            />
+          </div>
+        </div>
+        <Message>
+          {!event_date
+            ? '게시 시작 날짜와 종료 날짜를 입력해주세요.'
+            : dDay
+              ? `D-${dDay}`
+              : 'D-Day'}
+        </Message>
+
+        <Form.Group>
+          <Form.Button type={'submit'} onClick={handleSubmit}>
+            수정
+          </Form.Button>
+          <DeleteConfirmModal
+            open={deleteModalOpen}
+            target={title}
+            deleteURI={`calendar/${id}`}
+            afterDeleteURI={'/board/calendar'}
+            trigger={
+              <Button negative onClick={() => setDeleteModalOpen(true)}>
+                <Icon name={'trash'} /> 삭제
+              </Button>
+            }
+          />
+        </Form.Group>
+      </Form>
+    </BoardLayout>
+  );
+};
+
+export default CalendarUpdatePage;
+
+export async function getServerSideProps(ctx) {
+  const { id } = ctx['params'];
+  const res = await PoPoAxios.get(`calendar/${id}`);
+  const calendarInfo = res.data;
+
+  return { props: { calendarInfo } };
+}