From 0dcbe8549caa13decc9721b0f51490ac273dea19 Mon Sep 17 00:00:00 2001
From: leedj312 <dlehd467@gmail.com>
Date: Tue, 1 Jul 2025 10:28:48 +0900
Subject: [PATCH] =?UTF-8?q?libphonenumber=20=EB=9D=BC=EC=9D=B4=EB=B8=8C?=
 =?UTF-8?q?=EB=9F=AC=EB=A6=AC=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=A0=84?=
 =?UTF-8?q?=ED=99=94=EB=B2=88=ED=98=B8=20=EC=9E=85=EB=A0=A5=20=ED=95=84?=
 =?UTF-8?q?=EB=93=9C=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/business_components/package.json   |  1 +
 .../src/ui/sdmInsertForm/form.tsx             | 30 ++++++++++++++++---
 .../src/ui/sdmInsertForm/index.tsx            |  4 +--
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/packages/common/business_components/package.json b/packages/common/business_components/package.json
index e7aae9fc5..da6f8c344 100644
--- a/packages/common/business_components/package.json
+++ b/packages/common/business_components/package.json
@@ -35,6 +35,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
+    "libphonenumber-js": "^1.12.9",
     "lucide-react": "^0.474.0",
     "path": "^0.12.7",
     "react-day-picker": "^8.10.1",
diff --git a/packages/common/business_components/src/ui/sdmInsertForm/form.tsx b/packages/common/business_components/src/ui/sdmInsertForm/form.tsx
index 6ccaac946..2d7d2bf90 100644
--- a/packages/common/business_components/src/ui/sdmInsertForm/form.tsx
+++ b/packages/common/business_components/src/ui/sdmInsertForm/form.tsx
@@ -3,9 +3,9 @@ import { SelectBox } from "../select";
 import { Input } from "@common/components";
 import { FormUi } from "../form_ui";
 import { useCallback, useEffect, useState } from "react";
+import { AsYouType } from "libphonenumber-js";
 import type { ControllerRenderProps, UseFormReturn } from "react-hook-form";
 import { SdmSearchForm } from "./sdmNameBox";
-import { set } from "date-fns";
 
 // 수요처 정보
 export type DemandCompType = {
@@ -79,6 +79,19 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
   const [updateCoNm, setUpdateNm] = useState<string >('')
 
 
+
+  const formatPhoneNumber = (value:string) => {
+    const input = value;
+    const formatter = new AsYouType("KR");
+    const formatted = formatter.input(input);
+
+    // 저장할 값 처리: 숫자만 추출
+    const digitsOnly = input.replace(/\D/g, "");
+
+    return formatted
+  };
+
+
   const initializeSigunData = useCallback((sidoCd: string) => {
     if (sidoCd === '0') {
       setSigunValue('0');
@@ -325,14 +338,23 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
     {
       name: "telno",
       label: "전화번호",
-      component: (field) => (
+      component: (field) =>
+        
+        {
+          const formattedValue = formatPhoneNumber(field.value??''); // 초기 렌더링 시에도 포맷 적용
+
+        return (
         <Input 
           placeholder="전화번호를 입력하세요" 
           type="text"
           className="!text-xl text-gray-600"
-          {...field}
+          value={formattedValue}
+          onChange={(e) => {
+            const value = e.target.value.replace(/\D/g, ''); // 숫자만 저장
+            field.onChange(value);
+          }}
         />
-      )
+      )}
     },
    
     {
diff --git a/packages/common/business_components/src/ui/sdmInsertForm/index.tsx b/packages/common/business_components/src/ui/sdmInsertForm/index.tsx
index 13e461910..4219602e6 100644
--- a/packages/common/business_components/src/ui/sdmInsertForm/index.tsx
+++ b/packages/common/business_components/src/ui/sdmInsertForm/index.tsx
@@ -41,8 +41,8 @@ const createFormSchema = (isBznmTotNoDisabled: boolean, isDuplicate: boolean ,up
   telno: z.string()
     .min(8, "전화번호는 8자 이상 입력해주세요")
     .max(11, "전화번호는 11자 이내로 입력해주세요")
-    .regex(/^[0-9-]+$/, "전화번호는 숫자와 하이픈(-)만 입력 가능합니다"),
-  rgtr: z.string().optional(),
+    .regex(/^[0-9]+$/, "전화번호는 숫자만 입력 가능합니다"),
+    rgtr: z.string().optional(),
     dmdAplyPswd	: updateList?.dmdInfoPk // 업데이트일경우
     ? z.string().optional() // 패스워드는 선택 사항이며 길이 제한 없음
     : z.string().optional()