🐛 fix: 시급 입력 후 유효성 검사 및 시각적 표시 정상화 #127

src/components/Common/Input.tsx

@@ -18,7 +18,7 @@ type InputProps = {
   placeholder: string; // 플레이스홀더 텍스트
   value: string | null; // 입력 필드의 현재 값
   onChange: (value: string) => void; // 입력값 변경 시 호출될 함수
-  onBlur?: (value: string) => void; // 입력 필드에서 포커스가 빠져나갈 때 호출될 함수 (선택적)
+  onBlur?: (value: string) => boolean; // 입력 필드에서 포커스가 빠져나갈 때 호출될 함수 (선택적)
   canDelete: boolean; // 삭제 버튼 표시 여부
   clearInvalid?: () => void; // 토글 시 invalid 상태를 해제할 함수 (선택적)
   isInvalid?: boolean; // 유효하지 않은 입력 상태 여부 (선택적)
@@ -86,8 +86,11 @@ const Input = ({
   };
 
   const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    if (onBlur) onBlur(e.target.value);
-    handleFocus('blur');
+    if (onBlur && onBlur(e.target.value) === true) {
+      setCurrentStatus(INPUT_STATUS.INVALID);
+      return;
+    }
+    setCurrentStatus(INPUT_STATUS.DISABLED);
   };
 
   return (

src/components/Employer/PostCreate/Step1.tsx

@@ -37,8 +37,6 @@ const Step1 = ({
 }) => {
   // 현재 step내에서 입력받는 정보를 따로 관리할 state, 추후 다음 step으로 넘어갈 때 funnel 관리 페이지의 state로 통합된다.
   const [newPostInfo, setNewPostInfo] = useState<JobPostingForm>(postInfo);
-  // 시급이 10030원 미만일 경우 경고 메시지를 표시
-  const [warning, setWarning] = useState(false);
   // 버튼 활성화 여부를 위한 플래그
   const [isInvalid, setIsInvalid] = useState(true);
   // 근무 시간 모달 활성화 여부 위한 플래그
@@ -140,12 +138,8 @@ const Step1 = ({
               })
             }
             onBlur={() =>
-              handleHourlyRateBlur({
-                value: String(newPostInfo.body.hourly_rate),
-                setWarning,
-              })
+              handleHourlyRateBlur(String(newPostInfo.body.hourly_rate))
             }
-            isInvalid={warning}
             canDelete={false}
             isUnit
             unit="원"

src/components/Employer/WriteDocument/EmployerLaborContractForm.tsx

@@ -78,8 +78,6 @@ const EmployerLaborContractForm = ({
 
   const [isLoading, setIsLoading] = useState(false);
   const [isInvalid, setIsInvalid] = useState(false);
-  // 시급 10030원 미만일 경우 경고 표시
-  const [warning, setWarning] = useState(false);
   // 근무시간, 요일 선택 모달 활성화 플래그
   const [isModal, setIsModal] = useState(false);
   // 입력 완료 시 제출
@@ -436,12 +434,8 @@ const EmployerLaborContractForm = ({
                 })
               }
               onBlur={() =>
-                handleHourlyRateBlur({
-                  value: String(newDocumentData.hourly_rate),
-                  setWarning,
-                })
+                handleHourlyRateBlur(String(newDocumentData.hourly_rate))
               }
-              isInvalid={warning}
               canDelete={false}
               isUnit
               unit="원"

src/components/Employer/WriteDocument/EmployerPartTimePermitForm.tsx

@@ -70,8 +70,6 @@ const EmployerPartTimePermitForm = ({
   } = useAddressSearch();
   const [isLoading, setIsLoading] = useState(false);
   const [isInvalid, setIsInvalid] = useState(false);
-  // 시급 10030원 미만일 경우 경고 표시
-  const [warning, setWarning] = useState(false);
   // 입력 완료 시 제출
   const { mutate: putDocument } = usePutPartTimeEmployPermitEmployer(
     Number(id),
@@ -356,12 +354,8 @@ const EmployerPartTimePermitForm = ({
                 })
               }
               onBlur={() =>
-                handleHourlyRateBlur({
-                  value: String(newDocumentData.hourly_rate),
-                  setWarning,
-                })
+                handleHourlyRateBlur(String(newDocumentData.hourly_rate))
               }
-              isInvalid={warning}
               canDelete={false}
               isUnit
               unit="원"

src/utils/document.ts

@@ -178,19 +178,9 @@ export const parseStringToSafeNumber = (value: string): number => {
 };
 
 // 시급 필드 onBlur 이벤트 핸들러
-export const handleHourlyRateBlur = ({
-  value,
-  setWarning,
-}: {
-  value: string;
-  setWarning: React.Dispatch<React.SetStateAction<boolean>>;
-}) => {
+export const handleHourlyRateBlur = (value: string) => {
   const parsedValue = parseStringToSafeNumber(value);
-  if (parsedValue < MINIMUM_HOURLY_RATE) {
-    setWarning(true);
-  } else {
-    setWarning(false);
-  }
+  return parsedValue < MINIMUM_HOURLY_RATE;
 };
 
 // base64 데이터를 디코딩해 이미지 타입을 추론하는 함수