Leets-Official · One-HyeWon · Dec 17, 2023 · Dec 17, 2023 · Dec 18, 2023
diff --git a/src/app/(route)/layout.tsx b/src/app/(route)/layout.tsx
@@ -1,6 +1,8 @@
 import { QueryProvider, RecoilProvider } from '@/_context'
 import '@/_ui/globals.css'
 import type { Metadata } from 'next'
+import { Suspense } from 'react'
+import Loading from '@/_components/common/Loading'
 
 export const metadata: Metadata = {
   title: '무드메이트',
@@ -19,7 +21,9 @@ export default function RootLayout({
     <html lang="en">
       <body className="h-screen desktop:w-[360px] desktop:mx-auto">
         <RecoilProvider>
-          <QueryProvider>{children}</QueryProvider>
+          <QueryProvider>
+            <Suspense fallback={<Loading />}>{children}</Suspense>
+          </QueryProvider>
         </RecoilProvider>
       </body>
     </html>

diff --git a/src/app/(route)/login/google/page.tsx b/src/app/(route)/login/google/page.tsx
@@ -8,7 +8,7 @@ import { useMainQuery } from '@/_hooks/useMainQuery'
 import ErrorPage from '@/(route)/error'
 
 const OauthPage = () => {
-  const { isLoading, isError, data } = useMainQuery()
+  const { isError, data } = useMainQuery()
   const [accessToken, setAccessToken] = useState<string>('')
   const [refreshToken, setRefreshToken] = useState<string>('')
   const router = useRouter()
@@ -54,9 +54,6 @@ const OauthPage = () => {
     }
   }, [data, router])
 
-  if (isLoading) {
-    return <Loading />
-  }
   if (isError || !data) {
     return <ErrorPage />
   }

diff --git a/src/app/(route)/main/page.tsx b/src/app/(route)/main/page.tsx
@@ -3,15 +3,11 @@
 import MainPage from '@/_components/main/MainPage'
 import { useMainQuery } from '@/_hooks/useMainQuery'
 import InactivePage from '@/_components/inactive/InActivePage'
-import Loading from '@/_components/common/Loading'
 import Error from '@/(route)/error'
 
 export default function MainpagePage() {
-  const { isLoading, isError, data } = useMainQuery()
+  const { isError, data } = useMainQuery()
 
-  if (isLoading) {
-    return <Loading />
-  }
   if (isError || !data) {
     return <Error />
   }

diff --git a/src/app/(route)/mypage/page.tsx b/src/app/(route)/mypage/page.tsx
@@ -3,16 +3,14 @@
 import MypageSecondBoxContainer from '@/_components/mypage/containers/MypageSecondBoxContainer'
 import MypageThirdBoxContainer from '@/_components/mypage/containers/MypageThirdBoxContainer'
 import { useMyPageQuery } from '@/_hooks/useMypageQuery'
-import Loading from '@/_components/common/Loading'
+
 import Profile from '@/_components/information/Profile'
 import ErrorPage from '@/(route)/error'
 import Header from '@/_components/layout/Header'
 
 export default function MyPage() {
-  const { isLoading, isError, data } = useMyPageQuery()
-  if (isLoading) {
-    return <Loading />
-  }
+  const { isError, data } = useMyPageQuery()
+
   if (isError || !data) {
     return <ErrorPage />
   }

diff --git a/src/app/(route)/userinfo/[...slug]/page.tsx b/src/app/(route)/userinfo/[...slug]/page.tsx
@@ -1,4 +1,9 @@
+'use client'
+
+import Error from '@/(route)/error'
 import UserinfoPageComponents from '@/_components/common/userinfo/UserinfoPageComponents'
+import { useMainQuery } from '@/_hooks/useMainQuery'
+import { useRouter } from 'next/navigation'
 
 interface UserinfoPageProps {
   params: {
@@ -8,7 +13,17 @@ interface UserinfoPageProps {
 
 export default function UserinfoPage({ params }: UserinfoPageProps) {
   const pageNumber = params.slug
-
+  const { isError, data } = useMainQuery()
+  const router = useRouter()
+  if (isError) {
+    return <Error />
+  }
+  if (
+    data?.mainPageResponse.userGender == 'MALE' ||
+    data?.mainPageResponse.userGender == 'FEMALE'
+  ) {
+    router.push('/main')
+  }
   return (
     <section className="flex items-center justify-center">
       <UserinfoPageComponents slug={pageNumber} />

diff --git a/src/app/_components/chat/containers/ChatPartnerInfoContainer.tsx b/src/app/_components/chat/containers/ChatPartnerInfoContainer.tsx
@@ -7,7 +7,6 @@ import { useQuery } from '@tanstack/react-query'
 import { getPartnerInfo } from '@/_service/partner'
 import Bio from '@/_components/common/Bio'
 import Header from '@/_components/layout/Header'
-import Loading from '@/_components/common/Loading'
 
 interface ChatPartnerInfoContainerProps {
   userId: number
@@ -16,19 +15,11 @@ const ChatPartnerInfoContainer = ({
   userId,
 }: ChatPartnerInfoContainerProps) => {
   const queryKey = ['chat/partner-info', userId]
-  const {
-    isLoading,
-    isError,
-    data: partner,
-  } = useQuery<PartnerInfo, Error>({
+  const { isError, data: partner } = useQuery<PartnerInfo, Error>({
     queryKey,
     queryFn: getPartnerInfo,
   })
 
-  if (isLoading) {
-    return <Loading />
-  }
-
   if (isError) {
     return <ErrorPage />
   }

diff --git a/src/app/_components/chat/containers/ChatPreviewContainer.tsx b/src/app/_components/chat/containers/ChatPreviewContainer.tsx
@@ -2,7 +2,7 @@
 
 import { useChatQuery } from '@/_hooks/useChatQuery'
 import { CHAT_SIZE, UNMATCHED_MODAL } from '@/_constants/chat'
-import Loading from '@/_components/common/Loading'
+
 import ErrorPage from '@/(route)/error'
 import { useEffect } from 'react'
 import { useRecoilState } from 'recoil'
@@ -26,22 +26,14 @@ const ChatPreviewContainer = ({
   const [openUnmatchModal, setOpenUnmatchedModal] = useRecoilState(
     openUnmatchModalState,
   )
-  const { isLoading, isError, chatHistory } = useChatQuery(
-    roomId,
-    CHAT_SIZE.PREVIEW,
-    1,
-  )
+  const { isError, chatHistory } = useChatQuery(roomId, CHAT_SIZE.PREVIEW, 1)
 
   useEffect(() => {
     if (chatHistory && !chatHistory.user.roomActive) {
       setOpenUnmatchedModal(true)
     }
   }, [chatHistory])
 
-  if (isLoading) {
-    return <Loading />
-  }
-
   if (isError) {
     return <ErrorPage />
   }

diff --git a/src/app/_components/chat/containers/ChatRoomContainer.tsx b/src/app/_components/chat/containers/ChatRoomContainer.tsx
@@ -9,7 +9,7 @@ import { useRouter } from 'next/navigation'
 import ModalPortal from '@/_components/common/modal/ModalPortal'
 import ModalOutside from '@/_components/common/modal/ModalOutside'
 import ModalContentOne from '@/_components/common/modal/ModalContentOne'
-import Loading from '@/_components/common/Loading'
+
 import ErrorPage from '@/(route)/error'
 import ChatList from '../chatroom/ChatList'
 
@@ -27,8 +27,11 @@ const ChatRoomContainer = ({ userId, roomId }: ChatRoomContainerProps) => {
   const [openUnmatchModal, setOpenUnmatchedModal] = useRecoilState(
     openUnmatchModalState,
   )
-  const { fetchNextPage, hasNextPage, data, isError, isLoading } =
-    useInfiniteChatQuery(userId, roomId, CHAT_SIZE.ROOM)
+  const { fetchNextPage, hasNextPage, data, isError } = useInfiniteChatQuery(
+    userId,
+    roomId,
+    CHAT_SIZE.ROOM,
+  )
 
   useEffect(() => {
     if (containerRef.current) {
@@ -85,10 +88,6 @@ const ChatRoomContainer = ({ userId, roomId }: ChatRoomContainerProps) => {
     }
   }, [data?.pages.length])
 
-  if (isLoading) {
-    return <Loading />
-  }
-
   if (isError || !data) {
     return <ErrorPage />
   }

diff --git a/src/app/_components/common/userinfo/UserNickname.tsx b/src/app/_components/common/userinfo/UserNickname.tsx
@@ -5,6 +5,8 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 import { userInfoState } from '@/_atom/userinfo'
 import NormalButton from '../NormalButton'
 import Input from '../Input'
+import { useMainQuery } from '@/_hooks/useMainQuery'
+import Error from '@/(route)/error'
 
 interface UserNicknameProps {
   pageNum: string
@@ -31,6 +33,18 @@ const UserNickname = ({ pageNum }: UserNicknameProps) => {
   const [inputValue, setInputValue] = useState(userInfo.nickname)
   const [inputCount, setinputCount] = useState(`${userInfo.nickname.length}/5`)
 
+  const { isError, data } = useMainQuery()
+
+  if (isError) {
+    return <Error />
+  }
+  if (
+    data?.mainPageResponse.userGender == 'MALE' ||
+    data?.mainPageResponse.userGender == 'FEMALE'
+  ) {
+    route.push('/main')
+  }
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value.slice(0, INPUT_NICKNAME.MAX)
     const koeranOnly = /^[ㄱ-ㅎㅏ-ㅣ가-힣]*$/g

diff --git a/src/app/_components/main/MainPage.tsx b/src/app/_components/main/MainPage.tsx
@@ -6,7 +6,7 @@ import TimerMiddleText from '@/_components/timer/containers/TimerMiddleText'
 import NavBar from '@/_components/common/NavBar'
 import { useMainQuery } from '@/_hooks/useMainQuery'
 import Image from 'next/image'
-import Loading from '@/_components/common/Loading'
+
 import afterMatchFemale from 'public/illustration/female/main/afterMatch.png'
 import afterMatchMale from 'public/illustration/male/main/afterMatch.png'
 import beforeMatch from 'public/illustration/common/main/beforeMatch.png'
@@ -76,10 +76,8 @@ const getBGStyle = (type: string, gender: string) => {
 }
 const MainPage = ({ type, gender }: MatchProps) => {
   const route = useRouter()
-  const { isLoading, isError, data } = useMainQuery()
-  if (isLoading) {
-    return <Loading />
-  }
+  const { isError, data } = useMainQuery()
+
   if (isError || !data) {
     return <ErrorPage />
   }

diff --git a/src/app/_hooks/useChatQuery.ts b/src/app/_hooks/useChatQuery.ts
@@ -5,14 +5,10 @@ import { useQuery } from '@tanstack/react-query'
 
 export const useChatQuery = (roomId: number, size: number, page: number) => {
   const queryKey = ['chat', roomId, size, page]
-  const {
-    isLoading,
-    isError,
-    data: chatHistory,
-  } = useQuery<ResponseChatGet, Error>({
+  const { isError, data: chatHistory } = useQuery<ResponseChatGet, Error>({
     queryKey,
     queryFn: () => getMessages(roomId, size, page),
   })
 
-  return { isLoading, isError, chatHistory }
+  return { isError, chatHistory }
 }
diff --git a/src/app/_hooks/useMainQuery.ts b/src/app/_hooks/useMainQuery.ts
@@ -1,14 +1,14 @@
 'use client'
 
-import { useQuery } from '@tanstack/react-query'
+import { useSuspenseQuery } from '@tanstack/react-query'
 import { mainInfo } from '@/_service/main'
 
 export const useMainQuery = () => {
   const queryKey = ['main']
-  const { isLoading, isError, data } = useQuery<ResponseMain, Error>({
+  const { isError, data } = useSuspenseQuery<ResponseMain, Error>({
     queryKey,
     queryFn: mainInfo,
   })
 
-  return { isLoading, isError, data }
+  return { isError, data }
 }
diff --git a/src/app/_hooks/useMypageQuery.ts b/src/app/_hooks/useMypageQuery.ts
@@ -5,10 +5,10 @@ import { myPageInfo } from '@/_service/mypage'
 
 export const useMyPageQuery = () => {
   const queryKey = ['myPage']
-  const { isLoading, isError, data } = useQuery<ResponseMyPage, Error>({
+  const { isError, data } = useQuery<ResponseMyPage, Error>({
     queryKey,
     queryFn: myPageInfo,
   })
 
-  return { isLoading, isError, data }
+  return { isError, data }
 }