Develop -> main : cbt 이전 수정사항 배포 (#312)

* [Feat] GA tag class 추가 (merge into develop) (#302) * feat: GA 이벤트 탐지를 위한 class name 추가 * chore: class name 수정 * feat: kr/task 삭제에 따른 class name 분기 처리 * feat: 가이드/직접 선택에 따른 class name 분기 처리 * social api 개발 내용 반영 (#306) * feat : social get fetcher 생성 * feat : social data type 추가 * fix : social 데이터 목 데이터 -> 실제 데이터 연결로 수정 * fix : 안쓰게 된 mock data 파일 삭제 * chore : 콘솔 삭제 * 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 함수 사용으로 수정 --------- Co-authored-by: Eonseok Jeon <[email protected]>
MOONSHOT-Team · Jun 4, 2024 · a084263 · a084263
1 parent d7b3289
commit a084263
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 384 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/Social/apis/getSocialFetcher.ts b/src/Social/apis/getSocialFetcher.ts
@@ -0,0 +1,7 @@
+import instance from '@apis/instance';
+
+export const getSocialInfo = async (url: string) => {
+  const response = await instance.get(url);
+
+  return response.data.data;
+};
diff --git a/src/Social/components/socialDrawer/SocialDrawer.tsx b/src/Social/components/socialDrawer/SocialDrawer.tsx
@@ -2,10 +2,15 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useState } from 'react';
 
-import { MOCK_SOCIAL_DATA } from '../../constants/MOCK_SOCIAL_DATA';
+import { ISocialDataType } from '../../types/socialDataType';
 import ProfileCard from './ProfileCard';
 
-const SocialDrawer = ({ onHandleCurrentIdx }: { onHandleCurrentIdx: (idx: number) => void }) => {
+interface ISocialDrawerProsp {
+  socialData: ISocialDataType[];
+  onHandleCurrentIdx: (idx: number) => void;
+}
+
+const SocialDrawer = ({ socialData, onHandleCurrentIdx }: ISocialDrawerProsp) => {
   const [currentUserIdx, setCurrentUserIdx] = useState(0);
 
   const handleClickCard = (idx: number) => {
@@ -17,7 +22,7 @@ const SocialDrawer = ({ onHandleCurrentIdx }: { onHandleCurrentIdx: (idx: number
       <div css={{ padding: '2.6rem 2.2rem 0' }}>
         <StDrawerHeader>공유 리스트</StDrawerHeader>
         <ul css={profileContainer}>
-          {MOCK_SOCIAL_DATA.map((data, idx) => (
+          {socialData.map((data, idx) => (
             <ProfileCard
               key={data.userName + idx}
               {...data}

diff --git a/src/Social/components/socialOkrTree/SocialOKRTree.tsx b/src/Social/components/socialOkrTree/SocialOKRTree.tsx
@@ -8,6 +8,7 @@ import { SocialTaskNodes } from './SocialTaskNodes';
 
 const SocialOKRTree = ({ okrTreeData }: { okrTreeData: IOkrTreeDataType }) => {
   const { krList, objTitle } = okrTreeData;
+
   return (
     <article css={okrTreeContainer}>
       <div>