feat : 공백만 입력한 경우에 대한 오류 메세지 추가

woowacourse-teams · Dec 28, 2024 · 311a063 · 311a063
1 parent 8a6315d
commit 311a063
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/frontend/src/pages/HomePage/components/Inputs/ReviewGroupDataField.tsx b/frontend/src/pages/HomePage/components/Inputs/ReviewGroupDataField.tsx
@@ -2,23 +2,27 @@ import { useState } from 'react';
 
 import { Input } from '@/components';
 import { REVIEW_URL_GENERATOR_FORM_VALIDATION } from '@/constants';
-import { isValidReviewGroupDataInput } from '@/pages/HomePage/utils/validateInput';
+import { isNotEmptyInput, isValidReviewGroupDataInput } from '@/pages/HomePage/utils/validateInput';
 
 import { InputValueProps } from './InputField';
 
 import { InputField } from '.';
 
+const EMPTY_ERROR_MESSAGE = '공백이 아닌 내용을 입력해주세요';
+const { min, max } = REVIEW_URL_GENERATOR_FORM_VALIDATION.groupData;
+const WRONG_LENGTH_ERROR_MESSAGE = `${min}자부터 ${max}자까지 입력할 수 있어요`;
 interface ReviewGroupDataFieldProps extends InputValueProps {
   labelText: string;
 }
 const ReviewGroupDataField = ({ id, labelText, value: data, updateValue: updateData }: ReviewGroupDataFieldProps) => {
   const [errorMessage, setErrorMessage] = useState('');
-  const { max, min } = REVIEW_URL_GENERATOR_FORM_VALIDATION.groupData;
 
   const handleBlur = () => {
-    isValidReviewGroupDataInput(data)
-      ? setErrorMessage('')
-      : setErrorMessage(`${min}자부터 ${max}자까지 입력할 수 있어요`);
+    if (isValidReviewGroupDataInput(data)) return setErrorMessage('');
+    // 공백으로만 이루어진 경우
+    if (!isNotEmptyInput(data)) return setErrorMessage(EMPTY_ERROR_MESSAGE);
+    // 글자 수 초과
+    setErrorMessage(WRONG_LENGTH_ERROR_MESSAGE);
   };
 
   return (