Merge pull request #117 from Bside-Team-Four/fix/114

Fix/114

@types/global.d.ts

@@ -3,5 +3,10 @@ export {};
 declare global {
   interface Window {
     MSStream: string;
+    popoProtocol: {
+      postMessage: (message: string) => void;
+      resolve: (result: any) => void;
+      reject: (result: any) => void;
+    };
   }
 }

src/components/alarm/index.test.tsx

@@ -8,6 +8,7 @@ import AlarmPage from './index';
 
 jest.mock('usehooks-ts', () => ({
   useDarkMode: () => ({ isDarkMode: false }),
+  useIsMounted: () => true,
 }));
 
 jest.mock('@/hooks/api/useGetInfiniteAlarms');

src/components/alarm/index.tsx

@@ -3,12 +3,19 @@ import Image from 'next/image';
 import styled from 'styled-components';
 
 import useGetInfiniteAlarms from '@/hooks/api/useGetInfiniteAlarms';
+import useOutOfReword from '@/hooks/recoil/useOutOfReword';
 import Alarm from '@/types/Alarm';
 
+import NormalPopup from '../popup/NormalPopup';
+
 import AlarmItemBox from './AlarmItemBox';
 
 export default function AlarmPage() {
   const { alarms } = useGetInfiniteAlarms();
+  const { outOfReword, setOutOfReword } = useOutOfReword();
+  const handleOutOfRewordPopupClose = () => {
+    setOutOfReword(false);
+  };
   return (
     <Container>
       <TitleContainer>
@@ -30,7 +37,12 @@ export default function AlarmPage() {
           <NoDataText>나를 뽑은 사람이 아직 없어요.</NoDataText>
         </NoDataContainer>
       )}
-
+      <NormalPopup
+        show={outOfReword}
+        okText="확인"
+        title="리워드가 부족해요"
+        onClose={handleOutOfRewordPopupClose}
+      />
     </Container>
   );
 }

src/components/setting/index.tsx

