[FE] FEAT: pendingPage refresh 버튼 추가 및 useDebounce 훅 추가

frontend/src/hooks/useDebounce.tsx

@@ -0,0 +1,30 @@
+import { useRef } from "react";
+
+const useDebounce = () => {
+  const debounceRefs = useRef<{ [key: string]: NodeJS.Timeout | null }>({});
+
+  /**
+   * 인자로 주어진 콜백 함수를 디바운스 후 실행시키는 함수.
+   * @param {string} key - 함수 식별 키(Ref 동시 참조 방지).
+   * @param {Function} callback - 디바운스 후 실행할 함수.
+   * @param {number} milliseconds - 디바운스 딜레이 시간.
+   */
+  const debounce = (
+    key: string,
+    callback: () => void,
+    milliseconds: number
+  ) => {
+    if (debounceRefs.current[key]) {
+      clearTimeout(debounceRefs.current[key]!);
+    }
+    debounceRefs.current[key] = setTimeout(() => {
+      callback();
+    }, milliseconds);
+  };
+
+  return {
+    debounce,
+  };
+};
+
+export default useDebounce;

frontend/src/pages/PendingPage/PendingPage.tsx

@@ -7,16 +7,21 @@ import Timer from "@/pages/PendingPage/components/Timer";
 import LoadingAnimation from "@/components/Common/LoadingAnimation";
 import { CabinetPreviewInfo } from "@/types/dto/cabinet.dto";
 import { axiosGetPendingCabinets } from "@/api/axios/axios.custom";
+import useDebounce from "@/hooks/useDebounce";
 
 const PendingPage = () => {
   const [pendingCabinets, setPendingCabinets] = useState<
     CabinetPreviewInfo[][]
   >([[]]);
   const [isLoaded, setIsLoaded] = useState<boolean>(false);
+  const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
   const [isOpenTime, setIsOpenTime] = useState<boolean>(false);
   const [isCurrentSectionRender, setIsCurrentSectionRender] = useRecoilState(
     isCurrentSectionRenderState
   );
+  const { debounce } = useDebounce();
+
+  const isShowingLoadingAnimation = !isRefreshing && isLoaded;
 
   const getPendingCabinets = async () => {
     try {
@@ -28,6 +33,18 @@ const PendingPage = () => {
     }
   };
 
+  const refreshPendingCabinets = () => {
+    setIsRefreshing(true);
+    debounce(
+      "refresh",
+      () => {
+        getPendingCabinets();
+        setIsRefreshing(false);
+      },
+      500
+    );
+  };
+
   useEffect(() => {
     setTimeout(() => {
       // 새로고침 광클 방지를 위한 딜레이
@@ -51,11 +68,16 @@ const PendingPage = () => {
   return (
     <WrapperStyled>
       <HeaderStyled>사용 가능 사물함</HeaderStyled>
-      {/* <SubHeaderStyled>
-        <span>매일 오후 1시</span> 일괄적으로 오픈됩니다.{" "}
-      </SubHeaderStyled> */}
+      <SubHeaderStyled>
+        <h2>
+          <span>매일 오후 1시</span> 사용 가능한 사물함이 업데이트됩니다.
+        </h2>
+        <RefreshButtonStyled onClick={refreshPendingCabinets}>
+          <img src="/src/assets/images/refresh.svg" alt="새로고침" />
+        </RefreshButtonStyled>
+      </SubHeaderStyled>
       <Timer observeOpenTime={() => setIsOpenTime(true)} />
-      {isLoaded && pendingCabinets ? (
+      {isShowingLoadingAnimation && pendingCabinets ? (
         Object.entries(pendingCabinets).map(([key, value]) => (
           <FloorContainer
             key={key}
@@ -85,7 +107,10 @@ const HeaderStyled = styled.h1`
   margin-top: 50px;
 `;
 
-const SubHeaderStyled = styled.h2`
+const SubHeaderStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
   font-size: 1.2rem;
   color: var(--lightpurple-color);
@@ -99,6 +124,25 @@ const SubHeaderStyled = styled.h2`
   }
 `;
 
+const RefreshButtonStyled = styled.button`
+  margin-top: 30px;
+  margin-bottom: 20px;
+  background-color: transparent;
+  width: 35px;
+  height: 0px;
+  img {
+    width: 35px;
+    height: 35px;
+  }
+  &:hover {
+    opacity: 0.7;
+  }
+  &:active {
+    transform: scale(0.8);
+  }
+  transition: all 0.3s ease;
+`;
+
 const FooterStyled = styled.footer`
   color: transparent;
   margin-top: 50px;