feat: textarea에 최소 입력 글자 수를 만족하지 못한 경우 에러 메시지 표시 기능 구현

woowacourse-teams · Aug 2, 2024 · ecbab13 · ecbab13
1 parent aab0e67
commit ecbab13
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 5 deletions.
diff --git a/frontend/src/pages/ReviewWriting/components/ReviewItem/index.tsx b/frontend/src/pages/ReviewWriting/components/ReviewItem/index.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 import { REVIEW, REVIEW_MESSAGE } from '@/constants/review';
 
 import * as S from './styles';
@@ -9,20 +11,46 @@ interface ReviewItemProps {
 }
 
 const ReviewItem = ({ question, answerValue, handleWrite }: ReviewItemProps) => {
+  const [isError, setIsError] = useState(false);
+
+  const errorMessage = isError ? '최소 20자 이상 작성해 주세요.' : '';
+
   const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const value = e.target.value;
     if (value.length <= REVIEW.answerMaxLength) {
       handleWrite(value);
     }
+
+    if (value.length >= REVIEW.answerMinLength) {
+      setIsError(false);
+    }
+  };
+
+  const handleTextareaBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    if (value.length < REVIEW.answerMinLength) {
+      setIsError(true);
+    } else {
+      setIsError(false);
+    }
   };
 
   return (
     <S.ReviewItem>
       <S.ReviewQuestion>{question}</S.ReviewQuestion>
-      <S.ReviewTextarea placeholder={REVIEW_MESSAGE.answerMaxLength} value={answerValue} onChange={handleInputChange} />
-      <S.ReviewTextLength>
-        {answerValue.length} / {REVIEW.answerMaxLength}
-      </S.ReviewTextLength>
+      <S.ReviewTextarea
+        placeholder={REVIEW_MESSAGE.answerMaxLength}
+        value={answerValue}
+        onChange={handleInputChange}
+        onBlur={handleTextareaBlur}
+        $isError={isError}
+      />
+      <S.Container>
+        <S.ReviewTextareaError>{errorMessage}</S.ReviewTextareaError>
+        <S.ReviewTextLength>
+          {answerValue.length} / {REVIEW.answerMaxLength}
+        </S.ReviewTextLength>
+      </S.Container>
     </S.ReviewItem>
   );
 };

diff --git a/frontend/src/pages/ReviewWriting/components/ReviewItem/styles.ts b/frontend/src/pages/ReviewWriting/components/ReviewItem/styles.ts
@@ -16,7 +16,7 @@ export const ReviewQuestion = styled.div`
   }
 `;
 
-export const ReviewTextarea = styled.textarea`
+export const ReviewTextarea = styled.textarea<{ $isError: boolean }>`
   resize: none;
 
   overflow-y: auto;
@@ -28,15 +28,25 @@ export const ReviewTextarea = styled.textarea`
 
   font-weight: ${({ theme }) => theme.fontWeight.medium};
 
+  border: 0.1rem solid ${({ $isError, theme }) => ($isError ? theme.colors.red : theme.colors.black)};
   border-radius: 0.8rem;
 
   &::placeholder {
     font-weight: ${({ theme }) => theme.fontWeight.medium};
   }
 `;
 
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
 export const ReviewTextLength = styled.p`
   display: flex;
   justify-content: flex-end;
   margin: 0;
 `;
+
+export const ReviewTextareaError = styled.p`
+  color: ${({ theme }) => theme.colors.red};
+`;