Merge pull request #41 from Kakaotech-10/feature/Clubpage

💄 공지사항, 동아리 기본 폼 만들어두기
Kakaotech-10 · Oct 23, 2024 · c7bad10 · c7bad10
2 parents 60ae38c + e5531cd
commit c7bad10
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 2 deletions.
diff --git a/src/containers/ClubForm.jsx b/src/containers/ClubForm.jsx
@@ -1,6 +1,40 @@
+import { useState, useEffect } from "react";
 import Sidebar from "./SideForm";
 import Search from "../component/Search";
+import Pagination from "../component/Pagination";
+import SortButtons from "../component/SortButtons";
+import "./styles/Community.scss";
+import { getPosts } from "../api/useGetPosts";
+
 const ClubForm = () => {
+  const [currentPage, setCurrentPage] = useState(0);
+  const [sortBy, setSortBy] = useState("latest");
+  const [totalPages, setTotalPages] = useState(0);
+
+  const pageSize = 5;
+
+  useEffect(() => {
+    fetchPosts();
+  }, [currentPage, sortBy]);
+
+  const fetchPosts = async () => {
+    try {
+      const data = await getPosts(currentPage, pageSize);
+      setTotalPages(data.totalPages);
+    } catch (error) {
+      console.error("Error fetching posts:", error);
+    }
+  };
+
+  const handleSort = (sortType) => {
+    setSortBy(sortType);
+    setCurrentPage(0);
+  };
+
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+
   return (
     <div className="start-container">
       <div className="sidebar-area">
@@ -10,7 +44,26 @@ const ClubForm = () => {
         <div className="search-area">
           <Search />
         </div>
-        <div className="setting-area"></div>
+
+        <div className="community-header">
+          <h2>동아리</h2>
+          <div className="header-right">
+            <SortButtons onSort={handleSort} />
+            <div className="write-button-area">
+              <button className="write-button">작성하기</button>
+            </div>
+          </div>
+        </div>
+
+        <hr className="divider" />
+
+        <div className="pagination-container">
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={handlePageChange}
+          />
+        </div>
       </div>
     </div>
   );

diff --git a/src/containers/NoticeForm.jsx b/src/containers/NoticeForm.jsx
@@ -1,6 +1,39 @@
+import { useState, useEffect } from "react";
 import Sidebar from "./SideForm";
 import Search from "../component/Search";
+import Pagination from "../component/Pagination";
+import "./styles/Community.scss";
+import { getPosts } from "../api/useGetPosts";
+
 const NoticeForm = () => {
+  const [currentPage, setCurrentPage] = useState(0);
+  const [sortBy, setSortBy] = useState("latest");
+  const [totalPages, setTotalPages] = useState(0);
+
+  const pageSize = 5;
+
+  useEffect(() => {
+    fetchPosts();
+  }, [currentPage, sortBy]);
+
+  const fetchPosts = async () => {
+    try {
+      const data = await getPosts(currentPage, pageSize);
+      setTotalPages(data.totalPages);
+    } catch (error) {
+      console.error("Error fetching posts:", error);
+    }
+  };
+
+  const handleSort = (sortType) => {
+    setSortBy(sortType);
+    setCurrentPage(0);
+  };
+
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+
   return (
     <div className="start-container">
       <div className="sidebar-area">
@@ -10,7 +43,25 @@ const NoticeForm = () => {
         <div className="search-area">
           <Search />
         </div>
-        <div className="setting-area"></div>
+
+        <div className="community-header">
+          <h2>공지사항</h2>
+          <div className="header-right">
+            <div className="write-button-area">
+              <button className="write-button">작성하기</button>
+            </div>
+          </div>
+        </div>
+
+        <hr className="divider" />
+
+        <div className="pagination-container">
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={handlePageChange}
+          />
+        </div>
       </div>
     </div>
   );