[FE] 페이지 상단 이동 버튼 구현

frontend/src/components/common/TopButton/index.tsx

@@ -0,0 +1,18 @@
+import UpperArrowIcon from '@/assets/upperArrow.svg';
+import useTopButton from '@/hooks/useTopButton';
+
+import * as S from './style';
+
+const TopButton = () => {
+  const { showTopButton, scrollToTop } = useTopButton();
+
+  if (!showTopButton) return null;
+
+  return (
+    <S.TopButton onClick={scrollToTop} type="button">
+      <S.ArrowImage src={UpperArrowIcon} alt="위 화살표"></S.ArrowImage>
+    </S.TopButton>
+  );
+};
+
+export default TopButton;

frontend/src/components/common/TopButton/style.ts

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+
+export const TopButton = styled.button`
+  position: fixed;
+  right: 5rem;
+  bottom: 5rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 5rem;
+  height: 5rem;
+
+  color: ${({ theme }) => theme.colors.white};
+
+  background-color: ${({ theme }) => theme.colors.primary};
+  filter: drop-shadow(0 0 0.2rem ${({ theme }) => theme.colors.primary});
+  border: 0.2rem solid ${({ theme }) => theme.colors.primary};
+  border-radius: 100%;
+`;
+
+export const ArrowImage = styled.img`
+  width: 3rem;
+  height: 3rem;
+`;

frontend/src/components/common/index.tsx

@@ -5,4 +5,5 @@ export { default as ProjectImg } from './ProjectImg';
 export { default as ReviewDate } from './ReviewDate';
 export { default as ReviewComment } from './ReviewComment';
 export { default as MultilineTextViewer } from './MultilineTextViewer';
+export { default as TopButton } from './TopButton';
 export * from './modals';

frontend/src/components/layouts/PageLayout/index.tsx

@@ -1,11 +1,14 @@
 import { PropsWithChildren } from 'react';
 
+import { TopButton } from '@/components/common';
+
 import * as S from './styles';
 
 const PageLayout = ({ children }: PropsWithChildren) => {
   return (
     <S.Layout>
       <S.Wrapper>{children}</S.Wrapper>
+      <TopButton />
     </S.Layout>
   );
 };

frontend/src/hooks/useTopButton.ts

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+
+const TOP_BUTTON_DISPLAY_THRESHOLD = 500;
+
+interface UseTopButtonResult {
+  showTopButton: boolean;
+  scrollToTop: () => void;
+}
+
+const useTopButton = (): UseTopButtonResult => {
+  const [showTopButton, setShowTopButton] = useState(false);
+
+  const handleShowTopButton = () => {
+    if (window.scrollY > TOP_BUTTON_DISPLAY_THRESHOLD) {
+      setShowTopButton(true);
+    } else {
+      setShowTopButton(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleShowTopButton);
+
+    return () => {
+      window.removeEventListener('scroll', handleShowTopButton);
+    };
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return { showTopButton, scrollToTop };
+};
+
+export default useTopButton;