From 41f727a656071f974ec2ea31fe75ecec655815a4 Mon Sep 17 00:00:00 2001
From: b0nsu <125778250+b0nsu@users.noreply.github.com>
Date: Fri, 8 May 2026 23:59:50 +0900
Subject: [PATCH] =?UTF-8?q?refactor(pointer-native-drawing):=20MAT-355=20?=
 =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- render/skia/SkiaDrawingCanvasSurface.tsx: Canvas 래퍼 컴포넌트
- render/skia/useSkiaDrawingRenderer.tsx: renderedPaths + hoverOpacity 훅
- DrawingCanvas.tsx: 렌더링 로직 hook으로 추출, Canvas → SkiaDrawingCanvasSurface

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/DrawingCanvas.tsx                     | 40 ++++++----------
 .../render/skia/SkiaDrawingCanvasSurface.tsx  | 16 +++++++
 .../render/skia/useSkiaDrawingRenderer.tsx    | 46 +++++++++++++++++++
 3 files changed, 75 insertions(+), 27 deletions(-)
 create mode 100644 packages/pointer-native-drawing/src/render/skia/SkiaDrawingCanvasSurface.tsx
 create mode 100644 packages/pointer-native-drawing/src/render/skia/useSkiaDrawingRenderer.tsx

diff --git a/packages/pointer-native-drawing/src/DrawingCanvas.tsx b/packages/pointer-native-drawing/src/DrawingCanvas.tsx
index 10deffa3..19a1c3c8 100644
--- a/packages/pointer-native-drawing/src/DrawingCanvas.tsx
+++ b/packages/pointer-native-drawing/src/DrawingCanvas.tsx
@@ -7,13 +7,15 @@ import React, {
   useMemo,
 } from 'react';
 import { View, StyleSheet, ScrollView } from 'react-native';
-import { Canvas, Path, type SkPath, Skia, Circle, Group } from '@shopify/react-native-skia';
+import { Path, type SkPath, Skia, Circle, Group } from '@shopify/react-native-skia';
 import { Gesture, GestureDetector, PointerType } from 'react-native-gesture-handler';
-import { runOnJS, useSharedValue, useDerivedValue } from 'react-native-reanimated';
+import { runOnJS, useSharedValue } from 'react-native-reanimated';
 
 import { buildSmoothPath } from './smoothing';
 import { type Point, type Stroke, type DrawingCanvasRef } from './model/drawingTypes';
 import { deepCopyStrokes, safeMax } from './model/strokeUtils';
