sales-frontend-components 3.0.6 → 3.0.8

package/dist/index.cjs.js

@@ -24,6 +24,7 @@ var styles$b = require('./modal/pre-standard/organization-search-modal/organizat
 var styles$c = require('./step-indicator/step-indicator.module.scss');
 var salesFrontendBridge = require('sales-frontend-bridge');
 var styles$d = require('./camera/camera.module.scss');
+var remoteIdentityVerification = require('sales-frontend-headless/remote-identity-verification');
 var styles$e = require('./terms/components/unit/terms-radio.module.scss');
 var styles$f = require('./terms/components/unit/terms-rating-bar.module.scss');
 var styles$g = require('./terms/components/unit/terms-mobile-card.module.scss');
@@ -643,7 +644,7 @@ function requireBind () {
 }
 
 var bindExports = requireBind();
-var classNames = /*@__PURE__*/getDefaultExportFromCjs(bindExports);
+var classNames$1 = /*@__PURE__*/getDefaultExportFromCjs(bindExports);
 
 const highlightOnSearchKeyword = (originalText, targetString) => {
   if (!targetString || !originalText?.includes(targetString)) {
@@ -662,7 +663,7 @@ const highlightOnSearchKeyword = (originalText, targetString) => {
   return replacedText;
 };
 
-const cx$x = classNames.bind(styles);
+const cx$x = classNames$1.bind(styles);
 const { InputBox: InputBox$4, Input: Input$4 } = salesFrontendDesignSystem.FormCore;
 const AddressSearchInitialText = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -1496,7 +1497,7 @@ function useBankStockSearch({ onSelect, commonCodeId }) {
   };
 }
 
-const cx$w = classNames.bind(styles$1);
+const cx$w = classNames$1.bind(styles$1);
 function BankStockSearchModal({ open, onClose, onSelect, commonCodeId }) {
   const { bankList, stockList, handleSelect } = useBankStockSearch({
     onSelect,
@@ -1614,7 +1615,7 @@ const useCustomerSearch = (onSelect, options) => {
   };
 };
 
-const cx$v = classNames.bind(styles$2);
+const cx$v = classNames$1.bind(styles$2);
 const { InputBox: InputBox$3, Input: Input$3 } = salesFrontendDesignSystem.FormCore;
 const CustomerSearch = ({
   onSelectCustomer,
@@ -1690,7 +1691,7 @@ const CustomerSearch = ({
   ] });
 };
 
-const cx$u = classNames.bind(styles$2);
+const cx$u = classNames$1.bind(styles$2);
 const { InputBox: InputBox$2, Input: Input$2 } = salesFrontendDesignSystem.FormCore;
 function CustomerSearchModal({ isOpen, closeModal, onSelect, onSearchClear, inputProps, inputBoxProps }) {
   const {
@@ -1782,7 +1783,7 @@ function CustomerSearchModal({ isOpen, closeModal, onSelect, onSearchClear, inpu
   ] });
 }
 
-const cx$t = classNames.bind(styles$3);
+const cx$t = classNames$1.bind(styles$3);
 const { InputBox: InputBox$1, Input: Input$1 } = salesFrontendDesignSystem.FormCore;
 const favoriteList = [
   {
@@ -2005,7 +2006,7 @@ const useNationalityComponent = () => {
   };
 };
 
-const cx$s = classNames.bind(styles$4);
+const cx$s = classNames$1.bind(styles$4);
 const AUTH_TEMPLATE_CODES = {
   appInit: {
     dev: {
@@ -2264,7 +2265,7 @@ function useNxlOneModal({
   };
 }
 
-const cx$r = classNames.bind(styles$5);
+const cx$r = classNames$1.bind(styles$5);
 const { InputBox, Input } = salesFrontendDesignSystem.FormCore;
 const VisaSearchInitialText = ({ visaList, onSelect, onConfirm }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$r("favorite-container"), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$r("favorite"), children: visaList.map((item, index) => {
@@ -2442,7 +2443,7 @@ const useVisaComponent = () => {
   };
 };
 
-const cx$q = classNames.bind(styles$6);
+const cx$q = classNames$1.bind(styles$6);
 function DeaCustomerSearchResult({
   customerList,
   onCustomerSelect,
@@ -2494,7 +2495,7 @@ function DeaCustomerSearchResult({
 }
 
 const { TextField: TextField$3 } = salesFrontendDesignSystem.FormField;
-const cx$p = classNames.bind(styles$6);
+const cx$p = classNames$1.bind(styles$6);
 function DeaCustomerSearch({
   setSearchParams,
   customerList,
@@ -2733,7 +2734,7 @@ const EMPLOYEE_SEARCH_TABS = [
   { value: "WKIS", label: "\uB0B4\uADFC" }
 ];
 
-const cx$o = classNames.bind(styles$7);
+const cx$o = classNames$1.bind(styles$7);
 function EmployeeSearchResult({
   filteredEmployees,
   onEmployeeSelect,
@@ -2781,7 +2782,7 @@ function EmployeeSearchResult({
 }
 
 const { TextField: TextField$2 } = salesFrontendDesignSystem.FormField;
-const cx$n = classNames.bind(styles$7);
+const cx$n = classNames$1.bind(styles$7);
 function EmployeeSearch({
   activeTab,
   onTabChange,
@@ -3011,7 +3012,7 @@ function JobSearchDetail({ occupationTypeCode, occupationIndustryCode }) {
   ] }) }) });
 }
 
-const cx$m = classNames.bind(styles$8);
+const cx$m = classNames$1.bind(styles$8);
 function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$m("category-section"), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$m("result-title"), children: [
@@ -3049,7 +3050,7 @@ function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
   ] }) });
 }
 
-const cx$l = classNames.bind(styles$8);
+const cx$l = classNames$1.bind(styles$8);
 function JobSearchFavorite({ filteredJobs, onJobSelect }) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$l("popular-jobs"), children: [
     /* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uB9CE\uC774 \uCC3E\uB294 \uC9C1\uC885" }),
@@ -3089,7 +3090,7 @@ function JobSearchFavorite({ filteredJobs, onJobSelect }) {
   ] }) });
 }
 
-const cx$k = classNames.bind(styles$8);
+const cx$k = classNames$1.bind(styles$8);
 function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$k("popular-jobs"), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$k("result-title"), children: [
@@ -3134,7 +3135,7 @@ function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
 }
 
 const { TextField: TextField$1 } = salesFrontendDesignSystem.FormField;
-const cx$j = classNames.bind(styles$8);
+const cx$j = classNames$1.bind(styles$8);
 const { Option } = salesFrontendDesignSystem.Select;
 function JobSearch({
   activeTab,
@@ -3487,7 +3488,7 @@ function useJobSearchModal() {
   };
 }
 
-const cx$i = classNames.bind(styles$9);
+const cx$i = classNames$1.bind(styles$9);
 const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$i("grade-section"), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$i("icon-title"), children: [
@@ -3508,7 +3509,7 @@ const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
   ] });
 };
 
-const cx$h = classNames.bind(styles$a);
+const cx$h = classNames$1.bind(styles$a);
 function VehicleSearch({ vehicles, onVehicleSelect, selectedVehicle }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$h("vehicle-search-section"), children: [
     /* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uC6B4\uC804 \uCC28\uC885" }),
@@ -3612,7 +3613,7 @@ const useJobVehicleSearch = () => {
   };
 };
 
-const cx$g = classNames.bind(styles$9);
+const cx$g = classNames$1.bind(styles$9);
 function useJobVehicleSearchModal() {
   const {
     selectedVehicle,
@@ -3743,7 +3744,7 @@ function useJobVehicleSearchModal() {
   };
 }
 
-const cx$f = classNames.bind(styles$b);
+const cx$f = classNames$1.bind(styles$b);
 function OrganizationSearchResult({
   filteredOrganizations,
   selectedOrganization,
@@ -3789,7 +3790,7 @@ function OrganizationSearchResult({
 }
 
 const { TextField } = salesFrontendDesignSystem.FormField;
-const cx$e = classNames.bind(styles$b);
+const cx$e = classNames$1.bind(styles$b);
 function OrganizationSearch({
   searchTerm,
   setSearchTerm,
@@ -3918,7 +3919,7 @@ const OrganizationSearchModal = ({
   ] });
 };
 
-const cx$d = classNames.bind(styles$a);
+const cx$d = classNames$1.bind(styles$a);
 function JobVehicleSearchModal({ onClose }) {
   const { selectedVehicle, VehicleSearchComponent } = useVehicleSearch();
   return /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "xlarge", children: [
@@ -4243,7 +4244,7 @@ const HookFormDateRangePickerRenew = ({
   return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.DatePickerRangeRenew, { startDateProps: startDateMergedProps, endDateProps: endDateMergedProps });
 };
 
-const cx$c = classNames.bind(styles$c);
+const cx$c = classNames$1.bind(styles$c);
 const StepIndicator = ({
   items,
   onClickItem,
@@ -4309,7 +4310,7 @@ const StepIndicator = ({
   ] });
 };
 
-const cx$b = classNames.bind(styles$d);
+const cx$b = classNames$1.bind(styles$d);
 function Attachment({
   photos,
   onAddPhoto,
@@ -5195,7 +5196,7 @@ const RIV_SEARCH_PARAM_MAP = {
   }
 };
 
-const useRemoteIdentityVerification = ({
+const useRemoteIdentityVerification$1 = ({
   rivEnv,
   rivOrigin,
   tokenRequestParams,
@@ -5257,7 +5258,7 @@ const useRemoteIdentityVerification = ({
   };
 };
 const useRemoteIdentityVerificationIframe = (config) => {
-  const { createMessageHandler, createRemoteIdentityVerificationUrl } = useRemoteIdentityVerification(config);
+  const { createMessageHandler, createRemoteIdentityVerificationUrl } = useRemoteIdentityVerification$1(config);
   const { isOpen, openModal, closeModal } = salesFrontendDesignSystem.useModalState();
   const [remoteIdentityVerificationUrl, setRemoteIdentityVerificationUrl] = React9.useState("");
   const [rivsRequestId, setRivsRequestId] = React9.useState("");
@@ -5347,6 +5348,151 @@ const useRemoteIdentityVerificationIframe = (config) => {
   };
 };
 
+var classnames = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+var hasRequiredClassnames;
+
+function requireClassnames () {
+	if (hasRequiredClassnames) return classnames.exports;
+	hasRequiredClassnames = 1;
+	(function (module) {
+		/* global define */
+
+		(function () {
+
+			var hasOwn = {}.hasOwnProperty;
+
+			function classNames () {
+				var classes = '';
+
+				for (var i = 0; i < arguments.length; i++) {
+					var arg = arguments[i];
+					if (arg) {
+						classes = appendClass(classes, parseValue(arg));
+					}
+				}
+
+				return classes;
+			}
+
+			function parseValue (arg) {
+				if (typeof arg === 'string' || typeof arg === 'number') {
+					return arg;
+				}
+
+				if (typeof arg !== 'object') {
+					return '';
+				}
+
+				if (Array.isArray(arg)) {
+					return classNames.apply(null, arg);
+				}
+
+				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+					return arg.toString();
+				}
+
+				var classes = '';
+
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes = appendClass(classes, key);
+					}
+				}
+
+				return classes;
+			}
+
+			function appendClass (value, newClass) {
+				if (!newClass) {
+					return value;
+				}
+			
+				if (value) {
+					return value + ' ' + newClass;
+				}
+			
+				return value + newClass;
+			}
+
+			if (module.exports) {
+				classNames.default = classNames;
+				module.exports = classNames;
+			} else {
+				window.classNames = classNames;
+			}
+		}()); 
+	} (classnames));
+	return classnames.exports;
+}
+
+var classnamesExports = requireClassnames();
+var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+
+const RemoteIdentityVerificationView = ({
+  width = "100%",
+  height = "100%",
+  loadingComponent,
+  isLoading = false,
+  isOpen = false,
+  src,
+  className,
+  ...iframeProps
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen, children: [
+    isLoading && (loadingComponent || /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Loading.Wait, { bodyText: "\uBD88\uB7EC\uC624\uB294 \uC911" })),
+    src && /* @__PURE__ */ jsxRuntime.jsx(
+      "iframe",
+      {
+        width,
+        height,
+        allow: "camera *;",
+        className: classNames("bg-100", className),
+        ...iframeProps,
+        src
+      }
+    )
+  ] });
+};
+
+const RemoteIdentityVerificationContainer = ({
+  viewProps,
+  ...coreParams
+}) => {
+  const { rivLandingUrl, isLoading, handleIframeLoad } = remoteIdentityVerification.useRemoteIdentityVerificationCore(coreParams);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RemoteIdentityVerificationView,
+    {
+      ...viewProps,
+      src: rivLandingUrl,
+      isOpen: coreParams.isOpen,
+      isLoading,
+      onLoad: handleIframeLoad
+    }
+  );
+};
+
+const useRemoteIdentityVerification = () => {
+  const { isOpen, openModal, closeModal } = salesFrontendDesignSystem.useModalState();
+  return {
+    isRivModalOpen: isOpen,
+    openRivModal: openModal,
+    closeRivModal: closeModal
+  };
+};
+
+const RemoteIdentityVerification = {
+  Container: RemoteIdentityVerificationContainer,
+  View: RemoteIdentityVerificationView,
+  useRemoteIdentityVerification
+};
+
 function DudUpload() {
   const [test, setTest] = React9.useState();
   const { mutateAsync, data } = method.useDudExternalFileUploadMutation();
@@ -5525,7 +5671,7 @@ const TermsCheckboxButton = ({
   );
 };
 
-const cx$a = classNames.bind(styles$e);
+const cx$a = classNames$1.bind(styles$e);
 const TermsRadio = ({ field, value, options, onChange }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$a("radio", "mt-textarea-medium"), children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
     salesFrontendDesignSystem.Radio.Item,
@@ -5541,7 +5687,7 @@ const TermsRadio = ({ field, value, options, onChange }) => {
   )) });
 };
 
