[FE] refactor: LongReviewItem 컴포넌트 구조 수정

frontend/src/components/common/LongReviewItem/index.tsx

@@ -1,50 +1,59 @@
 import React, { TextareaHTMLAttributes } from 'react';
 
-import useLongReviewItem from '@/hooks/useLongReviewItem';
+import useLongReviewValidate from '@/hooks/useLongReviewValidate';
 
 import * as S from './styles';
 
-interface LongReviewItemProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+interface ReviewQuestion {
+  order?: number;
+  content: string;
+}
+interface ReviewAnswer {
   minLength: number;
   maxLength: number;
-  initialValue?: string;
   handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  handleErrorChange: (isError: boolean) => void;
+}
+interface LongReviewItemProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  question: ReviewQuestion;
+  answer: ReviewAnswer;
 }
 
-const LongReviewItem = ({
-  minLength,
-  maxLength,
-  initialValue = '',
-  handleTextareaChange,
-  style,
-  ...rest
-}: LongReviewItemProps) => {
-  const { value, textLength, isError, errorMessage, handleChange, handleBlur } = useLongReviewItem({
-    minLength,
-    maxLength,
-    initialValue,
+const LongReviewItem = ({ question, answer, style, ...rest }: LongReviewItemProps) => {
+  const { value, isError, errorMessage, handleChangeValidation, handleBlurValidation } = useLongReviewValidate({
+    minLength: answer.minLength,
+    maxLength: answer.maxLength,
+    handleErrorChange: answer.handleErrorChange,
   });
 
-  const handleWriteTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    handleChange(e);
-    handleTextareaChange(e);
+  const handleWrite = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    handleChangeValidation(e);
+    answer.handleTextareaChange(e);
   };
 
+  const textLength = `${value.length} / ${answer.maxLength}`;
+
   return (
-    <S.TextareaContainer>
-      <S.Textarea
-        value={value}
-        $isError={isError}
-        $style={style}
-        onChange={handleWriteTextarea}
-        onBlur={handleBlur}
-        {...rest}
-      />
-      <S.TextareaInfoContainer>
-        <S.ReviewTextareaError>{isError && errorMessage}</S.ReviewTextareaError>
-        <S.ReviewTextLength>{textLength}</S.ReviewTextLength>
-      </S.TextareaInfoContainer>
-    </S.TextareaContainer>
+    <S.LongReviewContainer>
+      <S.Question>
+        {question.order && question.order + '. '}
+        {question.content}
+      </S.Question>
+      <S.TextareaContainer>
+        <S.Textarea
+          value={value}
+          $isError={isError}
+          $style={style}
+          onChange={handleWrite}
+          onBlur={handleBlurValidation}
+          {...rest}
+        />
+        <S.TextareaInfoContainer>
+          <S.ReviewTextareaError>{isError && errorMessage}</S.ReviewTextareaError>
+          <S.ReviewTextLength>{textLength}</S.ReviewTextLength>
+        </S.TextareaInfoContainer>
+      </S.TextareaContainer>
+    </S.LongReviewContainer>
   );
 };
 

frontend/src/components/common/LongReviewItem/styles.ts

@@ -1,5 +1,15 @@
 import styled from '@emotion/styled';
 
+export const LongReviewContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Question = styled.p`
+  margin-bottom: 0.8rem;
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+`;
+
 export const TextareaContainer = styled.div`
   display: flex;
   flex-direction: column;

frontend/src/hooks/useLongReviewValidate.ts

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react';
+
+interface UseLongReviewItemProps {
+  minLength: number;
+  maxLength: number;
+  initialValue?: string;
+  handleErrorChange: (isError: boolean) => void;
+}
+
+const useLongReviewValidate = ({
+  minLength,
+  maxLength,
+  initialValue = '',
+  handleErrorChange,
+}: UseLongReviewItemProps) => {
+  const [value, setValue] = useState(initialValue);
+  const [isError, setIsError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const REACHED_MAX_LENGTH = '더 이상 입력할 수 없어요.';
+  const UNDER_MIN_LENGTH = `최소 ${minLength}자 이상 작성해 주세요.`;
+
+  useEffect(() => {
+    handleErrorChange(isError);
+  }, [isError]);
+
+  const handleChangeValidation = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    if (value.length >= minLength) setIsError(false);
+
+    if (value.length <= maxLength) setValue(value);
+    else {
+      setIsError(true);
+      setErrorMessage(REACHED_MAX_LENGTH);
+    }
+  };
+
+  const handleBlurValidation = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    if (value.length < minLength) {
+      setIsError(true);
+      setErrorMessage(UNDER_MIN_LENGTH);
+    } else {
+      setIsError(false);
+      setErrorMessage('');
+    }
+  };
+
+  return {
+    value,
+    isError,
+    errorMessage,
+    handleChangeValidation,
+    handleBlurValidation,
+  };
+};
+
+export default useLongReviewValidate;