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

package/dist/FullDocScanner.d.ts

@@ -20,9 +20,13 @@ export interface FullDocScannerStrings {
     retake?: string;
     confirm?: string;
     cropTitle?: string;
+    first?: string;
+    second?: string;
+    secondBtn?: string;
+    secondPrompt?: string;
 }
 export interface FullDocScannerProps {
-    onResult: (result: FullDocScannerResult) => void;
+    onResult: (results: FullDocScannerResult[]) => void;
     onClose?: () => void;
     detectionConfig?: DetectionConfig;
     overlayColor?: string;
@@ -35,5 +39,6 @@ export interface FullDocScannerProps {
     enableGallery?: boolean;
     cropWidth?: number;
     cropHeight?: number;
+    type?: 'business';
 }
 export declare const FullDocScanner: React.FC<FullDocScannerProps>;

package/dist/FullDocScanner.js

@@ -115,7 +115,7 @@ const normalizeCapturedDocument = (document) => {
         croppedPath: document.croppedPath ? stripFileUri(document.croppedPath) : null,
     };
 };
-const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3170f3', gridColor, gridLineWidth, showGrid, strings, minStableFrames, onError, enableGallery = true, cropWidth = 1200, cropHeight = 1600, }) => {
+const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3170f3', gridColor, gridLineWidth, showGrid, strings, minStableFrames, onError, enableGallery = true, cropWidth = 1200, cropHeight = 1600, type, }) => {
     const [processing, setProcessing] = (0, react_1.useState)(false);
     const [croppedImageData, setCroppedImageData] = (0, react_1.useState)(null);
     const [isGalleryOpen, setIsGalleryOpen] = (0, react_1.useState)(false);
@@ -123,12 +123,21 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const [rectangleHint, setRectangleHint] = (0, react_1.useState)(false);
     const [flashEnabled, setFlashEnabled] = (0, react_1.useState)(false);
     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,
@@ -138,6 +147,10 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         retake: strings?.retake ?? 'Retake',
         confirm: strings?.confirm ?? 'Confirm',
         cropTitle: strings?.cropTitle ?? 'Crop Document',
+        first: strings?.first ?? 'Front',
+        second: strings?.second ?? 'Back',
+        secondBtn: strings?.secondBtn ?? 'Capture Back Side?',
+        secondPrompt: strings?.secondPrompt ?? strings?.secondBtn ?? 'Capture Back Side?',
     }), [strings]);
     const emitError = (0, react_1.useCallback)((error, fallbackMessage) => {
         console.error('[FullDocScanner] error', error);
@@ -177,6 +190,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                 hasBase64: !!croppedImage.data,
             });
             setProcessing(false);
+            setPreviewPhotoIndex(currentPhotoIndexRef.current);
             // Show confirmation screen
             setCroppedImageData({
                 path: croppedImage.path,
@@ -223,6 +237,8 @@ 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');
@@ -377,16 +393,69 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         // 회전 각도 정규화 (0, 90, 180, 270)
         const rotationNormalized = ((rotationDegrees % 360) + 360) % 360;
         console.log('[FullDocScanner] Confirm - rotation degrees:', rotationDegrees, 'normalized:', rotationNormalized);
-        // 원본 이미지와 회전 각도를 함께 반환
-        // tdb 앱에서 expo-image-manipulator를 사용해서 회전 처리
-        onResult({
+        // 현재 사진을 capturedPhotos에 추가
+        const currentPhoto = {
             path: croppedImageData.path,
             base64: croppedImageData.base64,
             rotationDegrees: rotationNormalized,
-        });
-    }, [croppedImageData, rotationDegrees, onResult]);
+        };
+        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]);
+    const handleCaptureSecondPhoto = (0, react_1.useCallback)(() => {
+        console.log('[FullDocScanner] Capturing second photo');
+        // 확인 화면을 닫고 카메라로 돌아감
+        setCroppedImageData(null);
+        setRotationDegrees(0);
+        setProcessing(false);
+        setRectangleDetected(false);
+        setRectangleHint(false);
+        captureModeRef.current = null;
+        captureInProgressRef.current = false;
+        if (rectangleCaptureTimeoutRef.current) {
+            clearTimeout(rectangleCaptureTimeoutRef.current);
+            rectangleCaptureTimeoutRef.current = null;
+        }
+        if (rectangleHintTimeoutRef.current) {
+            clearTimeout(rectangleHintTimeoutRef.current);
+            rectangleHintTimeoutRef.current = null;
+        }
+        if (docScannerRef.current?.reset) {
+            docScannerRef.current.reset();
+        }
+    }, []);
+    const handleSkipSecondPhoto = (0, react_1.useCallback)(() => {
+        console.log('[FullDocScanner] Skipping second photo');
+        // 첫 번째 사진만 반환
+        onResult(capturedPhotos);
+    }, [capturedPhotos, 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);
+            }
+        }
         setCroppedImageData(null);
         setRotationDegrees(0);
         setProcessing(false);