-const cx$9 = classNames.bind(styles$f);
+const cx$9 = classNames$1.bind(styles$f);
 const RATING_DATA = [
   { type: "safe", name: "\uC548\uC2EC" },
   // jade-green400
@@ -5563,7 +5709,7 @@ const TermsRatingBar = ({ active }) => {
   ] });
 };
 
-const cx$8 = classNames.bind(styles$g);
+const cx$8 = classNames$1.bind(styles$g);
 const TermsMobileCard = ({ className, children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$8("mobile-card", className), children });
 };
@@ -5680,7 +5826,7 @@ const TermsCancerProvideQR = () => /* @__PURE__ */ jsxRuntime.jsxs(
   }
 );
 
-const cx$7 = classNames.bind(styles$h);
+const cx$7 = classNames$1.bind(styles$h);
 const CHANNEL_OPTIONS$1 = [
   { label: "\uC804\uCCB4", value: "0" },
   { label: "\uC804\uD654", value: "1" },
@@ -5898,7 +6044,7 @@ const TermsMarketing = ({
   ] });
 };
 
-const cx$6 = classNames.bind(styles$h);
+const cx$6 = classNames$1.bind(styles$h);
 const PERIOD_OPTIONS = [
   { label: "5\uB144", value: "5" },
   { label: "4\uB144", value: "4" },
@@ -6107,7 +6253,7 @@ const TermsCancerMarketing = ({
   ] });
 };
 
