sales-frontend-components 0.0.80 → 0.0.82

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FieldValues, UseControllerProps } from 'react-hook-form';
 import { CheckboxButtonProps, CheckboxProps, DatePickerSingleHtmlProps, DatePickerRangeHtmlProps, FormField, SegmentGroupHtmlProps, SelectProps, OptionProps } from 'sales-frontend-design-system';
 import * as sales_frontend_api_method from 'sales-frontend-api/method';
-import { OccupationResponseDto, AddressStandardizationResponseDto, AddressResponseDto, OrganizationProfileResponse, EmployeeProfileResponseDto, Pagination } from 'sales-frontend-api/method';
+import { OccupationResponseDto, AddressStandardizationResponseDto, AddressResponseDto, OrganizationProfileResponse, EmployeeProfileResponseDto, CustomerSearchProps, RemoteIdentityVerificationSystemTokenRequestDto, ApiConfig } from 'sales-frontend-api/method';
 import * as React$1 from 'react';
 import React__default from 'react';
 
@@ -264,42 +264,80 @@ interface JobSearchModalProps {
 }
 declare const JobSearchModal: React__default.FC<JobSearchModalProps>;
 
-interface DspResponseCustomerListResponseDto {
-    /** @description 성공여부 */
-    isSuccess?: boolean;
-    /** @description 코드 */
-    code?: string;
-    /** @description 메시지 */
-    message?: string;
-    data?: CustomerListResponseDto;
-    pagination?: Pagination;
+declare const CustomerSearch: ({ onSelect }: CustomerSearchProps) => react_jsx_runtime.JSX.Element;
+
+interface VerificationResponse {
+    command: 'webClose';
+    args: {
+        result: 'Y' | 'N';
+        code: string;
+    };
 }
-interface CustomerListResponseDto {
-    /** @description 고객목록 */
-    custList?: CustomerDto[];
-    /** @description 총 건수 */
-    totalCount?: string;
+interface RivUrlParams {
+    /** 유입환경구분코드(0: 모바일웹, 1: PC, 2: App) */
+    envDvsnCode?: string;
+    /** 완료페이지 스킵여부(0: Skip Off, 1: Skip On) */
+    skipFinalPage?: string;
+    /** 시작페이지 스킵여부(0: Skip Off, 1: Skip On) */
+    skipFirstPage?: string;
+    /** 국적타입(D: 내국인, F: 외국인) */
+    nationalityType?: 'D' | 'F';
 }
-/** @description 고객정보 */
-interface CustomerDto {
-    /** @description 고객ID */
-    customerId?: string;
-    /** @description 고객명 */
-    customerName?: string;
-    /** @description 기본주소 */
-    baseAddress?: string;
-    /** @description 상세주소 */
-    detailAddress?: string;
-    /** @description 생년월일(YYYYMMDD) */
-    birthDate?: string;
-    /** @description 성별코드 */
-    genderCode?: string;
+interface RemoteIdentityVerificationSuccess {
+    rivsRqstId: string;
 }
-interface CustomerSearchProps {
-    onSelect?: (customer: CustomerDto) => void;
+interface UseRemoteIdentityVerificationProps {
+    rivEnv?: 'prd' | 'stg' | 'dev';
+    rivOrigin?: string;
+    tokenRequestParams: RemoteIdentityVerificationSystemTokenRequestDto;
+    rivSearchParams?: RivUrlParams;
+    apiConfig?: ApiConfig;
+    onSuccess?: (result: VerificationResponse['args'], remoteIdentityVerificationSuccess: RemoteIdentityVerificationSuccess) => void;
+    onError?: (result: VerificationResponse['args']) => void;
+    onCancel?: (result: VerificationResponse['args']) => void;
 }
 
-declare const CustomerSearch: ({ onSelect }: CustomerSearchProps) => react_jsx_runtime.JSX.Element;
+/**
+ * 비대면인증시스템 기본 로직
+ * @param config
+ */
+declare const useRemoteIdentityVerification: ({ rivEnv, rivOrigin, tokenRequestParams, apiConfig, onCancel, onError, onSuccess, rivSearchParams }: UseRemoteIdentityVerificationProps) => {
+    createRemoteIdentityVerificationUrl: () => Promise<{
+        fullUrl: string;
+        rivsRqstId: string;
+    }>;
+    createMessageHandler: ({ rivsRqstId }: RemoteIdentityVerificationSuccess, cleanup?: () => void) => (event: MessageEvent) => void;
+};
+/**
+ * Iframe용 비대면인증시스템 훅
+ * @param config
+ * @returns
+ */
+declare const useRemoteIdentityVerificationIframe: (config: UseRemoteIdentityVerificationProps) => {
+    RivModalIframe: ({ width, height, loadingComponent, ...iframeProps }: React.IframeHTMLAttributes<HTMLIFrameElement> & {
+        width?: string;
+        height?: string;
+        loadingComponent?: React.ReactNode;
+    }) => react_jsx_runtime.JSX.Element;
+    RivIframe: ({ width, height, ...iframeProps }: React.IframeHTMLAttributes<HTMLIFrameElement> & {
+        width?: string;
+        height?: string;
+    }) => react_jsx_runtime.JSX.Element | null;
+    openRivIframe: () => Promise<void>;
+    closeRivIframe: () => void;
+    remoteIdentityVerificationUrl: string;
+    isCreatingUrl: boolean;
+    isFullyLoaded: boolean;
+};
+/**
+ * 팝업용 비대면인증시스템 훅
+ * @param config
+ * @returns
+ */
+declare const useRemoteIdentityVerificationPopup: (config: UseRemoteIdentityVerificationProps) => {
+    openPopup: (target?: string, features?: string) => Promise<void>;
+    isCreatingUrl: boolean;
+};
 
-export { Attachment, BankStockSearchModal, CustomerSearch, EmployeeSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobSearchModal, OrganizationSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobVehicleSearchModal, useSearchAddress };
-export type { AttachedPhoto, AttachmentProps, BankStockItem, BankStockSearchModalProps, CustomerDto, CustomerListResponseDto, CustomerSearchProps, DownloadProps, DspResponseCustomerListResponseDto, PaintProps, Pen, StepIndicatorProps, StepItem, cameraItemType, cameraOptions };
+export { Attachment, BankStockSearchModal, CustomerSearch, EmployeeSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobSearchModal, OrganizationSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobVehicleSearchModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useRemoteIdentityVerificationPopup, useSearchAddress };
+export type { AttachedPhoto, AttachmentProps, BankStockItem, BankStockSearchModalProps, DownloadProps, PaintProps, Pen, RemoteIdentityVerificationSuccess, RivUrlParams, StepIndicatorProps, StepItem, UseRemoteIdentityVerificationProps, VerificationResponse, cameraItemType, cameraOptions };

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useController } from 'react-hook-form';
-import { CheckboxButton, Checkbox, DatePicker, DateRangePicker, Accordion, Radio, Table, Button, FormField, Select, Tab, useModalState, Modal, SegmentGroup, ModalUtils, FormCore, RadioGroup, useDropDown, List, ListItem } from 'sales-frontend-design-system';
+import { CheckboxButton, Checkbox, DatePicker, DateRangePicker, Accordion, Radio, Table, Button, FormField, Select, Tab, useModalState, Modal, SegmentGroup, ModalUtils, FormCore, RadioGroup, useDropDown, List, ListItem, Loading } from 'sales-frontend-design-system';
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { useSearchOccupationQuery, useSearchAddressQuery, useSearchPostalCodeQuery, useSearchAddressStandardizationQuery, useSearchOrganizationQuery, useSearchEmployeeProfileQuery, useSearchVehicleQuery } from 'sales-frontend-api/method';
+import { useSearchOccupationDetailQuery, useSearchOccupationQuery, useSearchAddressQuery, useSearchPostalCodeQuery, useSearchAddressStandardizationQuery, useSearchOrganizationQuery, useSearchEmployeeProfileQuery, useSearchVehicleQuery, useSearchCustomerListQuery, getRemoteIdentityVerificationSystemToken } from 'sales-frontend-api/method';
 import { IconMainUiSearch, IconIllustCamera, IconGraphicsBankHsbc, IconGraphicsBankKebHana, IconGraphicsBankScJeil, IconGraphicsBankGyeongnam, IconGraphicsBankGwangju, IconGraphicsBankKukmin, IconGraphicsBankKiup, IconGraphicsBankJiyeokNonghyeop, IconGraphicsBankNhNonghyeop, IconGraphicsBankDaegu, IconGraphicsBankBusan, IconGraphicsBankSanlim, IconGraphicsBankSaneop, IconGraphicsBankSaemaulGeumgo, IconGraphicsBankSuhyeop, IconGraphicsBankSinhan, IconGraphicsBankSinhyeop, IconGraphicsBankOehwan, IconGraphicsBankWoori, IconGraphicsBankPost, IconGraphicsBankJeochuk, IconGraphicsBankJeonbuk, IconGraphicsBankJeju, IconGraphicsBankKakaoBank, IconGraphicsBankKBank, IconGraphicsBankHankookCity, IconGraphicsStockDbGeumyungTujajeungkwon, IconGraphicsStockKbJeungkwon, IconGraphicsStockNhWooriTujajeungkwon, IconGraphicsStockNhTujajeungkwon, IconGraphicsStockSkJeungkwon, IconGraphicsStockGyoboJeungkwon, IconGraphicsStockDaesinJeungkwon, IconGraphicsStockMeritzJeungkwon, IconGraphicsStockMiraeAssetJeungkwon, IconGraphicsStockBugukJeungkwon, IconGraphicsStockSamsungJeungkwon, IconGraphicsStockSinyeongJeungkwon, IconGraphicsStockSinhanTujajeungkwon, IconGraphicsStockYuantaJeungkwon, IconGraphicsStockYujinTujajeungkwon, IconGraphicsStockKiwoomJeungkwon, IconGraphicsStockHanaGeumyungTujajeungkwon, IconGraphicsStockHiTujajeungkwon, IconGraphicsStockHankookJeungkwonGeumyung, IconGraphicsStockHankookTujajeungkwon, IconGraphicsStockHanwhaTujajeungkwon, IconGraphicsStockHyundaiChaJeungkwon, IconGraphicsStockHochulEopsum, IconGraphicsFeedbackEmpty, IconIllustGrade, IconIllustJob, IconSubUiArrowRight, IconIllustVehicle } from 'sales-frontend-assets';
 import styles from './modal/pre-standard/job-search-modal/job-search-modal.module.scss';
 import styles$1 from './step-indicator/step-indicator.module.scss';
@@ -14,6 +14,7 @@ import styles$6 from './modal/pre-standard/employee-search-modal/employee-search
 import styles$7 from './modal/pre-standard/job-vehicle-search-modal/job-vehicle-search-modal.module.scss';
 import styles$8 from './modal/pre-standard/vehicle-search-modal/vehicle-search-modal.module.scss';
 import styles$9 from './modal/standard/customer-search/customer-search.module.scss';
+import { MessageEventManager } from 'sales-frontend-utils';
 
 const FormCheckboxButton = ({
   name,
@@ -281,6 +282,73 @@ function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
   ] }) });
 }
 
