merge : merge to develop

depromeet · Feb 7, 2024 · 3b2a01d · 3b2a01d
2 parents 2323d25 + 7a980fa
commit 3b2a01d
Show file tree

Hide file tree

Showing 19 changed files with 290 additions and 113 deletions.
diff --git a/src/apis/auth.ts b/src/apis/auth.ts
@@ -23,6 +23,10 @@ interface RegisterRequest {
   nickname: string;
 }
 
+interface FcmTokenRequest {
+  fcmToken: string;
+}
+
 export const AUTH_APIS = {
   login: async (request: LoginRequest): Promise<LoginResponse> => {
     const { data } = await apiInstance.post(ROUTER.AUTH.LOGIN, {
@@ -54,6 +58,13 @@ export const AUTH_APIS = {
     });
     return data;
   },
+
+  fcmUpdate: async (request: FcmTokenRequest) => {
+    const { data } = await apiInstance.patch('/members/fcm-token', {
+      fcmToken: request.fcmToken,
+    });
+    return data;
+  },
 };
 
 export const useTempRegister = (option?: UseMutationOptions<LoginResponse, AxiosError, LoginRequest>) => {
@@ -97,3 +108,10 @@ export const useNicknameRegister = (option?: UseMutationOptions<RegisterRequest,
     ...option,
   });
 };
+
+export const useUpdateMemberFcmToken = (option?: UseMutationOptions<FcmTokenRequest, AxiosError, FcmTokenRequest>) => {
+  return useMutation({
+    mutationFn: AUTH_APIS.fcmUpdate,
+    ...option,
+  });
+};
diff --git a/src/apis/record.ts b/src/apis/record.ts
@@ -1,6 +1,7 @@
 import getQueryKey from '@/apis/getQueryKey';
 import { type RecordType } from '@/apis/schema/record';
 import { type ImageFileExtensionType, type UploadBaseRequest } from '@/apis/schema/upload';