-const cx$5 = classNames.bind(styles$h);
+const cx$5 = classNames$1.bind(styles$h);
 const TermsCancerSystem = ({
   formFactor = "tablet",
   value,
@@ -6335,7 +6481,7 @@ const TermsCancerSystem = ({
   ] });
 };
 
-const cx$4 = classNames.bind(styles$h);
+const cx$4 = classNames$1.bind(styles$h);
 const TermsExecution = ({ formFactor = "tablet", value, onChange, className }) => {
   const handleChange = (field, newValue) => {
     onChange({
@@ -6716,7 +6862,7 @@ const TermsExecution = ({ formFactor = "tablet", value, onChange, className }) =
   ] });
 };
 
-const cx$3 = classNames.bind(styles$h);
+const cx$3 = classNames$1.bind(styles$h);
 const TermsLoan = ({ formFactor = "tablet", value, onChange, className }) => {
   const handleChange = (field, newValue) => {
     onChange({
@@ -6867,7 +7013,7 @@ const TermsLoan = ({ formFactor = "tablet", value, onChange, className }) => {
   ] });
 };
 
-const cx$2 = classNames.bind(styles$h);
+const cx$2 = classNames$1.bind(styles$h);
 const TermsSignature = ({ formFactor = "tablet", productInfo, className }) => {
   const { productName, contractorName, insuredName } = productInfo;
   const TERMS_TITLE = {
@@ -6922,7 +7068,7 @@ const TermsSignature = ({ formFactor = "tablet", productInfo, className }) => {
   ] });
 };
 
-const cx$1 = classNames.bind(styles$h);
+const cx$1 = classNames$1.bind(styles$h);
 const TermsTransfer = ({ formFactor = "tablet", className }) => {
   const TERMS_TITLE = {
     phone: "\uBCF4\uD5D8\uB8CC \uC774\uCCB4 \uBC0F \uCD9C\uAE08\uACC4\uC88C \uB4F1\uB85D\uC744 \uC704\uD574 \uC544\uB798 \uB0B4\uC6A9\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694",
@@ -6942,7 +7088,7 @@ const TermsTransfer = ({ formFactor = "tablet", className }) => {
   ] });
 };
 
