✨ feat: LogClickEvent 적용

depromeet · Feb 24, 2024 · 3c30ec5 · 3c30ec5
1 parent 84fbadd
commit 3c30ec5
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 63 deletions.
diff --git a/src/app/toks-main/page.tsx b/src/app/toks-main/page.tsx
@@ -33,9 +33,11 @@ function ToksMainPage() {
         />
       )}
       <CardList />
+
       <FloatingButton
         onClick={() => setIsOpenFloatingButtonBottomSheet(true)}
       />
+
       <MainPageBottomSheet
         onClose={() => setIsOpenFloatingButtonBottomSheet(false)}
         isShow={isOpenFloatingButtonBottomSheet}

diff --git a/src/common/components/Appbar/index.tsx b/src/common/components/Appbar/index.tsx
@@ -9,6 +9,7 @@ import { GOOGLE_FORM_URL, ICON_URL, LOGIN_URL } from '@/common/constants';
 import { useAuth } from '@/common/hooks';
 
 import questionSvg from '../../../../public/img/icon/question.svg';
+import { LogClickEvent } from '../LogClickEvent';
 import { SSRSuspense } from '../SSRSuspense';
 import { Text } from '../Text';
 
@@ -62,7 +63,13 @@ export const Appbar = () => {
             )}
           </button>
         </div>
-        <QuizCategory />
+        <LogClickEvent
+          eventPath={['toks', '메인페이지', '카테고리', '카테고리']}
+        >
+          <span>
+            <QuizCategory />
+          </span>
+        </LogClickEvent>
       </nav>
     </SSRSuspense>
   );

diff --git a/src/common/components/CarouselCard.tsx b/src/common/components/CarouselCard.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import { ICON_URL } from '@/common/constants';
 
 import { Badge } from './Badge';
+import { LogClickEvent } from './LogClickEvent';
 import { QuizCardProps } from './QuizCard/types';
 import { Text } from './Text';
 
@@ -40,49 +41,57 @@ export const CarouselCard = ({
   };
 
   return (
-    <div
-      role="button"
-      onClick={handleCardClick}
-      className={clsx(
-        'flex min-w-246px max-w-320px justify-between gap-16px rounded-12px bg-gray-90 p-20px'
-      )}
-    >
-      <div className="flex w-full flex-1 flex-col">
-        <div className="flex items-center gap-[4px]">
-          <Badge label={quizType === 'default' ? 'AB' : 'OX'} />
-          <Text typo="captionBold" color="gray60">
-            {categoryTitle}
-          </Text>
-        </div>
-        <div className="inline-flex flex-1 -translate-y-0.5 items-center pt-8px">
-          <Text className="line-clamp-3" typo="subheadingBold" color="gray10">
-            {quizDescription}
-          </Text>
-        </div>
-      </div>
-      <div className="flex h-100px w-100px flex-col justify-between overflow-hidden rounded-8px">
-        {isOX && images?.length === 0 ? (
-          <OxQuizThumbnail />
-        ) : (
-          images?.map((src, index) => (
-            <div
-              className={images.length > 1 ? 'h-1/2' : 'h-full'}
-              key={`${src}-${index}`}
-            >
-              <img
-                className="h-full w-full"
-                src={src}
-                alt={src}
-                loading="lazy"
-                style={{
-                  objectFit: 'cover',
-                  objectPosition: 'center',
-                }}
-              />
+    <LogClickEvent eventPath={['toks', '퀴즈페이지', '더보기퀴즈', '퀴즈카드']}>
+      <div>
+        <div
+          role="button"
+          onClick={handleCardClick}
+          className={clsx(
+            'flex min-w-246px max-w-320px justify-between gap-16px rounded-12px bg-gray-90 p-20px'
+          )}
+        >
+          <div className="flex w-full flex-1 flex-col">
+            <div className="flex items-center gap-[4px]">
+              <Badge label={quizType === 'default' ? 'AB' : 'OX'} />
+              <Text typo="captionBold" color="gray60">
+                {categoryTitle}
+              </Text>
+            </div>
+            <div className="inline-flex flex-1 -translate-y-0.5 items-center pt-8px">
+              <Text
+                className="line-clamp-3"
+                typo="subheadingBold"
+                color="gray10"
+              >
+                {quizDescription}
+              </Text>
             </div>
-          ))
-        )}
+          </div>
+          <div className="flex h-100px w-100px flex-col justify-between overflow-hidden rounded-8px">
+            {isOX && images?.length === 0 ? (
+              <OxQuizThumbnail />
+            ) : (
+              images?.map((src, index) => (
+                <div
+                  className={images.length > 1 ? 'h-1/2' : 'h-full'}
+                  key={`${src}-${index}`}
+                >
+                  <img
+                    className="h-full w-full"
+                    src={src}
+                    alt={src}
+                    loading="lazy"
+                    style={{
+                      objectFit: 'cover',
+                      objectPosition: 'center',
+                    }}
+                  />
+                </div>
+              ))
+            )}
+          </div>
+        </div>
       </div>
-    </div>
+    </LogClickEvent>
   );
 };
