[Hotfix] random api 요청 로직 수정

pages/myinfo/apiHooks/useGetNicknameRandom.ts

@@ -2,6 +2,8 @@ import axios from 'axios';
 
 import { useQuery } from '@tanstack/react-query';
 
+import { useLoginStatusStore } from '@stores/loginStore';
+
 import { MYPAGE_NICKNAME_RANDOM } from '@/constants/apiConstants';
 
 export const getNicknameRandom = async () => {
@@ -12,9 +14,12 @@ export const getNicknameRandom = async () => {
 };
 
 export const useGetNicknameRandom = () => {
+  const { loginStatus } = useLoginStatusStore();
+
   return useQuery({
     queryKey: ['getNicknameRandom'],
     queryFn: getNicknameRandom,
     select: (data) => data.data,
+    enabled: false,
   });
 };

pages/myinfo/components/NicknameResultModal.tsx

@@ -16,20 +16,21 @@ export default function NicknameResultModal({
 }) {
   const { isMobile } = useMediaQueryContext();
 
-  const { data, isFetching, refetch } = useGetNicknameRandom();
+  const { data, isFetching } = useGetNicknameRandom();
 
   const { setDisabled } = useModalStore();
   const { setNickname } = useNicknameStore();
 
-  useEffect(() => {
-    refetch();
-  }, []);
-
   useEffect(() => {
     if (isFetching) {
       setDisabled?.(true);
       return;
     }
+
+    if (!data) {
+      setDisabled?.(false);
+      return;
+    }
     setNickname(data);
     setDisabled?.(false);
   }, [data, isFetching, setDisabled, setNickname]);
@@ -63,11 +64,13 @@ export default function NicknameResultModal({
   const nicknameRegex = /{nickname}/;
   const nicknameTitleArray = title.split(nicknameRegex);
 
+  const displayNickname = newNickname ?? data ?? '';
+
   return (
     <>
       <h3 className={`font-bold text-white ${isMobile ? 'st2' : 'st1'}`}>
         {nicknameTitleArray[0]}
-        <span className='text-secondary300'>{newNickname ?? data}</span>
+        <span className='text-secondary300'>{displayNickname}</span>
         {nicknameTitleArray[1]}
       </h3>
       <p className={`text-gray200 whitespace-pre-wrap mt-[0.8rem] ${isMobile ? 'p2' : 'p1'}`}>

pages/myinfo/hooks/useNicknameModals.tsx

@@ -2,6 +2,7 @@ import { useRouter } from 'next/router';
 
 import { getRandomIndex } from '@utils/randomNumber';
 
+import { useLoginStatusStore } from '@stores/loginStore';
 import { useModalStore } from '@stores/modalStore';
 import { useNicknameStore } from '@stores/nicknameStore';
 import { useToastVisibleStore } from '@stores/toastVisibleStore';
@@ -20,6 +21,7 @@ import {
   NICKNAME_MODAL_FIRST_OVER_COUNT,
   NICKNAME_MODAL_SECOND_OVER_COUNT,
 } from '@/constants/UserInfoConstants';
+import { PAGE_ERROR_MESSAGE2 } from '@/constants/errorMessageConstants';
 
 import { useGetNicknameChangeable } from '../apiHooks/useGetNicknameChangeable';
 import { useGetNicknameRandom } from '../apiHooks/useGetNicknameRandom';
@@ -31,6 +33,7 @@ export const useNicknameModals = () => {
   const { pushModal, popModal } = useModalStore();
   const { setToastVisible } = useToastVisibleStore();
   const { setNickname } = useNicknameStore();
+  const { loginStatus } = useLoginStatusStore();
 
   const { mutate: patchNicknameMutate } = usePatchNickname();
   const { refetch: refetchChangeable } = useGetNicknameChangeable();
@@ -54,10 +57,18 @@ export const useNicknameModals = () => {
       contents: <NicknameResultModal title={randomTitles[getRandomIndex(3)]} newNickname={data} />,
       submitFunction: () => pushCompleteModal(),
       cancelFunction: async () => {
-        const data = await refetch();
-        setNickname(data.data);
+        if (loginStatus !== 'login') {
+          popModal();
+          return setToastVisible({ message: PAGE_ERROR_MESSAGE2, type: 'error' });
+        }
 
-        pushNicknameResult20Modal(nextCount, data.data);
+        const refetchResult = await refetch();
+        const nextNickname = refetchResult.data;
+        if (!nextNickname) return setToastVisible({ message: PAGE_ERROR_MESSAGE2, type: 'error' });
+
+        setNickname(nextNickname);
+
+        pushNicknameResult20Modal(nextCount, nextNickname);
       },
     });
   };
@@ -77,12 +88,20 @@ export const useNicknameModals = () => {
       contents: <NicknameResultModal title={randomTitles[getRandomIndex(3)]} newNickname={data} />,
       submitFunction: () => pushCompleteModal(),
       cancelFunction: async () => {
-        const data = await refetch();
-        setNickname(data.data);
+        if (loginStatus !== 'login') {
+          popModal();
+          return setToastVisible({ message: PAGE_ERROR_MESSAGE2, type: 'error' });
+        }
+
+        const refetchResult = await refetch();
+        const nextNickname = refetchResult.data;
+        if (!nextNickname) return setToastVisible({ message: PAGE_ERROR_MESSAGE2, type: 'error' });
+
+        setNickname(nextNickname);
 
         count >= NICKNAME_MODAL_SECOND_OVER_COUNT - 1
-          ? pushNicknameResult20Modal(nextCount, data.data)
-          : pushNicknameResult10Modal(nextCount, data.data);
+          ? pushNicknameResult20Modal(nextCount, nextNickname)
+          : pushNicknameResult10Modal(nextCount, nextNickname);
       },
     });
   };
@@ -102,12 +121,19 @@ export const useNicknameModals = () => {
       contents: <NicknameResultModal title={randomTitles[getRandomIndex(3)]} newNickname={data} />,
       submitFunction: () => pushCompleteModal(),
       cancelFunction: async () => {
-        const { data } = await refetch();
-        setNickname(data);
+        if (loginStatus !== 'login') {
+          popModal();
+          return setToastVisible({ message: PAGE_ERROR_MESSAGE2, type: 'error' });
+        }
+
+        const { data: nextNickname } = await refetch();
+        if (!nextNickname) return setToastVisible({ message: PAGE_ERROR_MESSAGE2, type: 'error' });
+
+        setNickname(nextNickname);
 
         count >= NICKNAME_MODAL_FIRST_OVER_COUNT - 1
-          ? pushNicknameResult10Modal(nextCount, data)
-          : pushNicknameResultModal(nextCount, data);
+          ? pushNicknameResult10Modal(nextCount, nextNickname)
+          : pushNicknameResultModal(nextCount, nextNickname);
       },
     });
   };
@@ -138,7 +164,10 @@ export const useNicknameModals = () => {
 
     pushModal({
       ...MYINFO_NICKNAME_EDIT_MODAL,
-      submitFunction: () => pushNicknameResultModal(1),
+      submitFunction: async () => {
+        pushNicknameResultModal(1);
+        await refetch();
+      },
       cancelFunction: () => popModal(),
     });
   };