+function JobSearchDetail({ occupationTypeCode, occupationIndustryCode }) {
+  const { data: detail } = useSearchOccupationDetailQuery({
+    occupationIndustryCode,
+    occupationIndustryTypeCode: occupationTypeCode
+  });
+  if (!detail || !detail.data) {
+    return null;
+  }
+  const {
+    /** @description 직종해설내용 */
+    occupationExplanationContent,
+    /** @description 직업예시명 */
+    occupationExampleName,
+    /** @description 위험등급명 */
+    riskGradeName,
+    /** @description 위험등급코드 */
+    riskGradeCode,
+    /** @description 상해위험등급코드명 */
+    injuryRiskGradeCodeName,
+    /** @description 상해위험등급코드 */
+    injuryRiskGradeCode,
+    /** @description 입원등급코드명 */
+    hospitalizationGradeCodeName,
+    /** @description 입원등급코드 */
+    hospitalizationGradeCode,
+    /** @description 상해직종코드 */
+    injuryOccupationCode
+  } = detail.data;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Table, { variant: "horizontal", children: /* @__PURE__ */ jsxs("tbody", { children: [
+    /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { className: "px-small", children: "\uC9C1\uC885 \uD574\uC124" }),
+      /* @__PURE__ */ jsx("td", { className: "px-small", children: occupationExplanationContent })
+    ] }),
+    /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { className: "px-small", children: "\uC9C1\uC885 \uC608\uC2DC" }),
+      /* @__PURE__ */ jsx("td", { className: "px-small", children: occupationExampleName })
+    ] }),
+    /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { className: "px-small", children: "\uC704\uD5D8 \uB4F1\uAE09" }),
+      /* @__PURE__ */ jsxs("td", { className: "px-small", children: [
+        riskGradeName,
+        "(",
+        riskGradeCode,
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { className: "px-small", children: "\uC785\uC6D0 \uB4F1\uAE09" }),
+      /* @__PURE__ */ jsxs("td", { className: "px-small", children: [
+        hospitalizationGradeCodeName,
+        "(",
+        hospitalizationGradeCode,
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { className: "px-small", children: "\uC0C1\uD574 \uB4F1\uAE09" }),
+      /* @__PURE__ */ jsxs("td", { className: "px-small", children: [
+        injuryRiskGradeCodeName,
+        "(",
+        injuryRiskGradeCode,
+        ")"
+      ] })
+    ] })
+  ] }) }) });
+}
+
 const cx$d = classNames.bind(styles);
 function JobSearchFavorite({ filteredJobs, onJobSelect }) {
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$d("popular-jobs"), children: [
@@ -306,7 +374,13 @@ function JobSearchFavorite({ filteredJobs, onJobSelect }) {
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx(Accordion.Content, { variant: "text", children: "\uD56D\uBAA9 1 \uB0B4\uC6A9" })
+          /* @__PURE__ */ jsx(Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsx(
+            JobSearchDetail,
+            {
+              occupationTypeCode: job.occupationTypeCode || "",
+              occupationIndustryCode: job.occupationIndustryCode
+            }
+          ) })
         ]
       },
       `item-${job.occupationIndustryCode}-${index}`
