2024.03.24 TIL - header의 프로필 이미지 변경 로직, enabled와 isPending 예시 참고 (Palette Ground 프로젝트), supabase 각 메서드 샘플 코드

📝 pr 올릴 때 자세히 정리해놓아 TIL에도 가져와본다.

📌 관련 이슈

closed #62

Task TODOLIST

• header의 프로필 이미지를 현재 로그인한 유저의 프로필 이미지로 업데이트

✨ 개발 내용

1. 로그인 상태일때의 ‘로그아웃’, ‘프로필 이미지’ 부분을 컴포넌트로 분리함

• header-loggedIn.tsx (컴포넌트 이름 : LoggedIn)

// header-loggedIn.tsx

  /** 현재 로그인한 유저의 프로필 이미지 가져오기 **/
  const {
    data: profileImgArray,
    isPending,
    isError,
  } = useQuery({
    queryKey: ["user", { type: "profileImg" }],
    queryFn: () => getProfileImg(email),
    enabled: !!email,
  });

  if (isPending) {
    return <div>Loading...</div>;
  }
  if (isError) {
    return <div>Error</div>;
  }
  const profileImg = profileImgArray[0].profile_img;

2. header 내의 LoggedIn 컴포넌트에서 useQuery 사용
   -> root layout에서 HeaderNav를 QueryProvider 안쪽으로 위치이동

// layout.tsx

        <QueryProvider>
          <HeaderNav />
          {children}
        </QueryProvider>

3. url로 이미지 보여주느라 img태그로 바꿈

// header-loggedIn.tsx

<img
            src={profileImg}
            alt="사용자 이미지"
            className="rounded-3xl w-[50px] h-[50px]"
          />

4. 마이페이지에서 프로필이미지 변경시 헤더의 프로필이미지 queryKey도 함께 무효화

• 마이페이지에서 프로필이미지 변경시 무효화하는 queryKey를 header에서도 prefix로 추가함
• zustand에서 가져온 email이 null인 경우를 대비, enabled와 isPending 옵션을 추가

// header-loggedIn.tsx

  /** 현재 로그인한 유저의 프로필 이미지 가져오기 **/
  const {
    data: profileImgArray,
    isPending,
    isError,
  } = useQuery({
    // queryKey 주목
    queryKey: ["user", { type: "profileImg" }],
    queryFn: () => getProfileImg(email),
    // email이 아직 안들어와서 null인 경우 query를 실행하지 말고 기다리라는 옵션
    enabled: !!email,
  });

TroubleShotting

• 헤더 프로필 이미지 업데이트 로직 - useQuery를 쓸수밖에 없었던 이유

1. 처음 생각한 로직 : zustand에서 현재 유저의 profileImg 가져오기

• 문제 : 마이페이지에서 프로필이미지 변경시 변경된 이미지를 zustand로 넘겨주는 로직이 없어서 변경된 이미지가 zustand에 반영되지 않음

2. 두번째 생각한 로직 : currentUser를 supabase.auth에서 가져와 profileImg 사용하기

• 문제 : 프로필 이미지 변경시 authentication에 업데이트되는게 아니라서 auth의 profileImg는 최초 가입시의 이미지밖에 없음

3. 결론 : users 테이블에서 프로필이미지 가져오기

• 로그인한 유저의 email을 users 테이블에서 찾고, 해당 profileImg를 가져와 보여주기

📸 스크린샷(선택)

---

supabase 각 메서드 샘플 코드

const insertWriting = async (newWrite) => {
  const { error: insertWrite } = await supabase.from('communityWrite').insert([newWrite]).select();
  if (insertWrite) {
    alert('글을 저장하지 못 했습니다.');
    console.error(insertWrite);
    return insertWrite;
  }
};

const getWriteList = async () => {
  const { data, error: getWrite } = await supabase.from('communityWrite').select('*');
  if (getWrite) {
    console.error(getWrite);
    return getWrite;
  } else {
    return data;
  }
};

const updateWrite = async ([changeContent, id]) => {
  const { error: updateWrite } = await supabase.from('communityWrite').update(changeContent).eq('id', id);
  if (updateWrite) {
    alert('변경하지 못 했습니다.');
    console.error(updateWrite);
  }
};

const deleteWrite = async (id) => {
  const { error: deleteWrite } = await supabase.from('communityWrite').delete().eq('id', id).select();
  if (deleteWrite) {
    alert('삭제하지 못 했습니다.');
    console.error(deleteWrite);
  }
};

// 현재 로그인한 유저정보 반환
// supabase.auth.getuser

const getUser = async () => {
  const {
    data: { user },
    error
  } = await supabase.auth.getUser();
  if (error) {
    console.error(error);
    return error;
  } else {
    return user;
  }
};


// ‘위 함수에서 응답한 데이터’.__isAuthError > 로그인한 정보가 있나없나를 반환
// ex) userData.__isAuthError -> 반환값은 boolean으로 예상