feat: 커피챗 오픈, 상세 로깅 (#1657)

* feat: 커피챗 오픈, 상세 로깅 * fix: 로깅 타입에러 수정 * feat: 커피챗 타입 변경에 따른 수정 * chore: 스네이크 케이스로 변경
sopt-makers · Nov 5, 2024 · 961d1a9 · 961d1a9
1 parent 0448354
commit 961d1a9
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 18 deletions.
diff --git a/src/components/coffeechat/detail/RegisterCoffeechatButton/index.tsx b/src/components/coffeechat/detail/RegisterCoffeechatButton/index.tsx
@@ -1,24 +1,27 @@
 import { Button } from '@sopt-makers/ui';
 
 import Responsive from '@/components/common/Responsive';
+import { LoggingClick } from '@/components/eventLogger/components/LoggingClick';
 
 interface RegisterCoffeechatButtonProps {
   onClick: () => void;
 }
 
 export default function RegisterCoffeechatButton({ onClick }: RegisterCoffeechatButtonProps) {
   return (
-    <div onClick={onClick}>
-      <Responsive only='desktop'>
-        <Button size='lg' style={{ whiteSpace:'nowrap' }}>
-          커피챗 제안하기
-        </Button>
-      </Responsive>
-      <Responsive only='mobile'>
-        <Button size='md' style={{ width: '100%',whiteSpace:'nowrap'  }}>
-          커피챗 제안하기
-        </Button>
-      </Responsive>
-    </div>
+    <LoggingClick eventKey='sendCoffeechat'>
+      <div onClick={onClick}>
+        <Responsive only='desktop'>
+          <Button size='lg' style={{ whiteSpace: 'nowrap' }}>
+            커피챗 제안하기
+          </Button>
+        </Responsive>
+        <Responsive only='mobile'>
+          <Button size='md' style={{ width: '100%', whiteSpace: 'nowrap' }}>
+            커피챗 제안하기
+          </Button>
+        </Responsive>
+      </div>
+    </LoggingClick>
   );
 }
diff --git a/src/components/coffeechat/detail/SeemoreSelect/index.tsx b/src/components/coffeechat/detail/SeemoreSelect/index.tsx
@@ -13,6 +13,7 @@ import { useState } from 'react';
 
 import { deleteCoffeechat } from '@/api/endpoint/coffeechat/deleteCoffeechat';
 import Responsive from '@/components/common/Responsive';
+import useEventLogger from '@/components/eventLogger/hooks/useEventLogger';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 
 const DropdownPortal = dynamic<DropdownMenu.DropdownMenuPortalProps>(
@@ -53,6 +54,7 @@ export default function SeemoreSelect({ memberId }: SeemoreSelectProp) {
       buttonFunction: () => handleDelete(),
     },
   };
+  const { logSubmitEvent } = useEventLogger();
 
   const { mutate, isPending } = useMutation({
     mutationFn: () => deleteCoffeechat.request(),
@@ -65,9 +67,10 @@ export default function SeemoreSelect({ memberId }: SeemoreSelectProp) {
   const handleDelete = () => {
     mutate(undefined, {
       onSuccess: async () => {
-        // TODO: 연결
-        // logSubmitEvent('');
-        // queryClient.invalidateQueries('')
+        logSubmitEvent('coffeechatDelete');
+        queryClient.invalidateQueries({
+          predicate: (query) => ['getRecentCoffeeChat', 'getMembersCoffeeChat'].includes(query.queryKey[0] as string),
+        });
         toastOpen({ icon: 'success', content: '커피챗이 삭제되었어요. 다음에 또 만나요!' });
         await router.push(playgroundLink.coffeechat());
       },

diff --git a/src/components/coffeechat/detail/ShowCoffeechatToggle/index.tsx b/src/components/coffeechat/detail/ShowCoffeechatToggle/index.tsx
@@ -17,7 +17,7 @@ interface ShowCoffeechatToggleProps {
 }
 
 export default function ShowCoffeechatToggle({ isBlind, memberId }: ShowCoffeechatToggleProps) {
-  const { logSubmitEvent } = useEventLogger();
+  const { logClickEvent } = useEventLogger();
   const queryClient = useQueryClient();
   const router = useRouter();
 
@@ -28,7 +28,11 @@ export default function ShowCoffeechatToggle({ isBlind, memberId }: ShowCoffeech
   const handlChangeIsBlind = () => {
     mutate(!isBlind, {
       onSuccess: async () => {
-        // logSubmitEvent('isBlindCoffeechat');
+        if (isBlind) {
+          logClickEvent('coffeechatToggleOn');
+        } else {
+          logClickEvent('coffeechatToggleOff');
+        }
         queryClient.invalidateQueries({ queryKey: getCoffeechatDetail.cacheKey(memberId) });
         await router.push(playgroundLink.coffeechatDetail(memberId));
       },

diff --git a/src/components/eventLogger/events.ts b/src/components/eventLogger/events.ts
@@ -15,6 +15,21 @@ type CommunityFeedData = {
   images: string[];
 };
 
+type Coffeechat = {
+  career: string;
+  organization: string;
+  job: string;
+  bio: string;
+  section: string[];
+  title: string;
+  topic_tag: string[];
+  topic_detail: string;
+  meeting_type: string;
+  guideline: string;
+  generation: number[];
+  part: string[];
+};
+
 export interface ClickEvents {
   memberCard: MemberCard;
   projectCard: ProjectCard;
@@ -115,6 +130,8 @@ export interface ClickEvents {
 
   // 광고
   ads: { id: number | undefined; bannerId: number; pageUrl: string; timeStamp: string };
+  sendCoffeechat: undefined;
+  senderPhone: undefined;
 }
 
 export interface SubmitEvents {
@@ -151,6 +168,10 @@ export interface SubmitEvents {
   };
   //다짐메시지
   postResolution: undefined;
+
+  openCoffeechat: Coffeechat;
+  coffeechatDelete: undefined;
+  editCoffeechat: undefined;
 }
 
 export interface PageViewEvents {

diff --git a/src/pages/coffeechat/edit/[id].tsx b/src/pages/coffeechat/edit/[id].tsx
@@ -11,6 +11,7 @@ import AuthRequired from '@/components/auth/AuthRequired';
 import CoffeechatLoading from '@/components/coffeechat/Loading';
 import CoffeechatUploadPage from '@/components/coffeechat/page/CoffeechatUploadPage';
 import { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types';
+import useEventLogger from '@/components/eventLogger/hooks/useEventLogger';
 import useStringRouterQuery from '@/hooks/useStringRouterQuery';
 import { setLayout } from '@/utils/layout';
 
@@ -23,6 +24,7 @@ const CoffeechatEdit = () => {
   const { data: openerProfile, isError, error, isPending: isDetailPending } = useGetCoffeechatDetail(memberId);
   const { open } = useDialog();
   const { open: toastOpen } = useToast();
+  const { logSubmitEvent } = useEventLogger();
 
   const { mutate, isPending: isEditPending } = useMutation({
     mutationFn: (reqeustBody: CoffeechatFormContent) => editCoffeechat.request({ ...reqeustBody }),
@@ -50,7 +52,7 @@ const CoffeechatEdit = () => {
             predicate: (query) => ['getRecentCoffeeChat', 'getMembersCoffeeChat'].includes(query.queryKey[0] as string),
           });
           toastOpen({ icon: 'success', content: '커피챗이 오픈됐어요! 경험을 나눠주셔서 감사해요.' });
-
+          logSubmitEvent('editCoffeechat');
           await router.push(playgroundLink.coffeechatDetail(me?.id ?? ''));
         },
         onError: (error) => {

diff --git a/src/pages/coffeechat/upload.tsx b/src/pages/coffeechat/upload.tsx
@@ -2,20 +2,40 @@ import { DialogOptionType, useDialog, useToast } from '@sopt-makers/ui';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import { playgroundLink } from 'playground-common/export';
+import { useMemo } from 'react';
 import { FieldValues } from 'react-hook-form';
 
 import { uploadCoffeechat } from '@/api/endpoint/coffeechat/uploadCoffeechat';
+import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe';
+import { useGetMemberProfileById } from '@/api/endpoint_LEGACY/hooks';
 import AuthRequired from '@/components/auth/AuthRequired';
 import CoffeechatLoading from '@/components/coffeechat/Loading';
 import CoffeechatUploadPage from '@/components/coffeechat/page/CoffeechatUploadPage';
 import { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types';
+import useEventLogger from '@/components/eventLogger/hooks/useEventLogger';
 import { setLayout } from '@/utils/layout';
 
 const CoffeechatUpload = () => {
   const router = useRouter();
   const queryClient = useQueryClient();
   const { open: toastOpen } = useToast();
   const { open } = useDialog();
+  const { logSubmitEvent } = useEventLogger();
+
+  const { data: me } = useGetMemberOfMe();
+  const { data: profile } = useGetMemberProfileById(me?.id ?? undefined);
+
+  const sortedSoptActivities = useMemo(() => {
+    if (!profile?.soptActivities) {
+      return [];
+    }
+    const sorted = [...profile.soptActivities];
+    sorted.sort((a, b) => b.generation - a.generation);
+    return sorted;
+  }, [profile?.soptActivities]);
+
+  const generations = sortedSoptActivities.map((activity) => activity.generation);
+  const part = sortedSoptActivities.map((activity) => activity.part);
 
   const { mutate, isPending } = useMutation({
     mutationFn: (reqeustBody: CoffeechatFormContent) => uploadCoffeechat.request({ ...reqeustBody }),
@@ -42,6 +62,27 @@ const CoffeechatUpload = () => {
           queryClient.invalidateQueries({
             predicate: (query) => ['getRecentCoffeeChat', 'getMembersCoffeeChat'].includes(query.queryKey[0] as string),
           });
+          logSubmitEvent('openCoffeechat', {
+            career: memberInfo.career
+              ? Array.isArray(memberInfo.career)
+                ? memberInfo.career[0]
+                : memberInfo.career
+              : '',
+            organization:
+              profile?.careers && profile?.careers.length > 0
+                ? profile?.careers[0].companyName
+                : profile?.university ?? '',
+            job: profile?.careers && profile?.careers.length > 0 ? profile?.careers[0].title : '',
+            bio: memberInfo.introduction ?? '',
+            section: coffeeChatInfo.sections ?? [],
+            title: coffeeChatInfo.bio ?? '',
+            topic_tag: coffeeChatInfo.topicTypes ?? [],
+            topic_detail: coffeeChatInfo.topic ?? '',
+            guideline: coffeeChatInfo.guideline ?? '',
+            meeting_type: coffeeChatInfo.meetingType ?? '',
+            generation: generations ?? [],
+            part: part ?? [],
+          });
           toastOpen({ icon: 'success', content: '커피챗이 오픈됐어요! 경험을 나눠주셔서 감사해요.' });
           await router.push(playgroundLink.coffeechat());
         },