diff --git a/src/app/(user-page)/my-meeting/my/page.tsx b/src/app/(user-page)/my-meeting/my/page.tsx index 36c40ef..f363515 100644 --- a/src/app/(user-page)/my-meeting/my/page.tsx +++ b/src/app/(user-page)/my-meeting/my/page.tsx @@ -1,3 +1,4 @@ +import NotYet from '@/components/common/NotYet'; import { myMeetingKeys } from '@/hooks/queries/useMyMeetingQueries'; import { QUERY_KEYS } from '@/hooks/queries/useMyPageQueries'; import { diff --git a/src/app/(user-page)/mypage/MyPageClient.tsx b/src/app/(user-page)/mypage/MyPageClient.tsx index be02f91..7e066d7 100644 --- a/src/app/(user-page)/mypage/MyPageClient.tsx +++ b/src/app/(user-page)/mypage/MyPageClient.tsx @@ -1,5 +1,7 @@ 'use client'; +import { prefetchProfileData } from '@/hooks/queries/useMyPageQueries'; +import { useQueryClient } from '@tanstack/react-query'; import { useRouter, useSearchParams } from 'next/navigation'; import { useCallback, useEffect, useRef, useState } from 'react'; @@ -18,6 +20,7 @@ import TechStackInfo from './_features/TechStackInfo'; const MyPageClient = () => { const router = useRouter(); const searchParams = useSearchParams(); + const queryClient = useQueryClient(); // URL에서 탭 값만 가져오기 const tabFromUrl = searchParams.get('tab') || TAB_TYPES.BASIC; @@ -37,6 +40,11 @@ const MyPageClient = () => { [TAB_TYPES.PASSWORD]: null, }); + // 컴포넌트 마운트 시 프로필 데이터 prefetch + useEffect(() => { + prefetchProfileData(queryClient); + }, [queryClient]); + // URL 변경 감지 및 상태 업데이트 (중요: 뒤로가기/앞으로가기 처리) useEffect(() => { const currentTabFromUrl = searchParams.get('tab') || TAB_TYPES.BASIC; @@ -59,6 +67,9 @@ const MyPageClient = () => { // 탭 변경 핸들러 const handleTabChange = (tab: string) => { + // 탭 변경 전에 해당 탭에 필요한 데이터 prefetch + prefetchProfileData(queryClient); + setActiveTab(tab); updateUrl(tab); }; @@ -69,6 +80,8 @@ const MyPageClient = () => { }; const handleEnableEdit = () => { + // 편집 모드로 전환하기 전에 프로필 데이터 다시 prefetch하여 최신 데이터 확보 + prefetchProfileData(queryClient); setEditModeSection(activeTab); }; diff --git a/src/app/(user-page)/mypage/_features/BasicEdit.tsx b/src/app/(user-page)/mypage/_features/BasicEdit.tsx index a3959ff..99a7b5a 100644 --- a/src/app/(user-page)/mypage/_features/BasicEdit.tsx +++ b/src/app/(user-page)/mypage/_features/BasicEdit.tsx @@ -2,10 +2,8 @@ import Dropdown from '@/components/common/Dropdown'; import { Button } from '@/components/ui/Button'; -import { - useProfileQuery, - useUpdateProfileMutation, -} from '@/hooks/queries/useMyPageQueries'; +import { useUpdateProfileMutation } from '@/hooks/mutations/useMyPageMutation'; +import { useProfileQuery } from '@/hooks/queries/useMyPageQueries'; import { useCallback, useEffect, useState } from 'react'; import { Controller, useForm, useWatch } from 'react-hook-form'; diff --git a/src/app/(user-page)/mypage/_features/ContactEdit.tsx b/src/app/(user-page)/mypage/_features/ContactEdit.tsx index fcbe084..1a2a63d 100644 --- a/src/app/(user-page)/mypage/_features/ContactEdit.tsx +++ b/src/app/(user-page)/mypage/_features/ContactEdit.tsx @@ -2,10 +2,8 @@ import { Button } from '@/components/ui/Button'; import { Input } from '@/components/ui/Input'; -import { - useProfileQuery, - useUpdateContactInfoMutation, -} from '@/hooks/queries/useMyPageQueries'; +import { useUpdateContactInfoMutation } from '@/hooks/mutations/useMyPageMutation'; +import { useProfileQuery } from '@/hooks/queries/useMyPageQueries'; import { useEffect } from 'react'; import { useForm } from 'react-hook-form'; diff --git a/src/app/(user-page)/mypage/_features/PasswordEdit.tsx b/src/app/(user-page)/mypage/_features/PasswordEdit.tsx index ed78bd8..c0956c5 100644 --- a/src/app/(user-page)/mypage/_features/PasswordEdit.tsx +++ b/src/app/(user-page)/mypage/_features/PasswordEdit.tsx @@ -3,7 +3,7 @@ import { useToast } from '@/components/common/ToastContext'; import { Button } from '@/components/ui/Button'; import { Input } from '@/components/ui/Input'; -import { useUpdatePasswordMutation } from '@/hooks/queries/useMyPageQueries'; +import { useUpdatePasswordMutation } from '@/hooks/mutations/useMyPageMutation'; import { useForm } from 'react-hook-form'; interface PasswordFormData { diff --git a/src/app/(user-page)/mypage/_features/ProfileImage.tsx b/src/app/(user-page)/mypage/_features/ProfileImage.tsx index 51fb1e5..78c9f16 100644 --- a/src/app/(user-page)/mypage/_features/ProfileImage.tsx +++ b/src/app/(user-page)/mypage/_features/ProfileImage.tsx @@ -4,10 +4,8 @@ import EditLogo from '@/assets/icon/editLogo.svg'; import { useToast } from '@/components/common/ToastContext'; import { Button } from '@/components/ui/Button'; import Modal from '@/components/ui/modal/Modal'; -import { - useProfileQuery, - useUpdateProfileImageMutation, -} from '@/hooks/queries/useMyPageQueries'; +import { useUpdateProfileImageMutation } from '@/hooks/mutations/useMyPageMutation'; +import { useProfileQuery } from '@/hooks/queries/useMyPageQueries'; import { useQueryClient } from '@tanstack/react-query'; import { Pencil } from 'lucide-react'; import Image from 'next/image'; diff --git a/src/app/(user-page)/mypage/_features/TechStackEdit.tsx b/src/app/(user-page)/mypage/_features/TechStackEdit.tsx index 55e4a2c..2a045fa 100644 --- a/src/app/(user-page)/mypage/_features/TechStackEdit.tsx +++ b/src/app/(user-page)/mypage/_features/TechStackEdit.tsx @@ -1,11 +1,9 @@ 'use client'; import { Button } from '@/components/ui/Button'; +import { useUpdateSkillsMutation } from '@/hooks/mutations/useMyPageMutation'; // Button 컴포넌트 import 추가 -import { - useProfileQuery, - useUpdateSkillsMutation, -} from '@/hooks/queries/useMyPageQueries'; +import { useProfileQuery } from '@/hooks/queries/useMyPageQueries'; import useTechSelection from '@/hooks/useTechSelection'; import { getIconColor, getIconsByCategory } from '@/util/getIconDetail'; import { useQueryClient } from '@tanstack/react-query'; diff --git a/src/app/(user-page)/mypage/page.tsx b/src/app/(user-page)/mypage/page.tsx index d567f73..2c1d8e3 100644 --- a/src/app/(user-page)/mypage/page.tsx +++ b/src/app/(user-page)/mypage/page.tsx @@ -1,20 +1,31 @@ // page.tsx (서버 컴포넌트) +import { prefetchProfileData } from '@/hooks/queries/useMyPageQueries'; +import { QueryClient, dehydrate } from '@tanstack/react-query'; +import { HydrationBoundary } from '@tanstack/react-query'; import { Suspense } from 'react'; import MyPageClient from './MyPageClient'; import ProfileImage from './_features/ProfileImage'; import SkeletonBasicInfo from './_features/skeletons/SkeletonBasicInfo'; -export default function MyPage() { +export default async function MyPage() { + // 서버 컴포넌트에서 QueryClient 생성 + const queryClient = new QueryClient(); + + // 필요한 데이터 프리페치 + await prefetchProfileData(queryClient); + return (