[FY:UM] 커서를 따라다니는 텍스트 만들기

🐣 intro

프로젝트가 끝난지 4달 정도 지났는데 포트폴리오를 작성하면서 내가 구현했던 기능들을 다시 하나씩 뜯어보고있다. 어떻게 구현을 했었는지, 그리고 지금 시점에서 봤을 때 더 좋은 방법은 없는지 고민해보고자 한다!

✏️ 기능 설명

해당 페이지는 인트로 페이지인데 페이지의 어느 부분을 클릭하더라도 로그인 페이지로 넘어가게끔 구현하고 싶었다. 그래서 커서의 움직임에 따라 텍스트도 따라 움직이고, 클릭하면 로그인 페이지로 넘어가는 기능을 구현하고자 했다.

📃 사용 메서드

• HTML
  • onPointerMove : 포인터가 움직일 때마다 발생하는 이벤트를 처리하는데 사용
  • onClick : HTML요소가 클릭될 때 발생하는 이벤트를 처리하는데 사용
• CSS
  • transform : 웹 요소의 변형(이동, 회전, 크기 조절, 기울임 등)을 지정하는데 사용
  • translate : transform속성에 포함된 메서드로 요소를 지정한 양 만큼 이동함

👩🏻‍💻 코드

// index.tsx

import { useState } from "react";
import { useNavigate } from "react-router";
import {
  IntroDiv,
  ClickHere,
  ClickText,
} from "./styles";

const Intro = () => {
  const navigate = useNavigate();
  const [position, setPosition] = useState({ x: 0, y: 0 });

  return (
    <IntroDiv
      onPointerMove={(e) => {
        setPosition({ x: e.clientX, y: e.clientY });
      }}
      onClick={() => navigate("/login")}
    >
      <ClickHere position={position}>
        <ClickText>click anywhere</ClickText>
      </ClickHere>
    </IntroDiv>
  );
};
export default Intro;

• IntroDiv에 onPointerMove메서드와 onClick메서드를 정의했다.
  • onPointerMove를 통해서 커서를 움직일 때마다 setPosition함수가 실행되도록 하여 실시간으로 x좌표, y좌표가 변경되도록 구현하고, 변경된 값을 ClickHere에 props해줬다.
  • onClick을 통해서 클릭하면 navigate메서드를 통해 로그인페이지로 이동되도록 구현!

// styles.ts

import styled from "styled-components";

interface ClickHereProps {
  position: { x: number; y: number };
}

export const IntroDiv = styled.div`
  height: 100%;
  width: 100vw;
  overflow-x: hidden;
  overflow-y: hidden;
  cursor: pointer;
`;

export const ClickHere = styled.div<ClickHereProps>`
  transform: translate(
    ${(props) => props.position.x}px,
    ${(props) => props.position.y}px
  );
`;

export const ClickText = styled.p`
  color: gray;
`;

• 그리고 styles.ts에서는 ClickHere태그에서 내려준 position값을 통해 위치를 바꿔줄 수 있도록 구현했다. transform속성에서 translate를 통해 값의 위치를 계속 바꿔 주었다.

✔️ 프로젝트 노션 페이지