Merge branch 'develop' of github.com:MOONSHOT-Team/MOONSHOT-CLIENT in…

…to develop
MOONSHOT-Team · Mar 29, 2024 · e99805f · e99805f
2 parents bc62651 + feaed44
commit e99805f
Show file tree

Hide file tree

Showing 9 changed files with 261 additions and 162 deletions.
diff --git a/src/AddOkr/components/addKr/GuideFirstKeyResultCard.tsx b/src/AddOkr/components/addKr/GuideFirstKeyResultCard.tsx
@@ -1,4 +1,6 @@
+import { KR_TEXT_ERR_MSG } from '@constants/addKr/KR_ERR_MSG';
 import styled from '@emotion/styled';
+import { AddKrInputMsgWrapper, StAddKrErrMsg } from '@styles/addKr/CommonErrMsgBoxStyle';
 import { Dayjs } from 'dayjs';
 import { useEffect, useState } from 'react';
 
@@ -46,15 +48,17 @@ const GuideFirstKeyResultCard = ({
   }, []);
 
   const handleChangeTitleInput = (e: React.ChangeEvent<HTMLInputElement>, maxLength: number) => {
-    if (e.target.value.length > maxLength) {
+    if (e.target.value.length === maxLength + 1) {
       setIsMaxTitle(true);
     }
 
-    if (e.target.value.length <= maxLength) {
+    if (isMaxTitle) {
+      e.target.value = e.target.value.slice(0, maxLength);
       setIsMaxTitle(false);
-      krListInfo[cardIdx].krTitle = e.target.value;
-      setKrListInfo([...krListInfo]);
     }
+
+    krListInfo[cardIdx].krTitle = e.target.value;
+    setKrListInfo([...krListInfo]);
   };
 
   const handleClickKrPeriodBox = () => {
@@ -99,13 +103,16 @@ const GuideFirstKeyResultCard = ({
 
       <StKrInputBox>
         <StKrInputDescription>목표를 달성하기 위해 필요한 성과는?</StKrInputDescription>
-        <StKrSentenceInput
-          value={krTitle}
-          placeholder={KR_TITLE_PLACEHOLDER}
-          onChange={(e) => handleChangeTitleInput(e, MAX_KR_TITLE)}
-          $isMax={isMaxTitle}
-          autoComplete="off"
-        />
+        <div css={AddKrInputMsgWrapper}>
+          <StKrSentenceInput
+            value={krTitle}
+            placeholder={KR_TITLE_PLACEHOLDER}
+            onChange={(e) => handleChangeTitleInput(e, MAX_KR_TITLE)}
+            $isMax={isMaxTitle}
+            autoComplete="off"
+          />
+          {isMaxTitle && <StAddKrErrMsg>{KR_TEXT_ERR_MSG}</StAddKrErrMsg>}
+        </div>
       </StKrInputBox>
 
       <StKrInputBox>

diff --git a/src/AddOkr/components/addKr/GuideSecondKeyResultCard.tsx b/src/AddOkr/components/addKr/GuideSecondKeyResultCard.tsx
@@ -1,5 +1,9 @@
+import { KR_NUM_ERR_MSG, KR_TEXT_ERR_MSG } from '@constants/addKr/KR_ERR_MSG';
+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';
@@ -12,44 +16,33 @@ interface IGuideSecondKeyResultCardProps {
   cardIdx: number;
 }
 
-const HINT_TARGET = 'ex) 10';
-const HINT_METRIC = 'ex) 회';
+const { HINT_TARGET, HINT_METRIC } = KR_INPUT_DATA.HINT_PLACHOLDER;
+const { INPUT_TARGET, INPUT_METRIC } = KR_INPUT_DATA.INPUT_NAME;
 
 const GuideSecondKeyResultCard = ({
   krListInfo,
   setKrListInfo,
   cardIdx,
 }: IGuideSecondKeyResultCardProps) => {
   const { krTitle, krTarget, krMetric } = krListInfo[cardIdx];
-  const [isValidMax, setIsValidMax] = useState({
-    target: false,
-    metric: false,
+  const [isValidMax, setIsValidMax] = useState<{ [key: string]: boolean }>({
+    [INPUT_TARGET]: false,
+    [INPUT_METRIC]: false,
   });
 
-  const handleGuidTargetInput = (e: React.ChangeEvent<HTMLInputElement>, maxLength: number) => {
-    const parsedValue = e.target.value.replace(/[^-0-9]/g, '');
-
-    if (e.target.value.length > maxLength) {
-      setIsValidMax({ ...isValidMax, target: true });
-    }
-
-    if (e.target.value.length <= maxLength) {
-      setIsValidMax({ ...isValidMax, target: false });
-      krListInfo[cardIdx].krTarget = parsedValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-      setKrListInfo([...krListInfo]);
-    }
-  };
-
-  const handleGuideMetricInput = (e: React.ChangeEvent<HTMLInputElement>, maxLength: number) => {
-    if (e.target.value.length > maxLength) {
-      setIsValidMax({ ...isValidMax, metric: true });
-    }
-
-    if (e.target.value.length <= maxLength) {
-      setIsValidMax({ ...isValidMax, metric: false });
-      krListInfo[cardIdx].krMetric = e.target.value;
-      setKrListInfo([...krListInfo]);
-    }
+  const handleGuidTargetMetricInput = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    maxLength: number,
+  ) => {
+    const { newValue, targetInputName } = validMaxKrInputVal(
+      e,
+      maxLength,
+      isValidMax,
+      setIsValidMax,
+    );
+
+    krListInfo[cardIdx] = { ...krListInfo[cardIdx], [targetInputName]: newValue };
+    setKrListInfo([...krListInfo]);
   };
 
   return (
@@ -62,20 +55,29 @@ const GuideSecondKeyResultCard = ({
       <StSecondKrTargetMetricBox>
         <p>이 성과를 측정할 수 있는 수치값과 단위를 입력하세요.</p>
         <div css={TargetMetricInputBox}>
-          <StTargetMetricInput
-            value={krTarget}
-            onChange={(e) => handleGuidTargetInput(e, MAX_KR_TARGET)}
-            placeholder={HINT_TARGET}
-            $isMax={isValidMax.target}
-            autoComplete="off"
-          />
-          <StTargetMetricInput
-            value={krMetric}
-            onChange={(e) => handleGuideMetricInput(e, MAX_KR_METRIC)}
-            placeholder={HINT_METRIC}
-            $isMax={isValidMax.metric}
-            autoComplete="off"
-          />
+          <div css={AddKrInputMsgWrapper}>
+            <StTargetMetricInput
+              value={krTarget}
+              name={INPUT_TARGET}
+              onChange={(e) => handleGuidTargetMetricInput(e, MAX_KR_TARGET)}
+              placeholder={HINT_TARGET}
+              $isMax={isValidMax[INPUT_TARGET]}
+              autoComplete="off"
+            />
+            {isValidMax.krTarget && <StAddKrErrMsg>{KR_NUM_ERR_MSG}</StAddKrErrMsg>}
+          </div>
+
+          <div css={AddKrInputMsgWrapper}>
+            <StTargetMetricInput
+              name={INPUT_METRIC}
+              value={krMetric}
+              onChange={(e) => handleGuidTargetMetricInput(e, MAX_KR_METRIC)}
+              placeholder={HINT_METRIC}
+              $isMax={isValidMax[INPUT_METRIC]}
+              autoComplete="off"
+            />
+            {isValidMax.krMetric && <StAddKrErrMsg>{KR_TEXT_ERR_MSG}</StAddKrErrMsg>}
+          </div>
         </div>
       </StSecondKrTargetMetricBox>
     </StGuideSecondKeyResultCardWrapper>

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';
 
@@ -9,8 +10,10 @@ import { CloseIconStyle, EmptyKeyResultCard } from '../../styles/KeyResultCardSt
 import { IKrListInfoTypes } from '../../types/KrInfoTypes';
 import { IObjInfoTypes } from '../../types/ObjectInfoTypes';
 
+const { INPUT_TITLE, INPUT_TARGET, INPUT_METRIC } = KR_INPUT_DATA.INPUT_NAME;
+
 const KrCardStyle = {
-  gap: '3rem',
+  gap: '3.2rem',
   /* stylelint-disable */
   inputStyle: {
     longWidth: '29.9rem',
@@ -35,10 +38,10 @@ const KeyResultCard = ({
   cardIdx,
   handleClickCloseBtn,
 }: IKeyResultCardProps) => {
-  const [isValidMax, setIsValidMax] = useState({
-    krTitle: false,
-    krTarget: false,
-    krMetric: false,
+  const [isValidMax, setIsValidMax] = useState<{ [key: string]: boolean }>({
+    [INPUT_TITLE]: false,
+    [INPUT_TARGET]: false,
+    [INPUT_METRIC]: false,
   });
   const { krStartAt, krExpireAt } = krListInfo[cardIdx];
   const { objStartAt, objExpireAt } = objInfo;
@@ -74,33 +77,14 @@ const KeyResultCard = ({
   };
 
   const handleChangeBasicKr = (e: React.ChangeEvent<HTMLInputElement>, maxLength: number) => {
-    const parsedValue = e.target.value.replace(/[^-0-9]/g, '');
-
-    switch (e.target.name) {
-      case KR_INPUT_DATA.INPUT_NAME.INPUT_TARGET:
-        if (e.target.value.length > maxLength) {
-          setIsValidMax({ ...isValidMax, [e.target.name]: true });
-        }
-        if (e.target.value.length <= maxLength) {
-          setIsValidMax({ ...isValidMax, [e.target.name]: false });
-          krListInfo[cardIdx].krTarget = parsedValue
-            .toString()
-            .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-          setKrListInfo([...krListInfo]);
-        }
-        break;
-      default:
-        if (e.target.value.length > maxLength) {
-          setIsValidMax({ ...isValidMax, [e.target.name]: true });
-        }
-        if (e.target.value.length <= maxLength) {
-          setIsValidMax({ ...isValidMax, [e.target.name]: false });
-
-          krListInfo[cardIdx] = { ...krListInfo[cardIdx], [e.target.name]: e.target.value };
-          setKrListInfo([...krListInfo]);
-        }
-        break;
-    }
+    const { newValue, targetInputName } = validMaxKrInputVal(
+      e,
+      maxLength,
+      isValidMax,
+      setIsValidMax,
+    );
+    krListInfo[cardIdx] = { ...krListInfo[cardIdx], [targetInputName]: newValue };
+    setKrListInfo([...krListInfo]);
   };
 
   const handleClickSelectDate = (

diff --git a/src/AddOkr/constants/OKR_MAX_LENGTH.ts b/src/AddOkr/constants/OKR_MAX_LENGTH.ts
@@ -4,7 +4,7 @@ export const MAX_OBJ_CONTENT = 100; //목표 다짐 제한 글자 수
 
 // KEYRESULT
 export const MAX_KR_TITLE = 20; // key-result title 최대 글자 수
-export const MAX_KR_TARGET = 6 + 1; // key-result 수치값 최대 자리 수(범위) (6+쉼표 한자리)
+export const MAX_KR_TARGET = 6; // key-result 수치값 최대 자리 수(범위) (6자리 === 최대 999,999까지, 계산시 ,는 자리 수에서 제외)
 export const MAX_KR_METRIC = 4; // key-result 단위 값 최대 글자 수
 
 // TASK