fix: 프로필 변경시 전역 설정

Help-M-Ssaem · Sep 2, 2024 · 87b6440 · 87b6440
1 parent fdb7872
commit 87b6440
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/src/app/user/[id]/page.tsx b/src/app/user/[id]/page.tsx
@@ -1,24 +1,34 @@
 'use client'
 
+import { useEffect } from 'react'
 import ActivityCount from '@/components/auth/ActivityCount'
 import UserProfile from '@/components/user/UserProfile'
 import Container from '@/components/common/Container'
 import { useParams, useRouter } from 'next/navigation'
-import { useProfile } from '@/service/user/useUserService'
+import { useProfile, useUserInfo } from '@/service/user/useUserService'
 import Button from '@/components/common/Button'
 import MemberListCount from '@/components/auth/MemberListCount'
+import { useRecoilState } from 'recoil'
 import { userInfoState } from '@/recoil/UserInfo'
-import { useRecoilValue } from 'recoil'
 
 const UserPage = () => {
   const { id } = useParams()
   const profileId = Number(id)
   const router = useRouter()
-  const userInfo = useRecoilValue(userInfoState)
 
-  const { data: profile } = useProfile(Number(profileId))
+  const { data: userInfo } = useUserInfo()
+  const [recoilUserInfo, setUserInfo] = useRecoilState(userInfoState)
+
+  const { data: profile } = useProfile(profileId)
+
+  useEffect(() => {
+    if (userInfo) {
+      setUserInfo(userInfo)
+    }
+  }, [userInfo, setUserInfo])
 
   if (!profile) return null
+
   const activitySections = [
     {
       title: '받은 평가',
@@ -90,7 +100,7 @@ const UserPage = () => {
         <div className="text-title3 text-maindark font-semibold">
           {profile.teacherInfo.nickName} 프로필
         </div>
-        {userInfo?.id === profileId && (
+        {recoilUserInfo?.id === profileId && (
           <div
             className="text-gray2 underline cursor-pointer"
             onClick={handleProfileUpdate}

diff --git a/src/app/user/[id]/update/page.tsx b/src/app/user/[id]/update/page.tsx
@@ -2,21 +2,23 @@
 
 import Container from '@/components/common/Container'
 import { useParams, useRouter } from 'next/navigation'
-import { useProfile, usePatchProfile } from '@/service/user/useUserService'
+import {
+  useProfile,
+  usePatchProfile,
+  useUserInfo,
+} from '@/service/user/useUserService'
 import Button from '@/components/common/Button'
 import UserUpdateProfile from '@/components/user/UserProfileUpdate'
 import { useState, useEffect } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import { useRecoilState } from 'recoil'
-import { userInfoState } from '@/recoil/UserInfo'
 
 const UserUpdatePage = () => {
   const { id } = useParams()
   const profileId = Number(id)
   const router = useRouter()
   const queryClient = useQueryClient()
 
-  const [userInfo, setUserInfo] = useRecoilState(userInfoState)
+  const { data: userInfo } = useUserInfo()
 
   const { data: profile } = useProfile(profileId)
   const { mutate: patchProfile } = usePatchProfile()
@@ -50,10 +52,6 @@ const UserUpdatePage = () => {
   const handleSubmit = () => {
     patchProfile(updatedProfile, {
       onSuccess: () => {
-        setUserInfo((prevUserInfo: any) => ({
-          ...prevUserInfo,
-          ...updatedProfile,
-        }))
         queryClient.invalidateQueries({ queryKey: ['profile', profileId] }) // queryKey를 객체로 전달
         router.back()
       },