@@ -406,7 +475,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         if (docScannerRef.current?.reset) {
             docScannerRef.current.reset();
         }
-    }, []);
+    }, [capturedPhotos, currentPhotoIndex, isBusinessMode, previewPhotoIndex]);
     const handleRectangleDetect = (0, react_1.useCallback)((event) => {
         const stableCounter = event.stableCounter ?? 0;
         const rectangleCoordinates = event.rectangleOnScreen ?? event.rectangleCoordinates;
@@ -459,6 +528,8 @@ 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 }, previewPhotoIndex === 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"),
@@ -470,11 +541,23 @@ 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)),
-                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 },
+                isBusinessMode &&
+                    capturedPhotos.length === 1 &&
+                    currentPhotoIndex === 1 &&
+                    previewPhotoIndex === 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(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: [
@@ -484,6 +567,8 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                         ], onPress: handleFlashToggle, disabled: processing, accessibilityLabel: "Toggle flash", accessibilityRole: "button" },
                         react_1.default.createElement(react_native_1.View, { style: styles.iconContainer },
                             react_1.default.createElement(react_native_1.Text, { style: styles.iconText }, "\u26A1\uFE0F"))),
+                    isBusinessMode && (react_1.default.createElement(react_native_1.View, { style: styles.cameraHeaderContainer },
+                        react_1.default.createElement(react_native_1.Text, { style: styles.cameraHeaderText }, currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second))),
                     react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.iconButton, onPress: handleClose, accessibilityLabel: mergedStrings.cancel, accessibilityRole: "button" },
                         react_1.default.createElement(react_native_1.View, { style: styles.iconContainer },
                             react_1.default.createElement(react_native_1.Text, { style: styles.closeIconText }, "\u00D7")))),
