85 lines
2.9 KiB
TypeScript
85 lines
2.9 KiB
TypeScript
import { useEffect } from "react";
|
|
import Top from "@/components/Home/Top";
|
|
import About from "@/components/Home/About";
|
|
import Timeline from "@/components/Home/Timeline";
|
|
import Contact from "@/components/Home/Contact";
|
|
import Project from "@/components/Home/Project";
|
|
|
|
import "./index.css";
|
|
import Wakatime from "./components/Home/Wakatime";
|
|
|
|
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(".hash");
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
window.history.replaceState(null, "", `#${entry.target.id}`);
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.9 } // 90% 보이면 활성화
|
|
);
|
|
|
|
sections.forEach(section => observer.observe(section));
|
|
|
|
return () => {
|
|
sections.forEach(section => observer.unobserve(section));
|
|
};
|
|
}, []);
|
|
|
|
|
|
useEffect(() => {
|
|
// img 위에서 스크롤 방지
|
|
const handleWheel = (event: WheelEvent) => {
|
|
if (event.target instanceof HTMLImageElement) {
|
|
event.preventDefault();
|
|
}
|
|
};
|
|
|
|
document.addEventListener("wheel", handleWheel, { passive: false });
|
|
|
|
return () => {
|
|
document.removeEventListener("wheel", handleWheel);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="bg-background text-foreground w-full h-full overflow-y-auto">
|
|
<div id="top" className="hash"> {/* stupid copliot this is not section */}
|
|
<Top />
|
|
</div>
|
|
<div id="about" className="section hash"> {/* Hey Stupid Copliot This is section */}
|
|
<About />
|
|
</div>
|
|
<div id="wakatime" className="section hash"> {/* Hey Stupid Copliot This is section */}
|
|
<Wakatime />
|
|
</div>
|
|
<div id="project" className="section hash"> {/* Hey Stupid Copliot This is section */}
|
|
<Project />
|
|
</div>
|
|
<div id="timeline" className="section hash"> {/* Hey Stupid Copliot This is section */}
|
|
<Timeline />
|
|
</div>
|
|
<div id="contact" className="section hash"> {/* Hey Stupid Copliot This is section */}
|
|
<Contact />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|