react-native-rectangle-doc-scanner 3.115.0 → 3.117.0

package/dist/FullDocScanner.js

@@ -125,19 +125,14 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const [rotationDegrees, setRotationDegrees] = (0, react_1.useState)(0);
     const [capturedPhotos, setCapturedPhotos] = (0, react_1.useState)([]);
     const [currentPhotoIndex, setCurrentPhotoIndex] = (0, react_1.useState)(0);
-    const [previewPhotoIndex, setPreviewPhotoIndex] = (0, react_1.useState)(0);
     const resolvedGridColor = gridColor ?? overlayColor;
     const docScannerRef = (0, react_1.useRef)(null);
     const captureModeRef = (0, react_1.useRef)(null);
     const captureInProgressRef = (0, react_1.useRef)(false);
     const rectangleCaptureTimeoutRef = (0, react_1.useRef)(null);
     const rectangleHintTimeoutRef = (0, react_1.useRef)(null);
-    const currentPhotoIndexRef = (0, react_1.useRef)(currentPhotoIndex);
     const isBusinessMode = type === 'business';
     const maxPhotos = isBusinessMode ? 2 : 1;
-    (0, react_1.useEffect)(() => {
-        currentPhotoIndexRef.current = currentPhotoIndex;
-    }, [currentPhotoIndex]);
     const mergedStrings = (0, react_1.useMemo)(() => ({
         captureHint: strings?.captureHint,
         manualHint: strings?.manualHint,
@@ -190,7 +185,6 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                 hasBase64: !!croppedImage.data,
             });
             setProcessing(false);
-            setPreviewPhotoIndex(currentPhotoIndexRef.current);
             // Show confirmation screen
             setCroppedImageData({
                 path: croppedImage.path,
@@ -237,8 +231,6 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             console.warn('[FullDocScanner] Missing capture mode for capture result, ignoring');
             return;
         }
-        const previewIndex = currentPhotoIndexRef.current;
-        setPreviewPhotoIndex(previewIndex);
         const normalizedDoc = normalizeCapturedDocument(document);
         if (captureMode === 'no-grid') {
             console.log('[FullDocScanner] No grid at capture button press: opening cropper for manual selection');
@@ -401,20 +393,24 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         };
         const updatedPhotos = [...capturedPhotos, currentPhoto];
         console.log('[FullDocScanner] Photos captured:', updatedPhotos.length, 'of', maxPhotos);
-        // Business 모드이고 아직 첫 번째 사진만 찍은 경우
-        if (isBusinessMode && updatedPhotos.length === 1) {
-            // 두 번째 사진 촬영 여부를 물어봄 (UI에서 버튼으로 표시)
-            setCapturedPhotos(updatedPhotos);
-            setCurrentPhotoIndex(1);
-            // 확인 화면을 유지하고 "뒷면 촬영" 버튼을 표시
-            return;
-        }
         // 모든 사진 촬영 완료 - 결과 반환
         console.log('[FullDocScanner] All photos captured, returning results');
         onResult(updatedPhotos);
-    }, [croppedImageData, rotationDegrees, capturedPhotos, isBusinessMode, maxPhotos, onResult]);
+    }, [croppedImageData, rotationDegrees, capturedPhotos, onResult]);
     const handleCaptureSecondPhoto = (0, react_1.useCallback)(() => {
         console.log('[FullDocScanner] Capturing second photo');
+        if (!croppedImageData) {
+            return;
+        }
+        // 현재 사진(앞면)을 먼저 저장
+        const rotationNormalized = ((rotationDegrees % 360) + 360) % 360;
+        const currentPhoto = {
+            path: croppedImageData.path,
+            base64: croppedImageData.base64,
+            rotationDegrees: rotationNormalized,
+        };
+        setCapturedPhotos([currentPhoto]);
+        setCurrentPhotoIndex(1);
         // 확인 화면을 닫고 카메라로 돌아감
         setCroppedImageData(null);
         setRotationDegrees(0);
@@ -434,27 +430,33 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         if (docScannerRef.current?.reset) {
             docScannerRef.current.reset();
         }
-    }, []);
+    }, [croppedImageData, rotationDegrees]);
     const handleSkipSecondPhoto = (0, react_1.useCallback)(() => {
-        console.log('[FullDocScanner] Skipping second photo');
-        // 첫 번째 사진만 반환
-        onResult(capturedPhotos);
-    }, [capturedPhotos, onResult]);
+        console.log('[FullDocScanner] Skipping second photo - saving current photo only');
+        if (!croppedImageData) {
+            return;
+        }
+        // 현재 사진만 저장하고 완료
+        const rotationNormalized = ((rotationDegrees % 360) + 360) % 360;
+        const currentPhoto = {
+            path: croppedImageData.path,
+            base64: croppedImageData.base64,
+            rotationDegrees: rotationNormalized,
+        };
+        onResult([currentPhoto]);
+    }, [croppedImageData, rotationDegrees, onResult]);
     const handleRetake = (0, react_1.useCallback)(() => {
         console.log('[FullDocScanner] Retake - clearing cropped image and resetting scanner');
-        if (isBusinessMode) {
-            if (currentPhotoIndex === 1 && previewPhotoIndex === 0 && capturedPhotos.length === 1) {
-                console.log('[FullDocScanner] Retake detected on front preview after confirmation - reverting to front capture');
-                setCapturedPhotos([]);
-                setCurrentPhotoIndex(0);
-                setPreviewPhotoIndex(0);
-            }
-            else if (previewPhotoIndex === 1 && capturedPhotos.length === 2) {
-                console.log('[FullDocScanner] Retake detected on back preview after final confirmation - removing back photo');
-                setCapturedPhotos(capturedPhotos.slice(0, 1));
-                setCurrentPhotoIndex(1);
-                setPreviewPhotoIndex(1);
-            }
+        // Business 모드에서 두 번째 사진을 다시 찍는 경우, 첫 번째 사진 유지
+        if (isBusinessMode && capturedPhotos.length === 1) {
+            console.log('[FullDocScanner] Retake detected on back photo - keeping front photo');
+            setCurrentPhotoIndex(1);
+        }
+        else {
+            // 첫 번째 사진 또는 일반 모드: 모든 상태 초기화
+            console.log('[FullDocScanner] Retake detected - resetting all photos');
+            setCapturedPhotos([]);
+            setCurrentPhotoIndex(0);
         }
         setCroppedImageData(null);
         setRotationDegrees(0);
@@ -475,7 +477,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         if (docScannerRef.current?.reset) {
             docScannerRef.current.reset();
         }
-    }, [capturedPhotos, currentPhotoIndex, isBusinessMode, previewPhotoIndex]);
+    }, [capturedPhotos.length, isBusinessMode]);
     const handleRectangleDetect = (0, react_1.useCallback)((event) => {
         const stableCounter = event.stableCounter ?? 0;
         const rectangleCoordinates = event.rectangleOnScreen ?? event.rectangleCoordinates;
@@ -529,7 +531,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         // check_DP: Show confirmation screen
         react_1.default.createElement(react_native_1.View, { style: styles.confirmationContainer },
             isBusinessMode && (react_1.default.createElement(react_native_1.View, { style: styles.photoHeader },
-                react_1.default.createElement(react_native_1.Text, { style: styles.photoHeaderText }, previewPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second))),
+                react_1.default.createElement(react_native_1.Text, { style: styles.photoHeaderText }, currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second))),
             isImageRotationSupported() ? (react_1.default.createElement(react_native_1.View, { style: styles.rotateButtonsCenter },
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.rotateButtonTop, onPress: () => handleRotateImage(-90), accessibilityLabel: "\uC67C\uCABD\uC73C\uB85C 90\uB3C4 \uD68C\uC804", accessibilityRole: "button" },
                     react_1.default.createElement(react_native_1.Text, { style: styles.rotateIconText }, "\u21BA"),
@@ -541,18 +543,10 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                     styles.previewImage,
                     { transform: [{ rotate: `${rotationDegrees}deg` }] }
                 ], resizeMode: "contain" }),
