Merge pull request #20 from wepp-store/feature/wepp-event-log-install-tracking

Feature / wepp event log install tracking

Author: ryxxn

package-lock.json

@@ -32,6 +32,7 @@
     "react-hook-form": "^7.52.1",
     "react-hot-toast": "^2.4.1",
     "react-intersection-observer": "^9.13.0",
+    "recharts": "^2.15.3",
     "tailwindcss": "^3.4.4",
     "yup": "^1.4.0",
     "zustand": "^4.5.4"

package.json

@@ -62,7 +62,6 @@ export default async function Page({ params }: Props) {
   await queryClient.prefetchQuery(
     weppDetailOptions({
       weppId: params.weppId,
-      read: true,
       gcTime: Infinity,
       staleTime: Infinity,
     })

src/app/(end-user)/wepps/[weppId]/page.tsx

@@ -1,5 +1,6 @@
 import { axiosInstance } from '@/shared/apis/axios';
 import { PATH_API } from '@/shared/apis/path';
+import { STORAGE_KEYS } from '@/shared/constants';
 import { cookies } from 'next/headers';
 
 function jwtDecode(token: string) {
@@ -23,7 +24,7 @@ export async function POST(req: Request) {
 
     const { exp, iat } = jwtDecode(data.accessToken);
 
-    cookieStore.set('weppstore_token', data.accessToken, {
+    cookieStore.set(STORAGE_KEYS.TOKEN.ACCESS, data.accessToken, {
       httpOnly: true,
       secure: process.env.NODE_ENV === 'production',
       sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',

src/app/api/refresh/route.ts

@@ -1,5 +1,6 @@
 import { axiosInstance } from '@/shared/apis/axios';
 import { PATH_API } from '@/shared/apis/path';
+import { STORAGE_KEYS } from '@/shared/constants';
 import { cookies } from 'next/headers';
 
 function jwtDecode(token: string) {
@@ -25,14 +26,14 @@ export async function POST(req: Request) {
     const decodedAccessToken = jwtDecode(data.accessToken);
     const decodedRefreshToken = jwtDecode(data.refreshToken);
 
-    cookieStore.set('weppstore_token', data.accessToken, {
+    cookieStore.set(STORAGE_KEYS.TOKEN.ACCESS, data.accessToken, {
       httpOnly: true,
       secure: process.env.NODE_ENV === 'production',
       sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
       maxAge: remainingSeconds(decodedAccessToken) || 0,
     });
 
-    cookieStore.set('weppstore_refresh_token', data.refreshToken, {
+    cookieStore.set(STORAGE_KEYS.TOKEN.REFRESH, data.refreshToken, {
       httpOnly: true,
       secure: process.env.NODE_ENV === 'production',
       sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',

src/app/api/sign-in/route.ts

@@ -17,7 +17,12 @@ const DeleteWeppButton = () => {
 
   return (
     <>
-      <Button color="danger" variant="bordered" onPress={onOpenChange}>
+      <Button
+        color="danger"
+        variant="bordered"
+        onPress={onOpenChange}
+        radius="sm"
+      >
         삭제하기
       </Button>
 

src/features/delete-wepp/ui/delete-wepp-button.tsx

@@ -24,12 +24,14 @@ export const PATH_API = {
   },
   WEPP: {
     ROOT: '/wepp',
+    DETAIL: (weppId: string) => `/wepp/${weppId}` as const,
     MINE_LIST: '/wepp/mine-list',
     MINE: (weppId: string) => `/wepp/mine/${weppId}` as const,
     SUBMIT: '/wepp/submit',
     VERIFY: '/wepp/verify',
     UPLOAD: '/wepp/upload',
     CLEAR_URL: '/wepp/clear-url',
+    EVENT_LOG: '/wepp/event',
   },
   COMMENT: {
     ROOT: '/comments',

src/shared/apis/path.ts

@@ -0,0 +1,53 @@
+import {
+  useQuery,
+  UseQueryResult,
+  UseQueryOptions,
+} from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { PATH_API } from '../../path';
+import { axiosInstance } from '../../axios';
+import { weppKeys } from './query-key-factory';
+import { notFound } from 'next/navigation';
+
+type Props = {
+  weppId: string;
+  from?: string;
+  to?: string;
+} & Omit<UseQueryOptions, 'queryKey'>;
+
+interface ResponseType {
+  date: string;
+  devicePlatform: string;
+  deviceType: string;
+  view: number;
+  install: number;
+}
+
+export const useEventLogs = ({ weppId, from, to, ...other }: Props) => {
+  return useQuery({
+    queryKey: weppKeys.eventLogs(weppId, from, to),
+    queryFn: async () => {
+      try {
+        const response = await axiosInstance.get(PATH_API.WEPP.EVENT_LOG, {
+          params: {
+            wepp_id: weppId,
+            from,
+            to,
+          },
+        });
+
+        return response.data;
+      } catch (error: any) {
+        if (error.statusCode === 404) {
+          return notFound();
+        }
+
+        throw error;
+      }
+    },
+    enabled: !!weppId,
+    staleTime: Infinity,
+    gcTime: Infinity,
+    ...other,
+  }) as UseQueryResult<ResponseType[], AxiosError>;
+};

src/shared/apis/queries/wepp/event-logs.ts

@@ -5,4 +5,6 @@ export const weppKeys = {
   detail: (weppId: string) => [...weppKeys.all, weppId] as const,
   mineList: [PATH_API.WEPP.MINE_LIST] as const,
   mine: (weppId: string) => [...weppKeys.mineList, weppId] as const,
+  eventLogs: (weppId: string, from?: string, to?: string) =>
+    [...weppKeys.all, PATH_API.WEPP.EVENT_LOG, weppId, from, to] as const,
 };

src/shared/apis/queries/wepp/query-key-factory.ts

@@ -12,27 +12,16 @@ import { notFound } from 'next/navigation';
 
 type Props = {
   weppId: string;
-  read?: boolean;
 } & Omit<UseQueryOptions, 'queryKey'>;
 
 export const weppDetailOptions = ({
   weppId,
-  read = false,
   ...other
 }: Props): UseQueryOptions => ({
   queryKey: weppKeys.detail(weppId),
   queryFn: async () => {
     try {
-      const response = await axiosInstance.get(
-        `${PATH_API.WEPP.ROOT}/${weppId}`,
-        {
-          headers: {
-            'X-WEPP-READ': read,
-            // TODO: 작동하나?
-            'Cache-Control': 'max-age=3600, must-revalidate', // 1시간 동안 캐시 유지
-          },
-        }
-      );
+      const response = await axiosInstance.get(PATH_API.WEPP.DETAIL(weppId));
       return response.data;
     } catch (error: any) {
       if (error.statusCode === 404) {
@@ -45,8 +34,9 @@ export const weppDetailOptions = ({
   ...other,
 });
 
-export const useWeppDetail = ({ weppId, read = false, ...other }: Props) => {
-  return useQuery(
-    weppDetailOptions({ weppId, read, ...other })
-  ) as UseQueryResult<IWepp, AxiosError>;
+export const useWeppDetail = ({ weppId, ...other }: Props) => {
+  return useQuery(weppDetailOptions({ weppId, ...other })) as UseQueryResult<
+    IWepp,
+    AxiosError
+  >;
 };