sales-frontend-components 0.0.78 → 0.0.80

package/dist/index.cjs.js

@@ -1390,7 +1390,7 @@ const testSignatureBase64Data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA
 const cx$8 = classNames.bind(styles$3);
 const { InputBox: InputBox$1, Input: Input$1 } = salesFrontendDesignSystem.FormCore;
 const AddressSearchInitialText = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("search-result-list"), children: [
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx$8("guide-title"), children: "\uC774\uB807\uAC8C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694." }),
     /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: cx$8("guide"), children: [
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uB3C4\uB85C\uBA85/\uC9C0\uBA85\uACFC \uAC74\uBB3C\uBC88\uD638\uB97C \uD568\uAED8 \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
@@ -1408,38 +1408,36 @@ const AddressSearchResult = ({
   searchKeyword,
   selectedAddress
 }) => {
-  const [filterList, setFilterList] = React.useState([]);
-  React.useEffect(() => {
-    const filterList2 = addressSearchList.filter(
-      (item) => item.address.includes(searchKeyword) || item.oldAddress.includes(searchKeyword)
-    ) || [];
-    setFilterList(filterList2);
-  }, [addressSearchList, searchKeyword]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("search-result-list"), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$8("guide-title"), children: [
       "\uCD1D ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filterList.length }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: addressSearchList.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
-    filterList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+    addressSearchList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
       salesFrontendDesignSystem.RadioGroup,
       {
-        items: filterList.map((item) => ({
-          value: item.address,
-          select: item.address === selectedAddress?.address && item.zipCode === selectedAddress?.zipCode,
-          label: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("search-result"), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("zipcode"), children: [
-              " ",
-              highlightOnSearchKeyword$1(item.zipCode, searchKeyword)
+        items: addressSearchList.map((item) => {
+          return {
+            value: JSON.stringify(item),
+            select: item.roadNameBaseAddress === selectedAddress?.roadNameBaseAddress && item.roadNameDetailAddress === selectedAddress?.roadNameDetailAddress && item.mainBuildingName === selectedAddress?.mainBuildingName,
+            label: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("search-result"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$8("zipcode"), children: highlightOnSearchKeyword$1(`${item.firstPostalCode}${item.secondPostalCode}`, searchKeyword) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$8("divider") }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("address-info"), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$8("address"), children: highlightOnSearchKeyword$1(
+                  `${item.roadNameBaseAddress} ${item.roadNameDetailAddress} ${item.mainBuildingName}`,
+                  searchKeyword
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$8("old-address"), children: highlightOnSearchKeyword$1(
+                  `${item.landNumberBaseAddress} ${item.landNumberDetailAddress}`,
+                  searchKeyword
+                ) })
+              ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$8("divider") }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("address-info"), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$8("address"), children: highlightOnSearchKeyword$1(item.address, searchKeyword) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$8("old-address"), children: highlightOnSearchKeyword$1(item.oldAddress, searchKeyword) })
-            ] })
-          ] }),
-          id: item.address
-        })),
+            id: JSON.stringify(item)
+          };
+        }),
         className: cx$8("radio-group"),
         name: "address-search",
         size: "medium",
@@ -1447,7 +1445,7 @@ const AddressSearchResult = ({
         onChange
       }
     ),
-    filterList.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    addressSearchList.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       "`",
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: searchKeyword }),
       "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
@@ -1455,30 +1453,52 @@ const AddressSearchResult = ({
   ] });
 };
 const AddressSearchDetailInput = ({
-  selectedAddress,
+  addressStandardizationList,
   onDetailChange,
+  onStandardizationChange,
   step,
   detailAddressInput
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        " ",
-        selectedAddress.zipCode
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        "|",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: `${selectedAddress.address}` })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("search-result-list"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      salesFrontendDesignSystem.RadioGroup,
+      {
+        items: addressStandardizationList.map((item) => {
+          return {
+            value: JSON.stringify(item),
+            select: true,
+            label: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("search-result"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$8("zipcode"), children: `${item.firstPostalCode}${item.secondPostalCode}` }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$8("divider") }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("address-info"), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$8("address"), children: `${item.baseAddress} ${item.detailAddress}` }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$8("old-address"), children: `${item.baseAddress} ${item.detailAddress}` })
+              ] })
+            ] }),
+            id: JSON.stringify(item)
+          };
+        }),
+        className: cx$8("radio-group"),
+        name: "address-search-standardization",
+        size: "medium",
+        defaultValue: "",
+        onChange: onStandardizationChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "d-flex gap-medium items-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.FormField.Label, { id: "detail", style: { width: "90px" }, children: "\uC0C1\uC138\uC8FC\uC18C" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        Input$1,
+        salesFrontendDesignSystem.FormField.TextField,
         {
+          rootProps: {
+            style: {
+              display: "flex",
+              flex: 1
+            }
+          },
           placeholder: "\uC0C1\uC138\uC8FC\uC18C \uC785\uB825",
           onChange: onDetailChange,
-          size: "large",
+          size: "small",
           value: detailAddressInput,
           ...step === "detail-input" && { autoFocus: true }
         }
