Feat(client): 직무 아티클 주기적 업데이트 공지 로딩 추가

apps/client/src/pages/jobPins/JobPins.tsx

@@ -1,11 +1,13 @@
 import { useGetJobPinsArticles } from '@pages/jobPins/apis/queries';
+import JobPinsBottomNotice from '@pages/jobPins/components/JobPinsBottomNotice';
+import { useJobPinsBottomNotice } from '@pages/jobPins/hooks/useJobPinsBottomNotice';
 import Footer from '@pages/myBookmark/components/footer/Footer';
 import { Card } from '@pinback/design-system/ui';
 import { useInfiniteScroll } from '@shared/hooks/useInfiniteScroll';
-import { useRef } from 'react';
 
 const JobPins = () => {
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const { scrollContainerRef, isBottomNoticeVisible, handleBottomWheel } =
+    useJobPinsBottomNotice();
 
   const { data, isPending, fetchNextPage, hasNextPage } =
     useGetJobPinsArticles();
@@ -43,6 +45,7 @@ const JobPins = () => {
       ) : articlesToDisplay.length > 0 ? (
         <div
           ref={scrollContainerRef}
+          onWheel={handleBottomWheel}
           className="scrollbar-hide mt-[2.6rem] flex h-screen flex-wrap content-start gap-[1.6rem] overflow-y-auto scroll-smooth"
         >
           {articlesToDisplay.map((article) => (
@@ -60,6 +63,7 @@ const JobPins = () => {
             />
           ))}
 
+          <JobPinsBottomNotice visible={isBottomNoticeVisible} />
           <div ref={observerRef} style={{ height: '1px', width: '100%' }} />
         </div>
       ) : (

apps/client/src/pages/jobPins/components/JobPinsBottomNotice.tsx

@@ -0,0 +1,26 @@
+import JobPinsBottomSpinner from './JobPinsBottomSpinner';
+
+interface JobPinsBottomNoticeProps {
+  visible: boolean;
+}
+
+const JobPinsBottomNotice = ({ visible }: JobPinsBottomNoticeProps) => {
+  return (
+    <div
+      className={`w-full overflow-hidden transition-all duration-300 ease-out ${
+        visible
+          ? 'max-h-[10rem] translate-y-0 py-[1.2rem] opacity-100'
+          : 'max-h-0 translate-y-2 py-0 opacity-0'
+      }`}
+    >
+      <div className="flex w-full flex-col items-center gap-[0.8rem]">
+        <p className="body2-m text-font-gray-3 text-center">
+          관심 직무 핀은 계속 업데이트 돼요!
+        </p>
+        <JobPinsBottomSpinner />
+      </div>
+    </div>
+  );
+};
+
+export default JobPinsBottomNotice;

apps/client/src/pages/jobPins/components/JobPinsBottomSpinner.tsx

@@ -0,0 +1,42 @@
+import { useId } from 'react';
+
+const JobPinsBottomSpinner = () => {
+  const gradientId = useId();
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="30"
+      height="30"
+      viewBox="0 0 30 30"
+      fill="none"
+      className="animate-spin-smooth h-[3rem] w-[3rem]"
+    >
+      <circle cx="15" cy="15" r="13" stroke="#E5E7EB" strokeWidth="4" />
+      <circle
+        cx="15"
+        cy="15"
+        r="13"
+        stroke={`url(#${gradientId})`}
+        strokeWidth="4"
+        strokeDasharray="46 120"
+        strokeLinecap="round"
+      />
+      <defs>
+        <radialGradient
+          id={gradientId}
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(13 9.75) rotate(122.975) scale(20.3637)"
+        >
+          <stop stopColor="var(--color-gradient-start, #cff080)" />
+          <stop offset="1" stopColor="var(--color-gradient-end, #33d08f)" />
+        </radialGradient>
+      </defs>
+    </svg>
+  );
+};
+
+export default JobPinsBottomSpinner;

apps/client/src/pages/jobPins/hooks/useJobPinsBottomNotice.ts

@@ -0,0 +1,59 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export const useJobPinsBottomNotice = () => {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [isBottomNoticeVisible, setIsBottomNoticeVisible] = useState(false);
+
+  const showBottomNoticeTemporarily = useCallback(() => {
+    if (isBottomNoticeVisible) {
+      return;
+    }
+
+    setIsBottomNoticeVisible(true);
+    if (hideTimerRef.current) {
+      clearTimeout(hideTimerRef.current);
+    }
+
+    hideTimerRef.current = setTimeout(() => {
+      setIsBottomNoticeVisible(false);
+      hideTimerRef.current = null;
+    }, 2000);
+  }, [isBottomNoticeVisible]);
+
+  useEffect(() => {
+    return () => {
+      if (hideTimerRef.current) {
+        clearTimeout(hideTimerRef.current);
+      }
+    };
+  }, []);
+
+  const handleBottomWheel = useCallback(
+    (e: React.WheelEvent<HTMLDivElement>) => {
+      if (e.deltaY <= 0) {
+        return;
+      }
+
+      const container = scrollContainerRef.current;
+      if (!container) {
+        return;
+      }
+
+      const isAtBottom =
+        container.scrollTop + container.clientHeight >=
+        container.scrollHeight - 1;
+
+      if (isAtBottom) {
+        showBottomNoticeTemporarily();
+      }
+    },
+    [showBottomNoticeTemporarily]
+  );
+
+  return {
+    scrollContainerRef,
+    isBottomNoticeVisible,
+    handleBottomWheel,
+  };
+};