내일배움캠프 최종 프로젝트 - 프로필 페이지(4)

내가 참여한 서베이 스타일링

• 메인페이지와 유사하게 참여한 서베이 페이지를 스타일링함

프로필 페이지 UI 개선

• 기존 프로필 페이지 UI가 별로라서 신경 써서 다시 바꿔 봄

프로필 페이지에서 프로필 이미지 바꾸면 헤더 프로필 이미지 바로 변경

    if (auth.currentUser.uid) {
      queryClient.invalidateQueries({
        queryKey: ['userProfile', auth.currentUser.uid],
      });
    }

• 프로필 페이지의 프로필 사진을 바꾸는 핸들러에 쿼리 무효화 처리를 하고 쿼리 함수도 만듬

import {db} from '@/firebase';
import {doc, getDoc} from 'firebase/firestore';

export async function getUserProfile(userId: string) {
  const userDoc = await getDoc(doc(db, 'users', userId));
  if (userDoc.exists()) {
    const userProfileData = userDoc.data();
    return userDoc.data();
  } else {
    throw new Error('유저를 찾을 수 없습니다');
  }
}

• 그래서 헤더에서 프로필 이미지가 새로 업로드하면 바로 바뀌게 하는 것도 시도했는데 잘 되지 않았다.

'use client';
import {NextUIProvider} from '@nextui-org/react';
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
import React from 'react';
export const queryClient = new QueryClient();

type Props = {
  children: React.ReactNode;
};

const ProvidersLayout = ({children}: Props) => {
  return (
  
  - 알고보니   <QueryClientProvider client={queryClient}> 
      <NextUIProvider>{children}</NextUIProvider>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
};

export default ProvidersLayout;

• 알고보니 로 되어 있었던 것..
  queryClient는 외부에서 미리 정의된 QueryClient 인스턴스를 사용하고 일관적으로 쓸수 있는건데 그냥 client는 컴포넌트 내부 또는 외부에서 정의된 다른 QueryClient 인스턴스를 참조하기 때문에 queryClient와 동일한 인스턴스인지, 아니면 별도로 정의된 다른 인스턴스인지는 Client가 어디서 어떻게 정의되었는지에 따라 달라지기 때문에 잘 되지 않았던 거 같다...

헤더 프로필 이미지 옆에 닉네임 출력

<p className="font-bold mr-[10px] text-[#0051FF]">{userProfile?.nickname}</p> 

프로필 페이지에서 닉네임 변경하면 헤더 프로필 이미지 옆에 닉네임 바로 변경

if (auth.currentUser?.uid) {
      queryClient.invalidateQueries({
        queryKey: ['userProfile', auth.currentUser.uid],
      });
    }

• 프로필 이미지처럼 동일하게 변경 했다.