diff --git a/src/app/(user-page)/mypage/components/BasicEdit.tsx b/src/app/(user-page)/mypage/components/BasicEdit.tsx index 0dfeae4..e5b0452 100644 --- a/src/app/(user-page)/mypage/components/BasicEdit.tsx +++ b/src/app/(user-page)/mypage/components/BasicEdit.tsx @@ -21,10 +21,13 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => { const [ageLabel, setAgeLabel] = useState('선택 안함'); const [locationLabel, setLocationLabel] = useState('선택 안함'); + // 소개글 글자 수 상태 관리 + const [introLength, setIntroLength] = useState(0); + // 커스텀 훅을 사용하여 프로필 데이터 가져오기 const { data: profileData, isLoading } = useProfileQuery(); - // 프로필 업데이트 뮤테이션 훅 사용 - 이 부분이 누락되어 있었습니다 + // 프로필 업데이트 뮤테이션 훅 사용 const { mutate: updateProfile, isPending: isUpdating } = useUpdateProfileMutation(); @@ -35,6 +38,7 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => { control, setValue, reset, + watch, formState: { errors, isSubmitting }, } = useForm({ defaultValues: { @@ -53,6 +57,12 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => { name: 'gender', }); + // 소개글 감시하여 글자 수 업데이트 + const introValue = watch('intro'); + useEffect(() => { + setIntroLength(introValue?.length || 0); + }, [introValue]); + // 옵션 데이터 - useMemo로 메모이제이션 const positionOptions = useMemo( () => [ @@ -115,6 +125,9 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => { location: profile.location || '', }); + // 소개글 글자 수 초기화 + setIntroLength(profile.intro?.length || 0); + // 드롭다운 라벨 초기 설정 const positionOption = positionOptions.find( (opt) => opt.value === profile.position, @@ -133,6 +146,11 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => { // 폼 제출 처리 const onSubmit = (data: IFormData) => { + // 글자 수 검사 추가 + if (data.intro && data.intro.length > 250) { + return; + } + updateProfile(data, { onSuccess: () => { onEditComplete(); @@ -193,28 +211,43 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => { id="name-input" type="text" {...register('name', { required: true })} - className="typo-button1 h-[50px] rounded-[8px] border-b border-Cgray300 bg-Cgray200 py-2 pl-[16px] text-Cgray700 focus:outline-none" + className="rounded-2 typo-button1 h-[50px] border-b border-Cgray300 bg-Cgray200 px-4 py-2 text-Cgray700 focus:outline-none" /> {errors.name && ( - 이름을 입력해주세요 + 이름을 입력해주세요 )} {/* 자기소개 텍스트 영역 */} -
- +
+
+ +