Setting/#702/amplitude setting

package.json

@@ -14,6 +14,7 @@
     "svgr": "npx @svgr/cli -d src/shared/assets/svg --no-prettier --ignore-existing --typescript --no-dimensions --no-index --jsx-runtime automatic public/svg"
   },
   "dependencies": {
+    "@amplitude/unified": "^1.0.7",
     "@hookform/resolvers": "^5.0.1",
     "@lukemorales/query-key-factory": "^1.3.4",
     "@sentry/react": "^9.39.0",

src/app/Providers.tsx

@@ -6,6 +6,7 @@ import { useEffect } from 'react';
 import { Toaster } from 'react-hot-toast';
 import queryClient from '@/app/queryClient';
 import ModalProvider from '@/common/components/Modal/ModalProvider';
+import { AnalyticsProvider } from '@/lib/analytics';
 
 const setScreenSize = () => {
   // vh 관련
@@ -31,9 +32,12 @@ export default function Providers({ children }: { children: React.ReactNode }) {
   return (
     <QueryClientProvider client={queryClient}>
       <ReactQueryDevtools initialIsOpen={false} />
-      {children}
-      <ModalProvider />
-      <Toaster containerStyle={{ margin: '0 auto' }} />
+      {/* TODO-userproperty: AnalyticsProvider가 useGetMe(React Query)를 사용하므로 QueryClientProvider 안에 위치해야 함 */}
+      <AnalyticsProvider>
+        {children}
+        <ModalProvider />
+        <Toaster containerStyle={{ margin: '0 auto' }} />
+      </AnalyticsProvider>
     </QueryClientProvider>
   );
 }

src/app/auth/apis/queries.ts

@@ -2,20 +2,22 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
 import { kakaoLogin, postLogout, postReissue } from '@/app/auth/apis/ky';
 import type { loginTypes } from '@/app/auth/types/api';
+import { useEventLogger } from '@/lib/analytics';
 import { authKeys } from '@/shared/constants/queryKey';
 import type { ApiError } from '@/shared/types/ApiError';
 import { clearStorage } from '@/shared/utils/handleToken';
 
 export const useLoginMutation = () => {
   const router = useRouter();
+  const { logSubmitEvent } = useEventLogger();
 
   return useMutation({
     mutationFn: ({ redirectUrl, code }: loginTypes) => kakaoLogin(redirectUrl, code),
 
-    onSuccess: ({ data: { isOnboarded, isDeleted } }) => {
-      console.log('성공은 하니??');
+    onSuccess: ({ data: { isOnboarded, isDeleted, role } }) => {
+      logSubmitEvent('login_success', { user_type: role });
+
       if (!isOnboarded || isDeleted) {
-        console.log('여기야?');
         clearStorage();
         router.push(isDeleted ? '/onboarding?isDeleted=true' : '/onboarding');
         return;
@@ -32,9 +34,13 @@ export const useLoginMutation = () => {
 
 // 로그아웃
 export const usePostLogout = () => {
+  const { reset } = useEventLogger();
+
   return useMutation({
     mutationFn: postLogout,
     onSuccess: () => {
+      // TODO-userproperty: 로그아웃 시 Amplitude 유저 식별 초기화
+      reset();
       clearStorage();
       window.location.reload();
     },

src/app/auth/types/api.ts

@@ -6,4 +6,5 @@ export interface loginTypes {
 export interface LoginResponseTypes {
   isOnboarded: boolean;
   isDeleted: boolean;
+  role: 'MEMBER' | 'TEACHER';
 }

src/app/class/[id]/components/ClassButtonWrapper/ClassButtonWrapper.tsx

@@ -7,6 +7,7 @@ import { useHeartToggle } from '@/app/class/[id]/hooks/useHeartToggle';
 import type { LessonDetailResponseTypes } from '@/app/class/[id]/types/api';
 import BlurButton from '@/common/components/BlurButton/BlurButton';
 import BoxButton from '@/common/components/BoxButton/BoxButton';
+import { useEventLogger } from '@/lib/analytics';
 import IcHeartFilledGray07 from '@/shared/assets/svg/IcHeartFilledGray07';
 import IcHeartOutlinedGray07 from '@/shared/assets/svg/IcHeartOutlinedGray07';
 import { WITHDRAW_USER_NAME } from '@/shared/constants/withdrawUser';
@@ -25,8 +26,19 @@ const ClassButtonWrapper = ({ lessonData }: { lessonData: LessonDetailResponseTy
   const finalButtonText = isDeletedTeacher ? '신청불가' : buttonText;
   const finalIsDisabled = isDeletedTeacher || isDisabled || isMyLesson;
 
+  const { logClickEvent } = useEventLogger();
+
   const handleApplyClick = () => {
     if (!isDisabled && id) {
+      logClickEvent('lesson_reservation_start', {
+        lesson_id: Number(id),
+        lesson_name: lessonData.name,
+        teacher_name: lessonData.teacherNickname,
+        teacher_id: lessonData.teacherId,
+        lesson_price: lessonData.price,
+        lesson_session_count: lessonData.lessonRound.lessonRounds.length,
+        lesson_capacity: lessonData.maxReservationCount,
+      });
       router.push(`/class/${id}/register`);
     }
   };

src/app/class/[id]/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { use } from 'react';
+import { use, useEffect } from 'react';
 import { useGetLessonDetail } from '@/app/class/[id]/apis/queries';
 import ClassButtonWrapper from '@/app/class/[id]/components/ClassButtonWrapper/ClassButtonWrapper';
 import ClassInfoWrapper from '@/app/class/[id]/components/ClassInfoWrapper/ClassInfoWrapper';
@@ -10,18 +10,34 @@ import { LOW_SEAT_THRESHOLD } from '@/app/class/[id]/constants';
 import { chipWrapperStyle, topImgStyle, withdrawIconStyle, withdrawImgStyle } from '@/app/class/[id]/index.css';
 import Divider from '@/common/components/Divider/Divider';
 import Text from '@/common/components/Text/Text';
+import { useEventLogger } from '@/lib/analytics';
 import IcCircleCautionFilled from '@/shared/assets/svg/IcCircleCautionFilled';
 
 export default function Page({ params }: { params: Promise<{ id: string }> }) {
+  const { logPageViewEvent } = useEventLogger();
   const { id } = use(params);
   const lessonId = Number(id);
-
   const isValidLessonId = Number.isInteger(lessonId) && lessonId > 0;
 
   const { data, isPending, isError } = useGetLessonDetail(lessonId, {
     enabled: Boolean(isValidLessonId),
   });
 
+  useEffect(() => {
+    if (!data) return;
+    logPageViewEvent('lesson_view', {
+      lesson_id: lessonId,
+      lesson_name: data.name,
+      teacher_name: data.teacherNickname,
+      teacher_id: data.teacherId,
+      lesson_price: data.price,
+      lesson_session_count: data.lessonRound.lessonRounds.length,
+      lesson_capacity: data.maxReservationCount,
+      referrer_page: document.referrer,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
   if (!isValidLessonId) {
     throw new Error('Invalid lesson id');
   }

src/app/class/[id]/register/components/ReservationStep/ReservationStep.tsx

@@ -31,6 +31,7 @@ import Divider from '@/common/components/Divider/Divider';
 import Head from '@/common/components/Head/Head';
 import Text from '@/common/components/Text/Text';
 import { notify } from '@/common/components/Toast/Toast';
+import { useEventLogger } from '@/lib/analytics';
 import IcCheckcircleGray0524 from '@/shared/assets/svg/IcCheckcircleGray0524';
 import IcCheckcircleMain0324 from '@/shared/assets/svg/IcCheckcircleMain0324';
 import { vars } from '@/shared/styles/theme.css';
@@ -44,8 +45,9 @@ const ReservationStep = ({ onNext }: ReservationStepPropTypes) => {
   const [isAllChecked, setIsAllChecked] = useState(false);
   const [agreements, setAgreements] = useState(new Array(AGREEMENT_TERMS.length).fill(false));
 
+  const { logSubmitEvent } = useEventLogger();
   const params = useParams<{ id: string }>();
-  const id = params.id;
+  const id = params?.id;
   const { data, isError, isLoading } = useGetReservation(Number(id));
   const { mutate: postReservation, isPending } = usePostReservation();
 
@@ -58,7 +60,21 @@ const ReservationStep = ({ onNext }: ReservationStepPropTypes) => {
     postReservation(
       { lessonId: id },
       {
-        onSuccess: onNext,
+        onSuccess: (detail) => {
+          logSubmitEvent('lesson_reservation_complete', {
+            lesson_id: Number(id),
+            lesson_name: data.name,
+            teacher_name: data.teacherNickname,
+            // TODO: (reservation API에 없는 필드)
+            teacher_id: 0,
+            lesson_price: data.price,
+            lesson_session_count: data.lessonRound.lessonRounds.length,
+            // TODO: (reservation API에 없는 필드)
+            lesson_capacity: 0,
+            reservation_status: '승인대기',
+          });
+          onNext(detail);
+        },
         onError: (error: ApiError<{ message: string }>) => {
           const message = error?.response?.data?.message || '예약 중 오류가 발생했어요. 다시 시도해주세요.';
           notify({

src/app/class/[id]/register/types/index.ts

@@ -2,11 +2,13 @@ export interface ReservationDetailResponseTypes {
   imageUrl: string;
   name: string;
   teacherNickname: string;
+  teacherId: number;
   price: number;
   detail: string;
   level: string;
   location: string;
   locationDetail: string;
+  maxReservationCount: number;
   lessonRound: {
     lessonRounds: {
       startDateTime: string;

src/app/dancer/[id]/components/DancerInfo/DancerInfo.tsx

@@ -21,12 +21,14 @@ import { expandInstagramUrl, expandYouTubeUrl } from '@/app/dancer/[id]/utils/ur
 import Divider from '@/common/components/Divider/Divider';
 import Head from '@/common/components/Head/Head';
 import Text from '@/common/components/Text/Text';
+import { useEventLogger } from '@/lib/analytics';
 import IcInstagram20 from '@/shared/assets/svg/IcInstagram20';
 import IcYoutube20 from '@/shared/assets/svg/IcYoutube20';
 
-const DancerInfo = ({ dancerData }: { dancerData: DancerDetailResponseTypes }) => {
+const DancerInfo = ({ dancerData, id }: { dancerData: DancerDetailResponseTypes; id: number }) => {
   const { instagram, youtube, detail, nickname, lessons } = dancerData;
 
+  const { logClickEvent } = useEventLogger();
   const router = useRouter();
 
   const handleClassClick = (lessonId: number) => {
@@ -39,7 +41,16 @@ const DancerInfo = ({ dancerData }: { dancerData: DancerDetailResponseTypes }) =
         {(instagram || youtube) && (
           <div className={socialLinksStyle}>
             {instagram && (
-              <a href={expandInstagramUrl(instagram)} target="_blank" rel="noopener noreferrer">
+              <a
+                href={expandInstagramUrl(instagram)}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() =>
+                  logClickEvent('external_link_click', {
+                    teacher_name: nickname,
+                    teacher_id: id,
+                  })
+                }>
                 <div className={socialLinkStyle}>
                   <IcInstagram20 width="2rem" />
                   <Text tag="b2_m" color="gray5" className={linkStyle}>
@@ -50,7 +61,16 @@ const DancerInfo = ({ dancerData }: { dancerData: DancerDetailResponseTypes }) =
             )}
 
             {youtube && (
-              <a href={expandYouTubeUrl(youtube)} target="_blank" rel="noopener noreferrer">
+              <a
+                href={expandYouTubeUrl(youtube)}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() =>
+                  logClickEvent('external_link_click', {
+                    teacher_name: nickname,
+                    teacher_id: id,
+                  })
+                }>
                 <div className={socialLinkStyle}>
                   <IcYoutube20 width="2rem" height="2rem" />
                   <Text tag="b2_m" color="gray5" className={linkStyle}>
@@ -78,9 +98,9 @@ const DancerInfo = ({ dancerData }: { dancerData: DancerDetailResponseTypes }) =
           </Head>
         ) : (
           <div className={rowScrollStyle}>
-            {lessons.map((data, id) => {
-              const isFirst = id === 0;
-              const isLast = id === lessons.length - 1;
+            {lessons.map((data, index) => {
+              const isFirst = index === 0;
+              const isLast = index === lessons.length - 1;
 
               return (
                 <div

src/app/dancer/[id]/page.tsx

@@ -1,16 +1,18 @@
 'use client';
 
-import { use } from 'react';
+import { use, useEffect } from 'react';
 import { useGetDancerDetail } from '@/app/dancer/[id]/apis/queries';
 import DancerInfo from '@/app/dancer/[id]/components/DancerInfo/DancerInfo';
 import TabWrapper from '@/app/dancer/[id]/components/TabWrapper/TabWrapper';
 import { genresWrapperStyle, gradientOverlayStyle, textWrapperStyle, topImgStyle } from '@/app/dancer/[id]/index.css';
 import Head from '@/common/components/Head/Head';
 import Tag from '@/common/components/Tag/Tag';
 import Text from '@/common/components/Text/Text';
+import { useEventLogger } from '@/lib/analytics';
 import { genreMapping } from '@/shared/constants/index';
 
 export default function Page({ params }: { params: Promise<{ id: string }> }) {
+  const { logPageViewEvent } = useEventLogger();
   const { id } = use(params);
   const dancerId = Number(id);
 
@@ -20,6 +22,19 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
     enabled: Boolean(isValidDancerId),
   });
 
+  useEffect(() => {
+    if (!data) return;
+    logPageViewEvent('teacher_view', {
+      teacher_name: data.nickname,
+      teacher_id: dancerId,
+      referrer_page: document.referrer,
+      has_sns: data.instagram || data.youtube ? true : false,
+      has_video: data.videoUrls ? data.videoUrls.length > 0 : false,
+      has_experience: data.experiences ? data.experiences.length > 0 : false,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
   if (!isValidDancerId) {
     throw new Error('Invalid dancer id');
   }
@@ -62,7 +77,7 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
           </Head>
         </div>
       </div>
-      <DancerInfo dancerData={data} />
+      <DancerInfo dancerData={data} id={dancerId} />
       <TabWrapper colorScheme="primary" dancerData={data} />
     </>
   );

src/app/my/(instructor)/create-class/[id]/edit/page.tsx

@@ -35,6 +35,7 @@ import Modal from '@/common/components/Modal/Modal';
 import { notify } from '@/common/components/Toast/Toast';
 import useDebounce from '@/common/hooks/useDebounce';
 import { useModalStore } from '@/common/stores/modal';
+import { useEventLogger } from '@/lib/analytics';
 import { genreEngMapping, levelEngMapping } from '@/shared/constants';
 import { lessonKeys, memberKeys, teacherKeys } from '@/shared/constants/queryKey';
 import useBlockBackWithUnsavedChanges from '@/shared/hooks/useBlockBackWithUnsavedChanges';
@@ -43,9 +44,10 @@ import useImageUploader from '@/shared/hooks/useImageUploader';
 
 export default function Page() {
   const params = useParams<{ id: string }>();
-  const id = params.id;
+  const id = params?.id;
   const router = useRouter();
   const { openModal } = useModalStore();
+  const { logSubmitEvent } = useEventLogger();
 
   const lessonId = Number(id);
   const isValidId = !isNaN(lessonId) && lessonId > 0;
@@ -225,6 +227,11 @@ export default function Page() {
           { lessonId, infoData: updatedInfo },
           {
             onSuccess: () => {
+              logSubmitEvent('lesson_create_done', {
+                lesson_id: lessonId,
+                lesson_name: updatedInfo.name,
+                is_edit: true,
+              });
               queryClient.invalidateQueries({ queryKey: memberKeys.me.queryKey });
               queryClient.invalidateQueries({ queryKey: lessonKeys.list.queryKey });
               queryClient.invalidateQueries({ queryKey: lessonKeys.detail(lessonId).queryKey });

src/app/my/(instructor)/create-class/apis/ky.ts

@@ -8,8 +8,12 @@ export const getLocationList = async (query: string): Promise<LocationsData> =>
   return data;
 };
 
-export const postClassRegisterInfo = async (infoData: ClassRegisterInfoTypes) => {
-  const data = await kyInstance.post(API_URL.LESSONS, { json: infoData }).json();
+export interface ClassRegisterResponseTypes {
+  lessonId: number;
+}
+
+export const postClassRegisterInfo = async (infoData: ClassRegisterInfoTypes): Promise<ClassRegisterResponseTypes> => {
+  const data = await kyInstance.post(API_URL.LESSONS, { json: infoData }).json<ClassRegisterResponseTypes>();
   return data;
 };
 

src/app/my/(instructor)/create-class/page.tsx

@@ -35,6 +35,7 @@ import Modal from '@/common/components/Modal/Modal';
 import { notify } from '@/common/components/Toast/Toast';
 import useDebounce from '@/common/hooks/useDebounce';
 import { useModalStore } from '@/common/stores/modal';
+import { useEventLogger } from '@/lib/analytics';
 import { genreEngMapping, levelEngMapping } from '@/shared/constants';
 import { lessonKeys, memberKeys, teacherKeys } from '@/shared/constants/queryKey';
 import useBlockBackWithUnsavedChanges from '@/shared/hooks/useBlockBackWithUnsavedChanges';
@@ -44,6 +45,7 @@ import useImageUploader from '@/shared/hooks/useImageUploader';
 export default function Page() {
   const router = useRouter();
   const { openModal } = useModalStore();
+  const { logSubmitEvent } = useEventLogger();
 
   // 클래스 등록 페이지는 신규 등록용이므로 lessonId가 없음
   const lessonId = null;
@@ -236,6 +238,12 @@ export default function Page() {
       } else {
         classRegisterMutate(updatedInfo, {
           onSuccess: () => {
+            logSubmitEvent('lesson_create_done', {
+              // TODO: 등록 API 응답에 lesson_id 없음
+              lesson_id: 0,
+              lesson_name: updatedInfo.name,
+              is_edit: false,
+            });
             queryClient.invalidateQueries({ queryKey: memberKeys.me.queryKey });
             queryClient.invalidateQueries({ queryKey: lessonKeys.list.queryKey });
             router.push('/my/create-class/completion');