Develop -> main : cbt 이전 수정사항 배포

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>
 

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;

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﹒불면증 문제 해결하기',
   },
 ];

src/MainDashBoard/components/editModeModal/AddKrModal.tsx

@@ -165,6 +165,7 @@ const AddKrModal = ({ modalRef, objInfo, krIdx, mutateFcn }: IAddKrModalProps) =
             type="button"
             $isActiveSave={isActiveSave}
             onClick={handleClickConfirmAddBtn}
+            className="addKR_edit"
           >
             추가하기
           </StAddKrConfirmAddBtn>

src/MainDashBoard/components/sideSheet/KRPeriodSelect.tsx

@@ -56,7 +56,7 @@ const KRPeriodSelect = ({
   };
 
   return (
-    <StKRPeriodContainer>
+    <StKRPeriodContainer className="alter_duration">
       <ConfigProvider
         theme={{
           token: {

src/MainDashBoard/components/sideSheet/KrStatus.tsx

@@ -74,7 +74,12 @@ const KrStatus = ({ krStatus, keyResultId }: { krStatus: string; keyResultId: nu
       {isDrop && (
         <StStatusContainer>
           {KR_STATUS.filter(({ label }) => label !== krStatusLabel).map(({ icon, label }) => (
-            <StStateContainer key={label} type="button" onClick={() => handleKrStatus(label)}>
+            <StStateContainer
+              key={label}
+              type="button"
+              onClick={() => handleKrStatus(label)}
+              className="alter_state"
+            >
               <KrStatusItem icon={icon} label={label} />
             </StStateContainer>
           ))}

src/MainDashBoard/components/sideSheet/krCheckIn/KrCheckInInputs.tsx

@@ -178,7 +178,12 @@ export const 진척정도입력하기 = ({
       </article>
       <footer css={enterFooterStyles}>
         <StCnclBtn onClick={onCancel}>취소</StCnclBtn>
-        <StEnterBtn1 isActiveBtn={isActiveBtn} disabled={!isActiveBtn} onClick={submitCheckIn}>
+        <StEnterBtn1
+          isActiveBtn={isActiveBtn}
+          disabled={!isActiveBtn}
+          onClick={submitCheckIn}
+          className="check_record"
+        >
           체크인 완료
         </StEnterBtn1>
       </footer>
@@ -299,7 +304,12 @@ export const KR수정하기 = ({
       </article>
       <footer css={enterFooterStyles}>
         <StCnclBtn onClick={onCancel}>취소</StCnclBtn>
-        <StEnterBtn1 isActiveBtn={isActiveBtn} disabled={!isActiveBtn} onClick={submitCheckIn}>
+        <StEnterBtn1
+          isActiveBtn={isActiveBtn}
+          disabled={!isActiveBtn}
+          onClick={submitCheckIn}
+          className="check_adjust"
+        >
           체크인 완료
         </StEnterBtn1>
       </footer>

src/MainDashBoard/index.tsx

@@ -70,6 +70,8 @@ const MainDashBoard = () => {
    **/
   // step 0 - SELECT METHOD 관련 handler
   const handleClickMethodBtn = (e: React.MouseEvent<HTMLButtonElement>) => {
+    localStorage.setItem('selectedMethod', e.currentTarget.id);
+
     setSelectedMethod(e.currentTarget.id);
     navigate('/add-okr', { state: { selectedMethod: e.currentTarget.id } });
   };

src/Onboarding/components/frame/Frame1.tsx

@@ -39,7 +39,7 @@ const Frame1 = () => {
         ))}
       </StRollingTextBox>
       <StMainText>{CONTENTS[0].title}</StMainText>
-      <StCtaLink to={APPLY_CBT_TALLY_LINK} target="_blank" className="tally-link-button">
+      <StCtaLink to={APPLY_CBT_TALLY_LINK} target="_blank" className="click_service">
         베타테스트 신청
       </StCtaLink>
       <div css={imgContainer}>

src/Onboarding/components/layout/OnboardingFooter.tsx

@@ -15,7 +15,9 @@ const OnboardingFooter = () => {
         height={25}
         loading="lazy"
       />
-      <StFooterText to="./team-moonshot">TEAM moonshot</StFooterText>
+      <StFooterText to="./team-moonshot" className="click_team">
+        TEAM moonshot
+      </StFooterText>
       <StFooterUserInfoTerm
         to="https://moonshot-.notion.site/moonshot-1-0-0cdb3499765349e9aba64474fbba933e"
         target="_blank"

src/Onboarding/components/layout/OnboardingHeader.tsx

@@ -23,7 +23,7 @@ const OnboardingHeader = () => {
             </li>
           ))}
           <li>
-            <StCTALink to={APPLY_CBT_TALLY_LINK} target="_blank" className="tally-link-button">
+            <StCTALink to={APPLY_CBT_TALLY_LINK} target="_blank" className="click_service">
               베타테스트 신청
             </StCTALink>
           </li>

src/PreviewOkr/PreviewOkr.tsx

@@ -28,6 +28,13 @@ interface IPreviewOkrProps {
 
 //TODO: PreviewOkr이 AddOkr에 병합 되었으므로, 폴더 구조 변동 필요
 const PreviewOkr = ({ selectedMethod, setStep, objInfo, krListInfo }: IPreviewOkrProps) => {
+  const selectedMethodId = localStorage.getItem('selectedMethod');
+  const classNameForGA =
+    selectedMethodId === '직접 설정하기'
+      ? 'addOKR_brief'
+      : selectedMethodId === '가이드에 따라 설정하기'
+        ? 'addOKR_guide'
+        : '';
   // const location = useLocation();
   const navigate = useNavigate();
 
@@ -167,7 +174,12 @@ const PreviewOkr = ({ selectedMethod, setStep, objInfo, krListInfo }: IPreviewOk
           <StPrevBtn type="button" onClick={handleClickPrevBtn}>
             이전으로
           </StPrevBtn>
-          <StSaveBtn type="button" onClick={handleClickSaveOkrBtn} $isActiveSave={isActiveSave}>
+          <StSaveBtn
+            type="button"
+            onClick={handleClickSaveOkrBtn}
+            $isActiveSave={isActiveSave}
+            className={classNameForGA}
+          >
             저장하기
           </StSaveBtn>
         </StBtnWrapper>

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;
+};

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}

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>