feature-060: 카테고리 수정 API 연동

teamViNO · Feb 9, 2024 · 02b136f · 02b136f
1 parent 560bfd0
commit 02b136f
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 27 deletions.
diff --git a/src/apis/category.ts b/src/apis/category.ts
@@ -60,3 +60,9 @@ export const deleteCategory = async (category_id: number) => {
   const response = await axiosInstance.delete(`/category/${category_id}`);
   return response.data;
 };
+
+// 카테고리 이름 수정 API
+export const updateCategoryName = async (name: string, categoryId: number) => {
+  const response = await axiosInstance.put(`/category/${categoryId}`, { name });
+  return response.data;
+};
diff --git a/src/components/layout/sideBar/SubCategory.tsx b/src/components/layout/sideBar/SubCategory.tsx
@@ -32,9 +32,20 @@ const SubCategory = ({
     useState(false);
   const [isEditing, setIsEditing] = useState(false);
   const [edit, setEdit] = useState(name);
+  const [beforeEdit, setBeforeEdit] = useState(edit);
+  const { editText, finishEdit } = handleEdit();
   const [editNameRef] = useOutsideClick<HTMLDivElement>(() =>
-    setIsEditing(false),
+    finishEdit(
+      edit,
+      setEdit,
+      beforeEdit,
+      setIsEditing,
+      nameRegex,
+      setNameRegex,
+      categoryId,
+    ),
   );
+  const [nameRegex, setNameRegex] = useState(true);
 
   const [subFolderOptionModalRef] = useOutsideClick<HTMLDivElement>(() =>
     setSubFolderOptionModalOpen(false),
@@ -46,6 +57,7 @@ const SubCategory = ({
     e.stopPropagation();
     if (option === '수정') {
       setIsEditing(true);
+      setBeforeEdit(edit);
     } else if (option === '삭제') {
       setCategoryId(categoryId);
       setIsDeleteModalOpen(true);
@@ -60,7 +72,7 @@ const SubCategory = ({
   };
 
   const handleInput = (e: React.ChangeEvent<HTMLInputElement>) =>
-    handleEdit(e, setEdit);
+    editText(e, setEdit, setNameRegex);
 
   const handleDragStart = () =>
     (grabedCategory.current = {
@@ -79,7 +91,10 @@ const SubCategory = ({
       onDragEnd={putCategoryFolder}
     >
       {isEditing ? (
-        <SubCategoryStyles.EditNameInputWrap ref={editNameRef}>
+        <SubCategoryStyles.EditNameInputWrap
+          ref={editNameRef}
+          className={`${(!nameRegex || !edit.length) && 'warning'}`}
+        >
           <SubCategoryStyles.EditNameInput
             value={edit}
             onChange={handleInput}

diff --git a/src/components/layout/sideBar/TopCategory.tsx b/src/components/layout/sideBar/TopCategory.tsx
@@ -47,18 +47,22 @@ const TopCategory = ({
   const [isEditing, setIsEditing] = useState(false);
   const [edit, setEdit] = useState(name);
   const [beforeEdit, setBeforeEdit] = useState(edit);
+  const { editText, finishEdit } = handleEdit();
 
-  const categoryNameRegex = /^[a-zA-Z0-9가-힣\s]*$/;
   const [nameRegex, setNameRegex] = useState(true);
   const options = ['추가', '수정', '삭제', '이동'];
 
-  const finishEdit = () => {
-    if (!edit.length) {
-      setEdit(beforeEdit);
-    }
-    setIsEditing(false);
-  };
-  const [editNameRef] = useOutsideClick<HTMLDivElement>(finishEdit);
+  const [editNameRef] = useOutsideClick<HTMLDivElement>(() =>
+    finishEdit(
+      edit,
+      setEdit,
+      beforeEdit,
+      setIsEditing,
+      nameRegex,
+      setNameRegex,
+      categoryId,
+    ),
+  );
 
   const handleOptionClick = (e: React.MouseEvent, option: string) => {
     e.stopPropagation();
@@ -79,14 +83,8 @@ const TopCategory = ({
     setFolderOptionModalOpen(true);
   };
 
-  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!categoryNameRegex.test(e.target.value)) {
-      setNameRegex(false);
-      return;
-    }
-    setNameRegex(true);
-    handleEdit(e, setEdit);
-  };
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) =>
+    editText(e, setEdit, setNameRegex);
   const handleDragStart = () =>
     (grabedCategory.current = {
       categoryId: categoryId,

diff --git a/src/components/modals/AddCategoryModal.tsx b/src/components/modals/AddCategoryModal.tsx
@@ -33,6 +33,7 @@ const AddCategoryModal = ({
 }: IAddTopCategoryModalProps) => {
   const setIsTopCategoryModalOpen = useSetRecoilState(topCategoryModalState);
   const { updateCategories } = useUpdateCategories();
+  const { editText } = handleEdit();
 
   const [isFocused, setIsFocused] = useState(false);
 
@@ -49,7 +50,7 @@ const AddCategoryModal = ({
   const [topCategoryModalRef] = useOutsideClick<HTMLDivElement>(onCloseModal);
 
   const handleInputCategoryName = (e: React.ChangeEvent<HTMLInputElement>) =>
-    handleEdit(e, setCategoryName);
+    editText(e, setCategoryName);
 
   const addCategory = async (e: React.MouseEvent) => {
     const response = isTopCategoryModalOpen

diff --git a/src/styles/layout/sideBar/SubCategory.style.ts b/src/styles/layout/sideBar/SubCategory.style.ts
@@ -13,6 +13,9 @@ export const EditNameInputWrap = styled.div`
   border: 1px solid ${theme.color.gray200};
   width: 100%;
   border-radius: 100px;
+  &.warning {
+    border: 1px solid ${theme.color.red};
+  }
 `;
 
 export const EditNameInput = styled.input`

diff --git a/src/utils/handleEdit.ts b/src/utils/handleEdit.ts
@@ -1,9 +1,41 @@
-const handleEdit = (
-  e: React.ChangeEvent<HTMLInputElement>,
-  setValue: React.Dispatch<React.SetStateAction<string>>,
-) => {
-  if (e.target.value.length > 10) return;
-  setValue(e.target.value);
-};
+import { updateCategoryName } from '@/apis/category';
+
+const handleEdit = () => {
+  const editText = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    setValue: React.Dispatch<React.SetStateAction<string>>,
+    setNameRegex?: React.Dispatch<React.SetStateAction<boolean>>,
+  ) => {
+    const categoryNameRegex = /^[a-zA-Z0-9가-힣\s]*$/;
+    if (e.target.value.length > 10) return;
+    if (!categoryNameRegex.test(e.target.value)) {
+      setNameRegex && setNameRegex(false);
+    } else {
+      setNameRegex && setNameRegex(true);
+    }
+    setValue(e.target.value);
+  };
 
+  const finishEdit = (
+    edit: string,
+    setEdit: React.Dispatch<React.SetStateAction<string>>,
+    beforeEdit: string,
+    setIsEditing: React.Dispatch<React.SetStateAction<boolean>>,
+    nameRegex: boolean,
+    setNameRegex: React.Dispatch<React.SetStateAction<boolean>>,
+    categoryId: number,
+  ) => {
+    if (!edit.length || !nameRegex) {
+      setEdit(beforeEdit);
+      setIsEditing(false);
+      setNameRegex(true);
+      setIsEditing(false);
+      return;
+    }
+    if (edit !== beforeEdit) updateCategoryName(edit, categoryId);
+    setIsEditing(false);
+  };
+
+  return { editText, finishEdit };
+};
 export default handleEdit;