annotation.tsx

import { useRef } from "react";
import { MouseEvent } from "react";

import { Header } from "../components/Header";
import { Main } from "../components/Main";

export default () => {
  const boardRef = useRef<HTMLDivElement>(null);

  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
    const rect = boardRef.current?.getBoundingClientRect();

    if (rect) {
      const x = e.clientX - rect?.left;
      const y = e.clientY - rect?.top;

      console.log(x, y);
    }
  };

  return (
    <>
      <Main>
        <div className="max-w-xl mx-auto">
          <div
            ref={boardRef}
            onClick={handleClick}
            className="bg-white shadow overflow-hidden sm:rounded-lg relative px-4 py-5 border-b border-gray-200 sm:px-6"
            style={{ paddingTop: "100%" }}
          />
        </div>
      </Main>
    </>
  );
};