libphonenumber 라이브러리 추가 및 전화번호 입력 필드 구현

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",

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);
+          }}
         />
-      )
+      )}
     },
    
     {

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()