[FE] userInfo를 불러오는 과정에서의 중복코드 줄이기

[soi-ha]

issue

• close [FE] userInfo를 불러오는 과정에서의 중복코드 줄이기 #932

구현 사항

requestGetUserInfo 중복 함수 삭제

위 함수는 request/auth와 request/user에 완전히 동일한 형태로 각각 존재했습니다.

export const requestGetUserInfo = async () => {
  return await requestGet<UserInfo>({
    baseUrl: BASE_URL.HD,
    endpoint: `${USER_API_PREFIX}/mine`,
    errorHandlingStrategy: 'unsubscribe',
  });
};

해당 함수가 2개 존재할 필요는 없다고 판단하여 request/auth에 존재하던 requestGetUserInfo는 제거해줬습니다. 따라서 requestGetUserInfo 함수는 request/user에 1개만 존재합니다.

useRequestSuspenseGetUserInfo 삭제

useRequestGetUserInfo와 useRequestSuspenseGetUserInfo는 매우 유사하게 생긴 함수입니다.

• useRequestGetUserInfo 코드

  import {useSuspenseQuery} from '@tanstack/react-query';
  
  import {requestGetUserInfo} from '@apis/request/user';
  import {UserInfo} from 'types/serviceType';
  
  import QUERY_KEYS from '@constants/queryKeys';
  
  export type UseRequestGetUserInfo = ReturnType<typeof useRequestGetUserInfo>;
  
  type UseRequestGetUserInfoArgs = {
    enableInitialData?: boolean;
  };
  
  const useRequestGetUserInfo = ({enableInitialData = true}: UseRequestGetUserInfoArgs = {}) => {
    const initialData: UserInfo = {
      isGuest: true,
      nickname: '',
      profileImage: '',
      accountNumber: '',
      bankName: '',
    };
  
    const {data, ...rest} = useSuspenseQuery({
      queryKey: [QUERY_KEYS.userInfo],
      queryFn: () => requestGetUserInfo(),
      initialData: enableInitialData ? initialData : undefined,
      initialDataUpdatedAt: enableInitialData ? 0 : undefined,
    });
  
    return {
      userInfo: {...data},
      ...rest,
    };
  };
  
  export default useRequestGetUserInfo;

• useRequestSuspenseGetUserInfo 코드

  import {useSuspenseQuery} from '@tanstack/react-query';
  
  import {requestGetUserInfo} from '@apis/request/user';
  
  import QUERY_KEYS from '@constants/queryKeys';
  
  const useRequestSuspenseGetUserInfo = () => {
    const {data, ...rest} = useSuspenseQuery({
      queryKey: [QUERY_KEYS.userInfo],
      queryFn: () => requestGetUserInfo(),
    });
  
    return {
      userInfo: {...data},
      ...rest,
    };
  };
  
  export default useRequestSuspenseGetUserInfo;

두 코드를 나란히 비교하면 한 눈에 알 수 있습니다.
useRequestSuspenseGetUserInfo 함수로 동작하려는 것을 useRequestGetUserInfo 사용을 통해 대체할 수 있습니다. 따라서 useRequestSuspenseGetUserInfo는 불필요하다고 판단하여 해당 함수를 삭제했습니다.

MyPage의 userInfo 불러오는 방식 변경

useRequestSuspenseGetUserInfo는 MyPage.tsx에서만 사용하고 있었습니다. 그러나 useRequestSuspenseGetUserInfo가 사라지면서 userInfo를 불러오는 방식을 변경해야 했습니다.

useRequestGetUserInfo는 userInfo를 Context로 제공하는 Provider와 함께 사용하기 위해 제작된 hook입니다. 부모 컴포넌트에서 Provider를 통해 userInfo를 제공하고, 자식 컴포넌트는 Context를 통해 userInfo에 접근할 수 있습니다.
이에 따라 MyPage 컴포넌트에서는 userInfo를 직접 불러오는 방식에서 Context를 활용해 userInfo를 받아오는 방식으로 변경했습니다.

이를 통해 userInfo를 Context로 받아서 사용하는 다른 myPage의 하위 페이지들과 동일한 방식으로 userInfo를 받아와 코드의 통일성을 향상시킬 수 있습니다.

useRequestGetUserInfo 파일 위치 auth→user로 변경

앞서 진행한 requestGetUserInfo 중복 함수를 삭제하고 request/user에만 존재하도록 변경한 일로 인해, useRequestGetUserInfo의 위치를 hooks/queries/auth에서 hooks/queries/user로 이동했습니다.

이를 통해 requestGetUserInfo와 useRequestGetUserInfo의 위치가 user로 동일하게 되어 추후 코드를 관리하는 것에 있어 통일성을 주게 됩니다.

🫡 참고사항

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-ubysaqzqhh.chromatic.com/

[jinhokim98]

정리 감사합니다~ 이 외에도 불필요한 코드 정말 많을텐데 여유가 된다면 날 잡아서 코드 다이어트 한 번 더 하고 싶네요ㅋㅋ

[jinhokim98]

감사합니다~ 이거 기억으론 웨디와 제가 서로 이 api가 필요하여 각자 작성했던 것으로 기억해요.
지우는 것을 깜빡하고 있었는데 정리 감사합니다😄😄

[jinhokim98]

이 hook은 제가 작성했었는데 #869 에 적어 놓은 이유였습니다.
이 당시에는 useRequestGetUserInfo가 suspenseQuery가 아니라 일반 query 였던 것으로 기억합니다. 그래서 별도로 작성했는데 동일해졌다면 중복된 파일이 있을 필요 없다는 것에 동의합니다.

[jinhokim98]

확실히 user information이니 auth 보다는 user가 더 좋네요

[jinhokim98]

앗 그렇군요 마이 페이지 상위에서 context로 값을 가져오고 있다면 지워도 좋을 것 같아요!

[pakxe]

같은 부분을 작업하다보니 유사한 코드가 반복된 것 같네요 흑흙 섬세하게 살펴봐주어서 감사해용!~~

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-qpokestshy.chromatic.com/