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

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

## 개요

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

---

## Phase 1: PhoneInput 마이그레이션

### 완료된 파일

- [x] `src/components/clients/ClientRegistration.tsx` - phone, mobile, fax, managerTel
- [x] `src/components/hr/EmployeeManagement/EmployeeForm.tsx` - phone, mobile
- [x] `src/components/hr/EmployeeManagement/EmployeeDialog.tsx` - phone, mobile
- [x] `src/components/orders/OrderRegistration.tsx` - contact, receiverContact
- [x] `src/components/orders/OrderSalesDetailEdit.tsx` - receiverContact
- [x] `src/components/quotes/QuoteRegistration.tsx` - contact
- [x] `src/components/quotes/QuoteRegistrationV2.tsx` - contact
- [x] `src/components/outbound/ShipmentManagement/ShipmentEdit.tsx` - driverContact
- [x] `src/components/outbound/ShipmentManagement/ShipmentDetail.tsx` - driverContact
- [x] `src/components/auth/SignupPage.tsx` - phone
- [x] `src/app/[locale]/(protected)/sales/order-management-sales/[id]/edit/page.tsx` - receiverContact
- [x] `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 마이그레이션

### 완료된 파일

- [x] `src/components/clients/ClientRegistration.tsx` - businessNo
- [x] `src/components/settings/CompanyInfoManagement/index.tsx` - businessNumber
- [x] `src/components/auth/SignupPage.tsx` - businessNumber
- [x] `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 마이그레이션

### 완료된 파일

- [x] `src/components/hr/EmployeeManagement/EmployeeForm.tsx` - residentNumber
- [x] `src/components/hr/EmployeeManagement/EmployeeDialog.tsx` - residentNumber

### 마이그레이션 불필요

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

---

## 변경 패턴

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

### After (PhoneInput)
```tsx
<PhoneInput
  value={phone}
  onChange={setPhone}
  placeholder="전화번호"
/>
```

---

## Phase 4: CardNumberInput 마이그레이션

### 완료된 파일

- [x] `src/components/hr/CardManagement/cardConfig.ts` - cardNumber (IntegratedDetailTemplate config)

---

## Phase 5: AccountNumberInput 마이그레이션

### 완료된 파일

- [x] `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 추가) |
