공지갤러리 섹션 슬라이더 및 근무/비근무 섹션 페이지네이션

src/components/AbsenceEmployees.jsx

@@ -6,12 +6,14 @@ import SkeletonEmployeeCard from "./skeleton/SkeletonEmployeeCard";
 
 export default function AbsenceEmployees() {
   const [reason, setReason] = useState("전체");
+  const [currentPage, setCurrentPage] = useState(1);
   const { employees } = useContext(DataContext);
 
   if (!employees) {
     return <div>Loading...</div>;
   }
 
+  {/* 만약 employees가 없으면 로딩 중임을 나타내는 화면을 반환 */}
   const absenceEmployees = employees.filter(
     (employee) => employee.isWorking === false
   );
@@ -20,23 +22,39 @@ export default function AbsenceEmployees() {
     switch (reason) {
       case "전체":
         return absenceEmployees;
-
       case "미기입":
         return absenceEmployees.filter(
-          (employees) => !employees.reasonForAbsence
+          (employee) => !employee.reasonForAbsence
         );
-
       default:
         return absenceEmployees.filter(
-          (employees) => employees.reasonForAbsence === reason
+          (employee) => employee.reasonForAbsence === reason
         );
     }
   }
 
+  // 페이지당 표시할 항목 수
+  const itemsPerPage = 8;
+
+  // 전체 필터된 직원 목록
   const filteredEmployees = getFilteredEmployees();
 
+  // 현재 페이지의 데이터 추출
+  const indexOfLastEmployee = currentPage * itemsPerPage;
+  const indexOfFirstEmployee = indexOfLastEmployee - itemsPerPage;
+  const currentEmployees = filteredEmployees.slice(
+    indexOfFirstEmployee,
+    indexOfLastEmployee
+  );
+
+  // 페이지 변경 핸들러
+  function handlePageChange(pageNumber) {
+    setCurrentPage(pageNumber);
+  }
+
   function handleChange(e) {
     setReason(e.target.value);
+    setCurrentPage(1); // 필터 변경 시 페이지를 첫 페이지로 리셋
   }
 
   const isLoading = employees.length === 0;
@@ -86,10 +104,24 @@ export default function AbsenceEmployees() {
         </select>
       </div>
       <ul className="grid grid-cols-4 gap-4">
-        {filteredEmployees.map((employee) => (
+        {currentEmployees.map((employee) => (
           <EmployeeCard key={employee.id} employee={employee} />
         ))}
       </ul>
+      {/* 페이지네이션 컴포넌트 */}
+      <div className="flex justify-center mt-4">
+        {Array.from({ length: Math.ceil(filteredEmployees.length / itemsPerPage) }).map((_, index) => (
+          <button
+            key={index}
+            onClick={() => handlePageChange(index + 1)}
+            className={`mx-1 px-3 py-1 rounded-md ${
+              currentPage === index + 1 ? 'bg-blue-500 text-white' : 'bg-gray-300 text-gray-700'
+            }`}
+          >
+            {index + 1}
+          </button>
+        ))}
+      </div>
     </div>
   );
 }

src/components/NoticeGallery.jsx

@@ -7,13 +7,13 @@ import { DataContext } from "../context/DataContext";
 import SkeletonNoticeCard from "./skeleton/SkeletonNoticeCard";
 import { NOTICE_SKELETON_ARRAY } from "../data/skeleton";
 
+<div class="absolute inset-0 bg-grid-slate-900/[0.04] bg-[bottom_1px_center] dark:bg-grid-slate-400/[0.05] dark:bg-bottom dark:border-b dark:border-slate-100/5" style="mask-image: linear-gradient(transparent, black);"></div>
 export default function NoticeGallery() {
   const { notices } = useContext(DataContext);
 
   const isLoading = notices.length === 0;
 
   const settings = {
-    dots: true,
     infinite: true,
     speed: 500,
     slidesToShow: 4,

src/components/WorkingEmployees.jsx

@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { DataContext } from "../context/DataContext";
 import EmployeeCard from "./EmployeeCard";
 import SkeletonEmployeeCard from "./skeleton/SkeletonEmployeeCard";
@@ -9,10 +9,22 @@ export default function WorkingEmployees() {
 
   const isLoading = employees.length === 0;
 
+  const itemsPerPage = 8; // 한 페이지에 보여질 항목 수
+  const [currentPage, setCurrentPage] = useState(1);
+
   const workingEmployees = employees.filter(
     (employee) => employee.isWorking === true
   );
 
+  // 페이지 변경 이벤트 핸들러
+  const handlePageChange = (newPage) => {
+    setCurrentPage(newPage);
+  };
+
+  // 현재 페이지에 표시할 항목 계산
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = workingEmployees.slice(indexOfFirstItem, indexOfLastItem);
   if (isLoading) {
     return (
       <div className="p-4 rounded-md bg-white/10">
@@ -34,10 +46,23 @@ export default function WorkingEmployees() {
         working now !
       </p>
       <ul className="grid grid-cols-4 gap-4">
-        {workingEmployees.map((employee) => (
+        {currentItems.map((employee) => (
           <EmployeeCard key={employee.id} employee={employee} />
         ))}
       </ul>
+
+      {/* 페이지네이션 UI */}
+      <div className="flex justify-center mt-4">
+        {Array.from({ length: Math.ceil(workingEmployees.length / itemsPerPage) }, (_, index) => (
+          <button
+            key={index + 1}
+            className={`mx-1 px-3 py-1 rounded-md ${currentPage === index + 1 ? 'bg-blue-500 text-white' : 'bg-gray-300 text-gray-700'}`}
+            onClick={() => handlePageChange(index + 1)}
+          >
+            {index + 1}
+          </button>
+        ))}
+      </div>
     </div>
   );
 }