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

package/dist/FullDocScanner.js

@@ -132,7 +132,6 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const rectangleCaptureTimeoutRef = (0, react_1.useRef)(null);
     const rectangleHintTimeoutRef = (0, react_1.useRef)(null);
     const isBusinessMode = type === 'business';
-    const maxPhotos = isBusinessMode ? 2 : 1;
     const mergedStrings = (0, react_1.useMemo)(() => ({
         captureHint: strings?.captureHint,
         manualHint: strings?.manualHint,
@@ -208,6 +207,10 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                 errorMessage.includes('cancelled') ||
                 errorMessage.includes('cancel')) {
                 console.log('[FullDocScanner] User cancelled cropper');
+                // DocScanner 상태를 리셋하여 카메라가 다시 작동하도록 함
+                if (docScannerRef.current?.reset) {
+                    docScannerRef.current.reset();
+                }
             }
             else {
                 emitError(error instanceof Error ? error : new Error(errorMessage), 'Failed to crop image. Please try again.');
@@ -392,9 +395,9 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             rotationDegrees: rotationNormalized,
         };
         const updatedPhotos = [...capturedPhotos, currentPhoto];
-        console.log('[FullDocScanner] Photos captured:', updatedPhotos.length, 'of', maxPhotos);
-        // 모든 사진 촬영 완료 - 결과 반환
-        console.log('[FullDocScanner] All photos captured, returning results');
+        console.log('[FullDocScanner] Photos captured:', updatedPhotos.length);
+        // 결과 반환
+        console.log('[FullDocScanner] Returning results');
         onResult(updatedPhotos);
     }, [croppedImageData, rotationDegrees, capturedPhotos, onResult]);
     const handleCaptureSecondPhoto = (0, react_1.useCallback)(() => {
@@ -431,20 +434,6 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             docScannerRef.current.reset();
         }
     }, [croppedImageData, rotationDegrees]);
-    const handleSkipSecondPhoto = (0, react_1.useCallback)(() => {
-        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');
         // Business 모드에서 두 번째 사진을 다시 찍는 경우, 첫 번째 사진 유지
@@ -530,15 +519,22 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         croppedImageData ? (
         // 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 }, currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second))),
-            isImageRotationSupported() ? (react_1.default.createElement(react_native_1.View, { style: styles.rotateButtonsCenter },
+            isBusinessMode && isImageRotationSupported() ? (react_1.default.createElement(react_native_1.View, { style: styles.businessHeaderRow },
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.rotateButtonLeft, 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")),
+                react_1.default.createElement(react_native_1.View, { style: styles.photoHeaderCenter },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.photoHeaderText }, currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second)),
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.rotateButtonRight, onPress: () => handleRotateImage(90), accessibilityLabel: "\uC624\uB978\uCABD\uC73C\uB85C 90\uB3C4 \uD68C\uC804", accessibilityRole: "button" },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.rotateIconText }, "\u21BB")))) : isBusinessMode ? (react_1.default.createElement(react_native_1.View, { style: styles.photoHeader },
+                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"),
                     react_1.default.createElement(react_native_1.Text, { style: styles.rotateButtonLabel }, "\uC88C\uB85C 90\u00B0")),
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.rotateButtonTop, onPress: () => handleRotateImage(90), accessibilityLabel: "\uC624\uB978\uCABD\uC73C\uB85C 90\uB3C4 \uD68C\uC804", accessibilityRole: "button" },
                     react_1.default.createElement(react_native_1.Text, { style: styles.rotateIconText }, "\u21BB"),
                     react_1.default.createElement(react_native_1.Text, { style: styles.rotateButtonLabel }, "\uC6B0\uB85C 90\u00B0")))) : null,