diff --git a/src/common/components/FloatingButton/index.tsx b/src/common/components/FloatingButton/index.tsx
@@ -1,28 +1,33 @@
 import clsx from 'clsx';
 import Image from 'next/image';
 
+import { LogClickEvent } from '@/common';
 import { ICON_URL } from '@/common/constants';
 
 export function FloatingButton({
   className,
   ...rest
 }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
   return (
-    <div className="pointer-events-none	sticky bottom-56px flex justify-end">
-      <button
-        className={clsx(
-          'z-99 pointer-events-auto flex h-62px w-62px items-center justify-center rounded-full border-1px border-gray-70 bg-gray-90 hover:cursor-pointer',
-          className
-        )}
-        {...rest}
-      >
-        <Image
-          src={ICON_URL.EMOJI_DROOLING}
-          alt="똑스 아이콘"
-          width={40}
-          height={40}
-        />
-      </button>
-    </div>
+    <LogClickEvent
+      eventPath={['toks', '메인페이지', '플로팅버튼', '플로팅버튼']}
+    >
+      <div className="pointer-events-none	sticky bottom-56px flex justify-end">
+        <button
+          className={clsx(
+            'z-99 pointer-events-auto flex h-62px w-62px items-center justify-center rounded-full border-1px border-gray-70 bg-gray-90 hover:cursor-pointer',
+            className
+          )}
+          {...rest}
+        >
+          <Image
+            src={ICON_URL.EMOJI_DROOLING}
+            alt="똑스 아이콘"
+            width={40}
+            height={40}
+          />
+        </button>
+      </div>
+    </LogClickEvent>
   );
 }
diff --git a/src/common/components/LogClickEvent/index.ts b/src/common/components/LogClickEvent/index.ts
@@ -22,7 +22,7 @@ export const LogClickEvent = ({ children, eventPath }: LogClickEventProps) => {
 
   return cloneElement(child, {
     onClick: () => {
-      logEvent(analytics, eventName);
+      analytics && logEvent(analytics, eventName);
     },
   });
 };
diff --git a/src/common/components/index.ts b/src/common/components/index.ts
@@ -17,3 +17,4 @@ export * from './Toast';
 export * from './BackHeader';
 export * from './ToksCalendar';
 export * from './NoticeSlider';
+export * from './LogClickEvent';
diff --git a/src/common/utils/firebase.ts b/src/common/utils/firebase.ts
@@ -1,7 +1,7 @@
 import { getAnalytics } from 'firebase/analytics';
 import { getApp, getApps, initializeApp } from 'firebase/app';
 
-export const firebaseConfig = {
+const firebaseConfig = {
   apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
   authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
   projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
@@ -13,6 +13,7 @@ export const firebaseConfig = {
 
 const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
 
-const analytics = getAnalytics(app);
+const analytics =
+  app.name && typeof window !== 'undefined' ? getAnalytics(app) : null;
 
-export { analytics };
+export { firebaseConfig, app, analytics };