// 기존 코드 예시
const 결제_모달_컴포넌트 = (...) => {
	...
	// 장바구니에 담겨진 상품 결제할 때 필요한 state
	const cart = useRecoilValue(cartState);
	// 퇴장정산 결제 할 때 필요한 state
	const [exitBandList, setExitBandList] = useRecoilState(realExitBandListAtom);
	// 후할인 적용하여 결제할 때 필요한 state
	const [discountAfterPayList, setDiscountAfterPayList] = useRecoilState(DiscountAfterPayListAtom);
	// 결제/상세페이지에서 환불할 때 필요한 state
	const [selectedProductKeys, setSelectedProductKeys] = useRecoilState(SelectedProductsKeysAtom);
	...
	const getOrderController = () => {
		// 상태에 따라 주문서 생성 로직 분기
	  if(cartState) {
	    // 장바구니 결제 로직
	  } else if(exitBandState) {
	    // 퇴장 정산 로직
	  } else {
	    // 기타 로직
	  }
	}

	useEffect(() => {
    (async () => {
      ...
      await getOrderController();
    })();
  }, [...]);

  return (
	  ...
  )
}

abstract class OrderForPayment {
  abstract get_오더번호();
  abstract get_주문내역();
  abstract get_상품_금액();
  abstract get_할인_금액();
  abstract get_총_결제_금액();
}

class CartOrderForPayment extends OrderForPayment {
	...장바구니 상태값이 주문서를 만드는 비즈니스 로직
}

class ExitBandOrderForPayment extends OrderForPayment {
	... 퇴장정산 시 필요한 주문서를 만드는 비즈니스 로직
}

... 기타 등등

interface 결제_모달_컴포넌트_Props {
	...;
	// 입력 인자로 수정
+	주문서_정보: OrderForPayment;
}

+ const 결제_모달_컴포넌트 = ({..., 주문서_정보}: 결제_모달_컴포넌트_Props) => {
	// 전역 상태 참조 코드 제거
-	// 장바구니에 담겨진 상품 결제할 때 필요한 state
-	const cart = useRecoilValue(cartState);
-	// 퇴장정산 결제 할 때 필요한 state
-	const [exitBandList, setExitBandList] = useRecoilState(realExitBandListAtom);
-	// 후할인 적용하여 결제할 때 필요한 state
-	const [discountAfterPayList, setDiscountAfterPayList] = useRecoilState(DiscountAfterPayListAtom);
-	// 결제/상세페이지에서 환불할 때 필요한 state
-	const [selectedProductKeys, setSelectedProductKeys] = useRecoilState(SelectedProductsKeysAtom);

-	// 위의 정의된 데이터에 따라 각자 맞는 방법(?)으로 Order를 만들어 주고 있었음.
-	const getOrderController = useCallback(async () => {
-		 const orderController = new OrderController({
-      ...
-    });

-	  // 각각에 State Type(?)에 따른 분기 처리
-    if(...) {
-    } else if(...) {
-    } else (...) {
-    }
-	}, [...]);

-	useEffect(() => {
-    (async () => {
-      ...
-      await getOrderController();
-    })();
-  }, [...]);

	return (
		...
	)
}

const 현금_결제_컴포넌트 = (...) => {
	...
	const 결제설정값 = useRecoilValue(결제_설정_State);

	const handleTerminalPayment = (...) => {
    // 터미널 타입 결제 처리
    ...
  };

  const handleDonglePayment = (...) => {
    // 동글 타입 결제 처리
  };

	...

	const proceedPayment = () => {
		// 다양한 조건 분기 처리
		if(개발환경일_경우) {
			...
		} else if(결제 단말기_1로 설정되어 있는 경우) {
			handleTerminalPayment();
		} else (다른 결제단말기로 설정되어 있는 경우) {
			handleDonglePayment();
		}
	}
}

// 기존 결제 모달 컴포넌트 내부에서 결정된 결제 이후 행위
const 결제_모달_컴포넌트 = () => {
	const afterPayActionController = new ActionAfterPayController({
	  // 아까 삭제한 전역 상태값들
	  orderUid: orderUidProps,
	  parkUid,
	  exitBandList,
	  discountList: discountAfterPayList,
	  selectedProductKeys,
	  CAT: enablePOS ? await getCAT() : '99',
	});

	// 할인 적용에서 결제 후 실행할 행위
	if (afterPayActionController.actionType === 'discount') {
	  ...
	// 퇴장정산에서 결제 후 실행할 행위
	} else if (afterPayActionController.actionType === 'exit') {
	  ...
	} else if (afterPayActionController.actionType === 'refund') {
	  ...
	} else {
	  ...
	}

	...
};