+            isBusinessMode && capturedPhotos.length === 0 && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.captureBackButton, onPress: handleCaptureSecondPhoto, accessibilityLabel: mergedStrings.secondBtn, accessibilityRole: "button" },
+                react_1.default.createElement(react_native_1.Text, { style: styles.captureBackButtonText }, mergedStrings.secondBtn))),
             react_1.default.createElement(react_native_1.Image, { source: { uri: croppedImageData.path }, style: [
                     styles.previewImage,
                     { transform: [{ rotate: `${rotationDegrees}deg` }] }
@@ -546,12 +542,8 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             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 === 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" },
-                        react_1.default.createElement(react_native_1.Text, { style: styles.confirmButtonText }, mergedStrings.confirm)))) : (react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.confirmButtonPrimary], onPress: handleConfirm, accessibilityLabel: mergedStrings.confirm, accessibilityRole: "button" },
-                    react_1.default.createElement(react_native_1.Text, { style: styles.confirmButtonText }, mergedStrings.confirm)))))) : (react_1.default.createElement(react_native_1.View, { style: styles.flex },
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.confirmButtonPrimary], onPress: handleConfirm, accessibilityLabel: mergedStrings.confirm, accessibilityRole: "button" },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.confirmButtonText }, mergedStrings.confirm))))) : (react_1.default.createElement(react_native_1.View, { style: styles.flex },
             react_1.default.createElement(DocScanner_1.DocScanner, { ref: docScannerRef, autoCapture: false, overlayColor: overlayColor, showGrid: showGrid, gridColor: resolvedGridColor, gridLineWidth: gridLineWidth, minStableFrames: minStableFrames ?? 6, detectionConfig: detectionConfig, onCapture: handleCapture, onRectangleDetect: handleRectangleDetect, showManualCaptureButton: false, enableTorch: flashEnabled },
                 react_1.default.createElement(react_native_1.View, { style: styles.overlayTop, pointerEvents: "box-none" },
                     react_1.default.createElement(react_native_1.TouchableOpacity, { style: [
@@ -814,4 +806,58 @@ const styles = react_native_1.StyleSheet.create({
         paddingVertical: 6,
         borderRadius: 16,
     },
+    captureBackButton: {
+        position: 'absolute',
+        bottom: 140,
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+        zIndex: 15,
+    },
+    captureBackButtonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+        // backgroundColor: 'rgba(255,100,50,0.9)',
+        paddingHorizontal: 32,
+        paddingVertical: 14,
+        borderRadius: 24,
+        borderWidth: 2,
+        borderColor: '#fff',
+        overflow: 'hidden',
+    },
+    businessHeaderRow: {
+        position: 'absolute',
+        top: 80,
+        left: 0,
+        right: 0,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingHorizontal: 20,
+        zIndex: 10,
+    },
+    rotateButtonLeft: {
+        width: 48,
+        height: 48,
+        borderRadius: 24,
+        backgroundColor: 'rgba(50,50,50,0.8)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.3)',
+    },
+    rotateButtonRight: {
+        width: 48,
+        height: 48,
+        borderRadius: 24,
+        backgroundColor: 'rgba(50,50,50,0.8)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.3)',
+    },
+    photoHeaderCenter: {
+        alignItems: 'center',
+    },
 });

package/package.json

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

package/src/FullDocScanner.tsx

@@ -191,7 +191,6 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   const rectangleHintTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const isBusinessMode = type === 'business';
-  const maxPhotos = isBusinessMode ? 2 : 1;
 
   const mergedStrings = useMemo(
     () => ({
@@ -292,6 +291,10 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
           errorMessage.includes('cancel')
         ) {
           console.log('[FullDocScanner] User cancelled cropper');
+          // DocScanner 상태를 리셋하여 카메라가 다시 작동하도록 함
+          if (docScannerRef.current?.reset) {
+            docScannerRef.current.reset();
+          }
         } else {
           emitError(
             error instanceof Error ? error : new Error(errorMessage),
@@ -529,10 +532,10 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     };
 
     const updatedPhotos = [...capturedPhotos, currentPhoto];
-    console.log('[FullDocScanner] Photos captured:', updatedPhotos.length, 'of', maxPhotos);
+    console.log('[FullDocScanner] Photos captured:', updatedPhotos.length);
 
-    // 모든 사진 촬영 완료 - 결과 반환
-    console.log('[FullDocScanner] All photos captured, returning results');
+    // 결과 반환
+    console.log('[FullDocScanner] Returning results');
     onResult(updatedPhotos);
   }, [croppedImageData, rotationDegrees, capturedPhotos, onResult]);
 
@@ -575,23 +578,6 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     }
   }, [croppedImageData, rotationDegrees]);
 
-  const handleSkipSecondPhoto = useCallback(() => {
-    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');
@@ -690,17 +676,40 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       {croppedImageData ? (
         // check_DP: Show confirmation screen
         <View style={styles.confirmationContainer}>
-          {/* 헤더 - 앞면/뒷면 표시 */}
-          {isBusinessMode && (
+          {/* Business 모드: 회전 버튼(왼쪽/오른쪽) + 헤더(가운데) 한 줄 배치 */}
+          {isBusinessMode && isImageRotationSupported() ? (
+            <View style={styles.businessHeaderRow}>
+              <TouchableOpacity
+                style={styles.rotateButtonLeft}
+                onPress={() => handleRotateImage(-90)}
+                accessibilityLabel="왼쪽으로 90도 회전"
+                accessibilityRole="button"
+              >
+                <Text style={styles.rotateIconText}>↺</Text>
+              </TouchableOpacity>
+
+              <View style={styles.photoHeaderCenter}>
+                <Text style={styles.photoHeaderText}>
+                  {currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second}
+                </Text>
+              </View>
+
+              <TouchableOpacity
+                style={styles.rotateButtonRight}
+                onPress={() => handleRotateImage(90)}
+                accessibilityLabel="오른쪽으로 90도 회전"
+                accessibilityRole="button"
+              >
+                <Text style={styles.rotateIconText}>↻</Text>
+              </TouchableOpacity>
+            </View>
+          ) : isBusinessMode ? (
             <View style={styles.photoHeader}>
               <Text style={styles.photoHeaderText}>
                 {currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second}
               </Text>
             </View>
-          )}
-
-          {/* 회전 버튼들 - 가운데 정렬 */}
-          {isImageRotationSupported() ? (
+          ) : isImageRotationSupported() ? (
             <View style={styles.rotateButtonsCenter}>
               <TouchableOpacity
                 style={styles.rotateButtonTop}
@@ -722,6 +731,19 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
               </TouchableOpacity>
             </View>
           ) : null}
+
+          {/* 뒷면 촬영 버튼 - 상단에 표시 (Business 모드이고 첫 번째 사진일 때만) */}
+          {isBusinessMode && capturedPhotos.length === 0 && (
+            <TouchableOpacity
+              style={styles.captureBackButton}
+              onPress={handleCaptureSecondPhoto}
+              accessibilityLabel={mergedStrings.secondBtn}
+              accessibilityRole="button"
+            >
+              <Text style={styles.captureBackButtonText}>{mergedStrings.secondBtn}</Text>
+            </TouchableOpacity>
+          )}
+
           <Image
             source={{ uri: croppedImageData.path }}
             style={[
@@ -740,36 +762,14 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
               <Text style={styles.confirmButtonText}>{mergedStrings.retake}</Text>
             </TouchableOpacity>
 
-            {/* Business 모드이고 첫 번째 사진일 때: 뒷면 촬영 버튼과 확인 버튼 동시 표시 */}
-            {isBusinessMode && capturedPhotos.length === 0 ? (
-              <>
-                <TouchableOpacity
-                  style={[styles.confirmButton, styles.confirmButtonPrimary]}
-                  onPress={handleCaptureSecondPhoto}
-                  accessibilityLabel={mergedStrings.secondBtn}
-                  accessibilityRole="button"
-                >
-                  <Text style={styles.confirmButtonText}>{mergedStrings.secondBtn}</Text>
-                </TouchableOpacity>
-                <TouchableOpacity
-                  style={[styles.confirmButton, styles.skipButton]}
-                  onPress={handleSkipSecondPhoto}
-                  accessibilityLabel={mergedStrings.confirm}
-                  accessibilityRole="button"
-                >
-                  <Text style={styles.confirmButtonText}>{mergedStrings.confirm}</Text>
-                </TouchableOpacity>
-              </>
-            ) : (
-              <TouchableOpacity
-                style={[styles.confirmButton, styles.confirmButtonPrimary]}
-                onPress={handleConfirm}
-                accessibilityLabel={mergedStrings.confirm}
-                accessibilityRole="button"
-              >
-                <Text style={styles.confirmButtonText}>{mergedStrings.confirm}</Text>
-              </TouchableOpacity>
-            )}
+            <TouchableOpacity
+              style={[styles.confirmButton, styles.confirmButtonPrimary]}
+              onPress={handleConfirm}
+              accessibilityLabel={mergedStrings.confirm}
+              accessibilityRole="button"
+            >
+              <Text style={styles.confirmButtonText}>{mergedStrings.confirm}</Text>
+            </TouchableOpacity>
           </View>
         </View>
       ) : (
@@ -1112,4 +1112,58 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     borderRadius: 16,
   },
+  captureBackButton: {
+    position: 'absolute',
+    bottom: 140,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    zIndex: 15,
+  },
+  captureBackButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+    // backgroundColor: 'rgba(255,100,50,0.9)',
+    paddingHorizontal: 32,
+    paddingVertical: 14,
+    borderRadius: 24,
+    borderWidth: 2,
+    borderColor: '#fff',
+    overflow: 'hidden',
+  },
+  businessHeaderRow: {
+    position: 'absolute',
+    top: 80,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    zIndex: 10,
+  },
+  rotateButtonLeft: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: 'rgba(50,50,50,0.8)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.3)',
+  },
+  rotateButtonRight: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: 'rgba(50,50,50,0.8)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.3)',
+  },
+  photoHeaderCenter: {
+    alignItems: 'center',
+  },
 });