sales-frontend-components 0.0.69 → 0.0.71

package/dist/index.d.ts

@@ -14,7 +14,7 @@ declare const FormDatePicker: <TFormValues extends FieldValues>({ name, control,
 
 declare const FormDateRangePicker: <TFormValues extends FieldValues>({ name, control, disabled, defaultValue, ...props }: Pick<UseControllerProps<TFormValues>, "name" | "control" | "disabled" | "defaultValue"> & DatePickerRangeHtmlProps) => react_jsx_runtime.JSX.Element;
 
-declare const FormSearchJobField: <TFormValues extends FieldValues>({ name, control, disabled, rootProps, error, size, placeholder, ...props }: Pick<UseControllerProps<TFormValues>, "name" | "control" | "disabled"> & FormField.TextFieldProps & {
+declare const FormSearchJobField: <TFormValues extends FieldValues>({ name, control, disabled, error, size, placeholder, ...props }: Pick<UseControllerProps<TFormValues>, "name" | "control" | "disabled"> & FormField.TextFieldProps & {
     onValueChange?: (value?: OccupationResponseDto) => void;
 }) => react_jsx_runtime.JSX.Element;
 
@@ -209,6 +209,29 @@ declare const useAddressComponent: () => {
     AddressSearchComponent: () => react_jsx_runtime.JSX.Element;
 };
 
+interface BankStockItem {
+    label: string;
+    value: string;
+    Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+}
+interface BankStockSearchModalProps {
+    open: boolean;
+    onClose: () => void;
+    onSelect: (item: BankStockItem) => void;
+}
+
+declare function BankStockSearchModal({ open, onClose, onSelect }: BankStockSearchModalProps): react_jsx_runtime.JSX.Element;
+
+declare function useBankStockSearch({ onSelect }: {
+    onSelect: (item: BankStockItem) => void;
+}): {
+    searchKeyword: string;
+    setSearchKeyword: React$1.Dispatch<React$1.SetStateAction<string>>;
+    bankList: BankStockItem[];
+    stockList: BankStockItem[];
+    handleSelect: (item: BankStockItem) => void;
+};
+
 declare function useJobVehicleSearchModal(): {
     selectedJob: sales_frontend_api_method.OccupationResponseDto | null;
     selectedVehicle: sales_frontend_api_method.VehicleTypeResponseDto | undefined;
@@ -224,5 +247,5 @@ interface JobSearchModalProps {
 }
 declare const JobSearchModal: React__default.FC<JobSearchModalProps>;
 
-export { Attachment, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useCamera, useCanvasPaint, useJobVehicleSearchModal, useSearchAddress };
-export type { AttachedPhoto, AttachmentProps, DownloadProps, PaintProps, Pen, StepIndicatorProps, StepItem, cameraItemType, cameraOptions };
+export { Attachment, BankStockSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobVehicleSearchModal, useSearchAddress };
+export type { AttachedPhoto, AttachmentProps, BankStockItem, BankStockSearchModalProps, DownloadProps, PaintProps, Pen, StepIndicatorProps, StepItem, cameraItemType, cameraOptions };

package/dist/index.esm.js

@@ -1,14 +1,16 @@
 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, Icon, useModalState, Modal, SegmentGroup, ModalUtils, FormCore, RadioGroup } from 'sales-frontend-design-system';
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useSearchOccupationQuery, useSearchModalAddressQuery, useSearchVehicleQuery } from 'sales-frontend-api/method';
 import styles from './modal/pre-standard/job-search-modal/job-search-modal.module.scss';
 import styles$1 from './step-indicator/step-indicator.module.scss';
 import styles$2 from './camera/camera.module.scss';
 import styles$3 from './modal/standard/address-search/select-address.module.scss';
-import styles$4 from './modal/pre-standard/job-vehicle-search-modal/job-vehicle-search-modal.module.scss';
-import styles$5 from './modal/pre-standard/vehicle-search-modal/vehicle-search-modal.module.scss';
+import styles$4 from './modal/standard/bank-stock-search/bank-stock-search-modal.module.scss';
+import { 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 } from 'sales-frontend-assets';
+import styles$5 from './modal/pre-standard/job-vehicle-search-modal/job-vehicle-search-modal.module.scss';
+import styles$6 from './modal/pre-standard/vehicle-search-modal/vehicle-search-modal.module.scss';
 
 const FormCheckboxButton = ({
   name,
@@ -648,7 +650,6 @@ const FormSearchJobField = ({
   name,
   control,
   disabled,
-  rootProps,
   error,
   size = "medium",
   placeholder = "\uC9C1\uC885 \uAC80\uC0C9",
@@ -666,21 +667,16 @@ const FormSearchJobField = ({
   }, [selectedJob]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      FormField.TextField,
+      FormField.ComboBox,
       {
         ...props,
         ...field,
         id: field.name,
         error: fieldState.invalid || error,
         value: selected?.occupationIndustryName ?? "",
-        rootProps: {
-          ...rootProps,
-          endElement: /* @__PURE__ */ jsx(Icon, { name: "sub-ui/search" })
-        },
-        readOnly: true,
+        icon: "search",
         size,
         placeholder,
-        style: { background: "#fff", cursor: "pointer" },
         autoComplete: "off",
         onClick: openJobSearchModal
       }
@@ -1669,7 +1665,111 @@ const useAddressComponent = () => {
   };
 };
 
-const cx$2 = classNames.bind(styles$4);
+const BANK_LIST = [
+  { label: "HSBC", value: "HSBC", Icon: IconGraphicsBankHsbc },
+  { label: "KEB\uD558\uB098", value: "KEB\uD558\uB098", Icon: IconGraphicsBankKebHana },
+  { label: "SC\uC81C\uC77C", value: "SC\uC81C\uC77C", Icon: IconGraphicsBankScJeil },
+  { label: "\uACBD\uB0A8", value: "\uACBD\uB0A8", Icon: IconGraphicsBankGyeongnam },
+  { label: "\uAD11\uC8FC", value: "\uAD11\uC8FC", Icon: IconGraphicsBankGwangju },
+  { label: "\uAD6D\uBBFC", value: "\uAD6D\uBBFC", Icon: IconGraphicsBankKukmin },
+  { label: "\uAE30\uC5C5", value: "\uAE30\uC5C5", Icon: IconGraphicsBankKiup },
+  { label: "\uC9C0\uC5ED\uB18D\uD611", value: "\uC9C0\uC5ED\uB18D\uD611", Icon: IconGraphicsBankJiyeokNonghyeop },
+  { label: "NH\uB18D\uD611", value: "NH\uB18D\uD611", Icon: IconGraphicsBankNhNonghyeop },
+  { label: "\uB300\uAD6C", value: "\uB300\uAD6C", Icon: IconGraphicsBankDaegu },
+  { label: "\uBD80\uC0B0", value: "\uBD80\uC0B0", Icon: IconGraphicsBankBusan },
+  { label: "\uC0B0\uB9BC\uC870\uD569", value: "\uC0B0\uB9BC\uC870\uD569", Icon: IconGraphicsBankSanlim },
+  { label: "\uC0B0\uC5C5", value: "\uC0B0\uC5C5", Icon: IconGraphicsBankSaneop },
+  { label: "\uC0C8\uB9C8\uC744\uAE08\uACE0", value: "\uC0C8\uB9C8\uC744\uAE08\uACE0", Icon: IconGraphicsBankSaemaulGeumgo },
+  { label: "\uC218\uD611", value: "\uC218\uD611", Icon: IconGraphicsBankSuhyeop },
+  { label: "\uC2E0\uD55C", value: "\uC2E0\uD55C", Icon: IconGraphicsBankSinhan },
+  { label: "\uC2E0\uD611", value: "\uC2E0\uD611", Icon: IconGraphicsBankSinhyeop },
+  { label: "\uC678\uD658", value: "\uC678\uD658", Icon: IconGraphicsBankOehwan },
+  { label: "\uC6B0\uB9AC", value: "\uC6B0\uB9AC", Icon: IconGraphicsBankWoori },
+  { label: "\uC6B0\uCCB4\uAD6D", value: "\uC6B0\uCCB4\uAD6D", Icon: IconGraphicsBankPost },
+  { label: "\uC800\uCD95", value: "\uC800\uCD95", Icon: IconGraphicsBankJeochuk },
+  { label: "\uC804\uBD81", value: "\uC804\uBD81", Icon: IconGraphicsBankJeonbuk },
+  { label: "\uC81C\uC8FC", value: "\uC81C\uC8FC", Icon: IconGraphicsBankJeju },
+  { label: "\uCE74\uCE74\uC624\uBC45\uD06C", value: "\uCE74\uCE74\uC624\uBC45\uD06C", Icon: IconGraphicsBankKakaoBank },
+  { label: "\uCF00\uC774\uBC45\uD06C", value: "\uCF00\uC774\uBC45\uD06C", Icon: IconGraphicsBankKBank },
+  { label: "\uD55C\uAD6D\uC528\uD2F0", value: "\uD55C\uAD6D\uC528\uD2F0", Icon: IconGraphicsBankHankookCity }
+];
+const STOCK_LIST = [
+  { label: "DB\uAE08\uC735\n\uD22C\uC790\uC99D\uAD8C", value: "DB\uAE08\uC735\uD22C\uC790", Icon: IconGraphicsStockDbGeumyungTujajeungkwon },
+  { label: "KB\uC99D\uAD8C", value: "KB\uC99D\uAD8C", Icon: IconGraphicsStockKbJeungkwon },
+  { label: "NH(\uC6B0\uB9AC)\n\uD22C\uC790\uC99D\uAD8C", value: "NH(\uC6B0\uB9AC)\uD22C\uC790\uC99D\uAD8C", Icon: IconGraphicsStockNhWooriTujajeungkwon },
+  { label: "NH\n\uD22C\uC790\uC99D\uAD8C", value: "NH\uD22C\uC790\uC99D\uAD8C", Icon: IconGraphicsStockNhTujajeungkwon },
+  { label: "SK\uC99D\uAD8C", value: "SK\uC99D\uAD8C", Icon: IconGraphicsStockSkJeungkwon },
+  { label: "\uAD50\uBCF4\uC99D\uAD8C", value: "\uAD50\uBCF4\uC99D\uAD8C", Icon: IconGraphicsStockGyoboJeungkwon },
+  { label: "\uB300\uC2E0\uC99D\uAD8C", value: "\uB300\uC2E0\uC99D\uAD8C", Icon: IconGraphicsStockDaesinJeungkwon },
+  { label: "\uBA54\uB9AC\uCE20\uC99D\uAD8C", value: "\uBA54\uB9AC\uCE20\uC99D\uAD8C", Icon: IconGraphicsStockMeritzJeungkwon },
+  { label: "\uBBF8\uB798\uC5D0\uC14B\n\uC99D\uAD8C", value: "\uBBF8\uB798\uC5D0\uC14B\uC99D\uAD8C", Icon: IconGraphicsStockMiraeAssetJeungkwon },
+  { label: "\uBD80\uAD6D\uC99D\uAD8C", value: "\uBD80\uAD6D\uC99D\uAD8C", Icon: IconGraphicsStockBugukJeungkwon },
+  { label: "\uC0BC\uC131\uC99D\uAD8C", value: "\uC0BC\uC131\uC99D\uAD8C", Icon: IconGraphicsStockSamsungJeungkwon },
+  { label: "\uC2E0\uC601\uC99D\uAD8C", value: "\uC2E0\uC601\uC99D\uAD8C", Icon: IconGraphicsStockSinyeongJeungkwon },
+  { label: "\uC2E0\uD55C\uAE08\uC735\n\uD22C\uC790\uC99D\uAD8C", value: "\uC2E0\uD55C\uAE08\uC735\uD22C\uC790\uC99D\uAD8C", Icon: IconGraphicsStockSinhanTujajeungkwon },
+  { label: "\uC720\uC548\uD0C0\uC99D\uAD8C", value: "\uC720\uC548\uD0C0\uC99D\uAD8C", Icon: IconGraphicsStockYuantaJeungkwon },
+  { label: "\uC720\uC9C4\n\uD22C\uC790\uC99D\uAD8C", value: "\uC720\uC9C4\uD22C\uC790\uC99D\uAD8C", Icon: IconGraphicsStockYujinTujajeungkwon },
+  { label: "\uD0A4\uC6C0\uC99D\uAD8C", value: "\uD0A4\uC6C0\uC99D\uAD8C", Icon: IconGraphicsStockKiwoomJeungkwon },
+  { label: "\uD558\uB098\uAE08\uC735\n\uD22C\uC790\uC99D\uAD8C", value: "\uD558\uB098\uAE08\uC735\uD22C\uC790\uC99D\uAD8C", Icon: IconGraphicsStockHanaGeumyungTujajeungkwon },
+  { label: "\uD558\uC774\n\uD22C\uC790\uC99D\uAD8C", value: "\uD558\uC774\uD22C\uC790\uC99D\uAD8C", Icon: IconGraphicsStockHiTujajeungkwon },
+  { label: "\uD55C\uAD6D\uC99D\uAD8C\n\uAE08\uC735", value: "\uD55C\uAD6D\uC99D\uAD8C\uAE08\uC735", Icon: IconGraphicsStockHankookJeungkwonGeumyung },
+  { label: "\uD55C\uAD6D\n\uD22C\uC790\uC99D\uAD8C", value: "\uD55C\uAD6D\uD22C\uC790\uC99D\uAD8C", Icon: IconGraphicsStockHankookTujajeungkwon },
+  { label: "\uD55C\uD654\n\uD22C\uC790\uC99D\uAD8C", value: "\uD55C\uD654\uD22C\uC790\uC99D\uAD8C", Icon: IconGraphicsStockHanwhaTujajeungkwon },
+  { label: "\uD604\uB300\uCC28\uC99D\uAD8C", value: "\uD604\uB300\uCC28\uC99D\uAD8C", Icon: IconGraphicsStockHyundaiChaJeungkwon },
+  { label: "\uD638\uCD9C\uC5C6\uC74C", value: "\uD638\uCD9C\uC5C6\uC74C", Icon: IconGraphicsStockHochulEopsum }
+];
+function useBankStockSearch({ onSelect }) {
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const bankList = useMemo(() => BANK_LIST.filter((bank) => bank.label.includes(searchKeyword)), [searchKeyword]);
+  const stockList = useMemo(() => STOCK_LIST.filter((stock) => stock.label.includes(searchKeyword)), [searchKeyword]);
+  const handleSelect = (item) => {
+    onSelect(item);
+  };
+  return {
+    searchKeyword,
+    setSearchKeyword,
+    bankList,
+    stockList,
+    handleSelect
+  };
+}
+
+function chunk(array, size) {
+  return Array.from({ length: Math.ceil(array.length / size) }, (v, i) => array.slice(i * size, i * size + size));
+}
+function BankStockSearchModal({ open, onClose, onSelect }) {
+  const { bankList, stockList, handleSelect } = useBankStockSearch({
+    onSelect
+  });
+  const renderItems = (list) => {
+    const chunkedList = chunk(list, 5);
+    return /* @__PURE__ */ jsx("div", { className: styles$4["list-container"], children: chunkedList.map((chunk2, chunkIndex) => /* @__PURE__ */ jsxs("div", { className: styles$4.row, children: [
+      chunk2.map((item) => /* @__PURE__ */ jsxs("div", { className: styles$4.item, onClick: () => handleSelect(item), children: [
+        /* @__PURE__ */ jsx("div", { className: styles$4["icon-wrapper"], children: /* @__PURE__ */ jsx(item.Icon, {}) }),
+        /* @__PURE__ */ jsx("span", { children: item.label })
+      ] }, item.value)),
+      chunk2.length < 5 && Array.from({ length: 5 - chunk2.length }).map((_, i) => /* @__PURE__ */ jsx("div", { className: styles$4.item, style: { visibility: "hidden" } }, `placeholder-${chunkIndex}-${i}`))
+    ] }, chunkIndex)) });
+  };
+  return /* @__PURE__ */ jsxs(Modal.Root, { isOpen: open, onClose, modalSize: "full-screen", children: [
+    /* @__PURE__ */ jsx(Modal.Overlay, {}),
+    /* @__PURE__ */ jsxs(Modal.Content, { children: [
+      /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uC740\uD589/\uC99D\uAD8C\uC0AC \uC120\uD0DD", showCloseButton: true }),
+      /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs("div", { className: styles$4.container, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$4.section, children: [
+          /* @__PURE__ */ jsx("p", { className: styles$4["section-title"], children: "\uC740\uD589\uC0AC" }),
+          renderItems(bankList)
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles$4.section, children: [
+          /* @__PURE__ */ jsx("p", { className: styles$4["section-title"], children: "\uC99D\uAD8C\uC0AC" }),
+          renderItems(stockList)
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+
+const cx$2 = classNames.bind(styles$5);
 const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
   return /* @__PURE__ */ jsxs("div", { className: cx$2("grade-section"), children: [
     /* @__PURE__ */ jsxs("div", { className: cx$2("icon-title"), children: [
@@ -1690,7 +1790,7 @@ const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
   ] });
 };
 
-const cx$1 = classNames.bind(styles$5);
+const cx$1 = classNames.bind(styles$6);
 function VehicleSearch({ vehicles, onVehicleSelect }) {
   return /* @__PURE__ */ jsxs("div", { className: cx$1("vehicle-search-section"), children: [
     /* @__PURE__ */ jsx("p", { children: "\uC6B4\uC804 \uCC28\uC885" }),
@@ -1756,7 +1856,7 @@ const useJobVehicleSearch = () => {
   };
 };
 
-const cx = classNames.bind(styles$4);
+const cx = classNames.bind(styles$5);
 function useJobVehicleSearchModal() {
   const {
     selectedVehicle,
@@ -1861,5 +1961,5 @@ const JobSearchModal = ({ onClose }) => {
   ] });
 };
 
-export { Attachment, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useCamera, useCanvasPaint, useJobVehicleSearchModal, useSearchAddress };
+export { Attachment, BankStockSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobVehicleSearchModal, useSearchAddress };
 //# sourceMappingURL=index.esm.js.map