feat: log with server actions

apps/bottle/src/app/bottles/[...slug]/ActionButtons.tsx

@@ -15,7 +15,7 @@ interface Props {
 
 export function ActionButtons({ type, id }: Props) {
   const { mutate: accept } = useAcceptBottleMutation(type, id);
-  const { mutate: refuse } = useRefuseBottleMutation();
+  const { mutate: refuse } = useRefuseBottleMutation(id);
 
   const handleRightClick =
     type === 'random'
@@ -33,7 +33,7 @@ export function ActionButtons({ type, id }: Props) {
   return (
     <FixedButton
       variant="two"
-      left={<CTAButton.Left onClick={() => refuse(id)}>떠내려 보내기</CTAButton.Left>}
+      left={<CTAButton.Left onClick={() => refuse()}>떠내려 보내기</CTAButton.Left>}
       right={
         <CTAButton.Right onClick={handleRightClick}>
           {type === 'random' ? '호감 표현하기' : '문답 시작하기'}

apps/bottle/src/app/bottles/_components/Top.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { useUserInfoQuery } from '../../../store/query/useNameQuery';
+import { useUserInfoQuery } from '../../../store/query/useUserInfoQuery';
 import { titleStyle } from './topStyle.css';
 
 interface Props {

apps/bottle/src/app/bottles/page.tsx

@@ -2,7 +2,7 @@ import { getServerSideTokens } from '@/features/server/serverSideTokens';
 import { Suspense } from 'react';
 import { ServerFetchBoundary } from '../../store/query/ServerFetchBoundary';
 import { bottlesQueryOptions } from '../../store/query/useBottlesQuery';
-import { userInfoQueryOptions } from '../../store/query/useNameQuery';
+import { userInfoQueryOptions } from '../../store/query/useUserInfoQuery';
 import { Bottles } from './Bottles';
 
 export default function BottlesPage() {

apps/bottle/src/features/server/log.ts

@@ -0,0 +1,5 @@
+'use server';
+
+export async function logAction(message: string): Promise<void> {
+  console.log('[LOG]:', message);
+}

apps/bottle/src/store/mutation/useAcceptBottleMutation.ts

@@ -7,6 +7,9 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { getCookie } from 'cookies-next';
 import { useRouter } from 'next/navigation';
 import { bottlesQueryOptions } from '../query/useBottlesQuery';
+import { logAction } from '@/features/server/log';
+import { bottleDetailQueryOptions } from '../query/useBottleDetailQuery';
+import { userInfoQueryOptions } from '../query/useUserInfoQuery';
 
 interface AcceptBottleBody<T extends BottleType> {
   likeMessage: T extends 'random' ? string : null;
@@ -16,6 +19,13 @@ export function useAcceptBottleMutation<T extends BottleType>(type: T, id: Bottl
   const router = useRouter();
   const { send } = useAppBridge();
   const queryClient = useQueryClient();
+  const tokens = getClientSideTokens();
+
+  async function logAcceptBottleAction() {
+    const { name: currentUserName } = await queryClient.ensureQueryData(userInfoQueryOptions(tokens));
+    const { userName: senderName } = await queryClient.ensureQueryData(bottleDetailQueryOptions(tokens, id));
+    await logAction(`${currentUserName} ACCEPTED ${senderName}`);
+  }
 
   return useMutation({
     mutationFn: (likeMessage: string | null) =>
@@ -24,14 +34,15 @@ export function useAcceptBottleMutation<T extends BottleType>(type: T, id: Bottl
         getClientSideTokens(),
         createInit(getCookie('accessToken') ?? '', { likeMessage })
       ),
-    onSuccess: () => {
+    onSuccess: async () => {
       queryClient.invalidateQueries({ queryKey: bottlesQueryOptions(getClientSideTokens()).queryKey });
       if (type === 'random') {
         send({ type: AppBridgeMessageType.TOAST_OPEN, payload: { message: '호감을 보냈어요' } });
         router.back();
         return;
       }
       send({ type: AppBridgeMessageType.BOTTLE_ACCEPT });
+      await logAcceptBottleAction();
     },
   });
 }

apps/bottle/src/store/mutation/useRefuseBottleMutation.ts

@@ -2,22 +2,32 @@ import { AppBridgeMessageType, useAppBridge } from '@/features/app-bridge';
 import { POST, createInit } from '@/features/server';
 import { getClientSideTokens } from '@/features/server/clientSideTokens';
 import { Bottle } from '@/models/bottle';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { QueryClient, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
 import { bottlesQueryOptions } from '../query/useBottlesQuery';
+import { logAction } from '@/features/server/log';
+import { userInfoQueryOptions } from '../query/useUserInfoQuery';
+import { bottleDetailQueryOptions } from '../query/useBottleDetailQuery';
 
-export function useRefuseBottleMutation() {
+export function useRefuseBottleMutation(id: Bottle['id']) {
   const router = useRouter();
   const { send } = useAppBridge();
   const queryClient = useQueryClient();
 
   const tokens = getClientSideTokens();
 
+  async function logRefuseBottleAction() {
+    const { name: currentUserName } = await queryClient.ensureQueryData(userInfoQueryOptions(tokens));
+    const { userName: senderName } = await queryClient.ensureQueryData(bottleDetailQueryOptions(tokens, id));
+    await logAction(`${currentUserName} REFUSED ${senderName}`);
+  }
+
   return useMutation({
-    mutationFn: (id: Bottle['id']) => POST(`/api/v1/bottles/${id}/refuse`, tokens, createInit(tokens.accessToken)),
-    onSuccess: () => {
+    mutationFn: () => POST(`/api/v1/bottles/${id}/refuse`, tokens, createInit(tokens.accessToken)),
+    onSuccess: async () => {
       queryClient.invalidateQueries({ queryKey: bottlesQueryOptions(tokens).queryKey });
       send({ type: AppBridgeMessageType.TOAST_OPEN, payload: { message: '보틀을 떠내려 보냈어요' } });
+      await logRefuseBottleAction();
       router.back();
     },
   });

apps/bottle/src/store/query/ServerFetchBoundary.tsx

@@ -20,9 +20,5 @@ export async function ServerFetchBoundary({ fetchOptions, children }: Props) {
     await queryClient.fetchQuery(fetchOptions);
   }
 
-  // Array.isArray(fetchOptions)
-  //   ? await Promise.all(fetchOptions.map(prefetchOption => queryClient.prefetchQuery(prefetchOption)))
-  //   : await queryClient.prefetchQuery(fetchOptions);
-
   return <HydrationBoundary state={dehydrate(queryClient)}>{children}</HydrationBoundary>;
 }

apps/bottle/src/store/query/useMyInformation.ts

@@ -5,7 +5,7 @@ import { CurrentUser } from '@/models/user';
 import { UseSuspenseQueryOptions, useSuspenseQuery } from '@tanstack/react-query';
 
 export const myInformationQueryOptions = (tokens: Tokens): UseSuspenseQueryOptions<CurrentUser> => ({
-  queryKey: ['bottles'],
+  queryKey: ['my'],
   queryFn: () => GET<CurrentUser>(`/api/v1/profile`, tokens, createInit(tokens.accessToken)),
 });
 export function useMyInformationQuery() {

apps/bottle/src/store/query/useNameQuery.ts → apps/bottle/src/store/query/useUserInfoQuery.ts

@@ -21,8 +21,12 @@ export interface GetUserInfoData {
 }
 
 export const userInfoQueryOptions = (tokens: Tokens): UseSuspenseQueryOptions<GetUserInfoData> => ({
-  queryKey: ['userInfo'],
-  queryFn: () => GET<GetUserInfoData>(`/api/v1/profile/info`, tokens, createInit(tokens.accessToken)),
+  queryKey: ['user-info'],
+  queryFn: async () => {
+    const userInfo = await GET<GetUserInfoData>(`/api/v1/profile/info`, tokens, createInit(tokens.accessToken));
+    console.log('CURRENT USER:', userInfo.name);
+    return userInfo;
+  },
 });
 export function useUserInfoQuery() {
   return useSuspenseQuery(userInfoQueryOptions(getClientSideTokens()));