text area 한국어와 영어 글자수 하나 더 입력되는 문제

'use client';

import { FormReview, reviewSchema } from '@/constants/zodSchema';
import { zodResolver } from '@hookform/resolvers/zod';
import React, { useEffect } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';

const ReviewForm = () => {
  const [wordCount, setWordCount] = React.useState(0);
  const {
    register,
    handleSubmit,
    setValue,
    formState: { errors },
  } = useForm<FormReview>({
    resolver: zodResolver(reviewSchema),
    mode: 'onChange',
  });

  const onSubmit: SubmitHandler<FormReview> = (data) => console.log(data);

  const maxCharacterCount = 100;

  const handleContentChange = (
    event: React.ChangeEvent<HTMLTextAreaElement>,
  ) => {
    const currentValue = event.target.value;
    setWordCount(currentValue.length);

    // 문자 단위로 길이를 계산하여 maxLength를 적용
    if (currentValue.length > maxCharacterCount) {
      // 100자를 넘어가면 마지막 입력을 자르고 다시 설정
      const slicedValue = currentValue.slice(0, maxCharacterCount);
      setValue('content', slicedValue);
      setWordCount(slicedValue.length);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="w-full relative h-64">
      <textarea
        maxLength={100}
        {...register('content')}
        onChange={handleContentChange}
        className="w-full h-64 break-all text-start resize-y p-3"
      />
      <p className="absolute bottom-3 right-3">{wordCount}/100</p>
      {errors.content && (
        <p className="abolute bottom-0 text-text-primary">
          {errors.content.message}
        </p>
      )}
    </form>
  );
};

export default ReviewForm;

마지막 문자 잘라버리기