리액트 마우스 따라다니는 원 만들기

🔍 완성화면

🔍 JSX 코드

import React from 'react';
import './AppXY.css';
import { useState } from 'react';

export default function AppXY() {

  const [xy, setXY] = useState({x : 0, y : 0})

  const xyHandler = (e) => {
    const mouseX = e.clientX;
    const mouseY = e.clientY;

    setXY({x : mouseX, y: mouseY});
    
  }

  return (
    <div className='container' onMouseMove={xyHandler} >
      <div className='pointer' style ={{
      transform : `translate(${xy.x}px, ${xy.y}px)`
    }} />
    </div>
  );
}

🔍 CSS 코드

.container {
  width: 100vw;
  height: 100vh;
  background-color: rgb(65, 65, 65);
}

.pointer {
  position: absolute;
  background-color: rgb(108, 12, 31);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  left: -15px;
  top: -15px;
}