@@ -664,6 +749,14 @@ const styles = react_native_1.StyleSheet.create({
         width: '100%',
         height: '80%',
     },
+    confirmationPromptText: {
+        color: '#fff',
+        fontSize: 18,
+        fontWeight: '600',
+        textAlign: 'center',
+        paddingHorizontal: 32,
+        marginTop: 24,
+    },
     confirmationButtons: {
         flexDirection: 'row',
         justifyContent: 'center',
@@ -687,9 +780,44 @@ const styles = react_native_1.StyleSheet.create({
     confirmButtonPrimary: {
         backgroundColor: '#3170f3',
     },
+    skipButton: {
+        backgroundColor: 'rgba(100,100,100,0.8)',
+    },
     confirmButtonText: {
         color: '#fff',
         fontSize: 18,
         fontWeight: '600',
     },
+    photoHeader: {
+        position: 'absolute',
+        top: 20,
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+        zIndex: 5,
+    },
+    photoHeaderText: {
+        color: '#fff',
+        fontSize: 20,
+        fontWeight: 'bold',
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        paddingHorizontal: 24,
+        paddingVertical: 8,
+        borderRadius: 20,
+    },
+    cameraHeaderContainer: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+    },
+    cameraHeaderText: {
+        color: '#fff',
+        fontSize: 18,
+        fontWeight: 'bold',
+        backgroundColor: 'rgba(0,0,0,0.7)',
+        paddingHorizontal: 20,
+        paddingVertical: 6,
+        borderRadius: 16,
+    },
 });

package/package.json

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

package/src/FullDocScanner.tsx

@@ -135,10 +135,14 @@ export interface FullDocScannerStrings {
   retake?: string;
   confirm?: string;
   cropTitle?: string;
+  first?: string;
+  second?: string;
+  secondBtn?: string;
+  secondPrompt?: string;
 }
 
 export interface FullDocScannerProps {
-  onResult: (result: FullDocScannerResult) => void;
+  onResult: (results: FullDocScannerResult[]) => void;
   onClose?: () => void;
   detectionConfig?: DetectionConfig;
   overlayColor?: string;
@@ -151,6 +155,7 @@ export interface FullDocScannerProps {
   enableGallery?: boolean;
   cropWidth?: number;
   cropHeight?: number;
+  type?: 'business';
 }
 
 export const FullDocScanner: React.FC<FullDocScannerProps> = ({
@@ -167,6 +172,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   enableGallery = true,
   cropWidth = 1200,
   cropHeight = 1600,
+  type,
 }) => {
   const [processing, setProcessing] = useState(false);
   const [croppedImageData, setCroppedImageData] = useState<{path: string; base64?: string} | null>(null);
@@ -175,12 +181,23 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   const [rectangleHint, setRectangleHint] = useState(false);
   const [flashEnabled, setFlashEnabled] = useState(false);
   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(
     () => ({
@@ -192,6 +209,10 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       retake: strings?.retake ?? 'Retake',
       confirm: strings?.confirm ?? 'Confirm',
       cropTitle: strings?.cropTitle ?? 'Crop Document',
+      first: strings?.first ?? 'Front',
+      second: strings?.second ?? 'Back',
+      secondBtn: strings?.secondBtn ?? 'Capture Back Side?',
+      secondPrompt: strings?.secondPrompt ?? strings?.secondBtn ?? 'Capture Back Side?',
     }),
     [strings],
   );
@@ -248,6 +269,8 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
 
         setProcessing(false);
 
+        setPreviewPhotoIndex(currentPhotoIndexRef.current);
+
         // Show confirmation screen
         setCroppedImageData({
           path: croppedImage.path,
@@ -310,6 +333,9 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
         return;
       }
 
+      const previewIndex = currentPhotoIndexRef.current;
+      setPreviewPhotoIndex(previewIndex);
+
       const normalizedDoc = normalizeCapturedDocument(document);
 
       if (captureMode === 'no-grid') {
@@ -506,17 +532,76 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     const rotationNormalized = ((rotationDegrees % 360) + 360) % 360;
     console.log('[FullDocScanner] Confirm - rotation degrees:', rotationDegrees, 'normalized:', rotationNormalized);
 
-    // 원본 이미지와 회전 각도를 함께 반환
-    // tdb 앱에서 expo-image-manipulator를 사용해서 회전 처리
-    onResult({
+    // 현재 사진을 capturedPhotos에 추가
+    const currentPhoto: FullDocScannerResult = {
       path: croppedImageData.path,
       base64: croppedImageData.base64,
       rotationDegrees: rotationNormalized,
-    });
-  }, [croppedImageData, rotationDegrees, onResult]);
+    };
+
+    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]);
+
+  const handleCaptureSecondPhoto = useCallback(() => {
+    console.log('[FullDocScanner] Capturing second photo');
+    // 확인 화면을 닫고 카메라로 돌아감
+    setCroppedImageData(null);
+    setRotationDegrees(0);
+    setProcessing(false);
+    setRectangleDetected(false);
+    setRectangleHint(false);
+    captureModeRef.current = null;
+    captureInProgressRef.current = false;
+    if (rectangleCaptureTimeoutRef.current) {
+      clearTimeout(rectangleCaptureTimeoutRef.current);
+      rectangleCaptureTimeoutRef.current = null;
+    }
+    if (rectangleHintTimeoutRef.current) {
+      clearTimeout(rectangleHintTimeoutRef.current);
+      rectangleHintTimeoutRef.current = null;
+    }
+    if (docScannerRef.current?.reset) {
+      docScannerRef.current.reset();
+    }
+  }, []);
+
+  const handleSkipSecondPhoto = useCallback(() => {
+    console.log('[FullDocScanner] Skipping second photo');
+    // 첫 번째 사진만 반환
+    onResult(capturedPhotos);
+  }, [capturedPhotos, 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);
+      }
+    }
+
     setCroppedImageData(null);
     setRotationDegrees(0);
     setProcessing(false);