-const cx = classNames.bind(styles$h);
+const cx = classNames$1.bind(styles$h);
 const TermsDesign = ({ value, onChange, className }) => {
   const handleChange = (field, newValue) => {
     onChange({
@@ -7274,6 +7420,7 @@ exports.JobVehicleSearchModal = JobVehicleSearchModal;
 exports.OrganizationSearchModal = OrganizationSearchModal;
 exports.RATING_DATA = RATING_DATA;
 exports.RIV_SEARCH_PARAM_MAP = RIV_SEARCH_PARAM_MAP;
+exports.RemoteIdentityVerification = RemoteIdentityVerification;
 exports.RivModalIframe = RivModalIframe;
 exports.StepIndicator = StepIndicator;
 exports.TermsCancerCollectQR = TermsCancerCollectQR;
@@ -7308,7 +7455,7 @@ exports.useJobVehicleSearch = useJobVehicleSearch;
 exports.useJobVehicleSearchModal = useJobVehicleSearchModal;
 exports.useNationalityComponent = useNationalityComponent;
 exports.useNxlOneModal = useNxlOneModal;
-exports.useRemoteIdentityVerification = useRemoteIdentityVerification;
+exports.useRemoteIdentityVerification = useRemoteIdentityVerification$1;
 exports.useRemoteIdentityVerificationIframe = useRemoteIdentityVerificationIframe;
 exports.useSearchAddress = useSearchAddress;
 exports.useSearchNationality = useSearchNationality;

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import { AddressStandardizationResponseDto, AddressResponseDto, CodeDto, CommonC
 import * as sales_frontend_solution from 'sales-frontend-solution';
 import { NxlOneResponse, NxlOneIframeProps } from 'sales-frontend-solution';
 import { LoadScriptParams, Astx2Init } from 'sales-frontend-utils';
+import { UseRemoteIdentityVerificationCoreParams } from 'sales-frontend-headless/remote-identity-verification';
 
 interface HookFormProps<TFieldValues extends FieldValues = FieldValues> extends PropsWithChildren {
     useControllerProps: UseControllerProps<TFieldValues>;
@@ -638,6 +639,9 @@ interface JobVehicleSearchModalProps {
 }
 declare function JobVehicleSearchModal({ onClose }: JobVehicleSearchModalProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * @deprecated `RivMessageResponse`(sales-frontend-headless/remote-identity-verification) 사용을 권장합니다.
+ */
 interface VerificationResponse {
     command: 'webClose';
     args: {
@@ -645,6 +649,11 @@ interface VerificationResponse {
         code: string;
     };
 }
+/**
+ * URL 파라미터 설정
+ *
+ * @deprecated `RivOptions`(sales-frontend-headless/remote-identity-verification) 사용을 권장합니다.
+ */
 interface RivUrlParams {
     /** 유입환경구분코드(0: 모바일웹, 1: PC, 2: App) */
     envDvsnCode?: string;
@@ -655,9 +664,16 @@ interface RivUrlParams {
     /** 국적타입(D: 내국인, F: 외국인) */
     nationalityType?: 'D' | 'F';
 }
+/**
+ * @deprecated `RemoteIdentityVerificationInfo`(sales-frontend-headless/remote-identity-verification) 사용을 권장합니다. (필드명 `preIssuedRivRequestId`)
+ */
 interface RemoteIdentityVerificationSuccess {
     rivsRequestId: string;
 }
+/**
+ * @deprecated 토큰 발급 API가 hook 내부에 하드코딩된 기존 구조의 Props 타입입니다. 업무별로 분리된 토큰 발급 API를 범용적으로 사용하기 위한 콜백 주입식 신규 API를 사용하세요.
+ * → `UseRemoteIdentityVerificationCoreParams`(sales-frontend-headless/remote-identity-verification) 또는 `RemoteIdentityVerificationProps`(sales-frontend-components) 사용을 권장합니다.
+ */
 interface UseRemoteIdentityVerificationProps {
     rivEnv?: 'prd' | 'stg' | 'dev';
     rivOrigin?: string;
@@ -668,6 +684,9 @@ interface UseRemoteIdentityVerificationProps {
     onError?: (result: VerificationResponse['args'], remoteIdentityVerificationSuccess: RemoteIdentityVerificationSuccess) => void;
     onCancel?: (result: VerificationResponse['args']) => void;
 }
+/**
+ * @deprecated `RemoteIdentityVerificationViewProps`(sales-frontend-components) 사용을 권장합니다.
+ */
 interface RivModalIframeProps extends IframeHTMLAttributes<HTMLIFrameElement> {
     /** 로딩 컴포넌트  */
     loadingComponent?: ReactNode;
@@ -676,6 +695,9 @@ interface RivModalIframeProps extends IframeHTMLAttributes<HTMLIFrameElement> {
     /** 오픈 여부 */
     isOpen?: boolean;
 }
+/**
+ * @deprecated `RemoteIdentityVerification` namespace 사용을 권장합니다. (`RemoteIdentityVerification.View` props를 그대로 활용)
+ */
 interface RivModalIframeReturnProps {
     /** Iframe 주소 */
     src: string;
@@ -689,13 +711,28 @@ interface RivModalIframeReturnProps {
 
 /**
  * 비대면인증 컴포넌트(Modal + Iframe 조합버전)
- * @param param0
- * @returns
+ *
+ * @deprecated 기존 hook(`useRemoteIdentityVerificationIframe`)의 토큰 발급 API 하드코딩 문제로 인해 함께 deprecated 처리되었습니다.
+ * 업무별로 분리된 토큰 발급 API를 범용적으로 사용할 수 있도록 `RemoteIdentityVerification` namespace로 재설계되었습니다.
+ * → `RemoteIdentityVerification.Container`(또는 `RemoteIdentityVerification.View` + `useRemoteIdentityVerificationCore`)로 마이그레이션하세요.
+ *
+ * @example
+ * import { RemoteIdentityVerification } from 'sales-frontend-components';
+ *
+ * const { Container, useRemoteIdentityVerification } = RemoteIdentityVerification;
+ * const { isRivModalOpen, openRivModal, closeRivModal } = useRemoteIdentityVerification();
+ *
+ * <Container isOpen={isRivModalOpen} onClose={closeRivModal} getRivAccessToken={...} rivEnv="stg" />
  */
 declare const RivModalIframe: ({ width, height, loadingComponent, isLoading, isOpen, ...iframeProps }: RivModalIframeProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * 비대면인증시스템 기본 로직
+ *
+ * @deprecated 이 hook은 토큰 발급 API(`getRemoteIdentityVerificationSystemToken`)가 내부에 하드코딩되어 있어 사용처(업무)마다 다른 토큰 발급 API를 사용할 수 없습니다.
+ * 업무별로 API가 분리된 환경의 범용 사용성을 위해 `getRivAccessToken` 콜백 주입 방식으로 재설계되었습니다.
+ * → `useRemoteIdentityVerificationCore`(sales-frontend-headless/remote-identity-verification) 또는 `RemoteIdentityVerification.Container`(sales-frontend-components) 사용을 권장합니다.
+ *
  * @param config
  */
 declare const useRemoteIdentityVerification: ({ rivEnv, rivOrigin, tokenRequestParams, apiConfig, onCancel, onError, onSuccess, rivSearchParams }: UseRemoteIdentityVerificationProps) => {
@@ -707,6 +744,28 @@ declare const useRemoteIdentityVerification: ({ rivEnv, rivOrigin, tokenRequestP
 };
 /**
  * Iframe용 비대면인증시스템 훅
+ *
+ * @deprecated 이 hook은 토큰 발급 API(`getRemoteIdentityVerificationSystemToken`)가 내부에 하드코딩되어 있어 사용처(업무)마다 다른 토큰 발급 API를 사용할 수 없습니다.
+ * 업무별로 API가 분리된 환경의 범용 사용성을 위해 `getRivAccessToken` 콜백 주입 방식의 신규 API로 재설계되었습니다.
+ * → `RemoteIdentityVerification` namespace(`Container` + `useRemoteIdentityVerification`) 사용을 권장합니다.
+ *
+ * @example
+ * import { RemoteIdentityVerification } from 'sales-frontend-components';
+ *
+ * const { Container, useRemoteIdentityVerification } = RemoteIdentityVerification;
+ * const { isRivModalOpen, openRivModal, closeRivModal } = useRemoteIdentityVerification();
+ *
+ * <Container
+ *   isOpen={isRivModalOpen}
+ *   onClose={closeRivModal}
+ *   getRivAccessToken={async () => {
+ *     const res = await getRemoteIdentityVerificationSystemToken(...);
+ *     return { accessToken: res.data.accessToken, rivsRqstId: res.data.remoteIdentityVerificationSystemRequestId };
+ *   }}
+ *   rivEnv="stg"
+ *   onSuccess={(rivResult, verifiedInfo) => ...}
+ * />
+ *
  * @param config
  * @returns
  */
@@ -756,6 +815,64 @@ declare const RIV_SEARCH_PARAM_MAP: {
     };
 };
 
+/**
+ * `RemoteIdentityVerificationView` (dumb view) Props.
+ */
+interface RemoteIdentityVerificationViewProps extends IframeHTMLAttributes<HTMLIFrameElement> {
+    /** 로딩 컴포넌트 (미지정 시 기본 로딩 UI) */
+    loadingComponent?: ReactNode;
+    /** 로딩 여부 */
+    isLoading?: boolean;
+    /** 오픈 여부 */
+    isOpen?: boolean;
+}
+/**
+ * container가 view로 forward할 때 사용하는 props.
+ * container가 관리하는 `src`, `isOpen`, `isLoading`, `onLoad`는 제외한다.
+ */
+type RemoteIdentityVerificationViewForwardProps = Omit<RemoteIdentityVerificationViewProps, 'src' | 'isOpen' | 'isLoading' | 'onLoad'>;
+/**
+ * `RemoteIdentityVerificationContainer` Props.
+ *
+ * headless의 `UseRemoteIdentityVerificationCoreParams`(도메인 로직 입력) + `viewProps`(view 커스터마이즈).
+ */
+interface RemoteIdentityVerificationProps extends UseRemoteIdentityVerificationCoreParams {
+    /** view 컴포넌트로 forward되는 props (`width`, `height`, `loadingComponent`, iframe HTML 속성 등) */
+    viewProps?: RemoteIdentityVerificationViewForwardProps;
+}
+/**
+ * `useRemoteIdentityVerification` 반환 타입.
+ */
+interface UseRemoteIdentityVerificationReturn {
+    /** RIV 모달 오픈 여부 */
+    isRivModalOpen: boolean;
+    /** RIV 모달 열기 */
+    openRivModal: () => void;
+    /** RIV 모달 닫기 */
+    closeRivModal: () => void;
+}
+
+/**
+ * @description 비대면인증(RIV) 도메인 namespace. container, view, hook을 묶어 단일 진입점으로 제공한다.
+ *
+ * - `Container` — RIV 컨테이너 (토큰 발급/메시지 구독을 hook에 위임 + view 연결)
+ * - `View` — dumb view 컴포넌트 (Modal + iframe + 로딩 UI)
+ * - `useRemoteIdentityVerification` — 모달 컨트롤 state hook (`isRivModalOpen`, `openRivModal`, `closeRivModal`)
+ *
+ * @example
+ * import { RemoteIdentityVerification } from 'sales-frontend-components';
+ *
+ * const { Container, useRemoteIdentityVerification } = RemoteIdentityVerification;
+ * const { isRivModalOpen, openRivModal, closeRivModal } = useRemoteIdentityVerification();
+ *
+ * <Container isOpen={isRivModalOpen} onClose={closeRivModal} getRivAccessToken={...} rivEnv="stg" />
+ */
+declare const RemoteIdentityVerification: {
+    Container: ({ viewProps, ...coreParams }: RemoteIdentityVerificationProps) => react_jsx_runtime.JSX.Element;
+    View: ({ width, height, loadingComponent, isLoading, isOpen, src, className, ...iframeProps }: RemoteIdentityVerificationViewProps) => react_jsx_runtime.JSX.Element;
+    useRemoteIdentityVerification: () => UseRemoteIdentityVerificationReturn;
+};
+
 declare function DudUpload(): react_jsx_runtime.JSX.Element;
 
 declare function DudDownload(): react_jsx_runtime.JSX.Element;
@@ -1017,5 +1134,5 @@ interface UseTermsReturn<T> {
  */
 declare function useTerms<T extends object>(initialValue: T): UseTermsReturn<T>;
 
-export { AUTH_TEMPLATE_CODES, Attachment, BANK_STOCK_ICON_LIST, BANK_STOCK_SEARCH_MODAL_TABS, BankStockSearchModal, CustomerSearch, CustomerSearchModal, DeaCustomerSearchModal, DudDownload, DudUpload, EmployeeSearchModal, GtmIframe, HookFormCheckbox, HookFormCheckboxButton, HookFormDatePickerRenew, HookFormDateRangePickerRenew, HookFormSearchJobField, HookFormSegmentGroup, HookFormSelect, HookFormTextField, JobVehicleSearchModal, OrganizationSearchModal, RATING_DATA, RIV_SEARCH_PARAM_MAP, RivModalIframe, StepIndicator, TermsCancerCollectQR, TermsCancerMarketing, TermsCancerProvideQR, TermsCancerSystem, TermsCheckboxButton, TermsDesign, TermsExecution, TermsLoan, TermsMarketing, TermsMarketingCollectQR, TermsMarketingProviderQR, TermsMobileCard, TermsRadio, TermsRatingBar, TermsSignature, TermsTransfer, VERIFICATION_CODES, highlightOnSearchKeyword, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCameraV2, useCanvasPaint, useCustomerSearch, useDownloader, useJobSearchModal, useJobVehicleSearch, useJobVehicleSearchModal, useNationalityComponent, useNxlOneModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useSearchAddress, useSearchNationality, useSearchVisa, useTerms, useVisaComponent };
-export type { AddImageInfo, AttachedPhoto, AttachmentProps, AuthCodeSet, AuthStep, BankStockSearchModalProps, BaseTermsProps, CustomerSearchProps, DownloadProps, DownloadTargetInfo, DownloaderProps, FormFactor, HookFormCheckboxButtonProps, HookFormCheckboxProps, HookFormDatePickerRenewProps, HookFormDateRangePickerRenewProps, HookFormSearchJobFieldProps, HookFormSegmentGroupProps, HookFormSelectProps, HookFormTextFieldProps, InitSearchParams, PaintProps, Pen, RemoteIdentityVerificationSuccess, RivModalIframeProps, RivModalIframeReturnProps, RivUrlParams, SearchInputProps, StepIndicatorProps, StepItem, TermsCancerMarketingData, TermsCancerMarketingProps, TermsCancerSystemData, TermsCancerSystemDataProps, TermsDesignData, TermsDesignProps, TermsExecutionData, TermsExecutionProps, TermsLoanData, TermsLoanDataProps, TermsMarketingData, TermsMarketingProps, TermsRadioOption, TermsRatingType, TermsSignatureData, UseRemoteIdentityVerificationProps, UseTermsReturn, Vehicle, VerificationResponse, cameraItemType, cameraOptions };
+export { AUTH_TEMPLATE_CODES, Attachment, BANK_STOCK_ICON_LIST, BANK_STOCK_SEARCH_MODAL_TABS, BankStockSearchModal, CustomerSearch, CustomerSearchModal, DeaCustomerSearchModal, DudDownload, DudUpload, EmployeeSearchModal, GtmIframe, HookFormCheckbox, HookFormCheckboxButton, HookFormDatePickerRenew, HookFormDateRangePickerRenew, HookFormSearchJobField, HookFormSegmentGroup, HookFormSelect, HookFormTextField, JobVehicleSearchModal, OrganizationSearchModal, RATING_DATA, RIV_SEARCH_PARAM_MAP, RemoteIdentityVerification, RivModalIframe, StepIndicator, TermsCancerCollectQR, TermsCancerMarketing, TermsCancerProvideQR, TermsCancerSystem, TermsCheckboxButton, TermsDesign, TermsExecution, TermsLoan, TermsMarketing, TermsMarketingCollectQR, TermsMarketingProviderQR, TermsMobileCard, TermsRadio, TermsRatingBar, TermsSignature, TermsTransfer, VERIFICATION_CODES, highlightOnSearchKeyword, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCameraV2, useCanvasPaint, useCustomerSearch, useDownloader, useJobSearchModal, useJobVehicleSearch, useJobVehicleSearchModal, useNationalityComponent, useNxlOneModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useSearchAddress, useSearchNationality, useSearchVisa, useTerms, useVisaComponent };
+export type { AddImageInfo, AttachedPhoto, AttachmentProps, AuthCodeSet, AuthStep, BankStockSearchModalProps, BaseTermsProps, CustomerSearchProps, DownloadProps, DownloadTargetInfo, DownloaderProps, FormFactor, HookFormCheckboxButtonProps, HookFormCheckboxProps, HookFormDatePickerRenewProps, HookFormDateRangePickerRenewProps, HookFormSearchJobFieldProps, HookFormSegmentGroupProps, HookFormSelectProps, HookFormTextFieldProps, InitSearchParams, PaintProps, Pen, RemoteIdentityVerificationProps, RemoteIdentityVerificationSuccess, RemoteIdentityVerificationViewForwardProps, RemoteIdentityVerificationViewProps, RivModalIframeProps, RivModalIframeReturnProps, RivUrlParams, SearchInputProps, StepIndicatorProps, StepItem, TermsCancerMarketingData, TermsCancerMarketingProps, TermsCancerSystemData, TermsCancerSystemDataProps, TermsDesignData, TermsDesignProps, TermsExecutionData, TermsExecutionProps, TermsLoanData, TermsLoanDataProps, TermsMarketingData, TermsMarketingProps, TermsRadioOption, TermsRatingType, TermsSignatureData, UseRemoteIdentityVerificationProps, UseRemoteIdentityVerificationReturn, UseTermsReturn, Vehicle, VerificationResponse, cameraItemType, cameraOptions };

package/dist/index.esm.js

@@ -22,6 +22,7 @@ import styles$b from './modal/pre-standard/organization-search-modal/organizatio
 import styles$c from './step-indicator/step-indicator.module.scss';
 import { Bridge } from 'sales-frontend-bridge';
 import styles$d from './camera/camera.module.scss';
+import { useRemoteIdentityVerificationCore } from 'sales-frontend-headless/remote-identity-verification';
 import styles$e from './terms/components/unit/terms-radio.module.scss';
 import styles$f from './terms/components/unit/terms-rating-bar.module.scss';
 import styles$g from './terms/components/unit/terms-mobile-card.module.scss';
@@ -641,7 +642,7 @@ function requireBind () {
 }
 
 var bindExports = requireBind();
-var classNames = /*@__PURE__*/getDefaultExportFromCjs(bindExports);
+var classNames$1 = /*@__PURE__*/getDefaultExportFromCjs(bindExports);
 
 const highlightOnSearchKeyword = (originalText, targetString) => {
   if (!targetString || !originalText?.includes(targetString)) {
@@ -660,7 +661,7 @@ const highlightOnSearchKeyword = (originalText, targetString) => {
   return replacedText;
 };
 
-const cx$x = classNames.bind(styles);
+const cx$x = classNames$1.bind(styles);
 const { InputBox: InputBox$4, Input: Input$4 } = FormCore;
 const AddressSearchInitialText = () => {
   return /* @__PURE__ */ jsxs("div", { children: [
@@ -1494,7 +1495,7 @@ function useBankStockSearch({ onSelect, commonCodeId }) {
   };
 }
 
-const cx$w = classNames.bind(styles$1);
+const cx$w = classNames$1.bind(styles$1);
 function BankStockSearchModal({ open, onClose, onSelect, commonCodeId }) {
   const { bankList, stockList, handleSelect } = useBankStockSearch({
     onSelect,
@@ -1612,7 +1613,7 @@ const useCustomerSearch = (onSelect, options) => {
   };
 };
 
-const cx$v = classNames.bind(styles$2);
+const cx$v = classNames$1.bind(styles$2);
 const { InputBox: InputBox$3, Input: Input$3 } = FormCore;
 const CustomerSearch = ({
   onSelectCustomer,
@@ -1688,7 +1689,7 @@ const CustomerSearch = ({
   ] });
 };
 
-const cx$u = classNames.bind(styles$2);
+const cx$u = classNames$1.bind(styles$2);
 const { InputBox: InputBox$2, Input: Input$2 } = FormCore;
 function CustomerSearchModal({ isOpen, closeModal, onSelect, onSearchClear, inputProps, inputBoxProps }) {
   const {
@@ -1780,7 +1781,7 @@ function CustomerSearchModal({ isOpen, closeModal, onSelect, onSearchClear, inpu
   ] });
 }
 
-const cx$t = classNames.bind(styles$3);
+const cx$t = classNames$1.bind(styles$3);
 const { InputBox: InputBox$1, Input: Input$1 } = FormCore;
 const favoriteList = [
   {
@@ -2003,7 +2004,7 @@ const useNationalityComponent = () => {
   };
 };
 
-const cx$s = classNames.bind(styles$4);
+const cx$s = classNames$1.bind(styles$4);
 const AUTH_TEMPLATE_CODES = {
   appInit: {
     dev: {
@@ -2262,7 +2263,7 @@ function useNxlOneModal({
   };
 }
 
-const cx$r = classNames.bind(styles$5);
+const cx$r = classNames$1.bind(styles$5);
 const { InputBox, Input } = FormCore;
 const VisaSearchInitialText = ({ visaList, onSelect, onConfirm }) => {
   return /* @__PURE__ */ jsx("div", { className: cx$r("favorite-container"), children: /* @__PURE__ */ jsx("ul", { className: cx$r("favorite"), children: visaList.map((item, index) => {
@@ -2440,7 +2441,7 @@ const useVisaComponent = () => {
   };
 };
 
-const cx$q = classNames.bind(styles$6);
+const cx$q = classNames$1.bind(styles$6);
 function DeaCustomerSearchResult({
   customerList,
   onCustomerSelect,
@@ -2492,7 +2493,7 @@ function DeaCustomerSearchResult({
 }
 
 const { TextField: TextField$3 } = FormField;
-const cx$p = classNames.bind(styles$6);
+const cx$p = classNames$1.bind(styles$6);
 function DeaCustomerSearch({
   setSearchParams,
   customerList,
@@ -2731,7 +2732,7 @@ const EMPLOYEE_SEARCH_TABS = [
   { value: "WKIS", label: "\uB0B4\uADFC" }
 ];
 
-const cx$o = classNames.bind(styles$7);
+const cx$o = classNames$1.bind(styles$7);
 function EmployeeSearchResult({
   filteredEmployees,
   onEmployeeSelect,
@@ -2779,7 +2780,7 @@ function EmployeeSearchResult({
 }
 
 const { TextField: TextField$2 } = FormField;
-const cx$n = classNames.bind(styles$7);
+const cx$n = classNames$1.bind(styles$7);
 function EmployeeSearch({
   activeTab,
   onTabChange,
@@ -3009,7 +3010,7 @@ function JobSearchDetail({ occupationTypeCode, occupationIndustryCode }) {
   ] }) }) });
 }
 
-const cx$m = classNames.bind(styles$8);
+const cx$m = classNames$1.bind(styles$8);
 function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$m("category-section"), children: [
     /* @__PURE__ */ jsxs("p", { className: cx$m("result-title"), children: [
@@ -3047,7 +3048,7 @@ function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
   ] }) });
 }
 
-const cx$l = classNames.bind(styles$8);
+const cx$l = classNames$1.bind(styles$8);
 function JobSearchFavorite({ filteredJobs, onJobSelect }) {
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$l("popular-jobs"), children: [
     /* @__PURE__ */ jsx("p", { children: "\uB9CE\uC774 \uCC3E\uB294 \uC9C1\uC885" }),
@@ -3087,7 +3088,7 @@ function JobSearchFavorite({ filteredJobs, onJobSelect }) {
   ] }) });
 }
 
-const cx$k = classNames.bind(styles$8);
+const cx$k = classNames$1.bind(styles$8);
 function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$k("popular-jobs"), children: [
     /* @__PURE__ */ jsxs("p", { className: cx$k("result-title"), children: [
@@ -3132,7 +3133,7 @@ function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
 }
 
 const { TextField: TextField$1 } = FormField;
-const cx$j = classNames.bind(styles$8);
+const cx$j = classNames$1.bind(styles$8);
 const { Option } = Select;
 function JobSearch({
   activeTab,
@@ -3485,7 +3486,7 @@ function useJobSearchModal() {
   };
 }
 
-const cx$i = classNames.bind(styles$9);
+const cx$i = classNames$1.bind(styles$9);
 const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
   return /* @__PURE__ */ jsxs("div", { className: cx$i("grade-section"), children: [
     /* @__PURE__ */ jsxs("div", { className: cx$i("icon-title"), children: [
@@ -3506,7 +3507,7 @@ const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
   ] });
 };
 
-const cx$h = classNames.bind(styles$a);
+const cx$h = classNames$1.bind(styles$a);
 function VehicleSearch({ vehicles, onVehicleSelect, selectedVehicle }) {
   return /* @__PURE__ */ jsxs("div", { className: cx$h("vehicle-search-section"), children: [
     /* @__PURE__ */ jsx("p", { children: "\uC6B4\uC804 \uCC28\uC885" }),
@@ -3610,7 +3611,7 @@ const useJobVehicleSearch = () => {
   };
 };
 
-const cx$g = classNames.bind(styles$9);
+const cx$g = classNames$1.bind(styles$9);
 function useJobVehicleSearchModal() {
   const {
     selectedVehicle,
@@ -3741,7 +3742,7 @@ function useJobVehicleSearchModal() {
   };
 }
 
-const cx$f = classNames.bind(styles$b);
+const cx$f = classNames$1.bind(styles$b);
 function OrganizationSearchResult({
   filteredOrganizations,
   selectedOrganization,
@@ -3787,7 +3788,7 @@ function OrganizationSearchResult({
 }
 
 const { TextField } = FormField;
-const cx$e = classNames.bind(styles$b);
+const cx$e = classNames$1.bind(styles$b);
 function OrganizationSearch({
   searchTerm,
   setSearchTerm,
@@ -3916,7 +3917,7 @@ const OrganizationSearchModal = ({
   ] });
 };
 
-const cx$d = classNames.bind(styles$a);
+const cx$d = classNames$1.bind(styles$a);
 function JobVehicleSearchModal({ onClose }) {
   const { selectedVehicle, VehicleSearchComponent } = useVehicleSearch();
   return /* @__PURE__ */ jsxs(Modal.Root, { isOpen: true, onClose, modalSize: "xlarge", children: [
@@ -4241,7 +4242,7 @@ const HookFormDateRangePickerRenew = ({
   return /* @__PURE__ */ jsx(DatePickerRangeRenew, { startDateProps: startDateMergedProps, endDateProps: endDateMergedProps });
 };
 
-const cx$c = classNames.bind(styles$c);
+const cx$c = classNames$1.bind(styles$c);
 const StepIndicator = ({
   items,
   onClickItem,
@@ -4307,7 +4308,7 @@ const StepIndicator = ({
   ] });
 };
 
-const cx$b = classNames.bind(styles$d);
+const cx$b = classNames$1.bind(styles$d);
 function Attachment({
   photos,
   onAddPhoto,
@@ -5193,7 +5194,7 @@ const RIV_SEARCH_PARAM_MAP = {
   }
 };
 
-const useRemoteIdentityVerification = ({
+const useRemoteIdentityVerification$1 = ({
   rivEnv,
   rivOrigin,
   tokenRequestParams,
@@ -5255,7 +5256,7 @@ const useRemoteIdentityVerification = ({
   };
 };
 const useRemoteIdentityVerificationIframe = (config) => {
-  const { createMessageHandler, createRemoteIdentityVerificationUrl } = useRemoteIdentityVerification(config);
+  const { createMessageHandler, createRemoteIdentityVerificationUrl } = useRemoteIdentityVerification$1(config);
   const { isOpen, openModal, closeModal } = useModalState();
   const [remoteIdentityVerificationUrl, setRemoteIdentityVerificationUrl] = useState("");
   const [rivsRequestId, setRivsRequestId] = useState("");
@@ -5345,6 +5346,151 @@ const useRemoteIdentityVerificationIframe = (config) => {
   };
 };
 
+var classnames = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+var hasRequiredClassnames;
+
+function requireClassnames () {
+	if (hasRequiredClassnames) return classnames.exports;
+	hasRequiredClassnames = 1;
+	(function (module) {
+		/* global define */
+
+		(function () {
+
+			var hasOwn = {}.hasOwnProperty;
+
+			function classNames () {
+				var classes = '';
+
+				for (var i = 0; i < arguments.length; i++) {
+					var arg = arguments[i];
+					if (arg) {
+						classes = appendClass(classes, parseValue(arg));
+					}
+				}
+
+				return classes;
+			}
+
+			function parseValue (arg) {
+				if (typeof arg === 'string' || typeof arg === 'number') {
+					return arg;
+				}
+
+				if (typeof arg !== 'object') {
+					return '';
+				}
+
+				if (Array.isArray(arg)) {
+					return classNames.apply(null, arg);
+				}
+
+				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+					return arg.toString();
+				}
+
+				var classes = '';
+
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes = appendClass(classes, key);
+					}
+				}
+
+				return classes;
+			}
+
+			function appendClass (value, newClass) {
+				if (!newClass) {
+					return value;
+				}
+			
+				if (value) {
+					return value + ' ' + newClass;
+				}
+			
+				return value + newClass;
+			}
+
+			if (module.exports) {
+				classNames.default = classNames;
+				module.exports = classNames;
+			} else {
+				window.classNames = classNames;
+			}
+		}()); 
+	} (classnames));
+	return classnames.exports;
+}
+
+var classnamesExports = requireClassnames();
+var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+
+const RemoteIdentityVerificationView = ({
+  width = "100%",
+  height = "100%",
+  loadingComponent,
+  isLoading = false,
+  isOpen = false,
+  src,
+  className,
+  ...iframeProps
+}) => {
+  return /* @__PURE__ */ jsxs(Modal.Root, { isOpen, children: [
+    isLoading && (loadingComponent || /* @__PURE__ */ jsx(Loading.Wait, { bodyText: "\uBD88\uB7EC\uC624\uB294 \uC911" })),
+    src && /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        width,
+        height,
+        allow: "camera *;",
+        className: classNames("bg-100", className),
+        ...iframeProps,
+        src
+      }
+    )
+  ] });
+};
+
+const RemoteIdentityVerificationContainer = ({
+  viewProps,
+  ...coreParams
+}) => {
+  const { rivLandingUrl, isLoading, handleIframeLoad } = useRemoteIdentityVerificationCore(coreParams);
+  return /* @__PURE__ */ jsx(
+    RemoteIdentityVerificationView,
+    {
+      ...viewProps,
+      src: rivLandingUrl,
+      isOpen: coreParams.isOpen,
+      isLoading,
+      onLoad: handleIframeLoad
+    }
+  );
+};
+
+const useRemoteIdentityVerification = () => {
+  const { isOpen, openModal, closeModal } = useModalState();
+  return {
+    isRivModalOpen: isOpen,
+    openRivModal: openModal,
+    closeRivModal: closeModal
+  };
+};
+
+const RemoteIdentityVerification = {
+  Container: RemoteIdentityVerificationContainer,
+  View: RemoteIdentityVerificationView,
+  useRemoteIdentityVerification
+};
+
 function DudUpload() {
   const [test, setTest] = useState();
   const { mutateAsync, data } = useDudExternalFileUploadMutation();
@@ -5523,7 +5669,7 @@ const TermsCheckboxButton = ({
   );
 };
 
-const cx$a = classNames.bind(styles$e);
+const cx$a = classNames$1.bind(styles$e);
 const TermsRadio = ({ field, value, options, onChange }) => {
   return /* @__PURE__ */ jsx("div", { className: cx$a("radio", "mt-textarea-medium"), children: options.map((opt) => /* @__PURE__ */ jsx(
     Radio.Item,
@@ -5539,7 +5685,7 @@ const TermsRadio = ({ field, value, options, onChange }) => {
   )) });
 };
 
-const cx$9 = classNames.bind(styles$f);
+const cx$9 = classNames$1.bind(styles$f);
 const RATING_DATA = [
   { type: "safe", name: "\uC548\uC2EC" },
   // jade-green400
@@ -5561,7 +5707,7 @@ const TermsRatingBar = ({ active }) => {
   ] });
 };
 
-const cx$8 = classNames.bind(styles$g);
+const cx$8 = classNames$1.bind(styles$g);
 const TermsMobileCard = ({ className, children }) => {
   return /* @__PURE__ */ jsx("div", { className: cx$8("mobile-card", className), children });
 };
@@ -5678,7 +5824,7 @@ const TermsCancerProvideQR = () => /* @__PURE__ */ jsxs(
   }
 );
 
-const cx$7 = classNames.bind(styles$h);
+const cx$7 = classNames$1.bind(styles$h);
 const CHANNEL_OPTIONS$1 = [
   { label: "\uC804\uCCB4", value: "0" },
   { label: "\uC804\uD654", value: "1" },
@@ -5896,7 +6042,7 @@ const TermsMarketing = ({
   ] });
 };
 
-const cx$6 = classNames.bind(styles$h);
+const cx$6 = classNames$1.bind(styles$h);
 const PERIOD_OPTIONS = [
   { label: "5\uB144", value: "5" },
   { label: "4\uB144", value: "4" },
@@ -6105,7 +6251,7 @@ const TermsCancerMarketing = ({
   ] });
 };
 
-const cx$5 = classNames.bind(styles$h);
+const cx$5 = classNames$1.bind(styles$h);
 const TermsCancerSystem = ({
   formFactor = "tablet",
   value,
@@ -6333,7 +6479,7 @@ const TermsCancerSystem = ({
   ] });
 };
 
-const cx$4 = classNames.bind(styles$h);
+const cx$4 = classNames$1.bind(styles$h);
 const TermsExecution = ({ formFactor = "tablet", value, onChange, className }) => {
   const handleChange = (field, newValue) => {
     onChange({
@@ -6714,7 +6860,7 @@ const TermsExecution = ({ formFactor = "tablet", value, onChange, className }) =
   ] });
 };
 
-const cx$3 = classNames.bind(styles$h);
+const cx$3 = classNames$1.bind(styles$h);
 const TermsLoan = ({ formFactor = "tablet", value, onChange, className }) => {
   const handleChange = (field, newValue) => {
     onChange({
@@ -6865,7 +7011,7 @@ const TermsLoan = ({ formFactor = "tablet", value, onChange, className }) => {
   ] });
 };
 
-const cx$2 = classNames.bind(styles$h);
+const cx$2 = classNames$1.bind(styles$h);
 const TermsSignature = ({ formFactor = "tablet", productInfo, className }) => {
   const { productName, contractorName, insuredName } = productInfo;
   const TERMS_TITLE = {
@@ -6920,7 +7066,7 @@ const TermsSignature = ({ formFactor = "tablet", productInfo, className }) => {
   ] });
 };
 
-const cx$1 = classNames.bind(styles$h);
+const cx$1 = classNames$1.bind(styles$h);
 const TermsTransfer = ({ formFactor = "tablet", className }) => {
   const TERMS_TITLE = {
     phone: "\uBCF4\uD5D8\uB8CC \uC774\uCCB4 \uBC0F \uCD9C\uAE08\uACC4\uC88C \uB4F1\uB85D\uC744 \uC704\uD574 \uC544\uB798 \uB0B4\uC6A9\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694",
@@ -6940,7 +7086,7 @@ const TermsTransfer = ({ formFactor = "tablet", className }) => {
   ] });
 };
 
-const cx = classNames.bind(styles$h);
+const cx = classNames$1.bind(styles$h);
 const TermsDesign = ({ value, onChange, className }) => {
   const handleChange = (field, newValue) => {
     onChange({
@@ -7248,4 +7394,4 @@ function useTerms(initialValue) {
   };
 }
 
-export { AUTH_TEMPLATE_CODES, Attachment, BANK_STOCK_ICON_LIST, BANK_STOCK_SEARCH_MODAL_TABS, BankStockSearchModal, CustomerSearch, CustomerSearchModal, DeaCustomerSearchModal, DudDownload, DudUpload, EmployeeSearchModal, GtmIframe, HookFormCheckbox, HookFormCheckboxButton, HookFormDatePickerRenew, HookFormDateRangePickerRenew, HookFormSearchJobField, HookFormSegmentGroup, HookFormSelect, HookFormTextField, JobVehicleSearchModal, OrganizationSearchModal, RATING_DATA, RIV_SEARCH_PARAM_MAP, RivModalIframe, StepIndicator, TermsCancerCollectQR, TermsCancerMarketing, TermsCancerProvideQR, TermsCancerSystem, TermsCheckboxButton, TermsDesign, TermsExecution, TermsLoan, TermsMarketing, TermsMarketingCollectQR, TermsMarketingProviderQR, TermsMobileCard, TermsRadio, TermsRatingBar, TermsSignature, TermsTransfer, VERIFICATION_CODES, highlightOnSearchKeyword, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCameraV2, useCanvasPaint, useCustomerSearch, useDownloader, useJobSearchModal, useJobVehicleSearch, useJobVehicleSearchModal, useNationalityComponent, useNxlOneModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useSearchAddress, useSearchNationality, useSearchVisa, useTerms, useVisaComponent };
+export { AUTH_TEMPLATE_CODES, Attachment, BANK_STOCK_ICON_LIST, BANK_STOCK_SEARCH_MODAL_TABS, BankStockSearchModal, CustomerSearch, CustomerSearchModal, DeaCustomerSearchModal, DudDownload, DudUpload, EmployeeSearchModal, GtmIframe, HookFormCheckbox, HookFormCheckboxButton, HookFormDatePickerRenew, HookFormDateRangePickerRenew, HookFormSearchJobField, HookFormSegmentGroup, HookFormSelect, HookFormTextField, JobVehicleSearchModal, OrganizationSearchModal, RATING_DATA, RIV_SEARCH_PARAM_MAP, RemoteIdentityVerification, RivModalIframe, StepIndicator, TermsCancerCollectQR, TermsCancerMarketing, TermsCancerProvideQR, TermsCancerSystem, TermsCheckboxButton, TermsDesign, TermsExecution, TermsLoan, TermsMarketing, TermsMarketingCollectQR, TermsMarketingProviderQR, TermsMobileCard, TermsRadio, TermsRatingBar, TermsSignature, TermsTransfer, VERIFICATION_CODES, highlightOnSearchKeyword, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCameraV2, useCanvasPaint, useCustomerSearch, useDownloader, useJobSearchModal, useJobVehicleSearch, useJobVehicleSearchModal, useNationalityComponent, useNxlOneModal, useRemoteIdentityVerification$1 as useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useSearchAddress, useSearchNationality, useSearchVisa, useTerms, useVisaComponent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sales-frontend-components",
-  "version": "3.0.6",
+  "version": "3.0.8",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs.js",
@@ -45,12 +45,13 @@
     "sales-frontend-stores": "0.0.15",
     "sales-frontend-typescript-config": "0.0.2",
     "sales-frontend-assets": "0.0.28",
-    "sales-frontend-api": "0.0.184",
-    "sales-frontend-design-system": "0.3.5",
-    "sales-frontend-bridge": "0.0.121",
+    "sales-frontend-api": "0.0.186",
+    "sales-frontend-design-system": "0.3.6",
+    "sales-frontend-bridge": "0.0.122",
     "sales-frontend-hooks": "0.0.182",
     "sales-frontend-solution": "0.0.61",
     "sales-frontend-debug": "0.0.80",
+    "sales-frontend-headless": "0.0.12",
     "sales-frontend-vitest-config": "0.0.4"
   },
   "peerDependencies": {
@@ -58,13 +59,14 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "react-hook-form": "^7.58.1",
-    "sales-frontend-api": "0.0.184",
+    "sales-frontend-api": "0.0.186",
     "sales-frontend-assets": "0.0.28",
     "sales-frontend-stores": "0.0.15",
-    "sales-frontend-design-system": "0.3.5",
+    "sales-frontend-design-system": "0.3.6",
+    "sales-frontend-bridge": "0.0.122",
+    "sales-frontend-headless": "0.0.12",
     "sales-frontend-hooks": "0.0.182",
-    "sales-frontend-solution": "0.0.61",
-    "sales-frontend-bridge": "0.0.121"
+    "sales-frontend-solution": "0.0.61"
   },
   "dependencies": {
     "classnames": "^2.5.1",