feat: home-yls

src/home/components/QuickLink/QuickLink.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { LogClick } from '@yourssu/logging-system-react';
+
+import { useGetUserData } from '@/home/hooks/useGetUserData.ts';
+
+interface QuickLinkProps {
+  icon: { icon: string; link: string };
+  order: string;
+  children: React.ReactElement;
+}
+
+export const QuickLink = ({ icon, order, children }: QuickLinkProps) => {
+  const { data: currentUser } = useGetUserData();
+  const userId = currentUser?.email || '';
+
+  const logParams = {
+    userId,
+    version: 1,
+    event: {
+      name: 'quickLinkItemClicked',
+      screen: 'Home',
+      params: {
+        link: icon.link,
+        order,
+      },
+    },
+  };
+
+  return <LogClick params={logParams}>{children}</LogClick>;
+};

src/home/components/SocialNetworkService/SocialNetworkService.tsx

@@ -4,6 +4,7 @@ import BlogIcon from '@/assets/home/blog.svg';
 import BrunchIcon from '@/assets/home/brunch.svg';
 import InstagramIcon from '@/assets/home/instagram.svg';
 import PpussungIcon from '@/assets/home/ppussung.svg';
+import { QuickLink } from '@/home/components/QuickLink/QuickLink.tsx';
 
 import { StyledIcon, StyledIconContainer, StyledLine } from './SocialNetworkService.style';
 
@@ -23,7 +24,9 @@ export const SocialNetworkService = () => {
       <StyledIconContainer>
         {ICON_LIST.map((icon, index) => (
           <React.Fragment key={icon.icon}>
-            <StyledIcon to={icon.link} $image={icon.icon} />
+            <QuickLink icon={icon} order={String(index + 1)}>
+              <StyledIcon to={icon.link} $image={icon.icon} />
+            </QuickLink>
             {ICON_LIST.length !== index + 1 && <StyledLine />}
           </React.Fragment>
         ))}