diff --git a/src/app/employees/add/page.tsx b/src/app/employees/add/page.tsx index b8fe35d..51debe9 100644 --- a/src/app/employees/add/page.tsx +++ b/src/app/employees/add/page.tsx @@ -49,13 +49,28 @@ export default function AddEmployeePage() { resetRegisterSuccess } = useEmployeeStore(); + // 전화번호 포맷팅 함수 + const formatPhoneNumber = (value: string) => { + const numbers = value.replace(/[^\d]/g, ''); + if (numbers.length <= 3) return numbers; + if (numbers.length <= 7) return `${numbers.slice(0, 3)}-${numbers.slice(3)}`; + return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7, 11)}`; + }; + // 입력 필드 변경 처리 const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target; - setFormData((prev) => ({ - ...prev, - [name]: value - })); + if (name === 'phone') { + setFormData((prev) => ({ + ...prev, + [name]: formatPhoneNumber(value) + })); + } else { + setFormData((prev) => ({ + ...prev, + [name]: value + })); + } }; // 뒤로가기 처리 @@ -228,8 +243,9 @@ export default function AddEmployeePage() { name="phone" value={formData.phone} onChange={handleInputChange} + maxLength={13} className={`w-full rounded-lg border ${currentTheme.border} ${currentTheme.inputBg} ${currentTheme.text} px-4 py-2.5 focus:ring-2 focus:ring-blue-500 focus:border-blue-500`} - placeholder="직원의 연락처를 입력하세요" + placeholder="010-1234-5678" disabled={isRegistering} /> diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx index 172347b..1202cfd 100644 --- a/src/app/profile/page.tsx +++ b/src/app/profile/page.tsx @@ -89,7 +89,19 @@ export default function ProfilePage() { // 사용자 정보 핸들러 const handleUserInfoChange = (e: React.ChangeEvent) => { const { name, value } = e.target; - setUserInfo(prev => ({ ...prev, [name]: value })); + if (name === 'phone') { + const numbers = value.replace(/[^\d]/g, ''); + let formattedPhone = numbers; + if (numbers.length > 3) { + formattedPhone = `${numbers.slice(0, 3)}-${numbers.slice(3)}`; + } + if (numbers.length > 7) { + formattedPhone = `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7, 11)}`; + } + setUserInfo(prev => ({ ...prev, [name]: formattedPhone })); + } else { + setUserInfo(prev => ({ ...prev, [name]: value })); + } setChangedFields(prev => ({ ...prev, [name]: true })); }; @@ -393,9 +405,11 @@ export default function ProfilePage() { value={userInfo.phone} onChange={handleUserInfoChange} disabled={!isEditing} + maxLength={13} className={`w-full py-2 pl-10 pr-3 rounded-lg ${ !isEditing ? 'bg-transparent' : currentTheme.inputBg } ${currentTheme.text} border ${currentTheme.border} focus:ring-blue-500 focus:border-blue-500`} + placeholder="010-1234-5678" /> diff --git a/src/components/layout/SimpleLayout.tsx b/src/components/layout/SimpleLayout.tsx deleted file mode 100644 index e2b6f2b..0000000 --- a/src/components/layout/SimpleLayout.tsx +++ /dev/null @@ -1,21 +0,0 @@ -'use client'; - -import { useTheme } from "@/contexts/ThemeContext"; -import Header from "@/components/layout/Header"; - -export default function SimpleLayout({ - children, -}: { - children: React.ReactNode; -}) { - const { currentTheme } = useTheme(); - - return ( -
-
-
- {children} -
-
- ); -} \ No newline at end of file