Merge pull request #202 from BCSDLab/feature/#196

feat: queryKey 파일 분리

src/page/MyShopPage/components/EditShopInfoModal/index.tsx

@@ -13,7 +13,7 @@ import { OwnerShop } from 'model/shopInfo/ownerShop';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation } from '@tanstack/react-query';
 import { putShop } from 'api/shop';
-import useShopCategory from 'query/shopCategory';
+import useShopCategory from 'query/shop';
 import useBooleanState from 'utils/hooks/useBooleanState';
 import CustomModal from 'component/common/CustomModal';
 import OperateTimePC from 'page/ShopRegistration/component/Modal/OperateTimePC';

src/page/ShopRegistration/component/Modal/Category/index.tsx

@@ -1,11 +1,11 @@
-import useShopCategory from 'query/shopCategory';
+import useMyShop from 'query/shop';
 import cn from 'utils/ts/className';
 import { Category as CategoryProps } from 'model/category/storeCategory';
 import useShopRegistrationStore from 'store/shopRegistration';
 import styles from './Category.module.scss';
 
 export default function Category() {
-  const { categoryList } = useShopCategory();
+  const { categoryList } = useMyShop();
   const { category, setCategory, setCategoryId } = useShopRegistrationStore();
 
   const handleCategoryClick = (categoryInfo: CategoryProps) => {

src/page/ShopRegistration/view/Mobile/ShopCategory/index.tsx

@@ -1,5 +1,5 @@
 import useStepStore from 'store/useStepStore';
-import useShopCategory from 'query/shopCategory';
+import useMyShop from 'query/shop';
 import cn from 'utils/ts/className';
 import { Category as CategoryProps } from 'model/category/storeCategory';
 import useShopRegistrationStore from 'store/shopRegistration';
@@ -10,7 +10,7 @@ import styles from './ShopCategory.module.scss';
 
 export default function ShopCategory() {
   const [isError, setIsError] = useState(false);
-  const { categoryList } = useShopCategory();
+  const { categoryList } = useMyShop();
   const { increaseStep } = useStepStore();
   const {
     category, setCategory, setCategoryId,

src/query/KeyFactory/menuKeys.ts

@@ -0,0 +1,4 @@
+export const menuKeys = {
+  all: ['menu'] as const,
+  menuInfo: (menuId: number) => [...menuKeys.all, 'menuInfo', menuId] as const,
+};

src/query/KeyFactory/registerKeys.ts

@@ -0,0 +1,8 @@
+export const registerKeys = {
+  all: ['register'] as const,
+  fileUrlList: ['fileUrlList'] as const,
+  registerUser: ['registerUser'] as const,
+  emailCheck: (email: string) => [...registerKeys.all, 'emailDuplicateCheck', email] as const,
+  authCode: (email: string) => [...registerKeys.all, 'generateEmailAuthCode', email] as const,
+  verificationCode: (code: string, email: string) => [...registerKeys.all, 'verificationCode', code, email] as const,
+};

src/query/KeyFactory/shopKeys.ts

@@ -0,0 +1,7 @@
+export const shopKeys = {
+  all: ['shop'] as const,
+  shopCategoryInfo: ['shopCategory'] as const,
+  myShopList: (myShopQueryKey: string | undefined) => [...shopKeys.all, 'myShop', myShopQueryKey] as const,
+  myShopInfo: (shopId: number) => [...shopKeys.all, 'myShopInfo', shopId] as const,
+  myMenuInfo: (shopId: number) => [...shopKeys.all, 'myMenuInfo', shopId] as const,
+};

src/query/menu.ts

@@ -2,13 +2,14 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { getMenu, modifyMenu, deleteMenu } from 'api/shop';
 import { NewMenu } from 'model/shopInfo/newMenu';
 import useAddMenuStore from 'store/addMenu';
+import { shopKeys } from './KeyFactory/shopKeys';
 
 const useMenuInfo = (menuId:number) => {
   const { resetAddMenuStore } = useAddMenuStore();
   const queryClient = useQueryClient();
   const { data: menuData } = useQuery(
     {
-      queryKey: ['menuInfo', menuId],
+      queryKey: shopKeys.myMenuInfo(menuId),
       queryFn: () => getMenu(menuId),
     },
   );
@@ -32,6 +33,7 @@ export const useDeleteMenu = () => {
       queryClient.invalidateQueries();
     },
   });
+
   return {
     deleteMenuMutation,
   };

src/query/register.ts

@@ -8,10 +8,11 @@ import useRegisterInfo from 'store/registerStore';
 import useShopRegistrationStore from 'store/shopRegistration';
 import useUploadToken from 'store/uploadToken';
 import showToast from 'utils/ts/showToast';
+import { registerKeys } from './KeyFactory/registerKeys';
 
 export const useCheckDuplicate = (email:string) => {
   const { status, refetch, error } = useQuery({
-    queryKey: ['emailDuplicateCheck', email],
+    queryKey: registerKeys.emailCheck(email),
     queryFn: () => getEmailDuplicate(email),
     enabled: false,
   });
@@ -22,7 +23,7 @@ export const useGenerateAuthCode = (email:string) => {
   const {
     status, refetch, isError, error,
   } = useQuery({
-    queryKey: ['generateEmailAuthCode', email],
+    queryKey: registerKeys.authCode(email),
     queryFn: () => getEmailAuthCode({ address: email }),
     enabled: false,
   });
@@ -36,7 +37,7 @@ export const useVerificationAuthCode = (code:string, email:string) => {
   const {
     status, refetch, isError, error, data,
   } = useQuery({
-    queryKey: ['verificationCode', code],
+    queryKey: registerKeys.verificationCode(code, email),
     queryFn: () => verificationAuthCode({ certification_code: code, address: email }),
     enabled: false,
   });
@@ -50,7 +51,7 @@ export const useRegisterUser = (goNext:()=>void) => {
   const { userInfo, ownerInfo, resetRegisterInfo } = useRegisterInfo();
   const { shopId, name } = useShopRegistrationStore();
   const register = useMutation({
-    mutationKey: ['registerUser'],
+    mutationKey: registerKeys.registerUser,
     mutationFn: async (fileUrls:string[]) => (
       registerUser(await parseRegisterData(
         userInfo,
@@ -77,7 +78,7 @@ export const useGetFileUrls = (goNext:()=>void) => {
     formData.append('files', file);
   });
   const fileMutation = useMutation({
-    mutationKey: ['getFileUrls'],
+    mutationKey: registerKeys.fileUrlList,
     mutationFn: async () => {
       try {
         const data = await getFileUrls(formData, uploadToken!);

src/query/shop.ts

@@ -7,30 +7,37 @@ import {
 import useUserStore from 'store/user';
 import useAddMenuStore from 'store/addMenu';
 import { NewMenu } from 'model/shopInfo/newMenu';
+import getShopCategory from 'api/category';
+import { shopKeys } from './KeyFactory/shopKeys';
 
 const useMyShop = () => {
   const myShopQueryKey = useUserStore.getState().user?.company_number;
   const queryClient = useQueryClient();
   const { resetAddMenuStore } = useAddMenuStore();
   const { data: myShop } = useSuspenseQuery({
-    queryKey: ['myShop', myShopQueryKey],
+    queryKey: shopKeys.myShopList(myShopQueryKey),
     queryFn: () => getMyShopList(),
   });
 
   const shopId = myShop.shops[0]?.id;
 
   const { data: shopData, refetch: refetchShopData, isLoading } = useQuery({
-    queryKey: ['myShopInfo', shopId],
+    queryKey: shopKeys.myShopInfo(shopId),
     queryFn: () => getShopInfo({ id: shopId }),
     enabled: !!shopId,
   });
 
   const { data: menusData } = useQuery({
-    queryKey: ['myMenuInfo', shopId],
+    queryKey: shopKeys.myMenuInfo(shopId),
     queryFn: () => getMenuInfoList({ id: shopId }),
     enabled: !!shopId,
   });
 
+  const { data: categoryList } = useQuery({
+    queryKey: shopKeys.shopCategoryInfo,
+    queryFn: () => getShopCategory(),
+  });
+
   const { mutate: addMenuMutation, isError: addMenuError } = useMutation({
     mutationFn: (param: NewMenu) => {
       if (typeof shopId === 'number') {
@@ -40,12 +47,12 @@ const useMyShop = () => {
     },
     onSuccess: () => {
       resetAddMenuStore();
-      queryClient.invalidateQueries({ queryKey: ['myMenuInfo', shopId] });
+      queryClient.invalidateQueries({ queryKey: shopKeys.myMenuInfo(shopId) });
     },
   });
 
   return {
-    shopData, menusData, addMenuMutation, addMenuError, refetchShopData, isLoading,
+    shopData, menusData, addMenuMutation, addMenuError, refetchShopData, isLoading, categoryList,
   };
 };
 

src/query/shops.ts

@@ -1,9 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import { getShopList } from 'api/shop';
+import { shopKeys } from './KeyFactory/shopKeys';
 
 const useShopList = () => {
   const { data: shopList, isError } = useQuery({
-    queryKey: ['allshops'],
+    queryKey: shopKeys.all,
     queryFn: () => getShopList(),
   });
   return { shopList, isError };