Feat : notice page (#77)

package.json

@@ -19,6 +19,7 @@
         "react-dom": "^18.2.0",
         "react-minimal-side-navigation": "^1.9.2",
         "react-modal": "^3.16.1",
+        "react-paginate": "^8.2.0",
         "react-redux": "^9.1.0",
         "react-responsive": "^10.0.0",
         "react-router-dom": "^6.22.3",

src/App.jsx

@@ -22,6 +22,7 @@ import EditPage from "./component/admin/EditPage";
 import PendingList from "./component/admin/pending/PendingList";
 import Layout from "./component/admin/component/Layout";
 import ClubReviews from "./component/admin/ClubReviews";
+import NoticePage from "./component/main/NoticePage";
 
 function App() {
     const isPc = useMediaQuery({
@@ -38,6 +39,7 @@ function App() {
                     <Header />
                     <Routes>
                         <Route path="/" element={<MainPage />} />
+                        <Route path="/notice" element={<NoticePage />}></Route>
                         <Route path="/central" element={<CentralClubPage />} />
                         {/* <Route path="/menu/central_club/detail_page/review_write" element={<ReviewWrite />} /> */}
                         <Route path="/small" element={<SmallClubPage />} />
@@ -70,6 +72,7 @@ function App() {
           <Header />
           <Routes>
             <Route path="/" element={<MainPage />} />
+            <Route path="/notice" element={<NoticePage />}></Route>
             <Route path="/central" element={<CentralClubPage />} />
             <Route path="/small" element={<SmallClubPage />} />
             <Route path="/clubs/:clubId" element={<DetailPage />} />

src/component/main/MainNotice.jsx

@@ -1,13 +1,14 @@
 import { useState, useEffect } from "react";
 import styles from "./mainNotice.module.css";
 import { customAxios } from "../../config/axios-config";
+import { LinkItem } from "../branch/BranchCentral";
 
 export default function MainNotice() {
   const [noticeData, setNoticeData] = useState([]);
 
   const getNoticeData = async () => {
     try {
-      const res = await customAxios.get(`/v1/notices`);
+      const res = await customAxios.get(`/v1/notices/main-page`);
       if (res.data.success) {
         setNoticeData(res.data.data);
         console.log(res.data.data);
@@ -32,11 +33,13 @@ export default function MainNotice() {
   // 메인 페이지에 보여줄 공지사항
   return (
     <div className={styles.container}>
-      <div className={styles.notice_index}>공지사항</div>
+      <LinkItem to={'/notice'}>
+        <div className={styles.notice_index}>공지사항</div>
+      </LinkItem>
       <div className={styles.notice_container}>
         {noticeData.map((item) => (
           <div key={item.noticeId} className={styles.div_notice}>
-            <div>{item.content}</div>
+            <div>{item.title}</div>
             <p className={styles.notice_line}>|</p>
             <p className={styles.notice_date}>{formatDate(item.createdAt)}</p>
           </div>

src/component/main/NoticePage.jsx

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from "react";
+import ReactPaginate from "react-paginate";
+import { customAxios } from "../../config/axios-config";
+import './noticePage.css';  
+
+export default function NoticePage() {
+  const [noticeData, setNoticeData] = useState([]);
+  const [pageCount, setPageCount] = useState(0);
+  const [currentPage, setCurrentPage] = useState(0);
+  const itemsPerPage = 10;
+
+  const getNoticeData = async (page = 0) => {
+    try {
+      const res = await customAxios.get(`/v1/notices`, {
+        params: { page, size: itemsPerPage }
+      });
+      if (res.data.success && res.data.data.content) {
+        setNoticeData(res.data.data.content);
+        setPageCount(res.data.data.totalPages);
+      } else {
+        setNoticeData([]);
+      }
+    } catch (error) {
+      console.error("Error fetching data: ", error);
+      setNoticeData([]);
+    }
+  };
+
+  useEffect(() => {
+    getNoticeData(currentPage);
+  }, [currentPage]);
+
+  const handlePageClick = ({ selected }) => {
+    setCurrentPage(selected);
+  };
+
+  return (
+    <div className="notice_container">
+      <h2>공지사항</h2>
+      <div className="notice_list">
+        <div className="notice_header">
+          <span>번호</span>
+          <span>제목</span>
+          <span>날짜</span>
+          <span>작성자</span>
+          <span>조회수</span>
+        </div>
+        {noticeData.length > 0 ? (
+          noticeData.map((item, index) => (
+            <div key={item.noticeId} className="notice_item">
+              <span>{currentPage * itemsPerPage + index + 1}</span>
+              <span>{item.title}</span>
+              <span>{new Date(item.createdAt).toLocaleDateString()}</span>
+              <span>관리자</span>
+              {item.totalView ? <span>{item.totalView}</span> : <span>0</span>}
+            </div>
+          ))
+        ) : (
+          <div className="notice_item">
+            <span>공지사항이 없습니다.</span>
+          </div>
+        )}
+      </div>
+      <ReactPaginate
+        previousLabel={'<'}
+        nextLabel={'>'}
+        pageCount={pageCount}
+        onPageChange={handlePageClick}
+        containerClassName={'pagination'}
+        previousLinkClassName={'pagination_link'}
+        nextLinkClassName={'pagination_link'}
+        disabledClassName={'pagination_link_disabled'}
+        activeClassName={'pagination_link_active'}
+      />
+    </div>
+  );
+}

src/component/main/noticePage.css

@@ -0,0 +1,76 @@
+.notice_container {
+    width: 80%;
+    margin: 0 auto;
+    font-family: Arial, sans-serif;
+  }
+
+  h2 {
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  .notice_list {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .notice_header, .notice_item {
+    display: grid;
+    grid-template-columns: 1fr 4fr 2fr 2fr 1fr;
+    border-bottom: 1px solid #ddd;
+    padding: 10px 0;
+  }
+
+  .notice_header {
+    background-color: #f4f4f4;
+    font-weight: bold;
+  }
+
+  .notice_item span {
+    text-align: center;
+  }
+
+  .notice_item {
+    color: #666;
+    transition: background-color 0.3s;
+  }
+
+  .notice_item:hover {
+    background-color: #f9f9f9;
+  }
+
+  .notice_item:nth-child(even) {
+    background-color: #f4f4f4;
+  }
+
+  .notice_item:nth-child(odd) {
+    background-color: #fff;
+  }
+
+  .pagination {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    list-style: none;
+    padding: 0;
+  }
+
+  .pagination_link {
+    margin: 0 5px;
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    cursor: pointer;
+    color: #007bff;
+  }
+
+  .pagination_link_active {
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+  }
+
+  .pagination_link_disabled {
+    color: #ccc;
+    cursor: not-allowed;
+  }
+