Calendar Panel (#98)

PoApper · May 13, 2024 · 8340591 · 8340591
1 parent 619e2c3
commit 8340591
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 3 deletions.
diff --git a/components/calendar/calendar.panel.tsx b/components/calendar/calendar.panel.tsx
@@ -0,0 +1,36 @@
+import { ICalendar } from '@/types/calendar.interface';
+import moment from 'moment';
+import styled from 'styled-components';
+
+const CalendarPanel = ({ nextEvent }: { nextEvent: ICalendar }) => {
+  const dDay = moment(nextEvent.event_date).diff(moment(), 'days');
+  return (
+    <div style={{ marginBottom: 12 }}>
+      <NoticeCard>
+        <div
+          style={{
+            fontWeight: 700,
+            fontSize: 36,
+            textDecoration: 'none',
+            marginBottom: 12,
+          }}
+        >
+          {dDay ? `D-${dDay}` : 'D-Day'}
+        </div>
+        <div>
+          {nextEvent.title}
+          <br />({`${moment(nextEvent.event_date).format('M월 D일')}`})
+        </div>
+      </NoticeCard>
+    </div>
+  );
+};
+
+export default CalendarPanel;
+
+const NoticeCard = styled.div`
+  background: #eeeeee;
+  border-radius: 0.4em;
+  padding: 18px;
+  text-align: center;
+`;
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -7,10 +7,13 @@ import Layout from '@/components/layout';
 import { INotice } from '@/types/notice.interface';
 import { PoPoAxios } from '@/lib/axios.instance';
 import NoticePanel from '@/components/notice/notice.panel';
+import { ICalendar } from '@/types/calendar.interface';
+import CalendarPanel from '@/components/calendar/calendar.panel';
 
 const HomePage: React.FunctionComponent<{
   noticeList: INotice[];
-}> = ({ noticeList }) => {
+  nextEvent: ICalendar;
+}> = ({ noticeList, nextEvent }) => {
   const isDayTime = 9 <= new Date().getHours() && new Date().getHours() <= 18;
 
   return (
@@ -59,7 +62,10 @@ const HomePage: React.FunctionComponent<{
             />
           </div>
         </HomeCard>
-        <NoticePanel noticeList={noticeList} />
+        <div>
+          <CalendarPanel nextEvent={nextEvent} />
+          <NoticePanel noticeList={noticeList} />
+        </div>
       </HomeLayout>
     </Layout>
   );
@@ -71,8 +77,11 @@ export const getServerSideProps: GetServerSideProps = async () => {
   const res = await PoPoAxios.get<INotice>('notice/active');
   const noticeList = res.data;
 
+  const res2 = await PoPoAxios.get<ICalendar>('calendar/get-next-event');
+  const nextEvent = res2.data;
+
   return {
-    props: { noticeList },
+    props: { noticeList, nextEvent },
   };
 };
 

diff --git a/types/calendar.interface.ts b/types/calendar.interface.ts
@@ -0,0 +1,5 @@
+export interface ICalendar {
+  id: number;
+  title: string;
+  event_date: string;
+}