@@ -1501,7 +1521,9 @@ function AddressComponent({ isOpen, onClose, setValue }) {
     setDetail,
     search,
     searchInput,
-    selectedAddress
+    selectedAddress,
+    onStandardizationChange,
+    addressStandardizationList
   } = useSearchAddress({
     setValue,
     onClose,
@@ -1528,7 +1550,7 @@ function AddressComponent({ isOpen, onClose, setValue }) {
           AddressSearchResult,
           {
             onChange: onSelectChange,
-            addressSearchList: addressSearchList || [],
+            addressSearchList,
             searchKeyword: addressSearchKeyword,
             selectedAddress
           }
@@ -1536,7 +1558,8 @@ function AddressComponent({ isOpen, onClose, setValue }) {
         addressSearchStep === "detail-input" && selectedAddress && /* @__PURE__ */ jsxRuntime.jsx(
           AddressSearchDetailInput,
           {
-            selectedAddress,
+            addressStandardizationList,
+            onStandardizationChange,
             onDetailChange: setDetail,
             step: addressSearchStep,
             detailAddressInput
@@ -1565,21 +1588,48 @@ function AddressComponent({ isOpen, onClose, setValue }) {
 function useSearchAddress({ setValue, onClose, isOpen }) {
   const [searchKeyword, setSearchKeyword] = React.useState("");
   const [step, setStep] = React.useState("initial");
-  const [selectedAddress, setSelectedAddress] = React.useState(null);
+  const [selectedAddress, setSelectedAddress] = React.useState();
+  const [selectedStandardizationAddress, setSelectedStandardizationAddress] = React.useState();
   const [searchInput, setSearchInput] = React.useState("");
   const [detailAddressInput, setDetailAddressInput] = React.useState("");
-  const { data: addressList } = method.useSearchModalAddressQuery({ searchKeyword });
+  const [displayList, setDisplayList] = React.useState([]);
+  const [searchType, setSearchType] = React.useState("address");
+  const [standardizationParams, setStandardizationParams] = React.useState({
+    firstPostalCode: "",
+    secondPostalCode: "",
+    baseAddress: "",
+    detailAddress: "",
+    roadNameYn: "Y"
+  });
+  const { data: addressData } = method.useSearchAddressQuery(
+    { searchKeyWord: searchKeyword },
+    { enabled: !!searchKeyword && searchType === "address" }
+  );
+  const { data: postalData } = method.useSearchPostalCodeQuery(
+    { searchWordName: searchKeyword },
+    { enabled: !!searchKeyword && searchType === "postalcode" }
+  );
+  const { data: standardizedData } = method.useSearchAddressStandardizationQuery(standardizationParams, {
+    enabled: !!standardizationParams?.baseAddress
+  });
   const [nextButtonDisabled, setNextButtonDisabled] = React.useState(false);
   const onNext = () => {
     if (step === "search-result") {
       setStep("detail-input");
       setNextButtonDisabled(true);
+      if (selectedAddress) {
+        setStandardizationParams({
+          firstPostalCode: selectedAddress.firstPostalCode,
+          secondPostalCode: selectedAddress.secondPostalCode,
+          baseAddress: selectedAddress.roadNameBaseAddress,
+          detailAddress: selectedAddress.roadNameDetailAddress,
+          roadNameYn: "Y"
+        });
+      }
     } else {
-      setValue({
-        address: selectedAddress?.address || "",
-        oldAddress: selectedAddress?.oldAddress || "",
-        zipCode: selectedAddress?.zipCode || "",
-        detail: detailAddressInput || ""
+      selectedStandardizationAddress && setValue({
+        ...selectedStandardizationAddress,
+        detailAddressInput
       });
       onClose();
     }
@@ -1594,9 +1644,11 @@ function useSearchAddress({ setValue, onClose, isOpen }) {
       return;
     }
     if (searchInput && searchInput.length > 1) {
+      const isNumeric = /^[0-9]+$/.test(searchInput);
+      setSearchType(isNumeric ? "postalcode" : "address");
       setSearchKeyword(searchInput);
       setStep("search-result");
-      setSelectedAddress(null);
+      setSelectedAddress(void 0);
       setDetailAddressInput("");
       setNextButtonDisabled(true);
     }
@@ -1607,19 +1659,23 @@ function useSearchAddress({ setValue, onClose, isOpen }) {
     }
   };
   const onSelectChange = (e) => {
-    const selectedAddress2 = e.target.value;
-    if (selectedAddress2) {
-      const adr = addressList?.find((addr) => {
-        return addr.address === selectedAddress2;
-      });
-      setSelectedAddress(adr || null);
+    const selected = e.target.value;
+    if (selected) {
+      setSelectedAddress(JSON.parse(selected));
+      setNextButtonDisabled(false);
+    }
+  };
+  const onStandardizationChange = (e) => {
+    const selected = e.target.value;
+    if (selected) {
+      setSelectedStandardizationAddress(JSON.parse(selected));
       setNextButtonDisabled(false);
     }
   };
   const onClear = React.useCallback(() => {
     setSearchKeyword("");
     setSearchInput("");
-    setSelectedAddress(null);
+    setSelectedAddress(void 0);
     setDetailAddressInput("");
     setStep("initial");
   }, []);
@@ -1632,19 +1688,39 @@ function useSearchAddress({ setValue, onClose, isOpen }) {
       setNextButtonDisabled(true);
     }
   };
+  React.useEffect(() => {
+    if (searchType === "address" && addressData?.data?.addressList) {
+      setDisplayList(addressData.data.addressList);
+    } else if (searchType === "postalcode" && postalData?.data?.postalCodeList) {
+      console.log("transformedList", postalData.data.postalCodeList);
+      const transformedList = postalData.data.postalCodeList.map((p) => ({
+        firstPostalCode: p.originalNumber1PostalCode,
+        secondPostalCode: p.originalNumber2PostalCode,
+        roadNameBaseAddress: p.roadNameBaseAddress,
+        roadNameDetailAddress: p.roadNameDetailAddress,
+        landNumberBaseAddress: p.landNumberBaseAddress,
+        landNumberDetailAddress: p.landNumberDetailAddress,
+        mainBuildingName: p.mainBuildingName
+      }));
+      setDisplayList(transformedList);
+    }
+  }, [addressData, postalData, searchType]);
   React.useEffect(() => {
     if (isOpen) {
-      setSelectedAddress(null);
+      setSelectedAddress(void 0);
       setDetailAddressInput("");
       setStep("initial");
       setSearchKeyword("");
     }
   }, [isOpen]);
   return {
+    addressStandardizationList: standardizedData?.data?.addressStandardizationList || [],
+    selectedStandardizationAddress,
+    onStandardizationChange,
     onAddressSearchClear: onClear,
     onAddressSearchNext: onNext,
     addressSearchKeyword: searchKeyword,
-    addressSearchList: addressList,
+    addressSearchList: displayList,
     addressSearchStep: step,
     selectedAddress,
     addressSearchOnValueChange: onSelectChange,
@@ -1659,7 +1735,7 @@ function useSearchAddress({ setValue, onClose, isOpen }) {
   };
 }
 const useAddressComponent = () => {
-  const [fullAddress, setFullAddress] = React.useState(null);
+  const [fullAddress, setFullAddress] = React.useState();
   const { isOpen, closeModal, openModal } = salesFrontendDesignSystem.useModalState();
   const AddressSearchComponent = () => /* @__PURE__ */ jsxRuntime.jsx(AddressComponent, { isOpen, onClose: closeModal, setValue: setFullAddress });
   return {