@@ -339,22 +413,13 @@ function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
               children: highlightOnSearchKeyword$1(job.occupationIndustryName, searchTerm)
             }
           ) }) }),
-          /* @__PURE__ */ jsx(Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsx(Table, { variant: "horizontal", children: /* @__PURE__ */ jsxs("tbody", { children: [
-            /* @__PURE__ */ jsxs("tr", { children: [
-              /* @__PURE__ */ jsx("th", { children: "\uD5E4\uB354 1" }),
-              /* @__PURE__ */ jsx("td", { className: "px-24", children: "1\uD589 1\uBC88\uC9F8" }),
-              /* @__PURE__ */ jsx("th", { children: "\uD5E4\uB354 1-2" }),
-              /* @__PURE__ */ jsx("td", { className: "px-24 ", children: "1\uD589 2\uBC88\uC9F8" })
-            ] }),
-            /* @__PURE__ */ jsxs("tr", { children: [
-              /* @__PURE__ */ jsx("th", { children: "\uD5E4\uB354 2" }),
-              /* @__PURE__ */ jsx("td", { className: "pl-24 pr-16", colSpan: 3, children: /* @__PURE__ */ jsxs("p", { className: "d-flex-center-center", children: [
-                "2\uD589 1\uBC88\uC9F8 ",
-                /* @__PURE__ */ jsx("span", { className: "flex-1 pipe-left", children: "\uC11C\uBE0C\uD14D\uC2A4\uD2B8" }),
-                /* @__PURE__ */ jsx(Button, { variant: "neutral", size: "xsmall", appearance: "outline", children: "\uBC84\uD2BC\uBA85" })
-              ] }) })
-            ] })
-          ] }) }) })
+          /* @__PURE__ */ jsx(Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsx(
+            JobSearchDetail,
+            {
+              occupationTypeCode: job.occupationTypeCode || "",
+              occupationIndustryCode: job.occupationIndustryCode
+            }
+          ) })
         ]
       },
       job.occupationIndustryCode
