fix: 전화번호 popup input 예외처리 추가

softeerbootcamp4th · Aug 16, 2024 · 75507cf · 75507cf
1 parent 964223e
commit 75507cf
Showing 1 changed file with 19 additions and 3 deletions.
diff --git a/client/src/components/PopUp/index.tsx b/client/src/components/PopUp/index.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, useCallback, useEffect, useState } from "react";
+import { FormEvent, useCallback, useEffect, useMemo, useState } from "react";
 import { PHONE_NUMBER_FORMAT, formatPhoneNumber } from "@/utils/formatPhoneNumber";
 import CTAButton from "../CTAButton";
 import CheckBox from "../CheckBox";
@@ -43,9 +43,21 @@ export default function PopUp({
         setIsMarketingInfoCheck(isChecked);
     }, []);
 
+    const errorMessage = useMemo(() => {
+        if (phoneNumber.length >= 11 && !phoneNumber.match(PHONE_NUMBER_FORMAT)) {
+            return "전화번호는 010으로 시작해야합니다!";
+        }
+        if (!isMarketingInfoCheck || !isUserInfoCheck) {
+            return "필수 약관에 동의해주세요!";
+        }
+        return "";
+    }, [phoneNumber, isUserInfoCheck, isMarketingInfoCheck]);
+
     const handleConfirm = (e: FormEvent) => {
         e.preventDefault();
-        handlePhoneNumberConfirm(phoneNumber);
+        if (!errorMessage) {
+            handlePhoneNumberConfirm(phoneNumber);
+        }
     };
 
     return (
@@ -84,7 +96,11 @@ export default function PopUp({
                     handleValueChange={handleTextFieldChange}
                 />
 
-                <div className="pt-400" />
+                <div className="pt-200" />
+
+                <p className="h-body-2-medium text-s-red pt-400">{errorMessage}</p>
+
+                <div className="pt-500" />
 
                 <div className="flex flex-col gap-500">
                     <div className="flex gap-500">