refactor: Refactoring Start Page

.gitignore

@@ -50,6 +50,7 @@ lerna-debug.log*
 # Tests
 /coverage
 /.nyc_output
+/client/test_results
 
 # IDEs and editors
 /.idea

client/package.json

@@ -69,7 +69,9 @@
     "tailwindcss-animate": "^1.0.7",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "puppeteer": "^24.1.0"
+
   },
   "eslintConfig": {
     "extends": [

client/src/components/ui/BackgroundCanvas.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useRef, MouseEvent } from 'react';
+import { useEffect, useRef, PointerEvent } from 'react';
 import { Point } from '@troublepainter/core';
 import { CURSOR_LENGTH, CURSOR_WIDTH, DELETE_INTERVAL } from '@/constants/backgroundConstants';
 import { getCanvasContext } from '@/utils/getCanvasContext';
-import { getDrawPoint } from '@/utils/getDrawPoint';
+import { getDrawPoint_Pointer } from '@/utils/getDrawPoint';
 
 const Background = ({ className }: { className: string }) => {
   const cursorCanvasRef = useRef<HTMLCanvasElement>(null);
@@ -74,17 +74,16 @@ const Background = ({ className }: { className: string }) => {
     };
   }, []);
 
-  const handleMouseMove = (e: MouseEvent<HTMLCanvasElement>) => {
+  const handlePointerMove = (e: PointerEvent<HTMLCanvasElement>) => {
     currentTimestamp.current = performance.now();
     if (currentTimestamp.current - lastTimestamp.current < 16) return;
     lastTimestamp.current = currentTimestamp.current;
 
-    const { canvas } = getCanvasContext(cursorCanvasRef);
-    const point = getDrawPoint(e, canvas);
+    const point = getDrawPoint_Pointer(e);
     pointsRef.current.push(point);
   };
 
-  const handleMouseLeave = () => {
+  const handlePointerLeave = () => {
     const { canvas, ctx } = getCanvasContext(cursorCanvasRef);
     pointsRef.current.length = 0;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -95,8 +94,8 @@ const Background = ({ className }: { className: string }) => {
       <canvas
         ref={cursorCanvasRef}
         className="absolute h-full w-full cursor-none"
-        onMouseMove={handleMouseMove}
-        onMouseLeave={handleMouseLeave}
+        onPointerMove={handlePointerMove}
+        onPointerLeave={handlePointerLeave}
       />
     </div>
   );

client/src/utils/getDrawPoint.ts

@@ -1,4 +1,4 @@
-import { TouchEvent as ReactTouchEvent, MouseEvent as ReactMouseEvent } from 'react';
+import { TouchEvent as ReactTouchEvent, MouseEvent as ReactMouseEvent, PointerEvent } from 'react';
 import { Point } from '@troublepainter/core';
 
 /**
@@ -48,3 +48,22 @@ export const getDrawPoint = (
   else if (e.nativeEvent instanceof TouchEvent) return getTouchPoint(canvas, e.nativeEvent);
   else throw new Error('mouse 혹은 touch 이벤트가 아닙니다.');
 };
+
+/**
+ * PointerEvent 객체로부터 마우스 좌표를 가져오는 Util입니다.
+ * - 이벤트 객체를 매개변수로 받아 offsetX, offsetY 값을 반환합니다.
+ * - 좌표는 캔버스 좌측 상단이 (0,0) 입니다.
+ *
+ * @param e - PointerEvent 객체
+ * @returns 사용자 정의 Point 타입 객체
+ *
+ * @example
+ * ```typescript
+ * const {x, y} = getDrawPoint_Pointer(e);
+ * ```
+ *
+ * @category Utils
+ */
+export const getDrawPoint_Pointer = (e: PointerEvent<HTMLCanvasElement>): Point => {
+  return { x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY };
+};