diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 116800d..638cd01 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
import type { Metadata } from 'next';
import '@/shared/styles/global.css';
import { Toaster } from 'react-hot-toast';
+import ScrollTopBtn from '@/shared/components/scrollTop/ScrollTopBtn';
export const metadata: Metadata = {
title: 'SSOUL',
description: '칵테일을 좋아하는 사람들을 위한 서비스',
@@ -13,8 +14,8 @@ export default function RootLayout({
}>) {
return (
-
- {children}
+
+ {children}
+
+
);
diff --git a/src/shared/assets/icons/arrow_up_24.svg b/src/shared/assets/icons/arrow_up_24.svg
new file mode 100644
index 0000000..885c40e
--- /dev/null
+++ b/src/shared/assets/icons/arrow_up_24.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/shared/components/scrollTop/ScrollTopBtn.tsx b/src/shared/components/scrollTop/ScrollTopBtn.tsx
new file mode 100644
index 0000000..8414015
--- /dev/null
+++ b/src/shared/components/scrollTop/ScrollTopBtn.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import Arrow from '@/shared/assets/icons/arrow_up_24.svg';
+import { useEffect, useRef } from 'react';
+
+function ScrollTopBtn() {
+ const animationRef = useRef(null);
+
+ // scrollTop 버튼 클릭 시
+ const scrollToTop = () => {
+ const currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
+ if (currentPosition > 0) {
+ animationRef.current = requestAnimationFrame(scrollToTop);
+ window.scrollTo(0, currentPosition - currentPosition / 8);
+ }
+ };
+
+ // 사용자 스크롤 시 애니메이션 취소
+ useEffect(() => {
+ const cancelScroll = () => {
+ if (animationRef.current) {
+ cancelAnimationFrame(animationRef.current);
+ animationRef.current = null;
+ }
+ };
+
+ window.addEventListener('wheel', cancelScroll, { passive: true });
+ window.addEventListener('touchstart', cancelScroll, { passive: true });
+
+ return () => {
+ window.removeEventListener('wheel', cancelScroll);
+ window.removeEventListener('touchstart', cancelScroll);
+ };
+ }, []);
+
+ // if (!isVisible) return null;
+ return (
+
+ );
+}
+export default ScrollTopBtn;