+import useMutationHandleError from '@/hooks/query/useMutationHandleError';
 import {
   useMutation,
   type UseMutationOptions,
@@ -109,7 +110,12 @@ export const useGetRecordDetail = (recordId: string, option?: UseQueryOptions<Ge
 };
 
 export const useRecordTime = (options?: UseMutationOptions<RecordTimeResponse, unknown, RecordTimeRequest>) =>
-  useMutation({ mutationFn: RECORD_API.recordTime, ...options });
+  useMutationHandleError(
+    { mutationFn: RECORD_API.recordTime, ...options },
+    {
+      offset: 'appBar',
+    },
+  );
 
 export const useUpdateRemarkMutation = (
   recordId: string,

diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
@@ -3,7 +3,7 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import Script from 'next/script';
-import { useSocialLogin } from '@/apis/auth';
+import { useSocialLogin, useUpdateMemberFcmToken } from '@/apis/auth';
 import Button from '@/components/Button/Button';
 import ButtonSocialLogin from '@/components/ButtonSocialLogin/ButtonSocialLogin';
 import { AUTH_PROVIDER, WINDOW_CUSTOM_EVENT } from '@/constants/common';
@@ -30,7 +30,8 @@ const initAppleLogin = () => {
 
 export default function LoginPage() {
   const router = useRouter();
-  const { mutateAsync } = useSocialLogin();
+  const { mutateAsync: socialLoginAsyncMutate } = useSocialLogin();
+  const { mutate: updateMemberFcmTokenMutate } = useUpdateMemberFcmToken();
 
   const onClickGuest = () => {
     router.push(ROUTER.GUEST.MISSION.NEW);
@@ -66,8 +67,8 @@ export default function LoginPage() {
   };
 
   useEffect(() => {
-    const appleIdSignInOnSuccessHandler = (event: CustomEvent) => {
-      mutateAsync(
+    const webAppleIdSignInOnSuccessEventListener = (event: CustomEvent) => {
+      socialLoginAsyncMutate(
         {
           provider: AUTH_PROVIDER.APPLE,
           idToken: event.detail.authorization.id_token,
@@ -80,14 +81,17 @@ export default function LoginPage() {
       );
     };
 
-    const handleEvent = (event: CustomEvent) => {
-      mutateAsync(
+    const nativeLoginCallbackEventListener = (event: CustomEvent) => {
+      socialLoginAsyncMutate(
         {
           provider: event.detail.data.provider,
           idToken: event.detail.data.data,
         },
         {
           onSuccess: () => {
+            if (!!event.detail?.data?.deviceToken) {
+              updateMemberFcmTokenMutate({ fcmToken: event.detail.data.deviceToken });
+            }
             router.push(ROUTER.HOME);
           },
           onError: () => {
@@ -103,18 +107,30 @@ export default function LoginPage() {
 
     document.addEventListener(
       WINDOW_CUSTOM_EVENT.APPLE_ID_SIGN_IN_ON_SUCCESS,
-      appleIdSignInOnSuccessHandler as EventListener,
+      webAppleIdSignInOnSuccessEventListener as EventListener,
+    );
+    document.addEventListener(
+      NATIVE_CUSTOM_EVENTS.APPLE_LOGIN_CALLBACK,
+      nativeLoginCallbackEventListener as EventListener,
+    );
+    document.addEventListener(
+      NATIVE_CUSTOM_EVENTS.KAKAO_LOGIN_CALLBACK,
+      nativeLoginCallbackEventListener as EventListener,
     );
-    document.addEventListener(NATIVE_CUSTOM_EVENTS.APPLE_LOGIN_CALLBACK, handleEvent as EventListener);
-    document.addEventListener(NATIVE_CUSTOM_EVENTS.KAKAO_LOGIN_CALLBACK, handleEvent as EventListener);
 
     return () => {
       document.removeEventListener(
         WINDOW_CUSTOM_EVENT.APPLE_ID_SIGN_IN_ON_SUCCESS,
-        appleIdSignInOnSuccessHandler as EventListener,
+        webAppleIdSignInOnSuccessEventListener as EventListener,
+      );
+      document.removeEventListener(
+        NATIVE_CUSTOM_EVENTS.APPLE_LOGIN_CALLBACK,
+        nativeLoginCallbackEventListener as EventListener,
+      );
+      document.removeEventListener(
+        NATIVE_CUSTOM_EVENTS.KAKAO_LOGIN_CALLBACK,
+        nativeLoginCallbackEventListener as EventListener,
       );
-      document.removeEventListener(NATIVE_CUSTOM_EVENTS.APPLE_LOGIN_CALLBACK, handleEvent as EventListener);
-      document.removeEventListener(NATIVE_CUSTOM_EVENTS.KAKAO_LOGIN_CALLBACK, handleEvent as EventListener);
     };
   }, []);
 

diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -2,22 +2,16 @@
 
 import { useEffect } from 'react';
 import Image from 'next/image';
-import { useRouter } from 'next/navigation';
-import { isSeverError } from '@/apis/instance.api';
-import { ROUTER } from '@/constants/router';
 import { css } from '@/styled-system/css';
 
 export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   const onClickResetButton = () => reset();
-  const router = useRouter();
+
   useEffect(() => {
-    if (isSeverError(error)) {
-      if (error.response.status === 401) {
-        router.push(ROUTER.AUTH.LOGIN);
-      }
-    }
+    // TODO: ga로 쏘거나 하는 등의 플로우는 필요없을지 하는 생각
     console.error(error);
   }, [error]);
+
   return (
     <main className={MainWrapperCss}>
       <div className={imageWrapperCss}>

diff --git a/src/app/level/guide/Character.tsx b/src/app/level/guide/Character.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import MotionDiv from '@/components/Motion/MotionDiv';
 import { css, cx } from '@/styled-system/css';
 
 interface Props {
@@ -11,7 +12,7 @@ interface Props {
 
 function Character(props: Props) {
   return (
-    <div
+    <MotionDiv
       key={props.level}
       className={cx(
         imageWrapperCss,
@@ -58,7 +59,7 @@ function Character(props: Props) {
           />
         </>
       )}
-    </div>
+    </MotionDiv>
   );
 }
 
@@ -67,7 +68,6 @@ export default Character;
 const imageWrapperCss = css({
   position: 'relative',
   margin: '0 auto',
-  animation: 'fadeIn .7s',
   height: '100%',
   width: '100%',
 });

diff --git a/src/app/level/guide/page.tsx b/src/app/level/guide/page.tsx
@@ -7,11 +7,10 @@ import GrowthLevel from '@/app/level/guide/GrowthLevel';
 import LockedCharacter from '@/components/Level/LockedCharacter';
 import LevelStatus from '@/components/LevelStatus/LevelStatus';
 import LoadingSpinner from '@/components/Loading/LoadingSpinner';
+import MotionDiv from '@/components/Motion/MotionDiv';
 import { LEVEL_SYSTEM } from '@/constants/level';
-import { defaultFadeInMotion } from '@/constants/style/animation';
 import { css, cx } from '@/styled-system/css';
 import { getLevel } from '@/utils/result';
-import { motion } from 'framer-motion';
 
 function LevelGuidePage() {
   const { data, isLoading } = useGetMissionSummary();
@@ -39,9 +38,7 @@ function LevelGuidePage() {
             <section className={levelTextWrapperCss}>
               <p className={levelLabelCss}>현재 레벨</p>
               <div className={cx(badgeCss)}>
-                <motion.span key={selectLevelInfo.label} {...defaultFadeInMotion}>
-                  {selectLevelInfo.label}
-                </motion.span>
+                <MotionDiv key={selectLevelInfo.label}>{selectLevelInfo.label}</MotionDiv>
               </div>
             </section>
             <section className={characterImageSectionCss}>

diff --git a/src/app/mission/[id]/stopwatch/index.hooks.ts b/src/app/mission/[id]/stopwatch/index.hooks.ts
@@ -10,10 +10,10 @@ export function useUnloadAction(time: number, missionId: string) {
     setProgressMissionTime(missionId, time);
   }, [time]);
 
-  useVisibilityState(onSaveTime);
+  useVisibilityStateHidden(onSaveTime);
 }
 
-function useVisibilityState(onAction: VoidFunction) {
+function useVisibilityStateHidden(onAction: VoidFunction) {
   const onVisibilityChange = useCallback(() => {
     if (document.visibilityState === 'hidden') {
       onAction();
@@ -30,6 +30,24 @@ function useVisibilityState(onAction: VoidFunction) {
   }, [onVisibilityChange]); // 빈 의존성 배열을 전달하여 이 훅이 컴포넌트가 마운트되거나 언마운트될 때만 실행되도록 합니다.
 }
 
+// visible 상태로 바뀔 때 실행되는 훅
+export function useVisibilityStateVisible(onAction: VoidFunction) {
+  const onVisibilityChange = useCallback(() => {
+    if (document.visibilityState === 'visible') {
+      onAction();
+    }
+  }, [onAction]);
+
+  useEffect(() => {
+    document.addEventListener('visibilitychange', onVisibilityChange);
+
+    // 컴포넌트가 언마운트될 때 이벤트 리스너를 제거합니다.
+    return () => {
+      document.removeEventListener('visibilitychange', onVisibilityChange);
+    };
+  }, [onVisibilityChange]); // 빈 의존성 배열을 전달하여 이 훅이 컴포넌트가 마운트되거나 언마운트될 때만 실행되도록 합니다.
+}
+
 export function useRecordMidTime(time: number, missionId: string) {
   const onSaveTime = () => {
     eventLogger.logEvent(EVENT_LOG_NAME.STOPWATCH.MID_SAVE_2, EVENT_LOG_CATEGORY.STOPWATCH, { time });

diff --git a/src/app/mission/[id]/stopwatch/page.tsx b/src/app/mission/[id]/stopwatch/page.tsx
@@ -2,6 +2,7 @@
 
 import { Fragment, useEffect, useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
+import { isSeverError } from '@/apis/instance.api';
 import { useGetMissionDetailNoSuspense } from '@/apis/mission';
 import { useRecordTime } from '@/apis/record';
 import { useCustomBack, useRecordMidTime, useUnloadAction } from '@/app/mission/[id]/stopwatch/index.hooks';
@@ -80,8 +81,14 @@ export default function StopwatchPage() {
       setIsMoveLoading(true);
       removeProgressMissionData();
     },
-    onError: () => {
-      setIsMoveLoading(() => false); // 없어도 되는지 확인 필요
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onError: (error) => {
+      if (isSeverError(error)) {
+        if (error.response.data.data.errorClassName === 'MISSION_RECORD_ALREADY_EXISTS_TODAY') {
+          removeProgressMissionData();
+          router.replace(ROUTER.HOME);
+        }
+      }
     },
   });
 

diff --git a/src/app/result/page.tsx b/src/app/result/page.tsx
@@ -5,6 +5,7 @@ import Character from '@/app/level/guide/Character';
 import AppBarBottom from '@/components/AppBarBottom/AppBarBottom';
 import Banner from '@/components/Banner/Banner';
 import LinkButton from '@/components/Button/LinkButton';
+import MotionDiv from '@/components/Motion/MotionDiv';
 import Tab from '@/components/Tab/Tab';
 import { ROUTER } from '@/constants/router';
 import { css } from '@/styled-system/css';
@@ -21,7 +22,7 @@ const TAB = [
 ];
 
 function ResultPage() {
-  const { data } = useGetMissionSummary();
+  const { data, isLoading } = useGetMissionSummary();
 
   const symbolStack = data?.symbolStack ?? 0;
   const currentLevel = getLevel(symbolStack);
@@ -36,19 +37,30 @@ function ResultPage() {
           레벨 안내
         </LinkButton>
       </section>
-      <section className={imageSectionCss}>
-        <Character width={280} height={210} level={currentLevel.level} isBackground />
-      </section>
-      <LevelStatus symbolStack={symbolStack} viewLevel={currentLevel.level} />
-      <section className={bannerSectionCss}>
-        <Banner type="card" description="전체 누적 시간" iconUrl="/assets/icons/graph/clock.png" title={totalTime} />
-        <Banner
-          type="card"
-          description="총 미션 달성률"
-          iconUrl="/assets/icons/graph/chart.png"
-          title={totalMissionAttainRate}
-        />
-      </section>
+      {isLoading ? (
+        <div></div>
+      ) : (
+        <>
+          <MotionDiv variants="fadeInUp" className={imageSectionCss}>
+            <Character width={280} height={210} level={currentLevel.level} isBackground />
+          </MotionDiv>
+          <LevelStatus symbolStack={symbolStack} viewLevel={currentLevel.level} />
+          <MotionDiv className={bannerSectionCss}>
+            <Banner
+              type="card"
+              description="전체 누적 시간"
+              iconUrl="/assets/icons/graph/clock.png"
+              title={totalTime}
+            />
+            <Banner
+              type="card"
+              description="총 미션 달성률"
+              iconUrl="/assets/icons/graph/chart.png"
+              title={totalMissionAttainRate}
+            />
+          </MotionDiv>
+        </>
+      )}
       <AppBarBottom />
     </div>
   );

diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
@@ -5,28 +5,17 @@ import Link from 'next/link';
 import { useSuspenseGetSearchNickname } from '@/apis/member';
 import FollowerItem from '@/components/ListItem/Follow/FollowerItem';
 import FollowingItem from '@/components/ListItem/Follow/FollowingItem';
-import { ProfileItemSkeleton } from '@/components/ListItem/ProfileListItem';
 import SearchBar from '@/components/SearchBar/SearchBar';
 import { ROUTER } from '@/constants/router';
 import { css } from '@/styled-system/css';
 
 function SearchPage() {
   const [input, setInput] = useState('');
-  const filteredInput = input.trim();
   return (
     <>
       <SearchBar placeholder="닉네임을 검색해 주세요." value={input} onChange={setInput} />
-      <Suspense
-        fallback={
-          <>
-            <ProfileItemSkeleton />
-            <ProfileItemSkeleton />
-            <ProfileItemSkeleton />
-            <ProfileItemSkeleton />
-          </>
-        }
-      >
-        <List nickname={filteredInput} />
+      <Suspense fallback={<div></div>}>
+        <List nickname={input} />
       </Suspense>
     </>
   );

diff --git a/src/app/template.tsx b/src/app/template.tsx
@@ -11,7 +11,6 @@ import { useAuth } from '@/hooks/useAuth';
 
 export default function Template({ children }: { children: React.ReactNode }) {
   useAuth();
-
   // const [customMotion, setCustomMotion] = useState(true);
 
   // useEffect(() => {