자바 스크립트로 스크롤하여 마우스 색상 변경

import React, { createContext, useState } from "react";

export const CursorContext = createContext();

const CursorContextProvider = (props) => {
  const [cursor, setCursor] = useState({ active: false });

  return (
    <CursorContext.Provider value={[cursor, setCursor]}>
      {props.children}
    </CursorContext.Provider>
  );
};

export default CursorContextProvider;

import React from "react";
import useMousePosition from "./useMousePosition";
const Cursor = ({ color, color1, scroll}) => {
  const { clientX, clientY } = useMousePosition();

  return (
    <div
      style={{
        position: "fixed",
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 9999,
        pointerEvents: "none",
      }}
    >
      <svg
        width={500}
        height={500}
        viewBox="0 0 50 50"
        xmlns="http://www.w3.org/2000/svg"
        style={{
          position: "absolute",
          left:  clientX ,
          top:  clientY ,
          color: color,
        }}
      >
        <defs>
          <linearGradient id="myGradient" gradientTransform="rotate(90)">
            <stop offset="5%" stopColor={color} />
            <stop offset="95%" stopColor={color1} />
          </linearGradient>
        </defs>

        <circle
          cx="25"
          cy="25"
          r="7.5"
          fill={!scroll ? "url('#myGradient')" : color1}
          id="cursor"
        />
      </svg>
    </div>
  );
};
export default Cursor;

import { MouseContext } from "./context/mouse-context";
import { useContext, useEffect, useState } from "react";
import CursorContextProvider from "./context/CursorContextProvider";
import Cursor from "./hooks/Cursor";
import useMousePosition from "./hooks/useMousePosition";
import SleepMode from "./component/SleepMode/SleepMode";

const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop);

function App(props) {
  const { cursorType, cursorChangeHandler } = useContext(MouseContext);
  const [color, setColor] = useState([
    "#000000",
    "#3C6487",
    "#9682B4",
    "#A06E8C",
    "#A01E64",
    "#CD5078",
    "#D78CAA",
    "#6EB996",
    "#1E7850",
    "#3C6487",
    "#000000",
  ]);

  const [color1, setColor1] = useState(color[0]);
  const [color2, setColor2] = useState(color[0]);
  const [scroll, setScroll] = useState(false);
  const [scrolltop, setScrolltop] = useState("false");
  const [id, setId] = useState(0);
  const [up, setUp] = useState(0);
  const [dimensions, setDimensions] = useState({
    height: window.innerHeight,
    width: window.innerWidth,
  });
  const { clientX, clientY } = useMousePosition();


  let myTimeout = null;
  let myTimeout1 = null;
  function myStopFunction() {
    if (up >= 0) {
      if (id < color.length - 1) {
        setColor2(color[id + 1]);
        setColor1(color[id + 1]);
      } else {
        setColor2(color[color.length - 1]);
        setColor1(color[color.length - 1]);
      }
    } else {
      if (id !== 0) {
        setColor2(color[id - 1]);
        setColor1(color[id - 1]);
      } else {
        setColor2(color[0]);
        setColor1(color[0]);
      }
    }

    setScroll(true);
    setLeftnumbermax(id);
    setScrolltop("false");
  }




  useEffect(() => {
    setColor2(color[0]);
  }, []);
  useEffect(() => {
    if (leftnumber !== 0) {
      if (leftnumber % 2 !== 0) {
        if (
          leftnumber < color.length &&
          id < color.length - 1 &&
          leftnumbermax < color.length - 1
        ) {
          setId(id + 1);
          setColor1(color[id + 1]);
          setColor2(color[id + 1]);
        } else {
          if (id > 0) {
            setId(id - 1);
            setColor1(color[id - 1]);
            setColor2(color[id - 1]);
          } else {
            setId(0);
            setLeftnumbermax(0);
            setColor1(color[0]);
            setColor2(color[0]);
          }
        }
      }
    } else {
      setId(0);
      setColor1(color[0]);
      setColor2(color[0]);
    }
  }, [leftnumber]);

  window.addEventListener("wheel", (event) => {
    if (myTimeout) clearTimeout(myTimeout);
    setScroll(false);
    setLeftnumbermax(id);
    setScrolltop("true");
    const delta = Math.sign(event.deltaY);
    setUp(delta);
    if (id < color.length - 1 && delta > 0) {
      setColor1(color[id]);
      setColor2(color[id + 1]);
    } else {
      if (id === color.length - 1 && delta > 0) {
        setColor1(color[color.length - 1]);
        setColor2(color[color.length - 1]);
      } else if (id < color.length - 1 && delta < 0) {
        if (id !== 0) {
          setColor1(color[id]);
          setColor2(color[id - 1]);
        } else {
          setColor1(color[0]);
          setColor2(color[0]);
        }
      }
    }
    if (delta > 0) {
      if (id < color.length - 1) {
        setId(id + 1);
        setLeftnumbermax(id + 1);
      } else {
        setId(0);
        setLeftnumbermax(0);
      }
    } else if (delta < 0) {
      if (id > 0) {
        setId(id - 1);
        setLeftnumbermax(id - 1);
      } else {
        setId(color.length - 1);
        setLeftnumbermax(color.length - 1);
      }
    }
    myTimeout = setTimeout(myStopFunction, 1000);
  });

  return (
    <div
      className="App"
      style={{
        height: dimensions.height - 1,
        width: dimensions.width - 0.5,
        background: 
           !scroll
            ? `linear-gradient(180deg, ${color1}, ${color2})`
            : color2,
      }}
      onMouseDown={handleDown}
      onMouseUp={handleLeave}
      // onmousemove={handleMove}
    >

        <CursorContextProvider>
          <Cursor
            color={color1}
            color1={color2}
            scroll={scroll}
            left={left}
            right={right}
            drag={drag}
            pos={pos}
          />
          {props.children}
          <div
            className="Center_Circle"
            style={{
              background:
                 !scroll
                ? `linear-gradient(180deg, ${color1}, ${color2})`
                : color2,
              position: "fixed" ,
              left:  "50%",
              top: "50%",
              transform: "translate(-50%, -50%)",

            }}
          ></div>
        </CursorContextProvider>
    </div>
  );
}

export default App;