Fix: 홈 부분 클릭 트래킹 추가

src/page/Home/BookmarkContainer.tsx

@@ -32,7 +32,7 @@ const BookmarkContainer = () => {
 
   return (
     <BookmarkBox>
-      <TitleContainer text="즐겨찾기" detailLink="/myTrip" />
+      <TitleContainer text="즐겨찾기" detailLink="/myTrip" linkText="즐겨찾기" />
       <ContentList>
         {/* Empty는 북마크 한 것이 없을 때,로그인 안할 때. 보여줄 div */}
         {bookmarks === undefined && (

src/page/Home/ContentTitleContainer.tsx

@@ -7,12 +7,13 @@ interface TitleContainerProps {
   text: React.ReactNode;
   minWidth?: string;
   detailLink?: string;
+  linkText?: string;
 }
-const TitleContainer = ({ text, minWidth = "auto", detailLink = "/" }: TitleContainerProps) => {
+const TitleContainer = ({ text, minWidth = "auto", detailLink = "/", linkText = "" }: TitleContainerProps) => {
   const router = useRouter();
   const { track } = useClickTracking();
   const clickHandler = () => {
-    track(`${text} 버튼 클릭`);
+    track(`${linkText} 버튼 클릭`);
     router.push(`${detailLink}`);
   }; // 후에 보여줄 페이지 부분.
   return (

src/page/Home/Navbar.tsx

@@ -5,16 +5,19 @@ import HomeIcon from "@/components/icons/HomeIcon";
 import NavCommunityIcon from "@/components/icons/NavCommunityIcon";
 import NavPersonIcon from "@/components/icons/NavPersonIcon";
 import SearchIcon from "@/components/icons/SearchIcon";
+import { useClickTracking } from "@/hooks/useClickTracking";
 
 import { palette } from "@/styles/palette";
 import styled from "@emotion/styled";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import path from "path";
 import React, { MouseEventHandler, useState } from "react";
 
 const Navbar = () => {
   const pathname = usePathname();
+  const router = useRouter();
+  const { track } = useClickTracking();
   // const pages = ['/', '/search/travel', '/myTrip', '/community', '/mypage']
   const pages = ["/", "/trip/list", "/myTrip", "/community", "/myPage"];
   const icons = [
@@ -56,6 +59,10 @@ const Navbar = () => {
     return false;
   };
 
+  const handleNavClick = (page: string) => {
+    track(`하단 네비게이션 ${page} 버튼 클릭`);
+    router.push(page);
+  };
   return condition() ? (
     <Container>
       <Box>
@@ -67,12 +74,13 @@ const Navbar = () => {
             fill: isLinkActive ? `${palette.기본}` : "none",
           };
           return (
-            <Link
+            <button
               key={page}
-              href={page}
+              onClick={() => handleNavClick(page)}
               style={{
                 width: "49px",
                 height: "48px",
+                cursor: "pointer",
                 display: "flex",
                 flexDirection: "column",
                 alignItems: "center",
@@ -81,7 +89,7 @@ const Navbar = () => {
             >
               {React.cloneElement(Icon, iconProps)}
               <PageName color={isLinkActive ? `${palette.기본}` : `${palette.비강조3}`}>{iconNames[idx]}</PageName>
-            </Link>
+            </button>
           );
         })}
       </Box>

src/page/Home/TripAvailable.tsx

@@ -30,6 +30,7 @@ const TripAvailable = () => {
     <Container>
       <TitleContainer
         detailLink={`/trip/list?sort=recent`}
+        linkText="참가 가능한 여행 "
         text={
           <>
             지금 참가 가능한 <br /> 여행을 소개해요.
@@ -43,13 +44,7 @@ const TripAvailable = () => {
           cutTrips?.map((post, idx) => {
             return (
               <BoxContainer key={post.travelNumber}>
-                <Box
-                  style={
-                    (idx + 1) % 3 === 0 || cutTrips.length === idx + 1
-                      ? { borderBottom: 0 }
-                      : {}
-                  }
-                >
+                <Box style={(idx + 1) % 3 === 0 || cutTrips.length === idx + 1 ? { borderBottom: 0 } : {}}>
                   <div onClick={() => clickTrip(post.travelNumber)}>
                     <HorizonBoxLayout
                       travelNumber={post.travelNumber}
@@ -60,10 +55,7 @@ const TripAvailable = () => {
                       userName={post.userName}
                       tags={post.tags}
                       daysAgo={daysAgo(post?.createdAt)}
-                      daysLeft={dayjs(post.registerDue, "YYYY-MM-DD").diff(
-                        dayjs().startOf("day"),
-                        "day"
-                      )}
+                      daysLeft={dayjs(post.registerDue, "YYYY-MM-DD").diff(dayjs().startOf("day"), "day")}
                       title={post.title}
                       recruits={post.nowPerson}
                       total={post.maxPerson}

src/page/Home/TripRecommendation.tsx

@@ -28,6 +28,7 @@ const TripRecommendation = () => {
     <Container>
       <TitleContainer
         detailLink={`/trip/list?sort=recommend`}
+        linkText="여행 추천"
         text={
           <>
             이런 여행은 <br /> 어떠세요?