diff --git a/pages/myinfo/apiHooks/useGetNicknameRandom.ts b/pages/myinfo/apiHooks/useGetNicknameRandom.ts index 2916afe2..17c0a255 100644 --- a/pages/myinfo/apiHooks/useGetNicknameRandom.ts +++ b/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, }); }; diff --git a/pages/myinfo/components/NicknameResultModal.tsx b/pages/myinfo/components/NicknameResultModal.tsx index b9481c70..0ac68e96 100644 --- a/pages/myinfo/components/NicknameResultModal.tsx +++ b/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 ( <>

{nicknameTitleArray[0]} - {newNickname ?? data} + {displayNickname} {nicknameTitleArray[1]}

diff --git a/pages/myinfo/hooks/useNicknameModals.tsx b/pages/myinfo/hooks/useNicknameModals.tsx index 224a355f..72406f03 100644 --- a/pages/myinfo/hooks/useNicknameModals.tsx +++ b/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: , 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: , 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: , 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(), }); };