@@ -24,7 +24,7 @@ export default function Setting() {
       <GrayBar />
       <SettingItem
         title="문의"
-        message="[email protected]"
+        message="[email protected]"
       />
       <SettingItem
         title="이용약관"

src/hooks/api/usePurchaseHintMutation.test.ts

@@ -6,6 +6,10 @@ import wrapper from '@/test/ReactQueryWrapper';
 import usePurchaseHintMutation from './usePurchaseHintMutation';
 
 jest.mock('@/lib/api/ApiService');
+jest.mock('@/hooks/recoil/useOutOfReword', () => jest.fn(() => ({
+  outOfReword: false,
+  setOutOfReword: jest.fn(),
+})));
 
 describe('usePurchaseHintMutation', () => {
   beforeEach(() => {
@@ -17,7 +21,7 @@ describe('usePurchaseHintMutation', () => {
     }));
   });
 
-  const renderusePurchaseHintMutationHook = () => renderHook(
+  const renderUsePurchaseHintMutationHook = () => renderHook(
     () => usePurchaseHintMutation(),
     {
       wrapper,
@@ -26,7 +30,7 @@ describe('usePurchaseHintMutation', () => {
 
   // eslint-disable-next-line jest/expect-expect
   it('Mutation Test', async () => {
-    const { result } = renderusePurchaseHintMutationHook();
+    const { result } = renderUsePurchaseHintMutationHook();
 
     await result.current({ voteId: 0, hintId: 0 });
   });

src/hooks/api/usePurchaseHintMutation.ts

@@ -1,10 +1,13 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
+import useOutOfReword from '@/hooks/recoil/useOutOfReword';
 import { apiService } from '@/lib/api/ApiService';
+import ApiException from '@/lib/excptions/ApiException';
 
 import { GET_HINTS_KEY } from './useGetHints';
 
 export default function usePurchaseHintMutation() {
+  const { setOutOfReword } = useOutOfReword();
   const queryClient = useQueryClient();
   const purchaseHintMutation = useMutation(
     ({
@@ -15,6 +18,11 @@ export default function usePurchaseHintMutation() {
       onSuccess: (_, variable) => {
         queryClient.invalidateQueries([GET_HINTS_KEY, variable.voteId]);
       },
+      onError: (error:ApiException) => {
+        if (error.code === 402) {
+          setOutOfReword(true);
+        }
+      },
     },
   );
 

src/hooks/recoil/useOutOfReword.ts

@@ -0,0 +1,14 @@
+import { useRecoilState } from 'recoil';
+
+import outOfRewordState from '@/store/out-of-reword';
+
+const useOutOfReword = () => {
+  const [outOfReword, setOutOfReword] = useRecoilState(outOfRewordState);
+
+  return {
+    outOfReword,
+    setOutOfReword,
+  };
+};
+
+export default useOutOfReword;

src/hooks/useSignInForm.test.ts

@@ -19,6 +19,8 @@ jest.mock('react-hook-form', () => ({
 
 jest.mock('next-auth/react');
 
+jest.mock('@/utils/nativeBridge');
+
 describe('useSignInForm', () => {
   const routerReplace = jest.fn();
 

src/hooks/useSignInForm.ts

@@ -3,6 +3,8 @@ import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { signIn } from 'next-auth/react';
 
+import { nativeBridge } from '@/utils/nativeBridge';
+
 import usePOPOForm from './usePOPOForm';
 
 export type SignInForm = {
@@ -20,9 +22,9 @@ const useSignInForm = () => {
 
   const onValid = async (data: SignInForm) => {
     setIsLoading(true);
-
+    const fcmToken = await nativeBridge.getFcmToken();
     const res = await signIn('credentials', {
-      email: data.email, password: data.password, redirect: false,
+      email: data.email, password: data.password, fcmToken, redirect: false,
     });
 
     setIsLoading(false);

src/hooks/useSignUpForm.test.tsx

@@ -24,6 +24,8 @@ jest.mock('next-auth/react');
 
 jest.mock('@/lib/api/ApiService');
 
+jest.mock('@/utils/nativeBridge');
+
 jest.useFakeTimers();
 
 describe('useSignUpForm', () => {
@@ -246,7 +248,7 @@ describe('useSignUpForm', () => {
             await result.current.onSubmit();
           });
 
-          expect(routerReplace).toHaveBeenCalledWith('/profile-image');
+          expect(routerReplace).toHaveBeenCalledWith('/');
         });
       });
 

src/hooks/useSignUpForm.ts

@@ -11,6 +11,7 @@ import useSignUpMutation from '@/hooks/api/useSignUpMutation';
 import Gender from '@/types/Gender';
 import PopInfo, { getDefaultPopInfo } from '@/types/PopInfo';
 import School from '@/types/School';
+import { nativeBridge } from '@/utils/nativeBridge';
 
 import usePOPOForm from './usePOPOForm';
 
@@ -107,11 +108,15 @@ const useSignUpForm = () => {
           hideProgressBar: true,
         });
 
+        const fcmToken = await nativeBridge.getFcmToken();
         await signIn('credentials', {
-          email: payload.email, password: payload.password, redirect: false,
+          email: payload.email, password: payload.password, fcmToken, redirect: false,
         });
 
-        router.replace('/profile-image');
+        /*
+        *TODO: 회원가입 후 프로필 사진 등록 페이지로 이동
+        */
+        router.replace('/');
       },
       onError: () => {
         setPopInfo({

src/lib/api/ApiService.ts

@@ -166,10 +166,10 @@ export default class ApiService {
 
   unfollow = (relationId : number) => this.post<UnfollowResponse>(`/relation/cancel/${relationId}`);
 
-  authenticate = async (payload: { email: string, password: string }) => this.post<AuthenticateResponse>('/user/authenticate', {
+  authenticate = async (payload: { email: string, password: string, fcmToken?:string }) => this.post<AuthenticateResponse>('/user/authenticate', {
     email: payload.email,
     password: payload.password,
-    fcmToken: 'test',
+    fcmToken: payload.fcmToken,
   });
 
   passwordMissing = ({ email }: {

src/pages/api/auth/[...nextauth].ts

@@ -9,18 +9,20 @@ const authOptions:NextAuthOptions = {
       name: 'Credentials',
       credentials: {},
       async authorize(credentials) {
-        const { email, password } = credentials as { email: string, password: string };
-
-        const { message, value } = await apiService.authenticate({ email, password });
+        const {
+          email,
+          password,
+          fcmToken,
+        } = credentials as { email: string, password: string, fcmToken?: string };
 
+        const { message, value } = await apiService.authenticate({ email, password, fcmToken });
         if (value) {
           return {
             state: 'success',
             id: email,
             token: value.token,
           };
         }
-
         throw new Error(message);
       },
     }),

src/store/out-of-reword/index.ts

@@ -0,0 +1,8 @@
+import { atom } from 'recoil';
+
+const outOfRewordState = atom<boolean>({
+  key: 'outOfRewordState',
+  default: false,
+});
+
+export default outOfRewordState;

src/utils/nativeBridge.ts

@@ -0,0 +1,32 @@
+export default class PoPoNativeBridge {
+  private popoProtocol = typeof window === 'undefined' ? {
+    postMessage: () => {},
+    resolve: () => {},
+    reject: () => {},
+  } : window.popoProtocol;
+
+  private call({ action }:{ action: string }) {
+    this.popoProtocol.postMessage(JSON.stringify({ action }));
+  }
+
+  private withResultCall<T>({ action }: { action: string; }): Promise<T> {
+    return new Promise<T>((resolve, reject) => {
+      this.popoProtocol.resolve = (result: T) => {
+        resolve(result);
+      };
+      this.popoProtocol.reject = (result: Error) => {
+        reject(result);
+      };
+      this.call({ action });
+    });
+  }
+
+  async getFcmToken() {
+    return (
+      this.withResultCall<string | undefined>({
+        action: 'getPushToken',
+      }));
+  }
+}
+
+export const nativeBridge = new PoPoNativeBridge();