[25.03.10 / TASK-141] 트래커 제거 및 폴더 구조 정리

src/__test__/login.test.tsx

@@ -3,7 +3,7 @@ import { act, screen } from '@testing-library/react';
 import { ToastContainer } from 'react-toastify';
 import { useRouter } from 'next/navigation';
 import { renderWithQueryClient } from '@/utils/componentUtil';
-import { default as Login } from '@/app/(with-tracker)/(login)/page';
+import { default as Login } from '@/app/(login)/page';
 
 jest.mock('next/navigation', () => ({
   useRouter: jest.fn(),

src/__test__/main.test.tsx

@@ -1,6 +1,6 @@
 import { screen, waitFor } from '@testing-library/react';
 import { renderWithQueryClient } from '@/utils';
-import { Content } from '@/app/(with-tracker)/(auth-required)/main/Content';
+import { Content } from '@/app/(auth-required)/main/Content';
 import { Header } from '@/components';
 
 jest.mock('next/navigation', () => ({

src/app/(with-tracker)/(auth-required)/compare/page.tsx → src/app/(auth-required)/compare/page.tsx

@@ -1,9 +1,7 @@
 import { Metadata } from 'next';
 import { ArriveSoon } from '@/components';
 
-export const metadata: Metadata = {
-  title: '통계 비교',
-};
+export const metadata: Metadata = { title: '통계 비교' };
 
 export default function Page() {
   return <ArriveSoon />;

src/components/auth-required/header/Section.tsx → src/app/(auth-required)/components/header/Section.tsx

@@ -2,7 +2,6 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Icon, NameType } from '@/components';
 import { COLORS } from '@/constants';
-import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
 
 export const defaultStyle =
   'w-[180px] h-[65px] px-9 transition-all duration-300 shrink-0 max-MBI:w-[65px] max-MBI:px-0 ';
@@ -48,7 +47,6 @@ export const Section = <T extends clickType>({
         href={action}
         className={defaultStyle + navigateStyle}
         id="navigation"
-        onClick={() => trackUserEvent(MessageEnum.NAVIGATE)}
       >
         <Icon
           size={25}

src/components/auth-required/header/index.tsx → src/app/(auth-required)/components/header/index.tsx

@@ -1,16 +1,14 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { usePathname, useRouter } from 'next/navigation';
+import { useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { revalidate } from '@/utils/revalidateUtil';
 import { PATHS, SCREENS } from '@/constants';
 import { NameType } from '@/components';
 import { useResponsive } from '@/hooks';
 import { logout, me } from '@/apis';
-import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
-import { revalidate } from '@/utils/revalidateUtil';
-
 import { defaultStyle, Section, textStyle } from './Section';
 
 const PARAMS = {
@@ -121,10 +119,7 @@ export const Header = () => {
               <div className="cursor-pointer h-fit flex-col rounded-[4px] bg-BG-SUB hover:bg-BG-ALT shadow-BORDER-MAIN shadow-md">
                 <button
                   className="text-DESTRUCTIVE-SUB text-I3 p-5 max-MBI:p-4 flex whitespace-nowrap w-auto"
-                  onClick={() => {
-                    out();
-                    trackUserEvent(MessageEnum.LOGOUT);
-                  }}
+                  onClick={() => out()}
                 >
                   로그아웃
                 </button>

src/app/(with-tracker)/(auth-required)/layout.tsx → src/app/(auth-required)/layout.tsx

@@ -1,9 +1,9 @@
-import { ReactElement } from 'react';
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
-import { Header } from '@/components';
+import { ReactElement } from 'react';
+import { getQueryClient } from '@/utils/queryUtil';
 import { PATHS } from '@/constants';
 import { me } from '@/apis';
-import { getQueryClient } from '@/utils/queryUtil';
+import { Header } from './components/header';
 
 interface IProp {
   children: ReactElement;
@@ -12,10 +12,7 @@ interface IProp {
 export default async function Layout({ children }: IProp) {
   const client = getQueryClient();
 
-  await client.prefetchQuery({
-    queryKey: [PATHS.ME],
-    queryFn: me,
-  });
+  await client.prefetchQuery({ queryKey: [PATHS.ME], queryFn: me });
 
   return (
     <main className="items-center w-full h-full flex flex-col p-[50px_70px_70px_70px] transition-all max-TBL:p-[20px_30px_30px_30px] max-MBI:p-[10px_25px_25px_25px]">

src/app/(with-tracker)/(auth-required)/leaderboards/Content.tsx → src/app/(auth-required)/leaderboards/Content.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { Dropdown, Ranker, Rank } from '@/components';
+import { Dropdown } from '@/components';
+
 import { SCREENS } from '@/constants';
 import { useResponsive, useSearchParam } from '@/hooks';
-import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
+import { Ranker, Rank } from './components';
 
 const data = [
   { rank: 1, name: '정현우', count: 1235 },
@@ -25,10 +26,7 @@ export const Content = () => {
           ['조회수', 'views'],
           ['좋아요', 'likes'],
         ]}
-        onChange={(data) => {
-          trackUserEvent(MessageEnum.SORT_INTERACT_BOARD);
-          setSearchParams({ type: data as string });
-        }}
+        onChange={(data) => setSearchParams({ type: data as string })}
         defaultValue={'조회수'}
       />
       <div className="w-full flex gap-10 max-MBI:flex-col max-MBI:gap-5">

src/components/auth-required/leaderboards/Rank.tsx → src/app/(auth-required)/leaderboards/components/Rank.tsx

@@ -1,4 +1,4 @@
-import type { IProp } from './Ranker';
+import type { IProp } from '../../../../components/auth-required/leaderboards/Ranker';
 
 export const Rank = ({ name, rank, count, suffix = '회' }: IProp) => {
   return (

src/app/(with-tracker)/(auth-required)/main/Content.tsx → src/app/(auth-required)/main/Content.tsx

@@ -3,11 +3,11 @@
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
-import { Button, Dropdown, Section, Summary, Check } from '@/components';
+import { Button, Dropdown, Check } from '@/components';
+import { Section, Summary } from './components';
 import { postList, postSummary } from '@/apis';
 import { PATHS, SORT_TYPE } from '@/constants';
 import { useSearchParam } from '@/hooks/useSearchParam';
-import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
 import { SortKey, SortValue } from '@/types';
 
 const sorts: Array<[SortKey, SortValue]> = Object.entries(SORT_TYPE) as Array<
@@ -60,13 +60,7 @@ export const Content = () => {
           </span>
           <div className="w-full flex items-center justify-between flex-wrap max-MBI:justify-center max-MBI:gap-4">
             <div className="flex items-center gap-3">
-              <Button
-                size="SMALL"
-                disabled
-                onClick={() =>
-                  trackUserEvent(MessageEnum.REFRESH_INTERACT_MAIN)
-                }
-              >
+              <Button size="SMALL" disabled>
                 새로고침
               </Button>
               <span className="text-TEXT-ALT text-ST4 max-TBL:text-ST5 max-MBI:hidden">
@@ -77,7 +71,6 @@ export const Content = () => {
             <div className="flex items-center gap-3">
               <Check
                 onChange={() => {
-                  trackUserEvent(MessageEnum.SORT_INTERACT_MAIN);
                   setSearchParams({
                     asc: searchParams.asc === 'true' ? 'false' : 'true',
                   });
@@ -91,10 +84,9 @@ export const Content = () => {
                   SORT_TYPE['작성일순']
                 }
                 options={sorts}
-                onChange={(data) => {
-                  trackUserEvent(MessageEnum.SORT_INTERACT_MAIN);
-                  setSearchParams({ sort: data as SortValue });
-                }}
+                onChange={(data) =>
+                  setSearchParams({ sort: data as SortValue })
+                }
               />
             </div>
           </div>

src/components/auth-required/main/Section/index.tsx → src/app/(auth-required)/main/components/Section/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useState } from 'react';
-import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
 import { parseNumber } from '@/utils/numberUtil';
 import { COLORS, env, PATHS } from '@/constants';
 import { PostType, UserDto } from '@/types';
@@ -22,10 +21,7 @@ export const Section = (p: PostType) => {
     <section className="flex flex-col w-full h-fit relative">
       <div
         className={`p-[25px] h-fit cursor-pointer bg-BG-SUB flex justify-between items-center gap-4 ${!open ? 'rounded-[4px] max-MBI:pb-[35px_!important]' : 'rounded-t-[4px]'} max-xl:flex-col max-MBI:flex-col max-MBI:p-[20px]`}
-        onClick={() => {
-          trackUserEvent(MessageEnum.SECTION_INTERACT_MAIN);
-          setOpen((prev) => !prev);
-        }}
+        onClick={() => setOpen((prev) => !prev)}
       >
         <div className="flex gap-2 items-center">
           <div

src/components/auth-required/main/Summary/index.tsx → src/app/(auth-required)/main/components/Summary/index.tsx

@@ -3,7 +3,6 @@
 import { useState } from 'react';
 import { Icon } from '@/components';
 import { PostSummaryDto } from '@/types';
-import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
 import { SidebarContent } from './SidebarContent';
 import { BarContent } from './BarContent';
 
@@ -37,10 +36,7 @@ export const Summary = ({ totalPostCount, stats }: PostSummaryDto) => {
       </aside>
       <section
         className={`flex flex-col w-full px-5 bg-BG-SUB rounded-[4px] cursor-pointer MBI:hidden`}
-        onClick={() => {
-          trackUserEvent(MessageEnum.SECTION_INTERACT_MAIN);
-          setOpen((prev) => !prev);
-        }}
+        onClick={() => setOpen((prev) => !prev)}
       >
         <div className="text-TEXT-ALT flex items-center justify-center text-ST5 w-full h-[52px] gap-[10px] shrink-0">
           <span>요약 정보 {open ? '펼치기' : '접기'}</span>

src/app/(with-tracker)/(login)/Content.tsx → src/app/(login)/Content.tsx

@@ -1,13 +1,12 @@
 'use client';
 
+import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import Image from 'next/image';
-import { useMutation } from '@tanstack/react-query';
 import { Input, Button } from '@/components';
-import { LoginVo } from '@/types';
 import { login, sampleLogin } from '@/apis';
-import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
+import { LoginVo } from '@/types';
 
 const responsiveStyle =
   "flex items-center gap-5 max-MBI:before:inline-block max-MBI:before:bg-[url('/favicon.png')] max-MBI:before:[background-size:_100%_100%] max-MBI:before:w-16 max-MBI:before:h-16";
@@ -22,7 +21,6 @@ export const Content = () => {
   } = useForm<LoginVo>({ mode: 'all' });
 
   const onSuccess = () => {
-    trackUserEvent(MessageEnum.LOGIN);
     replace('/main?asc=false&sort=');
   };
 

src/app/(with-tracker)/(login)/page.tsx → src/app/(login)/page.tsx

@@ -1,10 +1,7 @@
 import { Metadata } from 'next';
-
 import { Content } from './Content';
 
-export const metadata: Metadata = {
-  title: '로그인',
-};
+export const metadata: Metadata = { title: '로그인' };
 
 export default function Page() {
   return <Content />;

src/app/layout.tsx

@@ -1,13 +1,13 @@
+import { GoogleAnalytics } from '@next/third-parties/google';
 import { Noto_Sans_KR } from 'next/font/google';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import * as sentry from '@sentry/nextjs';
+import { ErrorBoundary } from '@sentry/nextjs';
+import { ReactNode, Suspense } from 'react';
 import type { Metadata } from 'next';
-import { ReactNode } from 'react';
-import { GoogleAnalytics } from '@next/third-parties/google';
-import './globals.css';
 import { ChannelTalkProvider, QueryProvider } from '@/components';
 import { env } from '@/constants';
+import './globals.css';
 
 export const BASE = 'https://velog-dashboard.kro.kr/';
 
@@ -16,9 +16,7 @@ export const metadata: Metadata = {
   metadataBase: new URL(BASE),
   description: '어디서든 편리하게 확인하는 Velog 통계 서비스, Velog Dashboard',
   icons: { icon: '/favicon.png' },
-  alternates: {
-    canonical: BASE,
-  },
+  alternates: { canonical: BASE },
   openGraph: {
     siteName: 'Velog Dashboard',
     description:
@@ -37,14 +35,14 @@ export default function RootLayout({
   return (
     <html lang="ko">
       <body className={`${NotoSansKr.className} w-full bg-BG-MAIN`}>
-        <sentry.ErrorBoundary>
+        <ErrorBoundary>
           <QueryProvider>
             <ChannelTalkProvider>
               <ToastContainer autoClose={2000} />
-              {children}
+              <Suspense>{children}</Suspense>
             </ChannelTalkProvider>
           </QueryProvider>
-        </sentry.ErrorBoundary>
+        </ErrorBoundary>
       </body>
       <GoogleAnalytics gaId={env.GA_ID} />
     </html>

src/components/common/Input.tsx → src/components/Input.tsx

@@ -15,7 +15,7 @@ const FORMS = {
 export const Input = forwardRef<HTMLInputElement, IProp>(
   (
     { form = 'LARGE', size, ...rest }: IProp,
-    ref?: ForwardedRef<HTMLInputElement> | undefined,
+    ref?: ForwardedRef<HTMLInputElement>,
   ) => (
     <input
       {...rest}

src/components/Providers/index.ts

@@ -0,0 +1,2 @@
+export * from './ChannelTalkProvider';
+export * from './QueryProvider';

src/components/index.ts

@@ -1,2 +1,7 @@
-export * from './auth-required';
-export * from './common';
+export * from './ArriveSoon';
+export * from './Providers';
+export * from './Dropdown';
+export * from './Button';
+export * from './Input';
+export * from './Check';
+export * from './Icon';