@@ -2384,34 +2449,20 @@ const JobSearchModal = ({ onClose }) => {
   ] });
 };
 
-const mockCustomers = [
-  { customerId: "1", customerName: "\uAE40\uD55C\uD654", birthDate: "1999.01.01", genderCode: "\uB0A8\uC131" },
-  {
-    customerId: "2",
-    customerName: "\uAE40\uD55C\uD654\uC0DD\uBA85",
-    birthDate: "1989.01.01",
-    genderCode: "\uC5EC\uC131",
-    baseAddress: "\uC11C\uC6B8\uC2DC \uB9C8\uD3EC\uAD6C"
-  },
-  {
-    customerId: "3",
-    customerName: "\uAE40\uD55C\uD654\uC190\uD574\uBCF4\uD5D8",
-    birthDate: "1999.01.01",
-    genderCode: "\uB0A8\uC131",
-    baseAddress: "\uC11C\uC6B8\uC2DC \uB9C8\uD3EC\uAD6C"
-  }
-];
 const useCustomerSearch = (onSelect) => {
   const { triggerRef, isOpen, setIsOpen, DropDown } = useDropDown();
   const [searchKeyword, setSearchKeyword] = useState("");
   const [searchInput, setSearchInput] = useState("");
   const [customerList, setCustomerList] = useState([]);
   const [selectedCustomer, setSelectedCustomer] = useState(null);
+  const { data } = useSearchCustomerListQuery({ customerName: searchKeyword });
   const search = () => {
     if (searchInput.length >= 2) {
       setSearchKeyword(searchInput);
-      const filtered = mockCustomers.filter((c) => c.customerName?.toLowerCase().includes(searchInput.toLowerCase()));
-      setCustomerList(filtered);
+      const filtered = data?.data?.custList?.filter(
+        (c) => c.customerName?.toLowerCase().includes(searchInput.toLowerCase())
+      );
+      setCustomerList(filtered || []);
       setIsOpen(true);
     } else {
       setCustomerList([]);
@@ -2527,5 +2578,203 @@ const CustomerSearch = ({ onSelect }) => {
   ] });
 };
 
