Merge pull request #126 from teamViNO/hotfix-083

hotfix-083: 하위 카테고리 추가 되지 않는 오류 해결
teamViNO · Feb 20, 2024 · e99c493 · e99c493
2 parents e9f915e + 2b79935
commit e99c493
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 48 deletions.
diff --git a/src/components/layout/sideBar/AddCategory.tsx b/src/components/layout/sideBar/AddCategory.tsx
@@ -1,18 +1,22 @@
 import * as AddCategoryStyle from '@/styles/layout/sideBar/AddCategory.style';
 import PlusSvg from '@/assets/icons/plus.svg?react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { topCategoryModalState } from '@/stores/modal';
+import { addCategoryModalState } from '@/stores/modal';
 import { userTokenState } from '@/stores/user';
 import { useState } from 'react';
 import NoticeModal from '@/components/modals/NoticeModal';
 
 const AddCategory = () => {
   const isUser = useRecoilValue(userTokenState);
-  const setTopCategoryModal = useSetRecoilState(topCategoryModalState);
+  const setIsAddCategoryModalOpen = useSetRecoilState(addCategoryModalState);
   const [isNoticeModalOpen, setIsNoticeModalOpen] = useState(false);
 
   const openAddModal = (e: React.MouseEvent<HTMLButtonElement>) => {
-    setTopCategoryModal(true);
+    setIsAddCategoryModalOpen({
+      location: 'top',
+      isOpen: true,
+      categoryId: -1,
+    });
     e.stopPropagation();
   };
 

diff --git a/src/components/layout/sideBar/SubCategory.tsx b/src/components/layout/sideBar/SubCategory.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import * as SubCategoryStyles from '@/styles/layout/sideBar/SubCategory.style';
 import Option from './Option';
 import handleDrag from '@/utils/handleDrag';
-import { ISubFolderProps } from 'types/category';
+import { IEditProps, ISubFolderProps } from 'types/category';
 import EditCategoryName from '@/components/category/EditCategoryName';
 import useCreateToast from '@/hooks/useCreateToast';
 
@@ -13,10 +13,8 @@ interface ISubCategoryProps {
   subId: number;
   subFolder: ISubFolderProps;
   grabedCategory: React.MutableRefObject<ISubFolderProps | undefined>;
-  isEditing: { activated: boolean; categoryId: number };
-  setIsEditing: React.Dispatch<
-    React.SetStateAction<{ activated: boolean; categoryId: number }>
-  >;
+  isEditing: IEditProps;
+  setIsEditing: React.Dispatch<React.SetStateAction<IEditProps>>;
   setIsDeleteModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   putCategoryFolder: () => void;
   setCategoryId: React.Dispatch<React.SetStateAction<number | null>>;

diff --git a/src/components/layout/sideBar/TopCategory.tsx b/src/components/layout/sideBar/TopCategory.tsx
@@ -7,7 +7,12 @@ import useOutsideClick from '@/hooks/useOutsideClick';
 import SubCategory from './SubCategory';
 import Option from './Option';
 import handleDrag from '@/utils/handleDrag';
-import { IFolderProps, ISubFolderProps } from 'types/category';
+import {
+  IAddCategoryModalProps,
+  IEditProps,
+  IFolderProps,
+  ISubFolderProps,
+} from 'types/category';
 import EditCategoryName from '@/components/category/EditCategoryName';
 
 interface ITopCategoryProps {
@@ -17,11 +22,11 @@ interface ITopCategoryProps {
   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 }>
+  isEditing: IEditProps;
+  setIsEditing: React.Dispatch<React.SetStateAction<IEditProps>>;
+  setIsAddCategoryModalOpen: React.Dispatch<
+    React.SetStateAction<IAddCategoryModalProps>
   >;
-  setIsSubCategoryModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   setIsDeleteModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   setCategoryId: React.Dispatch<React.SetStateAction<number | null>>;
   putCategoryFolder: () => void;
@@ -36,7 +41,7 @@ const TopCategory = ({
   category,
   isEditing,
   setIsEditing,
-  setIsSubCategoryModalOpen,
+  setIsAddCategoryModalOpen,
   setIsDeleteModalOpen,
   putCategoryFolder,
   setCategoryId,
@@ -53,7 +58,12 @@ const TopCategory = ({
   const handleOptionClick = (e: React.MouseEvent, option: string) => {
     e.stopPropagation();
     if (option === '추가') {
-      setIsSubCategoryModalOpen(true);
+      console.log(category.categoryId);
+      setIsAddCategoryModalOpen({
+        location: 'sub',
+        isOpen: true,
+        categoryId: category.categoryId,
+      });
     } else if (option === '수정') {
       setIsEditing({ activated: true, categoryId: category.categoryId });
       setBeforeEdit(edit);
@@ -101,7 +111,6 @@ const TopCategory = ({
   return (
     <>
       <TopCategoryStyles.Container
-        className={`${topId}`}
         onDragStart={handleDragStart}
         onDragEnter={handleDragEnter}
         onDragEnd={putCategoryFolder}

diff --git a/src/components/layout/sideBar/UserMode.tsx b/src/components/layout/sideBar/UserMode.tsx
@@ -1,8 +1,8 @@
 import LookSvg from '@/assets/icons/look.svg?react';
 import * as UserModeStyle from '@/styles/layout/sideBar/UserMode.style';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
-import { topCategoryModalState } from '@/stores/modal';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { addCategoryModalState } from '@/stores/modal';
 import AddCategoryModal from '@/components/modals/AddCategoryModal';
 import SuccessAddCategoryModal from '@/components/modals/SuccessAddCategoryModal';
 import { useRef, useState } from 'react';
@@ -16,15 +16,16 @@ import useUpdateCategories from '@/hooks/useUpdateCategories';
 import useCreateToast from '@/hooks/useCreateToast';
 
 const UserMode = () => {
-  const isTopCategoryModalOpen = useRecoilValue(topCategoryModalState);
+  const [isAddCategoryModalOpen, setIsAddCategoryModalOpen] = useRecoilState(
+    addCategoryModalState,
+  );
   const [isSuccessAddCategoryModalOpen, setIsSuccessAddCategoryModalOpen] =
     useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [categoryName, setCategoryName] = useState('');
   const [categoryId, setCategoryId] = useState<number | null>(null);
   const [to, setTo] = useState('');
   const categories = useRecoilValue(categoryState);
-  const [isSubCategoryModalOpen, setIsSubCategoryModalOpen] = useState(false);
   const grabedCategory = useRef<ISubFolderProps | undefined>(undefined);
   const dropedCategory = useRef<number | undefined>(undefined);
   const { createToast } = useCreateToast();
@@ -96,22 +97,19 @@ const UserMode = () => {
             category={category}
             isEditing={isEditing}
             setIsEditing={setIsEditing}
-            setIsSubCategoryModalOpen={setIsSubCategoryModalOpen}
+            setIsAddCategoryModalOpen={setIsAddCategoryModalOpen}
             setIsDeleteModalOpen={setIsDeleteModalOpen}
             putCategoryFolder={putCategoryFolder}
             setCategoryId={setCategoryId}
             key={`${category.name}-${category.categoryId}`}
           />
         ))}
       </>
-      {(isTopCategoryModalOpen || isSubCategoryModalOpen) && (
+      {isAddCategoryModalOpen.isOpen && (
         <AddCategoryModal
-          isTopCategoryModalOpen={isTopCategoryModalOpen}
-          setIsSubCategoryModalOpen={setIsSubCategoryModalOpen}
           categoryName={categoryName}
           setCategoryName={setCategoryName}
           setIsSuccessAddCategoryModalOpen={setIsSuccessAddCategoryModalOpen}
-          topCategoryId={topId}
           setTo={setTo}
         />
       )}

diff --git a/src/components/modals/AddCategoryModal.tsx b/src/components/modals/AddCategoryModal.tsx
@@ -1,6 +1,6 @@
 import useOutsideClick from '@/hooks/useOutsideClick';
-import { topCategoryModalState } from '@/stores/modal';
-import { useSetRecoilState } from 'recoil';
+import { addCategoryModalState } from '@/stores/modal';
+import { useRecoilState } from 'recoil';
 import OpenFileSvg from '@/assets/icons/open-file.svg?react';
 import CloseSvg from '@/assets/icons/close.svg?react';
 import * as AddTopCategoryModalStyles from '@/styles/modals/AddCategoryModal.style';
@@ -17,22 +17,18 @@ import useUpdateCategories from '@/hooks/useUpdateCategories';
 import useCreateToast from '@/hooks/useCreateToast';
 
 interface IAddTopCategoryModalProps extends ICommonModalProps {
-  isTopCategoryModalOpen: boolean;
-  setIsSubCategoryModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  topCategoryId: number;
   setTo: React.Dispatch<React.SetStateAction<string>>;
 }
 
 const AddCategoryModal = ({
-  isTopCategoryModalOpen,
-  setIsSubCategoryModalOpen,
   categoryName,
   setCategoryName,
   setIsSuccessAddCategoryModalOpen,
-  topCategoryId,
   setTo,
 }: IAddTopCategoryModalProps) => {
-  const setIsTopCategoryModalOpen = useSetRecoilState(topCategoryModalState);
+  const [isAddCategoryModalOpen, setIsAddCategoryModalOpen] = useRecoilState(
+    addCategoryModalState,
+  );
   const { createToast } = useCreateToast();
   const { updateCategories } = useUpdateCategories();
   const { editText } = handleEdit();
@@ -42,12 +38,14 @@ const AddCategoryModal = ({
   const categoryNameRegex = /^[a-zA-Z0-9가-힣\s]*$/;
   const checkCategoryNameRegex = categoryNameRegex.test(categoryName);
   const addEnabled = categoryName.length > 0 && checkCategoryNameRegex;
+  const isTopAdd = isAddCategoryModalOpen.location === 'top';
 
-  const onCloseModal = () => {
-    isTopCategoryModalOpen
-      ? setIsTopCategoryModalOpen(false)
-      : setIsSubCategoryModalOpen(false);
-  };
+  const onCloseModal = () =>
+    setIsAddCategoryModalOpen({
+      location: '',
+      isOpen: false,
+      categoryId: -1,
+    });
 
   const [topCategoryModalRef] = useOutsideClick<HTMLDivElement>(onCloseModal);
 
@@ -59,13 +57,13 @@ const AddCategoryModal = ({
       createToast(`'기타' 이름은 사용하실 수 없어요`);
       return;
     }
-    const response = isTopCategoryModalOpen
+    const response = isTopAdd
       ? await postTopCategroy(categoryName)
-      : await postSubCategroy(categoryName, topCategoryId);
+      : await postSubCategroy(categoryName, isAddCategoryModalOpen.categoryId);
     if (response.isSuccess) {
       updateCategories();
       setTo(
-        isTopCategoryModalOpen
+        isTopAdd
           ? `${response.result.categoryId}`
           : `${response.result.topCategoryId}/${response.result.categoryId}`,
       );
@@ -82,7 +80,7 @@ const AddCategoryModal = ({
         </CommonCloseButton>
         <OpenFileSvg width={56} height={56} />
         <AddTopCategoryModalStyles.Title>
-          {isTopCategoryModalOpen ? '상위' : '하위'} 카테고리 추가
+          {isTopAdd ? '상위' : '하위'} 카테고리 추가
         </AddTopCategoryModalStyles.Title>
         <AddTopCategoryModalStyles.SubTitle>
           만들고 싶은 카테고리의 이름을 작성해주세요

diff --git a/src/stores/modal.ts b/src/stores/modal.ts
@@ -1,8 +1,8 @@
 import { atom } from 'recoil';
 
-export const topCategoryModalState = atom({
-  key: 'topCategoryModal',
-  default: false,
+export const addCategoryModalState = atom({
+  key: 'addCategoryModal',
+  default: { location: '', isOpen: false, categoryId: -1 },
 });
 
 export const summaryTransformModalState = atom({
@@ -16,6 +16,6 @@ export const recommendationModalState = atom({
 });
 
 export const errorModalState = atom({
-    key: 'error-modal',
-    default: false,
+  key: 'error-modal',
+  default: false,
 });
diff --git a/types/category.ts b/types/category.ts
@@ -20,3 +20,14 @@ export interface ITagProps {
   tag_id: number;
   name: string;
 }
+
+export interface IEditProps {
+  activated: boolean;
+  categoryId: number;
+}
+
+export interface IAddCategoryModalProps {
+  location: string;
+  isOpen: boolean;
+  categoryId: number;
+}