Merge pull request #254 from YAPP-Github/refactor/YS-564

모바일 mixpanel 트래킹 이벤트 추가 및 copy 이벤트 세분화

Author: eeeyooon

src/app/post/[postId]/desktop/components/ExperimentPostOutline/ExperimentPostOutline.tsx

@@ -135,6 +135,7 @@ const ExperimentPostOutline = ({ postDetailData, applyMethodData }: ExperimentPo
             onClick={() => {
               trackEvent('ApplyMethod Interaction', {
                 action: 'Click ApplyMethod Modal',
+                device: 'desktop',
               });
               setIsModalOpen(true);
             }}

src/app/post/[postId]/desktop/components/ParticipationGuideModal/ParticipationGuideModal.tsx

@@ -32,13 +32,13 @@ const ParticipationGuideModal = ({
 }: ParticipationGuideModalProps) => {
   const toast = useToast();
 
-  const handleCopyContent = (text: string) => {
+  const handleCopyContent = (text: string, type: 'link' | 'contactInfo') => {
     navigator.clipboard
       .writeText(text)
       .then(() => {
         toast.open({ message: '복사되었어요', duration: 1500 });
         trackEvent('ApplyMethod Interaction', {
-          action: 'Link Copied',
+          action: type === 'link' ? 'Link Copied' : 'ContactInfo Copied',
         });
       })
       .catch(() => {
@@ -108,7 +108,8 @@ const ParticipationGuideModal = ({
                       height={16}
                       cursor="pointer"
                       onClick={() =>
-                        applyMethodData.formUrl && handleCopyContent(applyMethodData.formUrl)
+                        applyMethodData.formUrl &&
+                        handleCopyContent(applyMethodData.formUrl, 'link')
                       }
                     />
                   </div>
@@ -127,7 +128,8 @@ const ParticipationGuideModal = ({
                       height={16}
                       cursor="pointer"
                       onClick={() =>
-                        applyMethodData.phoneNum && handleCopyContent(applyMethodData.phoneNum)
+                        applyMethodData.phoneNum &&
+                        handleCopyContent(applyMethodData.phoneNum, 'contactInfo')
                       }
                     />
                   </div>

src/app/post/[postId]/mobile/components/ExperimentPostMobileContentWrapper/ExperimentPostMobileContentWrapper.tsx

@@ -13,6 +13,7 @@ import ParticipationGuideBottomSheet from '../ParticipationGuideBottomSheet/Part
 
 import Button from '@/components/Button/Button';
 import useOverlay from '@/hooks/useOverlay';
+import { trackEvent } from '@/lib/mixpanelClient';
 
 const ExperimentPostMobileContentWrapper = ({
   postDetailData,
@@ -24,6 +25,11 @@ const ExperimentPostMobileContentWrapper = ({
   const { open, close } = useOverlay();
 
   const handleOpenBottomSheet = () => {
+    trackEvent('ApplyMethod Interaction', {
+      action: 'Click ApplyMethod Modal',
+      device: 'mobile',
+    });
+
     open(
       () => <ParticipationGuideBottomSheet onConfirm={close} applyMethodData={applyMethodData} />,
       {

src/app/post/[postId]/mobile/components/ParticipationGuideBottomSheet/ParticipationGuideBottomSheet.tsx

@@ -20,13 +20,14 @@ const ParticipationGuideBottomSheet = ({
   applyMethodData,
 }: ParticipationGuideBottomSheetProps) => {
   const toast = useToast();
-  const handleCopyContent = (text: string) => {
+  const handleCopyContent = (text: string, type: 'link' | 'contactInfo') => {
     navigator.clipboard
       .writeText(text)
       .then(() => {
         toast.open({ message: '복사되었어요' });
+
         trackEvent('ApplyMethod Interaction', {
-          action: 'Link Copied',
+          action: type === 'link' ? 'Link Copied' : 'ContactInfo Copied',
         });
       })
       .catch(() => {
@@ -79,7 +80,7 @@ const ParticipationGuideBottomSheet = ({
                 cursor="pointer"
                 color={colors.text04}
                 onClick={() =>
-                  applyMethodData.formUrl && handleCopyContent(applyMethodData.formUrl)
+                  applyMethodData.formUrl && handleCopyContent(applyMethodData.formUrl, 'link')
                 }
               />
             </div>
@@ -99,7 +100,8 @@ const ParticipationGuideBottomSheet = ({
                 cursor="pointer"
                 color={colors.text04}
                 onClick={() =>
-                  applyMethodData.phoneNum && handleCopyContent(applyMethodData.phoneNum)
+                  applyMethodData.phoneNum &&
+                  handleCopyContent(applyMethodData.phoneNum, 'contactInfo')
                 }
               />
             </div>