diff --git a/src/AddOkr/components/addKr/GuideFirstKeyResultCard.tsx b/src/AddOkr/components/addKr/GuideFirstKeyResultCard.tsx index 522abda5..4e447766 100644 --- 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, 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 = ({
handleChangeTitleInput(e, MAX_KR_TITLE)} - $isMax={isMaxTitle} + $isMax={isValidMax.INPUT_TITLE} autoComplete="off" /> - {isMaxTitle && {KR_TEXT_ERR_MSG}} + {isValidMax.INPUT_TITLE && {KR_TEXT_ERR_MSG}}
diff --git a/src/AddOkr/components/stepLayout/ObjContent.tsx b/src/AddOkr/components/stepLayout/ObjContent.tsx index 6e03e16b..63a78f19 100644 --- 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 index 3acde828..0cde038c 100644 --- 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/MainDashBoard/components/editModeModal/AddKrModal.tsx b/src/MainDashBoard/components/editModeModal/AddKrModal.tsx index 8a66a988..5b95502e 100644 --- a/src/MainDashBoard/components/editModeModal/AddKrModal.tsx +++ b/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" > 추가하기 diff --git a/src/MainDashBoard/components/sideSheet/KRPeriodSelect.tsx b/src/MainDashBoard/components/sideSheet/KRPeriodSelect.tsx index 0ab82426..4c69c0e3 100644 --- a/src/MainDashBoard/components/sideSheet/KRPeriodSelect.tsx +++ b/src/MainDashBoard/components/sideSheet/KRPeriodSelect.tsx @@ -56,7 +56,7 @@ const KRPeriodSelect = ({ }; return ( - + {KR_STATUS.filter(({ label }) => label !== krStatusLabel).map(({ icon, label }) => ( - handleKrStatus(label)}> + handleKrStatus(label)} + className="alter_state" + > ))} diff --git a/src/MainDashBoard/components/sideSheet/krCheckIn/KrCheckInInputs.tsx b/src/MainDashBoard/components/sideSheet/krCheckIn/KrCheckInInputs.tsx index c6ba189e..84a144b8 100644 --- a/src/MainDashBoard/components/sideSheet/krCheckIn/KrCheckInInputs.tsx +++ b/src/MainDashBoard/components/sideSheet/krCheckIn/KrCheckInInputs.tsx @@ -178,7 +178,12 @@ export const 진척정도입력하기 = ({
취소 - + 체크인 완료
@@ -299,7 +304,12 @@ export const KR수정하기 = ({
취소 - + 체크인 완료
diff --git a/src/MainDashBoard/index.tsx b/src/MainDashBoard/index.tsx index 0f943733..3ee32543 100644 --- a/src/MainDashBoard/index.tsx +++ b/src/MainDashBoard/index.tsx @@ -70,6 +70,8 @@ const MainDashBoard = () => { **/ // step 0 - SELECT METHOD 관련 handler const handleClickMethodBtn = (e: React.MouseEvent) => { + localStorage.setItem('selectedMethod', e.currentTarget.id); + setSelectedMethod(e.currentTarget.id); navigate('/add-okr', { state: { selectedMethod: e.currentTarget.id } }); }; diff --git a/src/Onboarding/components/frame/Frame1.tsx b/src/Onboarding/components/frame/Frame1.tsx index 19fa2fbf..a8d9c60e 100644 --- a/src/Onboarding/components/frame/Frame1.tsx +++ b/src/Onboarding/components/frame/Frame1.tsx @@ -39,7 +39,7 @@ const Frame1 = () => { ))} {CONTENTS[0].title} - + 베타테스트 신청
diff --git a/src/Onboarding/components/layout/OnboardingFooter.tsx b/src/Onboarding/components/layout/OnboardingFooter.tsx index b86847dd..4823e4d5 100644 --- a/src/Onboarding/components/layout/OnboardingFooter.tsx +++ b/src/Onboarding/components/layout/OnboardingFooter.tsx @@ -15,7 +15,9 @@ const OnboardingFooter = () => { height={25} loading="lazy" /> - TEAM moonshot + + TEAM moonshot + { ))}
  • - + 베타테스트 신청
    • diff --git a/src/PreviewOkr/PreviewOkr.tsx b/src/PreviewOkr/PreviewOkr.tsx index 1983d6a9..9dc0b458 100644 --- a/src/PreviewOkr/PreviewOkr.tsx +++ b/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 이전으로 - + 저장하기 diff --git a/src/Social/apis/getSocialFetcher.ts b/src/Social/apis/getSocialFetcher.ts new file mode 100644 index 00000000..3bcd4604 --- /dev/null +++ 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 index 261fd4c6..91a40f29 100644 --- 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
    공유 리스트
      - {MOCK_SOCIAL_DATA.map((data, idx) => ( + {socialData.map((data, idx) => ( { const { krList, objTitle } = okrTreeData; + return (
      diff --git a/src/Social/constants/MOCK_SOCIAL_DATA.ts b/src/Social/constants/MOCK_SOCIAL_DATA.ts deleted file mode 100644 index 9a4201df..00000000 --- a/src/Social/constants/MOCK_SOCIAL_DATA.ts +++ /dev/null @@ -1,348 +0,0 @@ -import { userImg1, userImg2, userImg3, userImg4 } from '../assets/imgs/index'; - -export const MOCK_SOCIAL_DATA = [ - { - //1 - category: '성장', - userName: '실용주의자', - userImg: userImg1, - like: 132, - userIntro: '웹 개발자/TEAM moonshot에서 일하고 있습니다', - okrTreeData: { - objTitle: '영향력있는 개발자 되기', - objCategory: '성장', - objContent: '이루지 못하는 목표는 없다.', - objStartAt: '2024-01-05T00:00:00', - objExpireAt: '2024-01-30T00:00:00', - krList: [ - { - krTitle: '자랑할 수 있는 어플리케이션 만들어보기', - krStartAt: '2024-01-05T00:00:00', - krExpireAt: '2024-01-30T00:00:00', - keyResultId: 0, - krIdx: 0, - krTarget: 1, - krMetric: '회', - taskList: [ - { - taskTitle: '코드 리뷰 피드백을 주 2회 이상 검토하기', - taskIdx: 0, - }, - { - taskTitle: '피드백을 반영하여 코드 개선하기', - taskIdx: 1, - }, - { - taskTitle: '해커톤 참여하기', - taskIdx: 2, - }, - ], - }, - { - krTitle: '개발 관련 아티클 읽기', - krStartAt: '2024-01-05T00:00:00', - krExpireAt: '2024-01-30T00:00:00', - keyResultId: 1, - krIdx: 1, - krTarget: 10, - krMetric: '회', - taskList: [ - { - taskTitle: '아티클 스터디 참여하기', - taskIdx: 0, - }, - { - taskTitle: '주 1회 이상 아티클 읽는 시간 확보하기', - taskIdx: 1, - }, - { - taskTitle: '읽은 아티클에 노션에 요약 정리하기', - taskIdx: 2, - }, - ], - }, - { - krTitle: '코테 문제 풀기', - krStartAt: '2024-01-05T00:00:00', - krExpireAt: '2024-01-30T00:00:00', - keyResultId: 2, - krIdx: 2, - krTarget: 5, - krMetric: '회', - taskList: [ - { - taskTitle: '백준 문제 풀기', - taskIdx: 0, - }, - { - taskTitle: '매일 2시간코딩 연습하기', - taskIdx: 1, - }, - { - taskTitle: '코딩 연습 결과를 기록하고 복습하기', - taskIdx: 2, - }, - ], - }, - ], - }, - }, - //2 - { - category: '경제', - userName: '트렌드세터', - userImg: userImg2, - like: 129, - userIntro: 'ESTJ/목표를 성취하는 과정에서 짜릿함을 느껴요', - okrTreeData: { - objTitle: '전세 자금 마련하기', - objCategory: '경제', - objContent: '할 수 있다면 할 수 있다', - objStartAt: '2024-01-05T00:00:00', - objExpireAt: '2024-01-30T00:00:00', - krList: [ - { - krTitle: '저축 계획 수립하여 저축하기', - krStartAt: '2024-01-05T00:00:00', - krExpireAt: '2024-01-30T00:00:00', - keyResultId: 3, - krIdx: 0, - krTarget: 5000, - krMetric: '원', - taskList: [ - { - taskTitle: '주 1회 20만원씩 저축하기', //값 없다면 빈 string('') 값으로, 형식은 유지 - taskIdx: 0, - }, - { - taskTitle: '월별 지출을 기록하기', - taskIdx: 1, - }, - { - taskTitle: '급여날마다 지출 계획 세우기', - taskIdx: 2, - }, - ], - }, - { - krTitle: '부가적인 수입원 발굴을 위해 부업으로 확보하기', - krStartAt: '2024-01-05T00:00:00', - krExpireAt: '2024-01-30T00:00:00', - keyResultId: 4, - krIdx: 1, - krTarget: 50, - krMetric: '만원', - taskList: [ - { - taskTitle: '부업 모델 선정하기', - taskIdx: 0, - }, - { - taskTitle: '주 10시간 부업에 투자하기', - taskIdx: 1, - }, - { - taskTitle: '부업 시간 계획 세우기', - taskIdx: 2, - }, - ], - }, - { - krTitle: '지출 절감하기', - krStartAt: '2024-01-05T00:00:00', - krExpireAt: '2024-01-30T00:00:00', - keyResultId: 5, - krIdx: 2, - krTarget: 100000, - krMetric: '원', - taskList: [ - { - taskTitle: '불필요한 구독 서비스 줄이기', - taskIdx: 0, - }, - { - taskTitle: '절약할 수 있는 대체 방안 찾아보기', - taskIdx: 1, - }, - { - taskTitle: '절약을 기록하는 가계부 사용하기', - taskIdx: 2, - }, - ], - }, - ], - }, - }, - //3 - { - category: '성장', - userName: '인프피디자이너', - userImg: userImg3, - like: 118, - userIntro: '마케터/트렌드를 읽고 있습니다', - okrTreeData: { - objTitle: '리더십 및 커뮤니케이션 기술 향상', - objCategory: '성장', - objContent: '성장이 뭔지 보여줄게', - objStartAt: '2024-01-05T00:00:00', - objExpireAt: '2024-01-30T00:00:00', - krList: [ - { - krTitle: '리더십 관련 도서 읽기', - krStartAt: '2024-01-05T00:00:00', - krExpireAt: '2024-01-30T00:00:00', - keyResultId: 6, - krIdx: 0, - krTarget: 3, - krMetric: '권', - taskList: [ - { - taskTitle: '매주 한 권의 리더십 관련 도서 읽기', //값 없다면 빈 string('') 값으로, 형식은 유지 - taskIdx: 0, - }, - { - taskTitle: '도서를 읽은 후 요약하기', - taskIdx: 1, - }, - { - taskTitle: '리더십 기술 향상을 위한 액션 아이템 리스트 작성하기', - taskIdx: 2, - }, - ], - }, - { - krTitle: '주변 사람들에게 짧은 발표 연습하기', - krStartAt: '2024-01-05T00:00:00', - krExpireAt: '2024-01-30T00:00:00', - keyResultId: 7, - krIdx: 1, - krTarget: 5, - krMetric: '회', - taskList: [ - { - taskTitle: '매주 3분 내외의 발표 진행하기', - taskIdx: 0, - }, - { - taskTitle: '발표 기술 향상을 위한 개선점 파악하기', - taskIdx: 1, - }, - { - taskTitle: '발표 기회를 찾아 참여하기', - taskIdx: 2, - }, - ], - }, - { - krTitle: '리더 역할 맡기', - krStartAt: '2024-01-05T00:00:00', - krExpireAt: '2024-01-30T00:00:00', - keyResultId: 8, - krIdx: 2, - krTarget: 2, - krMetric: '회', - taskList: [ - { - taskTitle: '팀 내에서 프로젝트 리더로 선정되도록 노력하기', - taskIdx: 0, - }, - { - taskTitle: '프로젝트 일정 관리 효율적으로 수행하기', - taskIdx: 1, - }, - { - taskTitle: '팀 내 소통을 위해 빠르게 연락 확인하기', - taskIdx: 2, - }, - ], - }, - ], - }, - }, - //4 - { - category: '라이프스타일', - userName: '나노플래너', - userImg: userImg4, - like: 70, - userIntro: '매일 긍정적으로 생각해요', - okrTreeData: { - objTitle: '라이프 스타일 개선', - objCategory: '라이프스타일', - objContent: '점점 개선되는 모습을 보고 싶다', - objStartAt: '2024-01-05T00:00:00', - objExpireAt: '2024-01-30T00:00:00', - krList: [ - { - krTitle: '균형 잡힌 식사 섭취', - krStartAt: '2024-01-05T00:00:00', - krExpireAt: '2024-01-30T00:00:00', - keyResultId: 9, - krIdx: 0, - krTarget: 10, - krMetric: '회', - taskList: [ - { - taskTitle: '하루 1끼 식사를 균형 있게 섭취하기', - taskIdx: 0, - }, - { - taskTitle: '불필요한 과자류나 당류 섭취 줄이기', - taskIdx: 1, - }, - { - taskTitle: '식습관을 추적하고 기록하는 앱 사용하기', - taskIdx: 2, - }, - ], - }, - { - krTitle: '명상 또는 마음을 진정시키는 시간 확보하기', - krStartAt: '2024-01-05T00:00:00', - krExpireAt: '2024-01-30T00:00:00', - keyResultId: 10, - krIdx: 1, - krTarget: 10, - krMetric: '시간', - taskList: [ - { - taskTitle: '하루에 30분 이상 산책하기', - taskIdx: 0, - }, - { - taskTitle: '명상 가이드로 스트레스 완화 방법 습득하기', - taskIdx: 1, - }, - { - taskTitle: '스트레스를 유발하는 요소 최소화하기', - taskIdx: 2, - }, - ], - }, - { - krTitle: '운동 하기', - krStartAt: '2024-01-05T00:00:00', - krExpireAt: '2024-01-30T00:00:00', - keyResultId: 11, - krIdx: 2, - krTarget: 15, - krMetric: '회', - taskList: [ - { - taskTitle: '매주 월, 금요일에 운동하기', - taskIdx: 0, - }, - { - taskTitle: '다양한 운동 종목 도전하기', - taskIdx: 1, - }, - { - taskTitle: '운동 스케줄을 친구와 공유하고 격려하기', - taskIdx: 2, - }, - ], - }, - ], - }, - }, -]; diff --git a/src/Social/index.tsx b/src/Social/index.tsx index 34b91b82..a76f7156 100644 --- a/src/Social/index.tsx +++ b/src/Social/index.tsx @@ -1,13 +1,17 @@ +import Loading from '@components/Loading'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; +import useSWR from 'swr'; +import { getSocialInfo } from './apis/getSocialFetcher'; import SocialDrawer from './components/socialDrawer/SocialDrawer'; import SocialOKRTree from './components/socialOkrTree/SocialOKRTree'; -import { MOCK_SOCIAL_DATA } from './constants/MOCK_SOCIAL_DATA'; const Social = () => { + const { data: socialData, isLoading } = useSWR('v1/objective/social', getSocialInfo); + const navigate = useNavigate(); const [currentIdx, setCurrentIdx] = useState(0); @@ -19,11 +23,13 @@ const Social = () => { if (!localStorage.getItem('ACCESS_TOKEN')) navigate('sign-in'); }, []); + if (isLoading) return ; + return (
      - - - {MOCK_SOCIAL_DATA[currentIdx]?.userName}님의 OKR + + + {socialData[currentIdx]?.userName}님의 OKR
      ); }; diff --git a/src/Social/types/socialDataType.ts b/src/Social/types/socialDataType.ts index f6a0e3e6..37ff077a 100644 --- a/src/Social/types/socialDataType.ts +++ b/src/Social/types/socialDataType.ts @@ -8,3 +8,12 @@ export interface IOkrTreeDataType { objExpireAt: string; krList: IKeyResultTypes[]; } + +export interface ISocialDataType { + category: string; + userName: string; + userImg: string; + like: number; + userIntro: string; + okrTreeData: IOkrTreeDataType; +} diff --git a/src/common/components/Modal/template/ConfirmModalTemplate.tsx b/src/common/components/Modal/template/ConfirmModalTemplate.tsx index 2d59a7af..08145662 100644 --- a/src/common/components/Modal/template/ConfirmModalTemplate.tsx +++ b/src/common/components/Modal/template/ConfirmModalTemplate.tsx @@ -17,6 +17,9 @@ const ConfirmModalTemplate = ({ cancelState, confirmState, }: IConfirmModalTemplateProps) => { + const classNameForGA = + title === 'KR 삭제하기' ? 'delKR_edit' : title === 'Task 삭제하기' ? 'deltask_edit' : ''; + // cancel function const handleClickCancel = () => { cancelState.onClick && cancelState.onClick(); @@ -41,7 +44,9 @@ const ConfirmModalTemplate = ({ {cancelState.text} - {confirmState.text} + + {confirmState.text} +
      ); diff --git a/src/common/constants/addKr/KR_INPUT_DATA.ts b/src/common/constants/addKr/KR_INPUT_DATA.ts index 9d4bedb6..0c9f968d 100644 --- 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 index 08a6ce4c..871209df 100644 --- 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; }