Better Github Sponsors && HotKey && Scroll Hash

src/App.tsx

@@ -9,13 +9,38 @@ import './index.css';
 
 export function App() {
     useEffect(() => {
-        const hash = window.location.hash.substring(1);
-        if (hash) {
-            const element = document.getElementById(hash);
-            if (element) {
-                element.scrollIntoView({ behavior: 'smooth' });
+        // 초기 로드 시 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));
+        };
     }, []);
 
     return (