배너 및 관련제품에서 베너 수정 시 쿼리키 문제로 banner 데이터 변경시 새로운데이터 받아오지않음

상황: 수정시 구분하는 area 값을 banner와 bannerItems로 서버에서 구분해서 처리하는 상황

데이터를 가져올때는 get api에서 endpoint의 param area값을 bannerItems로 한번에 가져오게 설정해놓음

itemTable 컴포넌트에서 수정을 시 각각 banner와 bannerItems를 인자로 가짐

mutaion후 쿼리키를 무효화할때 각각 인자로 전달된 값을 사용하기에 banner쿼리키 값이 유효하지않게됨 (bannerItems이게 되어야함)

이를 위해 예외를 하드코딩해놨음

고민: get api를 분리해서 데이터를 두번 가져오는 것이 나은지 클라이언트에서 어떻게든 처리하는게 나은지

banner와 bannerItem의 데이터 베이스에서 저장되어있는 형식
```
{
BannerItems: dataType[];
Banner: bannerType[];
}
```
데이터를 가져올때는 get api에서 endpoint의 param area값을 bannerItems로 한번에 가져옴
```
const { data, isLoading, isError } = useGetUI<bannerItemsType>("bannerItems");
```

테이블을 생성하기위해 각각의 컴포넌트로 구성 ItemTable에서 수정api가 동작하기에 banner와 bannerItems를 구분하기위해 category 전달

    <ItemTable<bannerType>
      columnLabels={data.BannerLabels}
      data={data.Banner}
      category="banner"
      initialValue={BannerInitialObject}
    />

    <ItemTable<dataType>
      columnLabels={data.ColumnLabels}
      data={data.BannerItems}
      category="bannerItems"
      initialValue={ItemInitialObject}
    />

ItemTable에서 수정을 위한 mutaion 및 invalidateQueries 동작 시 category 값을 전달받아 이를 무효화할 키값으로 사용

가져올때는 키값이 bannerItems로 한번에 가져오는데 banner를 수정했을 때 무효화되는 키값이 banner로 달라서 최신화안됌

현재 하드 코딩으로 동작은 되는 상황

export function useUpdateData() {
  const queryClient = useQueryClient();
  const updateGroupMutation = useMutation({
    mutationFn: async ({ area, data }: any) => {
      await UIService.updateUIData(area, data);
      return area;
    },
    onSuccess: async (area) => {
      // 예외 쿼리키 하드코딩 문제 해결할 것 
      if (area) {
        if (area === "banner") area = "bannerItems";
        queryClient.invalidateQueries({ queryKey: [area] });
      }
    },
  });

Johyuncheol / everydaaay_shop_Dashboard

배너 및 관련제품에서 베너 수정 시 쿼리키 문제로 banner 데이터 변경시 새로운데이터 받아오지않음 #2