fix : 공통된 max 검증 로직 공통 핸들러로 분리

MOONSHOT-Team · Mar 27, 2024 · c1541ae · c1541ae
1 parent 25a68db
commit c1541ae
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 98 deletions.
diff --git a/src/AddOkr/components/addKr/GuideSecondKeyResultCard.tsx b/src/AddOkr/components/addKr/GuideSecondKeyResultCard.tsx
@@ -3,6 +3,7 @@ import { KR_INPUT_DATA } from '@constants/addKr/KR_INPUT_DATA';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { AddKrInputMsgWrapper, StAddKrErrMsg } from '@styles/addKr/CommonErrMsgBoxStyle';
+import { validMaxKrInputVal } from '@utils/addKr/validMaxKrInputVal';
 import { useState } from 'react';
 
 import { MAX_KR_METRIC, MAX_KR_TARGET } from '../../constants/OKR_MAX_LENGTH';
@@ -33,39 +34,12 @@ const GuideSecondKeyResultCard = ({
     e: React.ChangeEvent<HTMLInputElement>,
     maxLength: number,
   ) => {
-    const targetInputName = e.target.name;
-    let parsedValue = e.target.value.replace(/[^-0-9]/g, '');
-    let newValue;
-
-    switch (targetInputName) {
-      case INPUT_TARGET:
-        if (parsedValue.length === maxLength + 1) {
-          setIsValidMax({ ...isValidMax, [targetInputName]: true });
-        }
-
-        if (isValidMax[targetInputName]) {
-          parsedValue = parsedValue.slice(0, maxLength);
-          setIsValidMax({ ...isValidMax, [targetInputName]: false });
-        }
-
-        newValue = parsedValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-        break;
-
-      default:
-        //INPUT_METRIC의 경우
-        if (e.target.value.length > maxLength) {
-          setIsValidMax({ ...isValidMax, [targetInputName]: true });
-        }
-
-        if (isValidMax[targetInputName] === true) {
-          e.target.value = e.target.value.slice(0, maxLength);
-          setIsValidMax({ ...isValidMax, [targetInputName]: false });
-        }
-
-        newValue = e.target.value;
-
-        break;
-    }
+    const { newValue, targetInputName } = validMaxKrInputVal(
+      e,
+      maxLength,
+      isValidMax,
+      setIsValidMax,
+    );
 
     krListInfo[cardIdx] = { ...krListInfo[cardIdx], [targetInputName]: newValue };
     setKrListInfo([...krListInfo]);

diff --git a/src/AddOkr/components/addKr/KeyResultCard.tsx b/src/AddOkr/components/addKr/KeyResultCard.tsx
@@ -1,6 +1,7 @@
 import AddKrForm from '@components/addKr/AddKrForm';
 import { KR_INPUT_DATA } from '@constants/addKr/KR_INPUT_DATA';
 import styled from '@emotion/styled';
+import { validMaxKrInputVal } from '@utils/addKr/validMaxKrInputVal';
 import { Dayjs } from 'dayjs';
 import React, { useEffect, useState } from 'react';
 
@@ -76,39 +77,12 @@ const KeyResultCard = ({
   };
 
   const handleChangeBasicKr = (e: React.ChangeEvent<HTMLInputElement>, maxLength: number) => {
-    const targetInputName = e.target.name;
-    let parsedValue = e.target.value.replace(/[^-0-9]/g, '');
-    let newValue;
-
-    switch (targetInputName) {
-      case INPUT_TARGET:
-        if (parsedValue.length === maxLength + 1) {
-          setIsValidMax({ ...isValidMax, [targetInputName]: true });
-        }
-
-        if (isValidMax[targetInputName]) {
-          parsedValue = parsedValue.slice(0, maxLength);
-          setIsValidMax({ ...isValidMax, [targetInputName]: false });
-        }
-
-        newValue = parsedValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-        break;
-
-      default:
-        if (e.target.value.length > maxLength) {
-          setIsValidMax({ ...isValidMax, [targetInputName]: true });
-        }
-
-        if (isValidMax[targetInputName] === true) {
-          e.target.value = e.target.value.slice(0, maxLength);
-          setIsValidMax({ ...isValidMax, [targetInputName]: false });
-        }
-
-        newValue = e.target.value;
-
-        break;
-    }
-
+    const { newValue, targetInputName } = validMaxKrInputVal(
+      e,
+      maxLength,
+      isValidMax,
+      setIsValidMax,
+    );
     krListInfo[cardIdx] = { ...krListInfo[cardIdx], [targetInputName]: newValue };
     setKrListInfo([...krListInfo]);
   };

diff --git a/src/MainDashBoard/components/editModeModal/AddKrModal.tsx b/src/MainDashBoard/components/editModeModal/AddKrModal.tsx
@@ -3,6 +3,7 @@ import Modal from '@components/Modal';
 import { KR_INPUT_DATA } from '@constants/addKr/KR_INPUT_DATA';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { validMaxKrInputVal } from '@utils/addKr/validMaxKrInputVal';
 import { Dayjs } from 'dayjs';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -49,38 +50,12 @@ const AddKrModal = ({ modalRef, objInfo, krIdx, mutateFcn }: IAddKrModalProps) =
   const [isShowCalender, setIsShowCalender] = useState(false);
 
   const handleChangeKrValues = (e: React.ChangeEvent<HTMLInputElement>, maxLength: number) => {
-    const targetInputName = e.target.name;
-    let parsedValue = e.target.value.replace(/[^-0-9]/g, '');
-    let newValue;
-
-    switch (targetInputName) {
-      case INPUT_TARGET:
-        if (parsedValue.length === maxLength + 1) {
-          setIsValidMax({ ...isValidMax, [targetInputName]: true });
-        }
-
-        if (isValidMax[targetInputName]) {
-          parsedValue = parsedValue.slice(0, maxLength);
-          setIsValidMax({ ...isValidMax, [targetInputName]: false });
-        }
-
-        newValue = parsedValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-        break;
-
-      default:
-        if (e.target.value.length > maxLength) {
-          setIsValidMax({ ...isValidMax, [targetInputName]: true });
-        }
-
-        if (isValidMax[targetInputName] === true) {
-          e.target.value = e.target.value.slice(0, maxLength);
-          setIsValidMax({ ...isValidMax, [targetInputName]: false });
-        }
-
-        newValue = e.target.value;
-
-        break;
-    }
+    const { newValue, targetInputName } = validMaxKrInputVal(
+      e,
+      maxLength,
+      isValidMax,
+      setIsValidMax,
+    );
 
     setNewKrInfo({ ...newKrInfo, [targetInputName]: newValue });
   };

diff --git a/src/common/utils/addKr/validMaxKrInputVal.ts b/src/common/utils/addKr/validMaxKrInputVal.ts
@@ -0,0 +1,53 @@
+import { KR_INPUT_DATA } from '@constants/addKr/KR_INPUT_DATA';
+import React, { Dispatch, SetStateAction } from 'react';
+
+const { INPUT_TARGET } = KR_INPUT_DATA.INPUT_NAME;
+
+export const validMaxKrInputVal = (
+  e: React.ChangeEvent<HTMLInputElement>,
+  maxLength: number,
+  isValidMax: {
+    [key: string]: boolean;
+  },
+  setIsValidMax: Dispatch<
+    SetStateAction<{
+      [key: string]: boolean;
+    }>
+  >,
+) => {
+  const targetInputName = e.target.name;
+  let parsedValue = e.target.value.replace(/[^-0-9]/g, '');
+  let newValue;
+
+  switch (targetInputName) {
+    case INPUT_TARGET:
+      if (parsedValue.length === maxLength + 1) {
+        setIsValidMax({ ...isValidMax, [targetInputName]: true });
+      }
+
+      if (isValidMax[targetInputName]) {
+        parsedValue = parsedValue.slice(0, maxLength);
+        setIsValidMax({ ...isValidMax, [targetInputName]: false });
+      }
+
+      newValue = parsedValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+      break;
+
+    default:
+      //INPUT_Title, INPUT_METRIC의 경우
+      if (e.target.value.length > maxLength) {
+        setIsValidMax({ ...isValidMax, [targetInputName]: true });
+      }
+
+      if (isValidMax[targetInputName] === true) {
+        e.target.value = e.target.value.slice(0, maxLength);
+        setIsValidMax({ ...isValidMax, [targetInputName]: false });
+      }
+
+      newValue = e.target.value;
+
+      break;
+  }
+
+  return { newValue: newValue, targetInputName: targetInputName };
+};