탑 버튼 추가

src/components/common/button/TopButton.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+const Button = styled.button`
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #666666;
+  color: white;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: ${props => (props.visible ? '1' : '0')};
+  visibility: ${props => (props.visible ? 'visible' : 'hidden')};
+  transition: opacity 0.3s, visibility 0.3s;
+  border: none;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
+  z-index: 999;
+  
+  &:hover {
+    background-color: #333333;
+  }
+`;
+
+const TopButton = () => {
+	const [visible, setVisible] = useState(false);
+
+	useEffect(() => {
+		const toggleVisibility = () => {
+			if (window.pageYOffset > 300) {
+				setVisible(true);
+			} else {
+				setVisible(false);
+			}
+		};
+
+		window.addEventListener('scroll', toggleVisibility);
+
+		return () => window.removeEventListener('scroll', toggleVisibility);
+	}, []);
+
+	const scrollToTop = () => {
+		window.scrollTo({
+			top: 0,
+			behavior: 'smooth'
+		});
+	};
+
+	return (
+		<Button
+			visible={visible}
+			onClick={scrollToTop}
+			title="맨 위로 이동"
+		>
+			↑
+		</Button>
+	);
+};
+
+export default TopButton;

src/components/common/index.js

@@ -14,6 +14,7 @@ import Pagination from './Pagination/Pagination';
 import ViewTableInfo from './Table/ViewTableInfo';
 import Loading from './Loading';
 import CDivider from './CDivider';
+import TopButton from './button/TopButton';
 export {
 	DatePickerComponent,
 	DateTimeRangePicker,
@@ -38,5 +39,6 @@ export { DateTimeInput,
 	Pagination,
 	ViewTableInfo,
 	Loading,
-	CDivider
+	CDivider,
+	TopButton
 };