-export { Attachment, BankStockSearchModal, CustomerSearch, EmployeeSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobSearchModal, OrganizationSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobVehicleSearchModal, useSearchAddress };
+const VERIFICATION_CODES = {
+  SUCCESS: "0000",
+  USER_CANCEL: "9000",
+  TOKEN_ERROR: "9001",
+  CAMERA_PERMISSION: "9002",
+  ATTEMPT_EXCEEDED: "9003",
+  SERVER_ERROR: "9999"
+};
+const useRemoteIdentityVerification = ({
+  rivEnv,
+  rivOrigin,
+  tokenRequestParams,
+  apiConfig,
+  onCancel,
+  onError,
+  onSuccess,
+  rivSearchParams
+}) => {
+  const rivHost = rivOrigin ?? `https://${rivEnv === "prd" ? "" : rivEnv === "stg" ? "qa" : "dev"}riv.hanwhalife.com`;
+  const createRemoteIdentityVerificationUrl = async () => {
+    const response = await getRemoteIdentityVerificationSystemToken(tokenRequestParams, apiConfig);
+    const { accessToken, remoteIdentityVerificationSystemRequestId } = response.data;
+    const urlParams = new URLSearchParams({
+      authorization: accessToken,
+      rivsRqstId: remoteIdentityVerificationSystemRequestId,
+      ...rivSearchParams
+    });
+    return { fullUrl: `${rivHost}/?${urlParams.toString()}`, rivsRqstId: remoteIdentityVerificationSystemRequestId };
+  };
+  const createMessageHandler = ({ rivsRqstId }, cleanup) => {
+    return (event) => {
+      try {
+        const response = typeof event.data === "string" ? JSON.parse(decodeURIComponent(event.data)) : event.data;
+        if (response.command !== "webClose") {
+          return;
+        }
+        const { result, code } = response.args;
+        switch (code) {
+          case VERIFICATION_CODES.USER_CANCEL:
+            console.log("=====\uC0AC\uC6A9\uC790 \uC885\uB8CC!=====", { result, code });
+            onCancel?.({ result, code });
+            cleanup?.();
+            break;
+          case VERIFICATION_CODES.TOKEN_ERROR:
+          case VERIFICATION_CODES.CAMERA_PERMISSION:
+          case VERIFICATION_CODES.ATTEMPT_EXCEEDED:
+          case VERIFICATION_CODES.SERVER_ERROR:
+            console.log("=====\uBE44\uB300\uBA74\uC778\uC99D \uC2E4\uD328!=====", { result, code });
+            onError?.({ result, code });
+            cleanup?.();
+            break;
+          case VERIFICATION_CODES.SUCCESS:
+            console.log("=====\uBE44\uB300\uBA74\uC778\uC99D \uC131\uACF5!=====", { result, code });
+            onSuccess?.({ result, code }, { rivsRqstId });
+            cleanup?.();
+            break;
+          default:
+            console.warn("Unknown verification code:", code);
+        }
+      } catch (error) {
+        console.error("Failed to parse postMessage:", error);
+      }
+    };
+  };
+  return {
+    createRemoteIdentityVerificationUrl,
+    createMessageHandler
+  };
+};
+const useRemoteIdentityVerificationIframe = (config) => {
+  const { createMessageHandler, createRemoteIdentityVerificationUrl } = useRemoteIdentityVerification(config);
+  const { isOpen, openModal, closeModal } = useModalState();
+  const [remoteIdentityVerificationUrl, setRemoteIdentityVerificationUrl] = useState("");
+  const [rivsRqstId, setRivsRqstId] = useState("");
+  const [isCreatingUrl, setIsCreatingUrl] = useState(false);
+  const [isIframeLoaded, setIsIframeLoaded] = useState(false);
+  const createIframeUrl = async () => {
+    if (remoteIdentityVerificationUrl || isCreatingUrl) {
+      return;
+    }
+    setIsCreatingUrl(true);
+    setIsIframeLoaded(false);
+    try {
+      const { fullUrl, rivsRqstId: rivsRqstId2 } = await createRemoteIdentityVerificationUrl();
+      setRemoteIdentityVerificationUrl(fullUrl);
+      setRivsRqstId(rivsRqstId2);
+    } catch (error) {
+      console.error("Failed to create URL:", error);
+      throw error;
+    } finally {
+      setIsCreatingUrl(false);
+    }
+  };
+  const openRivIframe = async () => {
+    try {
+      await createIframeUrl();
+      openModal();
+    } catch (error) {
+      console.error("openRivIframe error::", error);
+      await ModalUtils.alert("\uBE44\uB300\uBA74 \uC778\uC99D URL \uC0DD\uC131\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uC2DC\uB3C4\uD574\uC8FC\uC138\uC694.");
+    }
+  };
+  const closeRivIframe = () => {
+    setRemoteIdentityVerificationUrl("");
+    setRivsRqstId("");
+    setIsIframeLoaded(false);
+    closeModal();
+  };
+  useEffect(() => {
+    if (!remoteIdentityVerificationUrl) {
+      return;
+    }
+    const messageHandler = createMessageHandler({ rivsRqstId }, closeRivIframe);
+    MessageEventManager.getInstance().registerHandler("riv-iframe-handler", messageHandler);
+    return () => MessageEventManager.getInstance().unregisterHandler("riv-iframe-handler");
+  }, [remoteIdentityVerificationUrl, rivsRqstId]);
+  const RivIframe = ({
+    width = "100%",
+    height = "100%",
+    ...iframeProps
+  }) => {
+    if (!remoteIdentityVerificationUrl) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        src: remoteIdentityVerificationUrl,
+        width,
+        height,
+        allow: "camera *;",
+        onLoad: () => setIsIframeLoaded(true),
+        ...iframeProps
+      }
+    );
+  };
+  const RivModalIframe = ({
+    width = "100%",
+    height = "100%",
+    loadingComponent,
+    ...iframeProps
+  }) => {
+    const isLoading = isCreatingUrl || !!remoteIdentityVerificationUrl && !isIframeLoaded;
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Modal.Root, { isOpen, children: [
+      isLoading && (loadingComponent || /* @__PURE__ */ jsx(Loading.Wait, { bodyText: "\uBD88\uB7EC\uC624\uB294 \uC911" })),
+      /* @__PURE__ */ jsx(RivIframe, { width, height, allow: "camera *;", ...iframeProps })
+    ] }) });
+  };
+  return {
+    RivModalIframe,
+    RivIframe,
+    openRivIframe,
+    closeRivIframe,
+    remoteIdentityVerificationUrl,
+    isCreatingUrl,
+    isFullyLoaded: isIframeLoaded
+  };
+};
+const useRemoteIdentityVerificationPopup = (config) => {
+  const { createRemoteIdentityVerificationUrl, createMessageHandler } = useRemoteIdentityVerification(config);
+  const [isCreatingUrl, setIsCreatingUrl] = useState(false);
+  const [rivsRqstId, setRivsRqstId] = useState("");
+  const popupRef = useRef(null);
+  const openPopup = async (target = "_blank", features) => {
+    if (popupRef.current && !popupRef.current.closed) {
+      popupRef.current.close();
+    }
+    setIsCreatingUrl(true);
+    try {
+      const { fullUrl, rivsRqstId: rivsRqstId2 } = await createRemoteIdentityVerificationUrl();
+      const popup = window.open(fullUrl, target, features);
+      if (!popup) {
+        await ModalUtils.alert("\uD31D\uC5C5\uC774 \uCC28\uB2E8\uB418\uC5C8\uC2B5\uB2C8\uB2E4. \uD31D\uC5C5\uC744 \uD5C8\uC6A9\uD574\uC8FC\uC138\uC694.");
+        return;
+      }
+      setRivsRqstId(rivsRqstId2);
+      popupRef.current = popup;
+    } catch (error) {
+      console.error("openPopup error::", error);
+      await ModalUtils.alert("\uBE44\uB300\uBA74 \uC778\uC99D URL \uC0DD\uC131\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uC2DC\uB3C4\uD574\uC8FC\uC138\uC694.");
+    } finally {
+      setIsCreatingUrl(false);
+    }
+  };
+  const cleanPopup = () => {
+    popupRef.current = null;
+  };
+  useEffect(() => {
+    const messageHandler = createMessageHandler({ rivsRqstId }, cleanPopup);
+    MessageEventManager.getInstance().registerHandler("riv-popup-handler", messageHandler);
+    return () => MessageEventManager.getInstance().unregisterHandler("riv-popup-handler");
+  }, [rivsRqstId]);
+  return {
+    openPopup,
+    isCreatingUrl
+  };
+};
+
+export { Attachment, BankStockSearchModal, CustomerSearch, EmployeeSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobSearchModal, OrganizationSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobVehicleSearchModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useRemoteIdentityVerificationPopup, useSearchAddress };
 //# sourceMappingURL=index.esm.js.map