diff --git a/src/App.tsx b/src/App.tsx index 6f8074e..5a88785 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,6 +8,41 @@ import Project from "@/components/Home/Project"; import "./index.css"; export function App() { + useEffect(() => { + // 초기 로드 시 hash에 맞게 스크롤 + const scrollToHash = () => { + const hash = window.location.hash.substring(1); + if (hash) { + const element = document.getElementById(hash); + if (element) { + setTimeout(() => { + element.scrollIntoView({ behavior: "smooth" }); + }, 100); // 브라우저가 레이아웃을 그릴 시간을 줌 + } + } + }; + scrollToHash(); + + // 스크롤 시 hash 업데이트 로직 + const sections = document.querySelectorAll(".section"); + const observer = new IntersectionObserver( + (entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + window.history.replaceState(null, "", `#${entry.target.id}`); + } + }); + }, + { threshold: 0.6 } // 60% 보이면 활성화 + ); + + sections.forEach(section => observer.observe(section)); + + return () => { + sections.forEach(section => observer.unobserve(section)); + }; + }, []); + useEffect(() => { // img 위에서 스크롤 방지 const handleWheel = (event) => {