From 7b77500139687d2a49c1982f3aeedd5e1ad32f8e Mon Sep 17 00:00:00 2001
From: One-HyeWon <5876675@naver.com>
Date: Mon, 18 Dec 2023 03:19:48 +0900
Subject: [PATCH 1/2] =?UTF-8?q?:recycle:[refactor]:=20isLoading=20suspense?=
=?UTF-8?q?=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/app/(route)/layout.tsx | 6 +++++-
src/app/(route)/login/google/page.tsx | 5 +----
src/app/(route)/main/page.tsx | 6 +-----
src/app/(route)/mypage/page.tsx | 8 +++-----
src/app/(route)/userinfo/[...slug]/page.tsx | 17 ++++++++++++++++-
.../containers/ChatPartnerInfoContainer.tsx | 11 +----------
.../chat/containers/ChatPreviewContainer.tsx | 12 ++----------
.../chat/containers/ChatRoomContainer.tsx | 13 ++++++-------
.../common/userinfo/UserNickname.tsx | 14 ++++++++++++++
src/app/_components/main/MainPage.tsx | 8 +++-----
src/app/_hooks/useChatQuery.ts | 8 ++------
src/app/_hooks/useMainQuery.ts | 6 +++---
src/app/_hooks/useMypageQuery.ts | 4 ++--
13 files changed, 59 insertions(+), 59 deletions(-)
diff --git a/src/app/(route)/layout.tsx b/src/app/(route)/layout.tsx
index 5e6d0c2f..7af9a9c3 100644
--- 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({
- {children}
+
+ }>{children}
+
diff --git a/src/app/(route)/login/google/page.tsx b/src/app/(route)/login/google/page.tsx
index 65b5a220..17ab2a26 100644
--- 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('')
const [refreshToken, setRefreshToken] = useState('')
const router = useRouter()
@@ -54,9 +54,6 @@ const OauthPage = () => {
}
}, [data, router])
- if (isLoading) {
- return
- }
if (isError || !data) {
return
}
diff --git a/src/app/(route)/main/page.tsx b/src/app/(route)/main/page.tsx
index 23efa390..7c6cec5f 100644
--- 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
- }
if (isError || !data) {
return
}
diff --git a/src/app/(route)/mypage/page.tsx b/src/app/(route)/mypage/page.tsx
index f4437232..1ad6d8ab 100644
--- 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
- }
+ const { isError, data } = useMyPageQuery()
+
if (isError || !data) {
return
}
diff --git a/src/app/(route)/userinfo/[...slug]/page.tsx b/src/app/(route)/userinfo/[...slug]/page.tsx
index 31200620..de35300b 100644
--- 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
+ }
+ if (
+ data?.mainPageResponse.userGender == 'MALE' ||
+ data?.mainPageResponse.userGender == 'FEMALE'
+ ) {
+ router.push('/main')
+ }
return (
diff --git a/src/app/_components/chat/containers/ChatPartnerInfoContainer.tsx b/src/app/_components/chat/containers/ChatPartnerInfoContainer.tsx
index 92517e2e..d3ecd5f5 100644
--- 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
@@ -17,19 +16,11 @@ const ChatPartnerInfoContainer = ({
userId,
}: ChatPartnerInfoContainerProps) => {
const queryKey = ['chat/partner-info', userId]
- const {
- isLoading,
- isError,
- data: partner,
- } = useQuery({
+ const { isError, data: partner } = useQuery({
queryKey,
queryFn: getPartnerInfo,
})
- if (isLoading) {
- return
- }
-
if (isError) {
return
}
diff --git a/src/app/_components/chat/containers/ChatPreviewContainer.tsx b/src/app/_components/chat/containers/ChatPreviewContainer.tsx
index 572d5696..9d8c12aa 100644
--- 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,11 +26,7 @@ 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) {
@@ -38,10 +34,6 @@ const ChatPreviewContainer = ({
}
}, [chatHistory])
- if (isLoading) {
- return
- }
-
if (isError) {
return
}
diff --git a/src/app/_components/chat/containers/ChatRoomContainer.tsx b/src/app/_components/chat/containers/ChatRoomContainer.tsx
index 84c88449..7b067df6 100644
--- 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
- }
-
if (isError || !data) {
return
}
diff --git a/src/app/_components/common/userinfo/UserNickname.tsx b/src/app/_components/common/userinfo/UserNickname.tsx
index c5af24ba..f2e572d4 100644
--- 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
@@ -17,6 +19,18 @@ const UserNickname = ({ pageNum }: UserNicknameProps) => {
const [inputValue, setInputValue] = useState(userInfo.nickname)
const [inputCount, setinputCount] = useState(`${inputValue.length}/5`)
+ const { isError, data } = useMainQuery()
+
+ if (isError) {
+ return
+ }
+ if (
+ data?.mainPageResponse.userGender == 'MALE' ||
+ data?.mainPageResponse.userGender == 'FEMALE'
+ ) {
+ route.push('/main')
+ }
+
const handleInputChange = (e: React.ChangeEvent) => {
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
index 15b3b603..c7d2e17c 100644
--- 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
- }
+ const { isError, data } = useMainQuery()
+
if (isError || !data) {
return
}
diff --git a/src/app/_hooks/useChatQuery.ts b/src/app/_hooks/useChatQuery.ts
index d0d7d7ed..e840399c 100644
--- 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({
+ const { isError, data: chatHistory } = useQuery({
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
index 605df8fe..52fe63d7 100644
--- 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 { useQuery, useSuspenseQuery } from '@tanstack/react-query'
import { mainInfo } from '@/_service/main'
export const useMainQuery = () => {
const queryKey = ['main']
- const { isLoading, isError, data } = useQuery({
+ const { isError, data } = useSuspenseQuery({
queryKey,
queryFn: mainInfo,
})
- return { isLoading, isError, data }
+ return { isError, data }
}
diff --git a/src/app/_hooks/useMypageQuery.ts b/src/app/_hooks/useMypageQuery.ts
index d5cce117..2d7384dc 100644
--- 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({
+ const { isError, data } = useQuery({
queryKey,
queryFn: myPageInfo,
})
- return { isLoading, isError, data }
+ return { isError, data }
}
From 4da1ee9573c0efa495302ac772f9a601016fcd1d Mon Sep 17 00:00:00 2001
From: One-HyeWon <5876675@naver.com>
Date: Mon, 18 Dec 2023 04:42:27 +0900
Subject: [PATCH 2/2] =?UTF-8?q?:recycle:[refactor]:=20use=20cliet=20?=
=?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/app/_components/common/userinfo/UserNickname.tsx | 2 ++
src/app/_hooks/useMainQuery.ts | 2 +-
2 files changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/app/_components/common/userinfo/UserNickname.tsx b/src/app/_components/common/userinfo/UserNickname.tsx
index f2e572d4..ae512250 100644
--- a/src/app/_components/common/userinfo/UserNickname.tsx
+++ b/src/app/_components/common/userinfo/UserNickname.tsx
@@ -1,3 +1,5 @@
+'use client'
+
import React, { useState } from 'react'
import { useRouter } from 'next/navigation'
import { NICK_NAME_PAGE, INPUT_NICKNAME } from '@/_constants'
diff --git a/src/app/_hooks/useMainQuery.ts b/src/app/_hooks/useMainQuery.ts
index 52fe63d7..b83a74f4 100644
--- a/src/app/_hooks/useMainQuery.ts
+++ b/src/app/_hooks/useMainQuery.ts
@@ -1,6 +1,6 @@
'use client'
-import { useQuery, useSuspenseQuery } from '@tanstack/react-query'
+import { useSuspenseQuery } from '@tanstack/react-query'
import { mainInfo } from '@/_service/main'
export const useMainQuery = () => {