Sp2/refactor -> develop (#311)

* [Refactor] placeholder 라이팅 수정 (#309) * fix : kr objective placeholder 개선 * fix : 가이드에 따라 설정 시 kr 목표 텍스트 변경 * fix : kr 단위 힌트 메시지 수정 * fix : 가이드에 따라 설정 kr placeholder 재수정 * fix : objContent placeholder 수정 * [Refactor] KR validation 로직 추가 (#310) * fix : krValidation 로직에 krTitle, krMetric 문자만 입력 추가 * fix : 가이드에 따라 설정 - 첫번째 kr 카드 krValid 함수 사용으로 수정
MOONSHOT-Team · Jun 3, 2024 · 627b985 · 627b985
1 parent bf7dd64
commit 627b985
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 29 deletions.
diff --git a/src/AddOkr/components/addKr/GuideFirstKeyResultCard.tsx b/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';
 
@@ -19,7 +21,11 @@ interface IGuideFirstKeyResultCard {
   handleClickCloseBtn?: (cardIdx: number) => void;
 }
 
-const KR_TITLE_PLACEHOLDER = 'ex) 개발 관련 아티클 읽기';
+const KR_TITLE_PLACEHOLDER = [
+  'ex) 월간 유지 사용자 수(MAU) 증가',
+  'ex) 다양한 분야의 책 완독',
+  'ex) 현재보다 야근 시간 감소',
+];
 
 const GuideFirstKeyResultCard = ({
   objInfo,
@@ -28,13 +34,17 @@ const GuideFirstKeyResultCard = ({
   cardIdx,
   handleClickCloseBtn,
 }: IGuideFirstKeyResultCard) => {
+  console.log(cardIdx, '???');
   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 +58,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]);
   };
 
@@ -106,12 +117,12 @@ const GuideFirstKeyResultCard = ({
         <div css={AddKrInputMsgWrapper}>
           <StKrSentenceInput
             value={krTitle}
-            placeholder={KR_TITLE_PLACEHOLDER}
+            placeholder={KR_TITLE_PLACEHOLDER[cardIdx]}
             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>
 

diff --git a/src/AddOkr/components/stepLayout/ObjContent.tsx b/src/AddOkr/components/stepLayout/ObjContent.tsx
@@ -8,7 +8,7 @@ import { IAddObjFlowProps } from '../../types/ObjectInfoTypes';
 
 // 기본 placeholder
 const OBJ_CONTENT_PLACEHOLDER =
-  'ex) 앞으로 한 달간 다양한 마케팅을 통해 더 많은 고객을 유치하고 매출을 늘리고 싶기 때문이다.';
+  'ex) 퇴근 후 누워있기만 하지 말고, 내가 원하는 일을 하며 시간을 알차게 쓰고 싶다.';
 
 const ObjContent = ({ objInfo, setObjInfo }: IAddObjFlowProps) => {
   const { objContent } = objInfo;

diff --git a/src/AddOkr/constants/GUIDE_OBJ_TITLE_PLACEHOLDER.ts b/src/AddOkr/constants/GUIDE_OBJ_TITLE_PLACEHOLDER.ts
@@ -2,31 +2,31 @@ export const GUIDE_OBJ_TITLE_PLACEHOLDER = [
   {
     id: '성장',
     placeholder:
-      '성장과 관련된 이런 목표를 세울 수 있어요\n\n﹒자기 성장하기\n﹒다양한 경험을 통해 성장하기\n﹒역량 강화를 위한 지속적인 학습하기',
+      '성장과 관련된 이런 도전적 목표를 세울 수 있어요\n\n﹒영향력 있는 FE 개발자 되기\n﹒성공적인 창업가 되기\n﹒프로덕트 매니저로 성공하기',
   },
   {
     id: '건강',
     placeholder:
-      '건강과 관련된 이런 목표를 세울 수 있어요\n\n﹒건강한 몸 만들기\n﹒건강한 식습관 형성하기\n﹒충분한 수면 확보하기',
+      '건강과 관련된 이런 도전적 목표를 세울 수 있어요\n\n﹒건강한 식습관 유지하기\n﹒건강한 신체 갖기\n﹒수면 질 향상시키기',
   },
   {
     id: '생산성',
     placeholder:
-      '생산성과 관련된 이런 목표를 세울 수 있어요\n\n﹒업무 최적화 하기\n﹒효율적으로 업무 프로세스 개선하기\n﹒작업 흐름 개선하기',
+      '생산성과 관련된 이런 도전적 목표를 세울 수 있어요\n\n﹒효율적으로 회의 진행하기\n﹒프로젝트 관리 능력 향상시키기\n﹒업무시간 효율적으로 사용하기',
   },
   {
     id: '라이프스타일',
     placeholder:
-      '라이프스타일과 관련된 이런 목표를 세울 수 있어요\n\n﹒규칙적인 생활하기\n﹒건강한 습관 형성하기\n﹒긍정적 삶의 변화 가지기',
+      '라이프스타일과 관련된 이런 도전적 목표를 세울 수 있어요\n\n﹒미니멀 라이프스타일 갖기\n﹒피아노 연주 실력 기르기\n﹒정기적으로 사회에 공헌하기',
   },
   {
     id: '경제',
     placeholder:
-      '경제와 관련된 이런 목표를 세울 수 있어요\n\n﹒경제적 독립하기\n﹒재무적인 안정성 달성하기\n﹒투자 및 저축 증진하기\n﹒지출 관리 및 저축 금액 키우기',
+      '경제와 관련된 이런 도전적 목표를 세울 수 있어요\n\n﹒집 대출금 상환하기\n﹒가족용 차량 구매 위해 자금 모으기\n﹒포트폴리오 다각화하기',
   },
   {
     id: '셀프케어',
     placeholder:
-      '셀프케어와 관련된 이런 목표를 세울 수 있어요\n\n﹒정서적 안녕 유지하기\n﹒취미나 휴식으로 스트레스 해소하기\n﹒수면 패턴 개선하기 ',
+      '셀프케어와 관련된 이런 도전적 목표를 세울 수 있어요\n\n﹒스트레스 관리 능력 향상하기\n﹒업무 외의 사소한 삶의 목표 갖기\n﹒불면증 문제 해결하기',
   },
 ];
diff --git a/src/common/constants/addKr/KR_INPUT_DATA.ts b/src/common/constants/addKr/KR_INPUT_DATA.ts
@@ -7,6 +7,6 @@ export const KR_INPUT_DATA = {
   HINT_PLACHOLDER: {
     HINT_TITLE: 'ex) 개발 관련 아티클 읽기',
     HINT_TARGET: 'ex) 10',
-    HINT_METRIC: 'ex) 회',
+    HINT_METRIC: 'ex) 회 / % / kg 등',
   },
 };
diff --git a/src/common/utils/addKr/validMaxKrInputVal.ts b/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;
   }