From 4cc8cc5540cc47435d536f2b0abf7bb7c1d15a30 Mon Sep 17 00:00:00 2001
From: Now-h <150241213+Now-h@users.noreply.github.com>
Date: Tue, 6 Feb 2024 11:00:57 +0900
Subject: [PATCH 1/5] =?UTF-8?q?=EA=B3=B5=EC=A7=80=EA=B0=A4=EB=9F=AC?=
 =?UTF-8?q?=EB=A6=AC(NoticeGallery)=20=EB=B6=80=EB=B6=84=20=EC=8A=AC?=
 =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EB=8D=94=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EC=97=AC=EB=B0=B1=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NoticeCard.jsx    |  4 ++--
 src/components/NoticeGallery.jsx | 10 +++-------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/NoticeCard.jsx b/src/components/NoticeCard.jsx
index bd3c588..bd8313e 100644
--- a/src/components/NoticeCard.jsx
+++ b/src/components/NoticeCard.jsx
@@ -4,11 +4,11 @@ export default function NoticeCard({ notice }) {
   const { title, thumbnail, id } = notice;
 
   return (
-    <div className="bg-white rounded-md overflow-hidden group cursor-pointer">
+    <div className="bg-white rounded-md overflow-hidden group cursor-pointer mx-2 ">
       <Link to={`/notice/${id}`}>
         <div className="overflow-hidden">
           <img
-            className="w-full h-[230px] object-cover group-hover:scale-125 transition"
+            className="w-full h-[286px] object-cover group-hover:scale-125 transition"
             src={thumbnail}
             alt={`${title} thumbnail`}
           />
diff --git a/src/components/NoticeGallery.jsx b/src/components/NoticeGallery.jsx
index e5d2bfa..663ef8c 100644
--- a/src/components/NoticeGallery.jsx
+++ b/src/components/NoticeGallery.jsx
@@ -23,15 +23,11 @@ export default function NoticeGallery() {
         notice gallery
       </p>
       {/* slick 라이브러리 로직 */}
-      <div className="slider-container">
-      <Slider {...settings}>
+      <Slider {...settings} className="mx-[-8px]">
         {notices.map((notice) => (
-          <div key={notice.id}>
-          <NoticeCard notice={notice} />
-          </div>
+          <NoticeCard key={notice.id} notice={notice} />
         ))}
-        </Slider>
-      </div>
+      </Slider>
     </div>
   );
 }

From ee7afb6ffac8c5d6244dfe830c466e5f7c6454fb Mon Sep 17 00:00:00 2001
From: Now-h <150241213+Now-h@users.noreply.github.com>
Date: Tue, 6 Feb 2024 11:01:30 +0900
Subject: [PATCH 2/5] =?UTF-8?q?Working=20now=20=EB=B6=80=EB=B6=84=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/WorkingEmployees.jsx | 31 +++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/WorkingEmployees.jsx b/src/components/WorkingEmployees.jsx
index 0c244ee..05f9f4e 100644
--- a/src/components/WorkingEmployees.jsx
+++ b/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";
 
@@ -9,20 +9,47 @@ export default function WorkingEmployees() {
     return <div>Loading...</div>;
   }
 
+  const itemsPerPage = 4; // 한 페이지에 보여질 항목 수
+  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);
+
   return (
     <div className="bg-blue-100 p-4 rounded-md">
       <p className="mb-4 text-center uppercase text-blue-400 font-bold text-[20px]">
         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 p-2 ${currentPage === index + 1 ? 'bg-blue-500 text-white' : 'bg-blue-200 text-blue-500'}`}
+            onClick={() => handlePageChange(index + 1)}
+          >
+            {index + 1}
+          </button>
+        ))}
+      </div>
     </div>
   );
 }
+

From 7796fd25ba25c3fe4b33fdd1fee5da3ae365eba3 Mon Sep 17 00:00:00 2001
From: Now-h <150241213+Now-h@users.noreply.github.com>
Date: Tue, 6 Feb 2024 12:53:56 +0900
Subject: [PATCH 3/5] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NoticeGallery.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/NoticeGallery.jsx b/src/components/NoticeGallery.jsx
index 2c5c01b..d3517fa 100644
--- a/src/components/NoticeGallery.jsx
+++ b/src/components/NoticeGallery.jsx
@@ -7,6 +7,7 @@ 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);
 

From b510264e0602e3cfd24dec920d1987d7154eebda Mon Sep 17 00:00:00 2001
From: Now-h <150241213+Now-h@users.noreply.github.com>
Date: Tue, 6 Feb 2024 21:27:46 +0900
Subject: [PATCH 4/5] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AbsenceEmployees.jsx | 16 ++++++++++++----
 src/components/WorkingEmployees.jsx |  4 ++--
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/AbsenceEmployees.jsx b/src/components/AbsenceEmployees.jsx
index 4878892..fa5bb28 100644
--- a/src/components/AbsenceEmployees.jsx
+++ b/src/components/AbsenceEmployees.jsx
@@ -61,15 +61,19 @@ export default function AbsenceEmployees() {
 
   if (isLoading) {
     return (
-      <div className="p-4 rounded-md backdrop-blur-md backdrop-sepia-0 bg-white/10">
+      <div className="p-4 rounded-md bg-white/10">
         <p className="mb-4 text-center uppercase text-white font-bold text-[20px]">
           not working now !
         </p>
         <div className="flex justify-end mb-3">
-          <select className="px-2 py-1 rounded-md" onChange={handleChange}>
+          <select
+            className="p-2 rounded-md bg-slate-800 text-slate-300"
+            onChange={handleChange}
+          >
             <option>전체</option>
             <option>연차</option>
             <option>반차</option>
+            <option>비근무시간</option>
             <option>미기입</option>
           </select>
         </div>
@@ -83,15 +87,19 @@ export default function AbsenceEmployees() {
   }
 
   return (
-    <div className="p-4 rounded-md backdrop-blur-md backdrop-sepia-0 bg-white/10">
+    <div className="p-4 rounded-md bg-white/10">
       <p className="mb-4 text-center uppercase text-white font-bold text-[20px]">
         not working now !
       </p>
       <div className="flex justify-end mb-3">
-        <select className="px-2 py-1 rounded-md" onChange={handleChange}>
+        <select
+          className="p-2 rounded-md bg-slate-800 text-slate-300"
+          onChange={handleChange}
+        >
           <option>전체</option>
           <option>연차</option>
           <option>반차</option>
+          <option>비근무시간</option>
           <option>미기입</option>
         </select>
       </div>
diff --git a/src/components/WorkingEmployees.jsx b/src/components/WorkingEmployees.jsx
index 65f5a59..935e36a 100644
--- a/src/components/WorkingEmployees.jsx
+++ b/src/components/WorkingEmployees.jsx
@@ -27,7 +27,7 @@ export default function WorkingEmployees() {
   const currentItems = workingEmployees.slice(indexOfFirstItem, indexOfLastItem);
   if (isLoading) {
     return (
-      <div className="p-4 rounded-md backdrop-blur-md backdrop-sepia-0 bg-white/10">
+      <div className="p-4 rounded-md bg-white/10">
         <p className="mb-4 text-center uppercase text-white font-bold text-[20px]">
           working now !
         </p>
@@ -41,7 +41,7 @@ export default function WorkingEmployees() {
   }
 
   return (
-    <div className="p-4 rounded-md backdrop-blur-md backdrop-sepia-0 bg-white/10">
+    <div className="p-4 rounded-md bg-white/10">
       <p className="mb-4 text-center uppercase text-white font-bold text-[20px]">
         working now !
       </p>

From 9bc29bfe14d1777212d5598415ef4819b0cd364a Mon Sep 17 00:00:00 2001
From: Now-h <150241213+Now-h@users.noreply.github.com>
Date: Tue, 6 Feb 2024 21:28:10 +0900
Subject: [PATCH 5/5] =?UTF-8?q?=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=8D=94=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NoticeGallery.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/NoticeGallery.jsx b/src/components/NoticeGallery.jsx
index a40e30c..b4892db 100644
--- a/src/components/NoticeGallery.jsx
+++ b/src/components/NoticeGallery.jsx
@@ -22,7 +22,7 @@ export default function NoticeGallery() {
 
   if (isLoading) {
     return (
-      <div className="p-4 rounded-md backdrop-blur-md backdrop-sepia-0 bg-white/10">
+      <div className="p-4 rounded-md bg-white/10">
         <p className="mb-4 text-center uppercase text-white font-bold text-[20px]">
           notice gallery
         </p>
@@ -36,8 +36,8 @@ export default function NoticeGallery() {
   }
 
   return (
-    <div className="p-4 rounded-md backdrop-blur-md backdrop-sepia-0 bg-white/10">
-      <p className="mb-4 text-center uppercase text-white font-bold text-[20px]">
+    <div className="p-4 rounded-md bg-white/10">
+      <p className="mb-4 text-center uppercase text-slate-300 font-bold text-[20px]">
         notice gallery
       </p>
       {/* slick 라이브러리 로직 */}