@@ -536,7 +621,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     if (docScannerRef.current?.reset) {
       docScannerRef.current.reset();
     }
-  }, []);
+  }, [capturedPhotos, currentPhotoIndex, isBusinessMode, previewPhotoIndex]);
 
   const handleRectangleDetect = useCallback((event: RectangleDetectEvent) => {
     const stableCounter = event.stableCounter ?? 0;
@@ -600,6 +685,15 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       {croppedImageData ? (
         // check_DP: Show confirmation screen
         <View style={styles.confirmationContainer}>
+          {/* 헤더 - 앞면/뒷면 표시 */}
+          {isBusinessMode && (
+            <View style={styles.photoHeader}>
+              <Text style={styles.photoHeaderText}>
+                {previewPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second}
+              </Text>
+            </View>
+          )}
+
           {/* 회전 버튼들 - 가운데 정렬 */}
           {isImageRotationSupported() ? (
             <View style={styles.rotateButtonsCenter}>
@@ -631,6 +725,13 @@ 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]}
@@ -640,14 +741,40 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
             >
               <Text style={styles.confirmButtonText}>{mergedStrings.retake}</Text>
             </TouchableOpacity>
-            <TouchableOpacity
-              style={[styles.confirmButton, styles.confirmButtonPrimary]}
-              onPress={handleConfirm}
-              accessibilityLabel={mergedStrings.confirm}
-              accessibilityRole="button"
-            >
-              <Text style={styles.confirmButtonText}>{mergedStrings.confirm}</Text>
-            </TouchableOpacity>
+
+            {/* Business 모드이고 첫 번째 사진을 찍은 후: 뒷면 촬영 버튼 또는 확인 버튼 */}
+            {isBusinessMode &&
+              capturedPhotos.length === 1 &&
+              currentPhotoIndex === 1 &&
+              previewPhotoIndex === 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>
+            )}
           </View>
         </View>
       ) : (
@@ -667,6 +794,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
             enableTorch={flashEnabled}
           >
           <View style={styles.overlayTop} pointerEvents="box-none">
+            {/* 좌측: 플래시 버튼 */}
             <TouchableOpacity
               style={[
                 styles.iconButton,
@@ -682,6 +810,17 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
                 <Text style={styles.iconText}>⚡️</Text>
               </View>
             </TouchableOpacity>
+
+            {/* 중앙: 앞면/뒷면 헤더 */}
+            {isBusinessMode && (
+              <View style={styles.cameraHeaderContainer}>
+                <Text style={styles.cameraHeaderText}>
+                  {currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second}
+                </Text>
+              </View>
+            )}
+
+            {/* 우측: 닫기 버튼 */}
             <TouchableOpacity
               style={styles.iconButton}
               onPress={handleClose}
@@ -907,6 +1046,14 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '80%',
   },
+  confirmationPromptText: {
+    color: '#fff',
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+    paddingHorizontal: 32,
+    marginTop: 24,
+  },
   confirmationButtons: {
     flexDirection: 'row',
     justifyContent: 'center',
@@ -930,9 +1077,44 @@ const styles = StyleSheet.create({
   confirmButtonPrimary: {
     backgroundColor: '#3170f3',
   },
+  skipButton: {
+    backgroundColor: 'rgba(100,100,100,0.8)',
+  },
   confirmButtonText: {
     color: '#fff',
     fontSize: 18,
     fontWeight: '600',
   },
+  photoHeader: {
+    position: 'absolute',
+    top: 20,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    zIndex: 5,
+  },
+  photoHeaderText: {
+    color: '#fff',
+    fontSize: 20,
+    fontWeight: 'bold',
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    paddingHorizontal: 24,
+    paddingVertical: 8,
+    borderRadius: 20,
+  },
+  cameraHeaderContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  },
+  cameraHeaderText: {
+    color: '#fff',
+    fontSize: 18,
+    fontWeight: 'bold',
+    backgroundColor: 'rgba(0,0,0,0.7)',
+    paddingHorizontal: 20,
+    paddingVertical: 6,
+    borderRadius: 16,
+  },
 });