+import { SkiaDrawingCanvasSurface } from './render/skia/SkiaDrawingCanvasSurface';
+import { useSkiaDrawingRenderer } from './render/skia/useSkiaDrawingRenderer';
 
 type Props = {
   strokeColor?: string;
@@ -375,33 +377,18 @@ const DrawingCanvas = forwardRef<DrawingCanvasRef, Props>(
       [hoverX, hoverY, showHover]
     );
 
-    const hoverOpacity = useDerivedValue(() => {
-      return showHover.value ? 0.6 : 0;
-    }, [showHover]);
-
     const composedGesture = useMemo(
       () => Gesture.Simultaneous(pan, hoverGesture),
       [pan, hoverGesture]
     );
 
-    const renderedPaths = useMemo(
-      () =>
-        paths.map((p, i) => {
-          const stroke = strokes[i];
-          return (
-            <Path
-              key={`path-${i}`}
-              path={p}
-              style='stroke'
-              strokeWidth={stroke?.width || strokeWidth}
-              color={stroke?.color || strokeColor}
-              strokeCap='round'
-              strokeJoin='round'
-            />
-          );
-        }),
-      [paths, strokes, strokeWidth, strokeColor]
-    );
+    const { renderedPaths, hoverOpacity } = useSkiaDrawingRenderer({
+      paths,
+      strokes,
+      strokeWidth,
+      strokeColor,
+      showHover,
+    });
 
     return (
       <ScrollView
@@ -411,7 +398,7 @@ const DrawingCanvas = forwardRef<DrawingCanvasRef, Props>(
         nestedScrollEnabled={true}>
         <GestureDetector gesture={composedGesture}>
           <View style={styles.container} collapsable={false}>
-            <Canvas style={[styles.canvas, { height: canvasHeight.current }]}>
+            <SkiaDrawingCanvasSurface height={canvasHeight.current}>
               {renderedPaths}
               {currentPoints.current.length > 0 && (
                 <Path
@@ -435,7 +422,7 @@ const DrawingCanvas = forwardRef<DrawingCanvasRef, Props>(
                   strokeWidth={1.5}
                 />
               </Group>
-            </Canvas>
+            </SkiaDrawingCanvasSurface>
           </View>
         </GestureDetector>
       </ScrollView>
@@ -453,7 +440,6 @@ const styles = StyleSheet.create({
     flexGrow: 1,
   },
   container: { minHeight: 400, position: 'relative' },
-  canvas: { width: '100%', backgroundColor: 'transparent' },
 });
 
 export default React.memo(DrawingCanvas);
diff --git a/packages/pointer-native-drawing/src/render/skia/SkiaDrawingCanvasSurface.tsx b/packages/pointer-native-drawing/src/render/skia/SkiaDrawingCanvasSurface.tsx
new file mode 100644
index 00000000..efb97674
--- /dev/null
+++ b/packages/pointer-native-drawing/src/render/skia/SkiaDrawingCanvasSurface.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Canvas } from '@shopify/react-native-skia';
+
+type SkiaDrawingCanvasSurfaceProps = {
+  height: number;
+  children: React.ReactNode;
+};
+
+export function SkiaDrawingCanvasSurface({ height, children }: SkiaDrawingCanvasSurfaceProps) {
+  return <Canvas style={[styles.canvas, { height }]}>{children}</Canvas>;
+}
+
+const styles = StyleSheet.create({
+  canvas: { width: '100%', backgroundColor: 'transparent' },
+});
diff --git a/packages/pointer-native-drawing/src/render/skia/useSkiaDrawingRenderer.tsx b/packages/pointer-native-drawing/src/render/skia/useSkiaDrawingRenderer.tsx
new file mode 100644
index 00000000..30844fca
--- /dev/null
+++ b/packages/pointer-native-drawing/src/render/skia/useSkiaDrawingRenderer.tsx
@@ -0,0 +1,46 @@
+import React, { useMemo } from 'react';
+import { Path, type SkPath } from '@shopify/react-native-skia';
+import { useDerivedValue, type SharedValue } from 'react-native-reanimated';
+
+import { type Stroke } from '../../model/drawingTypes';
+
+type UseSkiaDrawingRendererParams = {
+  paths: SkPath[];
+  strokes: Stroke[];
+  strokeWidth: number;
+  strokeColor: string;
+  showHover: SharedValue<boolean>;
+};
+
+export function useSkiaDrawingRenderer({
+  paths,
+  strokes,
+  strokeWidth,
+  strokeColor,
+  showHover,
+}: UseSkiaDrawingRendererParams) {
+  const hoverOpacity = useDerivedValue(() => {
+    return showHover.value ? 0.6 : 0;
+  }, [showHover]);
+
+  const renderedPaths = useMemo(
+    () =>
+      paths.map((p, i) => {
+        const stroke = strokes[i];
+        return (
+          <Path
+            key={`path-${i}`}
+            path={p}
+            style='stroke'
+            strokeWidth={stroke?.width ?? strokeWidth}
+            color={stroke?.color ?? strokeColor}
+            strokeCap='round'
+            strokeJoin='round'
+          />
+        );
+      }),
+    [paths, strokes, strokeWidth, strokeColor]
+  );
+
+  return { renderedPaths, hoverOpacity };
+}