From 96c91c4b7e395bc8a038f0d1b21c565a89f3fd97 Mon Sep 17 00:00:00 2001 From: Seokyun Ha Date: Mon, 13 May 2024 23:41:21 +0900 Subject: [PATCH] calendar management page (#75) --- components/board/board.menubar.jsx | 3 + components/board/calendar/calendar.table.jsx | 50 +++++++++ pages/board/calendar/create.jsx | 72 +++++++++++++ pages/board/calendar/index.jsx | 40 ++++++++ pages/board/calendar/update/[id].jsx | 102 +++++++++++++++++++ 5 files changed, 267 insertions(+) create mode 100644 components/board/calendar/calendar.table.jsx create mode 100644 pages/board/calendar/create.jsx create mode 100644 pages/board/calendar/index.jsx create mode 100644 pages/board/calendar/update/[id].jsx diff --git a/components/board/board.menubar.jsx b/components/board/board.menubar.jsx index 2282797..ddf308a 100644 --- a/components/board/board.menubar.jsx +++ b/components/board/board.menubar.jsx @@ -12,6 +12,9 @@ export default class BoardMenubar extends Component { 공지사항 + + 학사일정 + RC 사생 명단 업로드 diff --git a/components/board/calendar/calendar.table.jsx b/components/board/calendar/calendar.table.jsx new file mode 100644 index 0000000..7be1fa7 --- /dev/null +++ b/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 ( + + + + 제목 + 날짜 + D-Day + + + + {calendars.map((calendar) => { + const isDisabled = moment().isAfter(moment(calendar.event_date)); + const dDay = moment(calendar.event_date).diff(moment(), 'days'); + + return ( + + + + {calendar.link ? ( + + {calendar.title} + + ) : ( + calendar.title + )} + + {calendar.event_date} + {dDay ? `D-${dDay}` : 'D-Day'} + + + ); + })} + +
+ ); +}; + +export default CalendarTable; diff --git a/pages/board/calendar/create.jsx b/pages/board/calendar/create.jsx new file mode 100644 index 0000000..f4b8831 --- /dev/null +++ b/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 ( + +

학사일정 생성

+ +
+ setTitle(e.target.value)} + /> + +
+
+ + + setEventDate(moment(date).format('YYYY-MM-DD')) + } + onKeyDown={(e) => e.preventDefault()} + dateFormat="yyyy-MM-dd" + /> +
+
+ + {!event_date + ? '게시 시작 날짜와 종료 날짜를 입력해주세요.' + : `D-${dDay}`} + + + 생성 + +
+ ); +}; + +export default CalendarCreatePage; diff --git a/pages/board/calendar/index.jsx b/pages/board/calendar/index.jsx new file mode 100644 index 0000000..2d096d5 --- /dev/null +++ b/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 ( + +

학사 일정

+
+ + + +
+ + 학사일정은 시작 일자로 정렬되어 표시됩니다! + + 만약 이틀 이상 진행되는 일정이라면 시작/종료 일정으로 분리해주세요.{' '} +
+ (ex. 2학기 수강 신청 (05.20 ~ 05.28) → 2학기 수강신청 수강신청 + 시작(05.20) / 2학기 수강신청 마감(05.28)) + + +
+ +
+ + ); +}; + +export default AnnouncementPage; + +export async function getServerSideProps() { + const res1 = await PoPoAxios.get('calendar'); + const calendarList = res1.data; + + return { props: { calendarList } }; +} diff --git a/pages/board/calendar/update/[id].jsx b/pages/board/calendar/update/[id].jsx new file mode 100644 index 0000000..1242fb2 --- /dev/null +++ b/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 ( + +

학사일정 수정

+ +
+ setTitle(e.target.value)} + /> + +
+
+ + + setEventDate(moment(date).format('YYYY-MM-DD')) + } + onKeyDown={(e) => e.preventDefault()} + dateFormat="yyyy-MM-dd" + /> +
+
+ + {!event_date + ? '게시 시작 날짜와 종료 날짜를 입력해주세요.' + : dDay + ? `D-${dDay}` + : 'D-Day'} + + + + + 수정 + + setDeleteModalOpen(true)}> + 삭제 + + } + /> + + +
+ ); +}; + +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 } }; +}