2024.05.29 기록

포트폴리오 마우스 효과 (onMouseMove, e.pageX, e.pageY)

app.js

const [mouseX, setMouseX] = useState();
const [mouseY, setMouseY] = useState();


  const mouseHandle = (e) => {
    setMouseX(e.clientX)
    setMouseY(e.clientY)
  }

mouseX, mouseY 마우스 상태값을 담을 state 선언
mouseHandle() 마우스가 움직일때마다 호출되는 함수!
e이벤트객체로부터 값을 받아 setMouseX, setMouseY에 담는다.

e.pageX, e.clientX 차이점

e.pageX
브라우저의 뷰포트(viewport) 기준으로 마우스 포인터의 X 좌표를 제공합니다. 스크롤을 무시하고, 현재 보이는 화면 내에서의 좌표를 나타냅니다.

e.clientX
전체 문서 기준으로 마우스 포인터의 X 좌표를 제공합니다. 문서가 스크롤된 상태를 반영하여, 전체 페이지 내에서의 좌표를 나타냅니다.

return (

<header onMouseMove={mouseHandle}>
.
.
</header>

<main>
      <div className="circle" style={{ transform: `translate(${mouseX}px, ${mouseY}px)` }}></div>
      <section ref={(el) => { menuRef.current[0] = el }} className="home"><Home menuclick={menuclick} menuRef={menuRef} mouseHandle={mouseHandle} /></section>
      <section ref={(el) => { menuRef.current[1] = el }} className="about2"><About2 menuclick={menuclick} menuRef={menuRef} data={dataJson} mouseHandle={mouseHandle} /></section>
      <section ref={(el) => { menuRef.current[2] = el }} className="project"><Project menuclick={menuclick} menuRef={menuRef} data={dataJson} mouseHandle={mouseHandle} /></section>
      <section ref={(el) => { menuRef.current[3] = el }} className="contact"><Contact menuclick={menuclick} menuRef={menuRef} mouseHandle={mouseHandle} /></section>
</main>
)

section 위에 마우스를 따라나닐 div태그 생성하고
각 섹션마다 mouseHandle 데이터 보내기!

header에 반영이 안되기 때문에 컴포넌트에서 받는방식 그대로
onMouseMove={mouseHandle} 데이터 받음!

Home.jsx

function Home({ menuclick, menuRef, mouseHandle }) {

    return (
        <>
            <article className='h_main' onMouseMove={mouseHandle}>
                <div className='h_left'>
                
                .
                .
                .
			</article>      
        </>
    );
}

export default Home;

일단 Home컴포넌트에선 잘 작동한다!
하지만.. 왜 다른 컴포넌트에서는 안되는지 모르겠다

scss

    main {
        .circle {
            background-color: #057FFE;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            margin: -50px 0 0 -50px;
            transition: all 0.5s ease-out;
            z-index: 50;
        }

        .home {

에러 해결하고 다시 돌아왔다.. 아윌백..b
일단 map렌더링 돌리는 프로젝트 아래로는 가려버린다..!
z-index로 제일 상단에 올렸다

setMouseX(e.clientX)
setMouseY(e.clientY) 

setMouseX(e.pageX)
setMouseY(e.pageY)

page로 변경했더니 된다..허허허허허 스크롤반영이 되는 page..

chat왈..
ㄴ 페이지가 스크롤되지 않는 상황에서는 e.clientX와 e.pageX가 동일한 값을 가지지만, 페이지가 스크롤된 경우에는 다른 값을 가집니다. 일반적으로, 페이지 전체에서의 마우스 위치를 추적하고 싶다면 e.pageX를 사용하는 것이 좋습니다.

고마워 챗..b