Merge pull request #100 from code-zero-to-one/QNRR-396-유수아-프로필-수정-모달-placeholder-변경

Qnrr 396 프로필 수정 모달 placeholder 변경

Author: aken-you

src/features/my-page/ui/profile-edit-modal.tsx

@@ -81,9 +81,7 @@ function ProfileEditForm({
   // 이름 유효성 검사: 2~10자, 한글 또는 영문만 허용
   const isNameValid = /^[가-힣a-zA-Z]{2,10}$/.test(profileForm.name);
   // 연락처 유효성 검사: "(2~3자리 지역번호)-(3~4자리 번호)-(4자리 번호)" 형식
-  const isTelValid =
-    profileForm.tel.length === 0 ||
-    /^\d{2,3}-\d{3,4}-\d{4}$/.test(profileForm.tel);
+  const isTelValid = /^\d{2,3}-\d{3,4}-\d{4}$/.test(profileForm.tel);
 
   const queryClient = useQueryClient();
   const { mutateAsync: updateProfile } = useUpdateUserProfileMutation(memberId);
@@ -191,12 +189,13 @@ function ProfileEditForm({
           <FormField
             label="연락처"
             type="text"
-            error={!isTelValid}
+            error={!(isTelValid || profileForm.tel === '')}
             description={
-              isTelValid
+              isTelValid || profileForm.tel === ''
                 ? '스터디 진행을 위한 연락 가능한 정보를 입력해 주세요.'
                 : '연락처는 숫자와 하이픈(-)을 포함한 형식으로 입력해주세요.'
             }
+            placeholder="010-1234-5678"
             value={profileForm.tel}
             onChange={(value) => {
               // 숫자와 하이픈(-)만 입력 허용
@@ -209,6 +208,7 @@ function ProfileEditForm({
             label="Github"
             type="text"
             description="본인의 활동을 확인할 수 있는 GitHub 링크를 입력해 주세요."
+            placeholder="https://github.com/username"
             value={profileForm.githubLink}
             onChange={(value) =>
               setProfileForm({

src/shared/ui/form/form-field.tsx

@@ -14,6 +14,7 @@ type InputType =
 interface FormFieldProps<T> {
   label: string;
   description?: string;
+  placeholder?: string;
   type: InputType;
   maxLength?: number;
   required?: boolean;
@@ -28,6 +29,7 @@ export function FormField<T>({
   label,
   error = false,
   description,
+  placeholder,
   type,
   required = false,
   maxLength = 30,
@@ -42,7 +44,7 @@ export function FormField<T>({
         return (
           <>
             <BaseInput
-              placeholder="입력하세요."
+              placeholder={placeholder || '입력해주세요.'}
               value={value as string}
               color={error ? 'error' : 'default'}
               onChange={(e) => onChange(e.target.value as T)}
@@ -59,7 +61,7 @@ export function FormField<T>({
       case 'textarea':
         return (
           <TextAreaInput
-            placeholder="입력하세요."
+            placeholder={placeholder || '입력해주세요.'}
             guideText={description}
             value={value as string}
             maxLength={maxLength}
@@ -72,7 +74,7 @@ export function FormField<T>({
             <SingleDropdown
               options={options}
               defaultValue={value ? (value as string) : undefined}
-              placeholder="선택해주세요"
+              placeholder={placeholder || '선택해주세요'}
               onChange={(v) => onChange(v as T)}
             />
             {description && (
@@ -89,7 +91,7 @@ export function FormField<T>({
               options={options}
               defaultValue={value as string[]}
               onChange={(v) => onChange(v as T)}
-              placeholder="선택해주세요"
+              placeholder={placeholder || '선택해주세요.'}
             />
             {description && (
               <div className="font-designer-13r text-text-subtlest">