61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { ArrowUp } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
/**
|
|
* Scroll to Top 버튼 컴포넌트
|
|
* - 모바일/태블릿에서만 표시 (lg 미만)
|
|
* - 스크롤 시 페이드 인/아웃 애니메이션
|
|
* - 부드러운 스크롤 효과
|
|
*/
|
|
export function ScrollToTop() {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// 스크롤 이벤트 핸들러
|
|
const toggleVisibility = () => {
|
|
// 200px 이상 스크롤 시 버튼 표시
|
|
if (window.scrollY > 200) {
|
|
setIsVisible(true);
|
|
} else {
|
|
setIsVisible(false);
|
|
}
|
|
};
|
|
|
|
// 스크롤 이벤트 리스너 등록
|
|
window.addEventListener("scroll", toggleVisibility);
|
|
|
|
// 초기 상태 설정
|
|
toggleVisibility();
|
|
|
|
// 클린업
|
|
return () => {
|
|
window.removeEventListener("scroll", toggleVisibility);
|
|
};
|
|
}, []);
|
|
|
|
// 상단으로 스크롤
|
|
const scrollToTop = () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth", // 부드러운 스크롤 애니메이션
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
onClick={scrollToTop}
|
|
size="icon"
|
|
className={`fixed bottom-6 right-6 z-50 h-12 w-12 rounded-full shadow-lg transition-all duration-300 lg:hidden ${
|
|
isVisible ? "translate-y-0 opacity-100" : "translate-y-16 opacity-0"
|
|
}`}
|
|
aria-label="맨 위로 스크롤"
|
|
>
|
|
<ArrowUp className="h-5 w-5" />
|
|
</Button>
|
|
);
|
|
}
|
|
|