Feat: Notice

components/board/affiliate.cards.jsx → components/board/benefit/affiliate/affiliate.cards.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import moment from 'moment'
 import { Card, Modal, Grid, Header } from 'semantic-ui-react'
 
 const AffiliateCards = ({affiliates}) => {

components/board/discount.cards.jsx → components/board/benefit/discount/discount.cards.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import moment from 'moment'
 import { Card, Modal, Grid, Header, Divider, Icon } from 'semantic-ui-react'
 
 const DiscountOfferCards = ({discountOffers}) => {

components/board/board.menubar.jsx

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

components/board/notice/notice.table.jsx

@@ -0,0 +1,63 @@
+import Link from 'next/link'
+import moment from 'moment'
+import { Table } from 'semantic-ui-react'
+
+const NoticeTable
+ = ({notices}) => {
+  return (
+    <Table
+      celled selectable
+      textAlign={'center'}
+    >
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell width={1}>id.</Table.HeaderCell>
+          <Table.HeaderCell width={4}>제목</Table.HeaderCell>
+          <Table.HeaderCell width={6}>내용</Table.HeaderCell>
+          {/* <Table.HeaderCell>이미지</Table.HeaderCell> */}
+          <Table.HeaderCell width={5}>게시 일자</Table.HeaderCell>
+          <Table.HeaderCell width={1}>클릭수</Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {
+          notices.map((notice, idx) => {
+            const isActive = moment().isBetween(moment(notice.start_datetime), moment(notice.end_datetime));
+            const duration = moment(notice.end_datetime).diff(moment(notice.start_datetime), 'hours');
+            return (
+              <Link href={`/board/notice/update/${notice.id}`} key={notice.id}>
+                <Table.Row key={notice.id} positive={isActive}>
+                  <Table.Cell>{notice.id}</Table.Cell>
+                  <Table.Cell>
+                    {
+                      notice.link ? (
+                      <a href={notice.link} target={'_blank'} rel={"noreferrer"}>
+                        {notice.title}
+                      </a>
+                      ) : notice.title
+                    }
+                  </Table.Cell>
+                  <Table.Cell style={{whiteSpace: "pre-line", textAlign: "left"}}>
+                    {notice.content}
+                  </Table.Cell>
+                  {/* <Table.Cell>
+                    <Image href={notice.link}/>
+                  </Table.Cell> */}
+                  <Table.Cell>
+                    {moment(notice.start_datetime).format('YYYY-MM-DD HH:mm')} ~ {moment(notice.end_datetime).format('YYYY-MM-DD HH:mm')}<br/>
+                    ({Number(duration/24).toFixed(0)}일 {duration%24}시간)
+                  </Table.Cell>
+                  <Table.Cell>
+                    {notice.click_count}
+                  </Table.Cell>
+                </Table.Row>
+              </Link>
+            )
+          })
+        }
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default NoticeTable

components/board/whitebook.update.modal.jsx → components/board/whitebook/whitebook.update.modal.jsx

@@ -1,6 +1,6 @@
 import { Button, Form, Icon, Modal } from 'semantic-ui-react'
 import { useState } from 'react'
-import DeleteConfirmModal from '../common/delete.confirm.modal'
+import DeleteConfirmModal from '../../common/delete.confirm.modal'
 import { PoPoAxios } from '@/utils/axios.instance';
 
 const WhitebookUpdateModal = ({ trigger, whitebook }) => {

package.json

@@ -15,6 +15,7 @@
     "moment": "^2.29.4",
     "next": "^12.3.4",
     "react": "^17.0.2",
+    "react-datepicker": "^4.24.0",
     "react-dom": "17.0.2",
     "react-responsive": "^9.0.2",
     "semantic-ui-css": "^2.5.0",