From e7b26cd6d050b3d44006ae116842bab505e7ae01 Mon Sep 17 00:00:00 2001
From: Eonseok Jeon <121864459+eonseok-jeon@users.noreply.github.com>
Date: Fri, 31 May 2024 22:42:19 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20GA=20tag=20class=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=20(merge=20into=20develop)=20(#302)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: GA 이벤트 탐지를 위한 class name 추가

* chore: class name 수정

* feat: kr/task 삭제에 따른 class name 분기 처리

* feat: 가이드/직접 선택에 따른 class name 분기 처리
---
 .../components/editModeModal/AddKrModal.tsx        |  1 +
 .../components/sideSheet/KRPeriodSelect.tsx        |  2 +-
 .../components/sideSheet/KrStatus.tsx              |  7 ++++++-
 .../sideSheet/krCheckIn/KrCheckInInputs.tsx        | 14 ++++++++++++--
 src/MainDashBoard/index.tsx                        |  2 ++
 src/Onboarding/components/frame/Frame1.tsx         |  2 +-
 .../components/layout/OnboardingFooter.tsx         |  4 +++-
 .../components/layout/OnboardingHeader.tsx         |  2 +-
 src/PreviewOkr/PreviewOkr.tsx                      | 14 +++++++++++++-
 .../Modal/template/ConfirmModalTemplate.tsx        |  7 ++++++-
 10 files changed, 46 insertions(+), 9 deletions(-)

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"
           >
             추가하기
           </StAddKrConfirmAddBtn>
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 (
-    <StKRPeriodContainer>
+    <StKRPeriodContainer className="alter_duration">
       <ConfigProvider
         theme={{
           token: {
diff --git a/src/MainDashBoard/components/sideSheet/KrStatus.tsx b/src/MainDashBoard/components/sideSheet/KrStatus.tsx
index dffd8db5..7a91e880 100644
--- a/src/MainDashBoard/components/sideSheet/KrStatus.tsx
+++ b/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>
           ))}
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 진척정도입력하기 = ({
       </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>
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<HTMLButtonElement>) => {
+    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 = () => {
         ))}
       </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}>
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"
       />
-      <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"
diff --git a/src/Onboarding/components/layout/OnboardingHeader.tsx b/src/Onboarding/components/layout/OnboardingHeader.tsx
index 5bf5a8ef..662da704 100644
--- a/src/Onboarding/components/layout/OnboardingHeader.tsx
+++ b/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>
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
           <StPrevBtn type="button" onClick={handleClickPrevBtn}>
             이전으로
           </StPrevBtn>
-          <StSaveBtn type="button" onClick={handleClickSaveOkrBtn} $isActiveSave={isActiveSave}>
+          <StSaveBtn
+            type="button"
+            onClick={handleClickSaveOkrBtn}
+            $isActiveSave={isActiveSave}
+            className={classNameForGA}
+          >
             저장하기
           </StSaveBtn>
         </StBtnWrapper>
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}
         </StCancelBtn>
 
-        <StConfirmBtn onClick={handleClickConfirm}>{confirmState.text}</StConfirmBtn>
+        <StConfirmBtn onClick={handleClickConfirm} className={classNameForGA}>
+          {confirmState.text}
+        </StConfirmBtn>
       </div>
     </StConfirmModalTemplateWrapper>
   );