-            isBusinessMode &&
-                capturedPhotos.length === 1 &&
-                currentPhotoIndex === 1 &&
-                previewPhotoIndex === 0 &&
-                mergedStrings.secondPrompt ? (react_1.default.createElement(react_native_1.Text, { style: styles.confirmationPromptText }, mergedStrings.secondPrompt)) : null,
             react_1.default.createElement(react_native_1.View, { style: styles.confirmationButtons },
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.retakeButton], onPress: handleRetake, accessibilityLabel: mergedStrings.retake, accessibilityRole: "button" },
                     react_1.default.createElement(react_native_1.Text, { style: styles.confirmButtonText }, mergedStrings.retake)),
-                isBusinessMode &&
-                    capturedPhotos.length === 1 &&
-                    currentPhotoIndex === 1 &&
-                    previewPhotoIndex === 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
+                isBusinessMode && capturedPhotos.length === 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.confirmButtonPrimary], onPress: handleCaptureSecondPhoto, accessibilityLabel: mergedStrings.secondBtn, accessibilityRole: "button" },
                         react_1.default.createElement(react_native_1.Text, { style: styles.confirmButtonText }, mergedStrings.secondBtn)),
                     react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.skipButton], onPress: handleSkipSecondPhoto, accessibilityLabel: mergedStrings.confirm, accessibilityRole: "button" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "3.115.0",