interface PaymentProcessor {
  /**
   * 현금 결제
   */
  paymentByCash: (...) => 결제결과값;

  /**
   * 신용카드 결제
   */
  paymentByCreditCard: (...) => 결제결과값;

  /**
   * 신용카드 수기 결제
   */
  paymentByHandWrittenCreditCard: (...) => 결제결과값;

  /**
   * 계좌이체
   */
  paymentByWireTransfer: (...) => 결제결과값;
}

class DevelopmentPayment implements PaymentProcessor {
  // 개발환경에서의 결제 로직
}

class TerminalPayment implements PaymentProcessor {
  // 터미널 타입의 결제 로직
}

class DonglePayment implements PaymentProcessor {
  // 동글 타입의 결제 로직
}

interface 현금_결제_컴포넌트_Props {
+	결제로직: PaymentProcessor;
}

const 현금_결제_컴포넌트 = ({ 결제로직 }: 현금_결제_컴포넌트_Props) => {
	// 기존의 로직들은 컴포넌트를 사용하는 곳에서 인자로 전달
-	const 결제설정값 = useRecoilValue(결제_설정_State);

-	const handleTerminalPayment = (...) => {
-    // 터미널 타입 결제 처리
-    ...
-  };

-  const handleDonglePayment = (...) => {
-    // 동글 타입 결제 처리
-    ...
-  };
	...

+	const proceedPayment = 결제로직.현금결제;

	return (
		...
	)
}

interface 현금_결제_컴포넌트_Props {
	결제로직: PaymentProcessor;
+	afterAddPayment: (결제결과값) => void;
}

const 현금_결제_컴포넌트 = ({ 결제로직 }: 현금_결제_컴포넌트_Props) => {
+	 const { mutate: addPaymentByCash, isLoading } = useMutation({
+    mutationFn: paymentByCash,
+    onSuccess: (결제결과값) => {
+			afterAddPayment(결제결과값);
+    }
+  });
  ...
}

// 기존 코드 예시
const proceedPayment = (...) => {
	const result = await 결제();
	if(result.error === "01") {
		Modal.error("결제 정보가 누락되었습니다");
	} else (result.error === "02") {
		message.error("결제 단말기 연결이 되어있지않습니다");
	}...
}

// 현금 연수증 오류
class CashReceiptHardwareException extends Error {
	...
}
// 단말기 연결 오류
class DisconnectedDeviceException extends Error {
	...
}

... 기타 등등

 class 결제구현체 implements PaymentProcessor {
	async 현금결제() {
		const result = await 현금결제하기();

		if(영수증 X) throw new CashReceiptHardwareException();

		else if(단말기 연결 X) throw new DisconnectedDeviceException();
		...
	}
}

interface 현금_결제_컴포넌트_Props {
	결제로직: PaymentProcessor;
	afterAddPayment: (결제결과값) => void;
	afterCashReceiptError: (error: CashReceiptHardwareException) => void;
	afterDisconnectedDeviceError: (error: DisconnectedDeviceException) => void;
}

const 현금_결제_컴포넌트 = ({
	결제로직,
	afterAddPayment,
	afterCashReceiptError,
	afterDisconnectedDeviceError
}: 현금_결제_컴포넌트_Props) => {

	const { mutate: addPaymentByCash, isLoading } = useMutation({
		mutationFn: paymentByCash,
		useErrorBoundary: false, // 해당 설정이 되어있어야 onError에서 예외처리할 수 있습니다.
		onSuccess: afterAddPayment,
		onError: (error: unknown) => {
			if (error instanceof CashReceiptHardwareError) {
				afterCashReceiptError(error);
			} else if(error instanceof DisconnectedDeviceException) {
				afterDisconnectedDeviceError(error);
			} ....
		}
	});

  ...
}

const 일반판매_페이지 = () => {
	return (
		...
		<결제모달
			주문서_정보={...}
			afterAddPayment={() => {
				// 결제 정보 노출
				// 결제 완료 후 결제/상세 페이지로 이동
			}}
			afterCashReceiptError={() => {
				// 모달에 에러 메시지 노출
			}}
			결제로직={new TerminalPayment()}
			...
		/>
	);
}

const 퇴장정산_페이지 = () => {
	return (
		...
		<결제모달
			주문서_정보={...}
			afterAddPayment={() => {
				// 결제 정보 노출
				// 결제 완료 후 결제 모달 창 닫기
			}}
			afterCashReceiptError={() => {
				// 메시지 컴포넌트로 에러 메시지 노출
			}}
			결제로직={new TossPayment()}
			...
		/>
	);
}