feature-078: 카테고리 수정 여러 개 할 수 있는 오류 해결

teamViNO · Feb 19, 2024 · 912d7ba · 912d7ba
1 parent 21aed37
commit 912d7ba
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 63 deletions.
diff --git a/src/components/category/EditCategoryName.tsx b/src/components/category/EditCategoryName.tsx
@@ -9,7 +9,9 @@ interface IEditCategoryNameProps {
   categoryId: number;
   edit: string;
   setEdit: React.Dispatch<React.SetStateAction<string>>;
-  setIsEditing: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsEditing: React.Dispatch<
+    React.SetStateAction<{ activated: boolean; categoryId: number }>
+  >;
 }
 
 const EditCategoryName = ({

diff --git a/src/components/layout/sideBar/SubCategory.tsx b/src/components/layout/sideBar/SubCategory.tsx
@@ -10,28 +10,31 @@ import EditCategoryName from '@/components/category/EditCategoryName';
 interface ISubCategoryProps {
   topId: number;
   subId: number;
-  categoryId: number;
-  name: string;
-  setIsDeleteModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  subFolder: ISubFolderProps;
   grabedCategory: React.MutableRefObject<ISubFolderProps | undefined>;
+  isEditing: { activated: boolean; categoryId: number };
+  setIsEditing: React.Dispatch<
+    React.SetStateAction<{ activated: boolean; categoryId: number }>
+  >;
+  setIsDeleteModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   putCategoryFolder: () => void;
   setCategoryId: React.Dispatch<React.SetStateAction<number | null>>;
 }
 
 const SubCategory = ({
   topId,
   subId,
-  categoryId,
-  name,
-  setIsDeleteModalOpen,
+  subFolder,
   grabedCategory,
+  isEditing,
+  setIsEditing,
+  setIsDeleteModalOpen,
   putCategoryFolder,
   setCategoryId,
 }: ISubCategoryProps) => {
   const [subFolderOptionModalOpen, setSubFolderOptionModalOpen] =
     useState(false);
-  const [isEditing, setIsEditing] = useState(false);
-  const [edit, setEdit] = useState(name);
+  const [edit, setEdit] = useState(subFolder.name);
   const [beforeEdit, setBeforeEdit] = useState(edit);
 
   const [subFolderOptionModalRef] = useOutsideClick<HTMLDivElement>(() =>
@@ -43,15 +46,15 @@ const SubCategory = ({
   const handleOptionClick = (e: React.MouseEvent, option: string) => {
     e.stopPropagation();
     if (option === '수정') {
-      setIsEditing(true);
+      setIsEditing({ activated: true, categoryId: subFolder.categoryId });
       setBeforeEdit(edit);
     } else if (option === '삭제') {
-      if (name === '기타') {
+      if (subFolder.name === '기타') {
         alert(`'기타' 폴더는 삭제할 수 없습니다.`);
         setSubFolderOptionModalOpen(false);
         return;
       }
-      setCategoryId(categoryId);
+      setCategoryId(subFolder.categoryId);
       setIsDeleteModalOpen(true);
     }
     setSubFolderOptionModalOpen(false);
@@ -65,8 +68,8 @@ const SubCategory = ({
 
   const handleDragStart = () =>
     (grabedCategory.current = {
-      categoryId: categoryId,
-      name,
+      categoryId: subFolder.categoryId,
+      name: subFolder.name,
       topCategoryId: topId,
     });
 
@@ -79,10 +82,10 @@ const SubCategory = ({
       onDragStart={handleDragStart}
       onDragEnd={putCategoryFolder}
     >
-      {isEditing ? (
+      {isEditing.activated && isEditing.categoryId === subFolder.categoryId ? (
         <EditCategoryName
           mode="sub"
-          categoryId={categoryId}
+          categoryId={subFolder.categoryId}
           beforeEdit={beforeEdit}
           edit={edit}
           setEdit={setEdit}
@@ -92,13 +95,15 @@ const SubCategory = ({
         <SubCategoryStyles.SubFolderWrap>
           <div style={{ display: 'flex' }}>
             <SubCategoryStyles.SubFolder
-              selected={subId === categoryId}
-              to={`/category/${topId}/${categoryId}`}
+              selected={subId === subFolder.categoryId}
+              to={`/category/${topId}/${subFolder.categoryId}`}
             >
               {edit}
-              <SubCategoryStyles.ShowOptionButton onClick={handleOpenModal}>
-                <MoreOptionsSvg width={16} height={16} />
-              </SubCategoryStyles.ShowOptionButton>
+              {!isEditing.activated && (
+                <SubCategoryStyles.ShowOptionButton onClick={handleOpenModal}>
+                  <MoreOptionsSvg width={16} height={16} />
+                </SubCategoryStyles.ShowOptionButton>
+              )}
             </SubCategoryStyles.SubFolder>
             {subFolderOptionModalOpen && (
               <Option

diff --git a/src/components/layout/sideBar/TopCategory.tsx b/src/components/layout/sideBar/TopCategory.tsx
@@ -7,18 +7,20 @@ import useOutsideClick from '@/hooks/useOutsideClick';
 import SubCategory from './SubCategory';
 import Option from './Option';
 import handleDrag from '@/utils/handleDrag';
-import { ISubFolderProps } from 'types/category';
+import { IFolderProps, ISubFolderProps } from 'types/category';
 import EditCategoryName from '@/components/category/EditCategoryName';
 
 interface ITopCategoryProps {
   topId: number;
   subId: number;
   index: number;
-  categoryId: number;
-  name: string;
-  subFolders: { categoryId: number; name: string }[];
   grabedCategory: React.MutableRefObject<ISubFolderProps | undefined>;
   dropedCategory: React.MutableRefObject<number | undefined>;
+  category: IFolderProps;
+  isEditing: { activated: boolean; categoryId: number };
+  setIsEditing: React.Dispatch<
+    React.SetStateAction<{ activated: boolean; categoryId: number }>
+  >;
   setIsSubCategoryModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   setIsDeleteModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   setCategoryId: React.Dispatch<React.SetStateAction<number | null>>;
@@ -29,11 +31,11 @@ const TopCategory = ({
   topId,
   subId,
   index,
-  categoryId,
-  name,
-  subFolders,
   grabedCategory,
   dropedCategory,
+  category,
+  isEditing,
+  setIsEditing,
   setIsSubCategoryModalOpen,
   setIsDeleteModalOpen,
   putCategoryFolder,
@@ -44,8 +46,7 @@ const TopCategory = ({
     setFolderOptionModalOpen(false),
   );
   const { dragEnter, dragLeave } = handleDrag();
-  const [isEditing, setIsEditing] = useState(false);
-  const [edit, setEdit] = useState(name);
+  const [edit, setEdit] = useState(category.name);
   const [beforeEdit, setBeforeEdit] = useState(edit);
   const options = ['추가', '수정', '삭제', '이동'];
 
@@ -54,10 +55,10 @@ const TopCategory = ({
     if (option === '추가') {
       setIsSubCategoryModalOpen(true);
     } else if (option === '수정') {
-      setIsEditing(true);
+      setIsEditing({ activated: true, categoryId: category.categoryId });
       setBeforeEdit(edit);
     } else if (option === '삭제') {
-      setCategoryId(categoryId);
+      setCategoryId(category.categoryId);
       setIsDeleteModalOpen(true);
     }
     setFolderOptionModalOpen(false);
@@ -71,18 +72,18 @@ const TopCategory = ({
 
   const handleDragStart = () =>
     (grabedCategory.current = {
-      categoryId: categoryId,
-      name,
+      categoryId: category.categoryId,
+      name: category.name,
       topCategoryId: null,
     });
 
   const handleDragEnter = () => {
-    dropedCategory.current = categoryId;
+    dropedCategory.current = category.categoryId;
     if (grabedCategory.current?.topCategoryId === null) return;
     if (grabedCategory.current !== undefined) {
       grabedCategory.current = {
         ...grabedCategory.current,
-        topCategoryId: categoryId,
+        topCategoryId: category.categoryId,
       };
     }
   };
@@ -104,38 +105,39 @@ const TopCategory = ({
         onDragStart={handleDragStart}
         onDragEnter={handleDragEnter}
         onDragEnd={putCategoryFolder}
-        selected={topId === categoryId && !subId}
+        selected={topId === category.categoryId && !subId}
       >
-        {isEditing ? (
+        {isEditing.activated && isEditing.categoryId === category.categoryId ? (
           <EditCategoryName
             mode="top"
-            categoryId={categoryId}
+            categoryId={category.categoryId}
             beforeEdit={beforeEdit}
             edit={edit}
             setEdit={setEdit}
             setIsEditing={setIsEditing}
           />
         ) : (
           <>
-            <TopCategoryStyles.FolderButton to={`/category/${categoryId}`}>
+            <TopCategoryStyles.FolderButton
+              to={`/category/${category.categoryId}`}
+            >
               <TopCategoryStyles.ImageTextWrap>
-                {topId === categoryId ? (
+                {topId === category.categoryId ? (
                   <OpenFileSvg width={28} height={28} />
                 ) : (
                   <ClosedFileSvg width={28} height={28} />
                 )}
-                {isEditing ? (
-                  <input />
-                ) : (
-                  <TopCategoryStyles.CommonTitle>
-                    {edit}
-                  </TopCategoryStyles.CommonTitle>
-                )}
+                <TopCategoryStyles.CommonTitle>
+                  {edit}
+                </TopCategoryStyles.CommonTitle>
               </TopCategoryStyles.ImageTextWrap>
             </TopCategoryStyles.FolderButton>
-            <TopCategoryStyles.ShowOptionButton onClick={handleOpenModal}>
-              <MoreOptionsSvg />
-            </TopCategoryStyles.ShowOptionButton>
+            {!isEditing.activated && (
+              <TopCategoryStyles.ShowOptionButton onClick={handleOpenModal}>
+                <MoreOptionsSvg />
+              </TopCategoryStyles.ShowOptionButton>
+            )}
+
             {folderOptionModalOpen && (
               <Option
                 options={options}
@@ -146,16 +148,17 @@ const TopCategory = ({
           </>
         )}
       </TopCategoryStyles.Container>
-      {topId === categoryId && (
+      {topId === category.categoryId && (
         <TopCategoryStyles.SubFolderContainer>
-          {subFolders.map((subFolder) => (
+          {category.subFolders.map((subFolder) => (
             <SubCategory
               topId={topId}
               subId={subId}
-              categoryId={subFolder.categoryId}
-              name={subFolder.name}
-              setIsDeleteModalOpen={setIsDeleteModalOpen}
+              subFolder={subFolder}
               grabedCategory={grabedCategory}
+              isEditing={isEditing}
+              setIsEditing={setIsEditing}
+              setIsDeleteModalOpen={setIsDeleteModalOpen}
               putCategoryFolder={putCategoryFolder}
               setCategoryId={setCategoryId}
               key={`${subFolder.name}-${subFolder.categoryId}`}

diff --git a/src/components/layout/sideBar/UserMode.tsx b/src/components/layout/sideBar/UserMode.tsx
@@ -26,6 +26,10 @@ const UserMode = () => {
   const [isSubCategoryModalOpen, setIsSubCategoryModalOpen] = useState(false);
   const grabedCategory = useRef<ISubFolderProps | undefined>(undefined);
   const dropedCategory = useRef<number | undefined>(undefined);
+  const [isEditing, setIsEditing] = useState({
+    activated: false,
+    categoryId: 0,
+  });
   const navigate = useNavigate();
 
   const { updateCategories } = useUpdateCategories();
@@ -85,11 +89,11 @@ const UserMode = () => {
             topId={topId}
             subId={subId}
             index={index}
-            categoryId={category.categoryId}
-            name={category.name}
-            subFolders={category.subFolders}
             grabedCategory={grabedCategory}
             dropedCategory={dropedCategory}
+            category={category}
+            isEditing={isEditing}
+            setIsEditing={setIsEditing}
             setIsSubCategoryModalOpen={setIsSubCategoryModalOpen}
             setIsDeleteModalOpen={setIsDeleteModalOpen}
             putCategoryFolder={putCategoryFolder}

diff --git a/src/components/modals/AddCategoryModal.tsx b/src/components/modals/AddCategoryModal.tsx
@@ -45,6 +45,7 @@ const AddCategoryModal = ({
     isTopCategoryModalOpen
       ? setIsTopCategoryModalOpen(false)
       : setIsSubCategoryModalOpen(false);
+    setCategoryName('');
   };
 
   const [topCategoryModalRef] = useOutsideClick<HTMLDivElement>(onCloseModal);

diff --git a/src/styles/category/EditCategoryName.style.ts b/src/styles/category/EditCategoryName.style.ts
@@ -5,6 +5,7 @@ export const EditNameInputWrap = styled.div`
   display: flex;
   padding: 10px 20px;
   border: 1px solid ${theme.color.gray200};
+  background-color: ${theme.color.white};
   width: 100%;
   border-radius: 100px;
   &.warning {

diff --git a/src/utils/handleEdit.ts b/src/utils/handleEdit.ts
@@ -20,20 +20,21 @@ const handleEdit = () => {
     edit: string,
     setEdit: React.Dispatch<React.SetStateAction<string>>,
     beforeEdit: string,
-    setIsEditing: React.Dispatch<React.SetStateAction<boolean>>,
+    setIsEditing: React.Dispatch<
+      React.SetStateAction<{ activated: boolean; categoryId: number }>
+    >,
     nameRegex: boolean,
     setNameRegex: React.Dispatch<React.SetStateAction<boolean>>,
     categoryId: number,
   ) => {
     if (!edit.length || !nameRegex) {
       setEdit(beforeEdit);
-      setIsEditing(false);
+      setIsEditing({ activated: false, categoryId });
       setNameRegex(true);
-      setIsEditing(false);
       return;
     }
     if (edit !== beforeEdit) updateCategoryName(edit, categoryId);
-    setIsEditing(false);
+    setIsEditing({ activated: false, categoryId });
   };
 
   return { editText, finishEdit };