[Refactor] KR validation 로직 추가

src/AddOkr/components/addKr/GuideFirstKeyResultCard.tsx

@@ -1,6 +1,8 @@
 import { KR_TEXT_ERR_MSG } from '@constants/addKr/KR_ERR_MSG';
+import { KR_INPUT_DATA } from '@constants/addKr/KR_INPUT_DATA';
 import styled from '@emotion/styled';
 import { AddKrInputMsgWrapper, StAddKrErrMsg } from '@styles/addKr/CommonErrMsgBoxStyle';
+import { validMaxKrInputVal } from '@utils/addKr/validMaxKrInputVal';
 import { Dayjs } from 'dayjs';
 import { useEffect, useState } from 'react';
 
@@ -30,11 +32,14 @@ const GuideFirstKeyResultCard = ({
 }: IGuideFirstKeyResultCard) => {
   const { objStartAt, objExpireAt } = objInfo;
   const { krTitle, krStartAt, krExpireAt } = krListInfo[cardIdx];
+  const { INPUT_TITLE } = KR_INPUT_DATA.INPUT_NAME;
   //캘린더 보여주는 플래그
   const [isShowCalender, setIsShowCalender] = useState(
     krListInfo[cardIdx].krStartAt && krListInfo[cardIdx].krExpireAt ? true : false,
   );
-  const [isMaxTitle, setIsMaxTitle] = useState(false);
+  const [isValidMax, setIsValidMax] = useState<{ [key: string]: boolean }>({
+    [INPUT_TITLE]: false,
+  });
 
   useEffect(() => {
     // kr 선택 예외 처리) 날짜 기간을 입력 했으나, 앞에서 obj 기간을 수정한 경우 obj 기간으로 초기화
@@ -48,16 +53,17 @@ const GuideFirstKeyResultCard = ({
   }, []);
 
   const handleChangeTitleInput = (e: React.ChangeEvent<HTMLInputElement>, maxLength: number) => {
-    if (e.target.value.length === maxLength + 1) {
-      setIsMaxTitle(true);
-    }
+    const { newValue } = validMaxKrInputVal(e, maxLength, isValidMax, setIsValidMax);
+    // if (e.target.value.length === maxLength + 1) {
+    //   setIsMaxTitle(true);
+    // }
 
-    if (isMaxTitle) {
-      e.target.value = e.target.value.slice(0, maxLength);
-      setIsMaxTitle(false);
-    }
+    // if (isMaxTitle) {
+    //   e.target.value = e.target.value.slice(0, maxLength);
+    //   setIsMaxTitle(false);
+    // }
 
-    krListInfo[cardIdx].krTitle = e.target.value;
+    krListInfo[cardIdx].krTitle = newValue;
     setKrListInfo([...krListInfo]);
   };
 
@@ -108,10 +114,10 @@ const GuideFirstKeyResultCard = ({
             value={krTitle}
             placeholder={KR_TITLE_PLACEHOLDER}
             onChange={(e) => handleChangeTitleInput(e, MAX_KR_TITLE)}
-            $isMax={isMaxTitle}
+            $isMax={isValidMax.INPUT_TITLE}
             autoComplete="off"
           />
-          {isMaxTitle && <StAddKrErrMsg>{KR_TEXT_ERR_MSG}</StAddKrErrMsg>}
+          {isValidMax.INPUT_TITLE && <StAddKrErrMsg>{KR_TEXT_ERR_MSG}</StAddKrErrMsg>}
         </div>
       </StKrInputBox>
 

src/common/utils/addKr/validMaxKrInputVal.ts

@@ -16,35 +16,39 @@ export const validMaxKrInputVal = (
   >,
 ) => {
   const targetInputName = e.target.name;
-  let parsedValue = e.target.value.replace(/[^-0-9]/g, '');
+  let limitOnlyNumValue = e.target.value.replace(/[^-0-9]/g, '');
+  let limitOnlyTextValue = e.target.value.replace(
+    /[^-ᄀ-ᄒᆨ-ᇂㄱ-ㅣ가-힣ᅡ-ᅵa-zA-Z !@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]*$/gi,
+    '',
+  );
   let newValue;
 
   switch (targetInputName) {
     case INPUT_TARGET:
-      if (parsedValue.length === maxLength + 1) {
+      if (limitOnlyNumValue.length === maxLength + 1) {
         setIsValidMax({ ...isValidMax, [targetInputName]: true });
       }
 
       if (isValidMax[targetInputName]) {
-        parsedValue = parsedValue.slice(0, maxLength);
+        limitOnlyNumValue = limitOnlyNumValue.slice(0, maxLength);
         setIsValidMax({ ...isValidMax, [targetInputName]: false });
       }
 
-      newValue = parsedValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+      newValue = limitOnlyNumValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
       break;
 
     default:
-      //INPUT_Title, INPUT_METRIC의 경우
-      if (e.target.value.length > maxLength) {
+      //case INPUT_TITLE, INPUT_METRIC
+      if (limitOnlyTextValue.length > maxLength) {
         setIsValidMax({ ...isValidMax, [targetInputName]: true });
       }
 
       if (isValidMax[targetInputName] === true) {
-        e.target.value = e.target.value.slice(0, maxLength);
+        limitOnlyTextValue = limitOnlyTextValue.slice(0, maxLength);
         setIsValidMax({ ...isValidMax, [targetInputName]: false });
       }
 
-      newValue = e.target.value;
+      newValue = limitOnlyTextValue;
 
       break;
   }