[feature] 스크롤 트리거 훅과 스크롤 상단 이동 버튼 추가

frontend/src/App.tsx

@@ -20,6 +20,7 @@ import ApplicationFormPage from './pages/ApplicationFormPage/ApplicationFormPage
 import ApplicantsTab from './pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab';
 import ApplicantDetailPage from './pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage';
 import ClubUnionPage from './pages/ClubUnionPage/ClubUnionPage';
+import { ScrollToTopButton } from '@/components/common/ScrollToTopButton/ScrollToTopButton';
 import 'swiper/css';
 
 const queryClient = new QueryClient();
@@ -29,6 +30,7 @@ const App = () => {
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>
         <GlobalStyles />
+        <ScrollToTopButton />
         <Routes>
           <Route
             path='/'

frontend/src/components/common/ScrollToTopButton/ScrollToTopButton.styles.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const ScrollButton = styled.button<{ $isVisible: boolean }>`
+  position: fixed;
+  bottom: 80px;
+  right: 30px;
+  z-index: 1000;
+  opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};
+  visibility: ${({ $isVisible }) => ($isVisible ? 'visible' : 'hidden')};
+  transition: opacity 0.3s, visibility 0.3s;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+
+  img {
+    width: 50px;
+    height: 50px;
+    display: block;
+  }
+`;

frontend/src/components/common/ScrollToTopButton/ScrollToTopButton.tsx

@@ -0,0 +1,23 @@
+import { useScrollTrigger } from '@/hooks/useScrollTrigger';
+import scrollButtonIcon from '@/assets/images/icons/scroll_icon.svg';
+import * as Styled from './ScrollToTopButton.styles';
+
+
+export const ScrollToTopButton = () => {
+  const { isTriggered } = useScrollTrigger();
+
+  const handleScrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <Styled.ScrollButton
+      type="button"
+      $isVisible={isTriggered}
+      onClick={handleScrollToTop}
+      aria-label="위로 이동하기"
+    >
+      <img src={scrollButtonIcon} alt="Scroll to top" />
+    </Styled.ScrollButton>
+  );
+};

frontend/src/hooks/useScrollTrigger.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState, useCallback } from "react";
+
+interface ScrollTriggerOptions {
+  threshold?: number;
+  direction?: 'up' | 'down';
+  passive?: boolean;
+  onChange?: (next: boolean) => void;
+}
+
+
+export const useScrollTrigger = ({
+  threshold = 10,
+  direction = 'down',
+  passive = true,
+  onChange,
+}: ScrollTriggerOptions = {}) => {
+  const [isTriggered, setIsTriggered] = useState(false);
+
+  const handleScroll = useCallback(() => {
+    const scrollY = window.scrollY;
+    const shouldShowButton = 
+      direction === 'down' 
+        ? scrollY > threshold 
+        : scrollY < threshold;
+
+    setIsTriggered((prev) => {
+      if (shouldShowButton === prev) return prev;
+      onChange?.(shouldShowButton);
+      return shouldShowButton;
+    })
+  }, [ direction, threshold, onChange]);
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll, { passive });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [handleScroll, passive]);
+
+  return { isTriggered };
+};