[리팩토링] queries 폴더 구조 변경 및 메서드명 수정

 

기존 코드 📖

useQuerys.ts

기존 폴더 구조는 `queries > useQuerys.ts` 이렇게 구성되어 있었고 query 메서드 명도 직관적이지 않기 때문에 한눈에 들어오지 않았습니다.

 

// 스탬프 active 리스트 가져오기
const useGetStampActive = (userId: string) => {
  return useQuery({
    queryKey: QUERY_KEY.STAMPLIST(userId),
    queryFn: () => fetchActiveStamp(userId),
    enabled: !!userId, // userId가 있을 때만 쿼리 실행
    refetchOnWindowFocus: true
  });
};

// 사용자의 스템프 항목 중 현재위치 주소가 일치하는 데이터 가져오기
const useGetLocationStampActive = (address: string | undefined, userId: string) => {
  return useQuery({
    queryKey: QUERY_KEY.NOWLOCATION_STAMP,
    queryFn: async () => {
      if (address) {
        return await fetchLocationStamp(address, userId);
      } else return null;
    },
    enabled: !!userId
  });
};

 

fetchStampActions.ts

 

서버 액션 파일 또한 비슷한 문제를 겪고 있었습니다.

// 로그인유저의 스템프 항목 전부 + 스탬프 활성화된 데이터만
export const fetchActiveStamp = async (userId: string) => {
  const serverClient = createClient();

  const { data, error } = await serverClient.from('stamp').select('*').eq('user_id', userId).eq('visited', true);

  if (error) {
    console.error('스탬프 정보 가져오기 오류 :', error.message);
    throw new Error('스탬프 데이터를 가져오는 중 오류가 발생했습니다.' + error.message);
  }

  return data;
};

//로그인유저의 스템프 항목 중 현재위치 주소가 일치한거만 패치
export const fetchLocationStamp = async (address: string, userId: string) => {
  const serverClient = createClient();

  const { data: nowStampList, error } = await serverClient
    .from('stamp')
    .select('*')
    .eq('user_id', userId)
    .eq('address', address);

  if (error) {
    console.error('위치 기반 스탬프 리스트 가져오기 오류 :', error.message);
    throw new Error('위치 기반 스탬프 리스트 데이터를 가져오는 중 오류가 발생했습니다.' + error.message);
  }
  return nowStampList;
};

 

 

리팩토링 코드 📖

useStampQuery.ts

관련 있는 query를 묶어 메서드명과 파일명을 수정했습니다.

// 스탬프 리스트 가져오기
export const useGetStampListQuery = (userId: string) => {
  return useQuery({
    queryKey: QUERY_KEY.STAMPLIST(userId),
    queryFn: () => getStampList(userId),
    enabled: !!userId, // userId가 있을 때만 쿼리 실행
    refetchOnWindowFocus: true
  });
};

// 사용자의 스템프 항목 중 현재위치 주소가 일치하는 데이터 가져오기
export const useGetStampLocationQuery = (address: string | undefined, userId: string) => {
  return useQuery({
    queryKey: QUERY_KEY.USER_LOCATION_STAMP,
    queryFn: async () => {
      if (address) {
        return await getStampLocation(address, userId);
      } else return null;
    },
    enabled: !!userId
  });
};

 

stampActions.ts

서버 액션 또한 관련 메서드들을 묶고 파일명을 수정했습니다.

// 로그인유저의 스템프 항목 전부 + 스탬프 활성화된 데이터만
export const getStampList = async (userId: string) => {
  const serverClient = createClient();

  const { data, error } = await serverClient.from('stamp').select('*').eq('user_id', userId).eq('visited', true);

  if (error) {
    console.error('스탬프 정보 가져오기 오류 :', error.message);
    throw new Error('스탬프 데이터를 가져오는 중 오류가 발생했습니다.' + error.message);
  }

  return data;
};

//로그인유저의 스템프 항목 중 현재위치 주소가 일치한거만 패치
export const getStampLocation = async (address: string, userId: string) => {
  const serverClient = createClient();

  const { data: userLocationStamp, error } = await serverClient
    .from('stamp')
    .select('*')
    .eq('user_id', userId)
    .eq('address', address);

  if (error) {
    console.error('위치 기반 스탬프 리스트 가져오기 오류 :', error.message);
    throw new Error('위치 기반 스탬프 리스트 데이터를 가져오는 중 오류가 발생했습니다.' + error.message);
  }
  return userLocationStamp;
};

 

파일명과 메서드명을 의미 있게 설정해서 좀 더 가독성 있는 코드가 되었습니다.

폴더 구조 변경

 

폴더 구조 또한 `query``mutation` 폴더로 구분했습니다.

 

 

리팩토링을 이제 시작해서 수정해야 될 부분들이 많지만 차근차근해볼 생각입니다~!