✨ Feat: 기본 카테고리 제목 수정 방지 & 스크랩 추가 시 invalidate

- fix: 카테고리 url preview 썸네일 프로퍼티 수정
- feat: 기본 카테고리 제목 변경 시 에러 메세지
- improve: 카테고리 내에서 스크랩 추가 시 해당 카테고리 query invalidate

todo
- error message handling

src/application/hooks/api/scrap/index.ts

@@ -59,7 +59,10 @@ export const useSaveScrap = () => {
   return useMutation({
     mutationKey: ['saveScrap'],
     mutationFn: (args: Parameters<typeof api.scrap.saveScrap>[0]) => api.scrap.saveScrap(args),
-    onSuccess: () => queryClient.clear(),
+    onSuccess: (d, v) => {
+      queryClient.invalidateQueries(['getCategories', v.category_id]);
+      queryClient.invalidateQueries(['getContentByCategory', v.category_id]);
+    },
   });
 };
 
@@ -68,8 +71,6 @@ export const useUpdateScrap = (id: number) => {
   return useMutation({
     mutationKey: ['updateScrap'],
     mutationFn: (args: Parameters<typeof api.scrap.updateScrap>[0]) => api.scrap.updateScrap({ ...args, id }),
-    onSuccess: () => {
-      queryClient.invalidateQueries(['getScrapById', id]);
-    },
+    onSuccess: () => queryClient.invalidateQueries(['getScrapById', id]),
   });
 };

src/application/utils/constant.ts

@@ -11,8 +11,10 @@ export const PASSWORD_REGEXP = /^.*(?=^.{8,15}$)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).
 export const ERR_CODE = {
   CREATE_DUPLICATED_CATEGORY: 4004,
   MODIFY_DUPLICATED_CATEGORY: 4005,
+  NOT_MODIFY_DEFAULT_CATEGORY: 4015,
 } as const;
 
 export const ERR_MESSAGE = {
   DUPLICATED_TITLE: '이미 있는 제목입니다.',
+  NOT_MODIFY_DEFAULT_CATEGORY: '기본 카테고리는 수정할 수 없습니다.',
 } as const;

src/application/utils/helper.ts

@@ -1,5 +1,5 @@
-export const getSrcByType = (content: Scrap) => {
-  switch (content.scrap_type) {
+export const getSrcByType = (content: Scrap | Category) => {
+  switch (content.scrap_type.toLowerCase()) {
     case 'link':
       return content.url_preview;
     case 'image':

src/components/category/Modal/CreateCategory.tsx

@@ -6,10 +6,12 @@ import InputModal from '@/components/common/Modal/Input';
 
 interface CreateCategoryProps {
   onSubmit?: (category: string, errorFn: Dispatch<SetStateAction<boolean>>) => void;
+  errMsg?: string;
 }
 
-const CreateCategory = ({ onSubmit }: CreateCategoryProps) => (
-  <InputModal title={'카테고리명'} errMsg={ERR_MESSAGE.DUPLICATED_TITLE} onSubmit={onSubmit} />
+// TODO error handler로 에러 메세지 관리
+const CreateCategory = ({ onSubmit, errMsg = ERR_MESSAGE.DUPLICATED_TITLE }: CreateCategoryProps) => (
+  <InputModal title={'카테고리명'} errMsg={errMsg} onSubmit={onSubmit} />
 );
 
 export default CreateCategory;

src/containers/scrap/CategoryDetailContainer.tsx

@@ -6,7 +6,7 @@ import React, { useState } from 'react';
 import { useGetContentByCategory, useUpdateCategory } from '@/application/hooks/api/category';
 import useModal from '@/application/hooks/common/useModal';
 import usePopup from '@/application/hooks/common/usePopup';
-import { ERR_CODE } from '@/application/utils/constant';
+import { ERR_CODE, ERR_MESSAGE } from '@/application/utils/constant';
 import CreateCategory from '@/components/category/Modal/CreateCategory';
 import PhotoListContainer from '@/containers/scrap/PhotoListContainer';
 
@@ -41,6 +41,7 @@ const CategoryDetailContainer = ({ select, info }: CategoryDetailContainerProps)
           onClick={() =>
             show(
               <CreateCategory
+                errMsg={ERR_MESSAGE.NOT_MODIFY_DEFAULT_CATEGORY}
                 onSubmit={(category, setError) => {
                   mutation.mutate(
                     { id: info.id, name: category },
@@ -52,6 +53,7 @@ const CategoryDetailContainer = ({ select, info }: CategoryDetailContainerProps)
                       onError: (err) => {
                         if (axios.isAxiosError(err)) {
                           err.response?.data.code === ERR_CODE.MODIFY_DUPLICATED_CATEGORY && setError(true);
+                          err.response?.data.code === ERR_CODE.NOT_MODIFY_DEFAULT_CATEGORY && setError(true);
                         }
                       },
                     },

src/containers/scrap/CategoryListContainer.tsx

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import React from 'react';
 
 import { useGetCategories } from '@/application/hooks/api/category';
+import { getSrcByType } from '@/application/utils/helper';
 import CategoryListItem from '@/components/category/List/CategoryListItem';
 interface CategoryListContainerProps {
   select: boolean;
@@ -34,7 +35,7 @@ const CategoryListContainer = ({ select, onClickItem }: CategoryListContainerPro
             <CategoryListItem
               onClick={() => onClickItem({ id: category.id, name: category.name })}
               select={select}
-              src={category.file_url ?? '/icon/scrap/defaultCategory.svg'}
+              src={getSrcByType(category) ?? '/icon/scrap/defaultCategory.svg'}
               title={category.name}
               key={category.id}
             />

src/types/index.d.ts

@@ -12,9 +12,10 @@ type ScrapType = 'image' | 'text' | 'link' | 'video' | 'pdf';
 interface Category {
   content: string;
   file_url: string;
+  url_preview: string;
   id: number;
   name: string;
-  scrapType: ScrapType;
+  scrap_type: ScrapType;
 }
 
 interface Scrap {