sam-react-prod/claudedocs/guides/[IMPL-2026-01-21] utility-input-migration-checklist.md

유틸성 입력 컴포넌트 마이그레이션 체크리스트

작성일: 2026-01-21 상태: ✅ 완료

개요

컴포넌트	용도	대상 파일 수	상태
PhoneInput	전화번호 (자동 하이픈)	12개	✅ 완료
BusinessNumberInput	사업자번호 (XXX-XX-XXXXX)	4개	✅ 완료
PersonalNumberInput	주민번호 (마스킹)	2개	✅ 완료
CardNumberInput	카드번호 (0000-0000-0000-0000)	1개	✅ 완료
AccountNumberInput	계좌번호 (4자리마다 하이픈)	1개	✅ 완료

---

Phase 1: PhoneInput 마이그레이션

완료된 파일

• src/components/clients/ClientRegistration.tsx - phone, mobile, fax, managerTel
• src/components/hr/EmployeeManagement/EmployeeForm.tsx - phone, mobile
• src/components/hr/EmployeeManagement/EmployeeDialog.tsx - phone, mobile
• src/components/orders/OrderRegistration.tsx - contact, receiverContact
• src/components/orders/OrderSalesDetailEdit.tsx - receiverContact
• src/components/quotes/QuoteRegistration.tsx - contact
• src/components/quotes/QuoteRegistrationV2.tsx - contact
• src/components/outbound/ShipmentManagement/ShipmentEdit.tsx - driverContact
• src/components/outbound/ShipmentManagement/ShipmentDetail.tsx - driverContact
• src/components/auth/SignupPage.tsx - phone
• src/app/[locale]/(protected)/sales/order-management-sales/[id]/edit/page.tsx - receiverContact
• src/components/accounting/VendorManagement/VendorDetail.tsx - phone, mobile, fax, managerPhone (이미 적용됨)

마이그레이션 불필요 (표시만/리스트/읽기전용)

• [N/A] src/components/clients/ClientDetail.tsx - 확인 필요
• [N/A] src/components/hr/EmployeeManagement/index.tsx - 리스트 페이지 (입력 없음)
• [N/A] src/components/orders/OrderSalesDetailView.tsx - 표시만 (입력 없음)
• [N/A] src/components/business/construction/estimates/sections/EstimateInfoSection.tsx - 읽기 전용
• [N/A] src/components/settings/CompanyInfoManagement/index.tsx - 전화번호 필드 없음
• [N/A] src/app/[locale]/(protected)/sales/client-management-sales-admin/page.tsx - 리스트 페이지 (입력 없음)
• [N/A] src/app/[locale]/(protected)/sales/order-management-sales/[id]/page.tsx - 상세 조회 (입력 없음)
• [N/A] src/app/[locale]/(protected)/sales/quote-management/[id]/page.tsx - disabled Input (읽기 전용)

---

Phase 2: BusinessNumberInput 마이그레이션

완료된 파일

• src/components/clients/ClientRegistration.tsx - businessNo
• src/components/settings/CompanyInfoManagement/index.tsx - businessNumber
• src/components/auth/SignupPage.tsx - businessNumber
• src/components/accounting/VendorManagement/VendorDetail.tsx - businessNumber (이미 적용됨)

마이그레이션 불필요

• [N/A] src/components/clients/ClientDetail.tsx - 확인 필요
• [N/A] src/components/settings/CompanyInfoManagement/AddCompanyDialog.tsx - 의도적 숫자만 입력 (바로빌 API용)
• [N/A] src/app/[locale]/(protected)/sales/client-management-sales-admin/page.tsx - 리스트 페이지 (입력 없음)

---

Phase 3: PersonalNumberInput 마이그레이션

완료된 파일

• src/components/hr/EmployeeManagement/EmployeeForm.tsx - residentNumber
• src/components/hr/EmployeeManagement/EmployeeDialog.tsx - residentNumber

마이그레이션 불필요

• [N/A] src/components/hr/EmployeeManagement/EmployeeDetail.tsx - 표시만 (입력 없음)

---

변경 패턴

Before (Input)

<Input
  value={phone}
  onChange={(e) => setPhone(e.target.value)}
  placeholder="전화번호"
/>

After (PhoneInput)

<PhoneInput
  value={phone}
  onChange={setPhone}
  placeholder="전화번호"
/>

---

Phase 4: CardNumberInput 마이그레이션

완료된 파일

• src/components/hr/CardManagement/cardConfig.ts - cardNumber (IntegratedDetailTemplate config)

---

Phase 5: AccountNumberInput 마이그레이션

완료된 파일

• src/components/settings/AccountManagement/accountConfig.ts - accountNumber (IntegratedDetailTemplate config)

---

변경 이력

날짜	내용
2026-01-21	체크리스트 생성, Phase 1 시작
2026-01-21	Phase 1, 2, 3 완료
2026-01-21	Phase 4, 5 완료 (CardNumberInput, AccountNumberInput 추가)