feat: 사용자 수, 참여 시간에 대한 보고서 생성 기능 추가

khj0426 · Jun 19, 2024 · 6674b05 · 6674b05
1 parent bc17324
commit 6674b05
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 22 deletions.
diff --git a/src/app/(root)/(routes)/backoffice/create/page.tsx b/src/app/(root)/(routes)/backoffice/create/page.tsx
@@ -1,18 +1,60 @@
 'use client';
+import { useState } from 'react';
+
+import { ResponsiveContainer, LineChart, Line, XAxis } from 'recharts';
+
 import BigQueryCreateForm from '@/Component/Blog/BigQueryCreateForm/BigQueryCreateForm';
 import usePostGAReport from '@/hooks/mutations/usecreateGAReportMutation';
 
 export default function GaReportCreatePage() {
-  const { mutate } = usePostGAReport();
+  const { mutate, isLoading } = usePostGAReport();
+  const [userCountData, setUserCountData] = useState<any[]>([]);
+
   return (
-    <BigQueryCreateForm
-      onSubmit={(type, start, end) => {
-        mutate({
-          type,
-          startDate: start,
-          endDate: end,
-        });
-      }}
-    ></BigQueryCreateForm>
+    <>
+      <BigQueryCreateForm
+        onSubmit={(type, start, end) => {
+          mutate(
+            {
+              type,
+              startDate: start,
+              endDate: end,
+            },
+            {
+              onSuccess: ({ data }) => {
+                const { rows } = data;
+                const transformedData = rows?.map((row: any) => {
+                  return {
+                    date: row.dimensionValues[0].value,
+                    data: parseInt(row.metricValues[0].value),
+                  };
+                });
+                if (transformedData) setUserCountData(transformedData);
+              },
+            }
+          );
+        }}
+      />
+      <ResponsiveContainer width={720} height={400}>
+        <LineChart data={userCountData}>
+          <Line
+            type="monotone"
+            dataKey="data"
+            format="string"
+            stroke="#2D8CFF"
+            strokeWidth={2}
+          ></Line>
+          <XAxis
+            dataKey="date"
+            tickMargin={10}
+            tickLine={false}
+            padding={{
+              left: 13,
+              right: 13,
+            }}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </>
   );
 }
diff --git a/src/app/(root)/error.tsx b/src/app/(root)/error.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import * as Sentry from '@sentry/nextjs';
+
+import ErrorFallback from '@/Component/Common/ErrorFallback/Errorfallback';
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    Sentry.setContext('Application 에러', {
+      error,
+    });
+
+    Sentry.withScope((scope) => {
+      scope.setTag('type', 'Application');
+      scope.setTag('error-name', error.name);
+
+      Sentry.captureException(error, {
+        level: 'error',
+        extra: {
+          type: 'Application 에러',
+          ...error,
+        },
+      });
+    });
+  }, []);
+  return <ErrorFallback error={error} reset={reset} />;
+}
diff --git a/src/app/api/active-time/route.ts b/src/app/api/active-time/route.ts
@@ -4,6 +4,8 @@ import analyticsDataClient from '@/utils/bigQueryClient';
 
 export const dynamic = 'force-dynamic';
 export async function GET(req: NextRequest) {
+  const getStartDate = req.nextUrl.searchParams.get('startDate');
+  const getEndDate = req.nextUrl.searchParams.get('endDate');
   const getQueryStringDate = req.nextUrl.searchParams.get('page');
 
   const report = async function runReport() {
@@ -33,9 +35,10 @@ export async function GET(req: NextRequest) {
       //시작 일자가 있으면 해당 시작일자로 고정 그렇지 않으면 전체 기간
       dateRanges: [
         {
-          startDate: `${getQueryStringDate}daysAgo`,
+          startDate:
+            `${getStartDate}` ?? `${getQueryStringDate}daysAgo` ?? 'today',
           //현재 시간으로 설정
-          endDate: 'today',
+          endDate: `${getEndDate}` || 'today',
         },
       ],
       metrics: [

diff --git a/src/app/api/all-users/route.ts b/src/app/api/all-users/route.ts
@@ -6,6 +6,12 @@ export const dynamic = 'force-dynamic';
 export async function GET(req: NextRequest) {
   const getQueryStringDate = req.nextUrl.searchParams.get('page');
 
+  const startDate =
+    req.nextUrl.searchParams.get('startDate') ??
+    `${getQueryStringDate}daysAgo` ??
+    'today';
+  const endDate = req.nextUrl.searchParams.get('endDate') ?? 'today';
+
   const report = async function runReport() {
     const [response] = await analyticsDataClient.runReport({
       property: `properties/401292897`,
@@ -33,9 +39,8 @@ export async function GET(req: NextRequest) {
       //시작 일자가 있으면 해당 시작일자로 고정 그렇지 않으면 전체 기간
       dateRanges: [
         {
-          startDate: `${getQueryStringDate}daysAgo`,
-          //현재 시간으로 설정
-          endDate: 'today',
+          startDate,
+          endDate,
         },
       ],
       metrics: [

diff --git a/src/app/api/report/route.ts b/src/app/api/report/route.ts
@@ -9,7 +9,7 @@ export async function POST(req: NextRequest) {
   switch (type) {
     case '총 사용자 수':
       try {
-        const response = await get('/api/active-users', {
+        const response = await get('/api/all-users', {
           params: {
             startDate: formatDateToString(new Date(startDate)),
             endDate: formatDateToString(new Date(endDate)),
@@ -28,6 +28,23 @@ export async function POST(req: NextRequest) {
       }
 
     case '참여 시간':
+      try {
+        const response = await get('/api/active-time', {
+          params: {
+            startDate: formatDateToString(new Date(startDate)),
+            endDate: formatDateToString(new Date(endDate)),
+          },
+        });
+        const responseData = await response.data;
+        return NextResponse.json(responseData, {
+          status: 200,
+        });
+      } catch (e) {
+        return NextResponse.json(JSON.stringify(e), {
+          status: 500,
+          statusText: JSON.stringify(e),
+        });
+      }
       return {};
     case '도시별 한 페이지 당 방문 세션 수':
       return {};

diff --git a/src/hooks/mutations/usecreateGAReportMutation.ts b/src/hooks/mutations/usecreateGAReportMutation.ts
@@ -1,3 +1,4 @@
+import { google } from '@google-analytics/data/build/protos/protos';
 import { useMutation } from '@tanstack/react-query';
 
 import { BIGQUERY_VALUE } from '@/Component/Blog/BigQueryCreateForm/BigQueryCreateForm';
@@ -11,11 +12,14 @@ export const postGAReport = async ({
   startDate: Date;
   endDate: Date;
 }) => {
-  return await post('/api/report', {
-    type,
-    startDate,
-    endDate,
-  }).then((Res) => console.log(Res));
+  return await post<google.analytics.data.v1beta.IRunReportResponse>(
+    '/api/report',
+    {
+      type,
+      startDate,
+      endDate,
+    }
+  );
 };
 
 const usePostGAReport = () => {

diff --git a/src/utils/getCurrentBasePath.ts b/src/utils/getCurrentBasePath.ts
@@ -1,6 +1,6 @@
 export default function getCurrentBasePath() {
   if (process.env.NODE_ENV === 'production') {
-    return process.env.NEXT_PUBLIC_PRODUCT_UR ?? '';
+    return process.env.NEXT_PUBLIC_PRODUCT_URL ?? '';
   }
   return process.env.NEXT_PUBLIC_LOCAL_URL ?? '';
 }