+  "version": "3.117.0",
   "description": "Native-backed document scanner for React Native with customizable overlays.",
   "license": "MIT",
   "main": "dist/index.js",

package/src/FullDocScanner.tsx

@@ -183,22 +183,16 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   const [rotationDegrees, setRotationDegrees] = useState(0);
   const [capturedPhotos, setCapturedPhotos] = useState<FullDocScannerResult[]>([]);
   const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
-  const [previewPhotoIndex, setPreviewPhotoIndex] = useState(0);
   const resolvedGridColor = gridColor ?? overlayColor;
   const docScannerRef = useRef<DocScannerHandle | null>(null);
   const captureModeRef = useRef<'grid' | 'no-grid' | null>(null);
   const captureInProgressRef = useRef(false);
   const rectangleCaptureTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const rectangleHintTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const currentPhotoIndexRef = useRef(currentPhotoIndex);
 
   const isBusinessMode = type === 'business';
   const maxPhotos = isBusinessMode ? 2 : 1;
 
-  useEffect(() => {
-    currentPhotoIndexRef.current = currentPhotoIndex;
-  }, [currentPhotoIndex]);
-
   const mergedStrings = useMemo(
     () => ({
       captureHint: strings?.captureHint,
@@ -269,8 +263,6 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
 
         setProcessing(false);
 
-        setPreviewPhotoIndex(currentPhotoIndexRef.current);
-
         // Show confirmation screen
         setCroppedImageData({
           path: croppedImage.path,
@@ -333,9 +325,6 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
         return;
       }
 
-      const previewIndex = currentPhotoIndexRef.current;
-      setPreviewPhotoIndex(previewIndex);
-
       const normalizedDoc = normalizeCapturedDocument(document);
 
       if (captureMode === 'no-grid') {
@@ -542,22 +531,29 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     const updatedPhotos = [...capturedPhotos, currentPhoto];
     console.log('[FullDocScanner] Photos captured:', updatedPhotos.length, 'of', maxPhotos);
 
-    // Business 모드이고 아직 첫 번째 사진만 찍은 경우
-    if (isBusinessMode && updatedPhotos.length === 1) {
-      // 두 번째 사진 촬영 여부를 물어봄 (UI에서 버튼으로 표시)
-      setCapturedPhotos(updatedPhotos);
-      setCurrentPhotoIndex(1);
-      // 확인 화면을 유지하고 "뒷면 촬영" 버튼을 표시
-      return;
-    }
-
     // 모든 사진 촬영 완료 - 결과 반환
     console.log('[FullDocScanner] All photos captured, returning results');
     onResult(updatedPhotos);
-  }, [croppedImageData, rotationDegrees, capturedPhotos, isBusinessMode, maxPhotos, onResult]);
+  }, [croppedImageData, rotationDegrees, capturedPhotos, onResult]);
 
   const handleCaptureSecondPhoto = useCallback(() => {
     console.log('[FullDocScanner] Capturing second photo');
+
+    if (!croppedImageData) {
+      return;
+    }
+
+    // 현재 사진(앞면)을 먼저 저장
+    const rotationNormalized = ((rotationDegrees % 360) + 360) % 360;
+    const currentPhoto: FullDocScannerResult = {
+      path: croppedImageData.path,
+      base64: croppedImageData.base64,
+      rotationDegrees: rotationNormalized,
+    };
+
+    setCapturedPhotos([currentPhoto]);
+    setCurrentPhotoIndex(1);
+
     // 확인 화면을 닫고 카메라로 돌아감
     setCroppedImageData(null);
     setRotationDegrees(0);
@@ -577,29 +573,38 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     if (docScannerRef.current?.reset) {
       docScannerRef.current.reset();
     }
-  }, []);
+  }, [croppedImageData, rotationDegrees]);
 
   const handleSkipSecondPhoto = useCallback(() => {
-    console.log('[FullDocScanner] Skipping second photo');
-    // 첫 번째 사진만 반환
-    onResult(capturedPhotos);
-  }, [capturedPhotos, onResult]);
+    console.log('[FullDocScanner] Skipping second photo - saving current photo only');
+
+    if (!croppedImageData) {
+      return;
+    }
+
+    // 현재 사진만 저장하고 완료
+    const rotationNormalized = ((rotationDegrees % 360) + 360) % 360;
+    const currentPhoto: FullDocScannerResult = {
+      path: croppedImageData.path,
+      base64: croppedImageData.base64,
+      rotationDegrees: rotationNormalized,
+    };
+
+    onResult([currentPhoto]);
+  }, [croppedImageData, rotationDegrees, onResult]);
 
   const handleRetake = useCallback(() => {
     console.log('[FullDocScanner] Retake - clearing cropped image and resetting scanner');
 
-    if (isBusinessMode) {
-      if (currentPhotoIndex === 1 && previewPhotoIndex === 0 && capturedPhotos.length === 1) {
-        console.log('[FullDocScanner] Retake detected on front preview after confirmation - reverting to front capture');
-        setCapturedPhotos([]);
-        setCurrentPhotoIndex(0);
-        setPreviewPhotoIndex(0);
-      } else if (previewPhotoIndex === 1 && capturedPhotos.length === 2) {
-        console.log('[FullDocScanner] Retake detected on back preview after final confirmation - removing back photo');
-        setCapturedPhotos(capturedPhotos.slice(0, 1));
-        setCurrentPhotoIndex(1);
-        setPreviewPhotoIndex(1);
-      }
+    // Business 모드에서 두 번째 사진을 다시 찍는 경우, 첫 번째 사진 유지
+    if (isBusinessMode && capturedPhotos.length === 1) {
+      console.log('[FullDocScanner] Retake detected on back photo - keeping front photo');
+      setCurrentPhotoIndex(1);
+    } else {
+      // 첫 번째 사진 또는 일반 모드: 모든 상태 초기화
+      console.log('[FullDocScanner] Retake detected - resetting all photos');
+      setCapturedPhotos([]);
+      setCurrentPhotoIndex(0);
     }
 
     setCroppedImageData(null);
@@ -621,7 +626,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     if (docScannerRef.current?.reset) {
       docScannerRef.current.reset();
     }
-  }, [capturedPhotos, currentPhotoIndex, isBusinessMode, previewPhotoIndex]);
+  }, [capturedPhotos.length, isBusinessMode]);
 
   const handleRectangleDetect = useCallback((event: RectangleDetectEvent) => {
     const stableCounter = event.stableCounter ?? 0;
@@ -689,7 +694,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
           {isBusinessMode && (
             <View style={styles.photoHeader}>
               <Text style={styles.photoHeaderText}>
-                {previewPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second}
+                {currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second}
               </Text>
             </View>
           )}
@@ -725,13 +730,6 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
             ]}
             resizeMode="contain"
           />
-          {isBusinessMode &&
-            capturedPhotos.length === 1 &&
-            currentPhotoIndex === 1 &&
-            previewPhotoIndex === 0 &&
-            mergedStrings.secondPrompt ? (
-            <Text style={styles.confirmationPromptText}>{mergedStrings.secondPrompt}</Text>
-          ) : null}
           <View style={styles.confirmationButtons}>
             <TouchableOpacity
               style={[styles.confirmButton, styles.retakeButton]}
@@ -742,11 +740,8 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
               <Text style={styles.confirmButtonText}>{mergedStrings.retake}</Text>
             </TouchableOpacity>
 
-            {/* Business 모드이고 첫 번째 사진을 찍은 후: 뒷면 촬영 버튼 또는 확인 버튼 */}
-            {isBusinessMode &&
-              capturedPhotos.length === 1 &&
-              currentPhotoIndex === 1 &&
-              previewPhotoIndex === 0 ? (
+            {/* Business 모드이고 첫 번째 사진일 때: 뒷면 촬영 버튼과 확인 버튼 동시 표시 */}
+            {isBusinessMode && capturedPhotos.length === 0 ? (
               <>
                 <TouchableOpacity
                   style={[styles.confirmButton, styles.confirmButtonPrimary]}