From 2b799355c154973a61cb08bdf927def9c6494925 Mon Sep 17 00:00:00 2001 From: gs0428 Date: Tue, 20 Feb 2024 23:52:34 +0900 Subject: [PATCH] =?UTF-8?q?hotfix-083:=20=ED=95=98=EC=9C=84=20=EC=B9=B4?= =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EC=B6=94=EA=B0=80=20=EB=90=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=98=A4=EB=A5=98=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/sideBar/AddCategory.tsx | 10 ++++-- src/components/layout/sideBar/SubCategory.tsx | 8 ++--- src/components/layout/sideBar/TopCategory.tsx | 25 +++++++++----- src/components/layout/sideBar/UserMode.tsx | 16 ++++----- src/components/modals/AddCategoryModal.tsx | 34 +++++++++---------- src/stores/modal.ts | 10 +++--- types/category.ts | 11 ++++++ 7 files changed, 66 insertions(+), 48 deletions(-) diff --git a/src/components/layout/sideBar/AddCategory.tsx b/src/components/layout/sideBar/AddCategory.tsx index 210aa73..909c334 100644 --- 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) => { - 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 index dfcca2c..c248f90 100644 --- 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; - isEditing: { activated: boolean; categoryId: number }; - setIsEditing: React.Dispatch< - React.SetStateAction<{ activated: boolean; categoryId: number }> - >; + isEditing: IEditProps; + setIsEditing: React.Dispatch>; setIsDeleteModalOpen: React.Dispatch>; putCategoryFolder: () => void; setCategoryId: React.Dispatch>; diff --git a/src/components/layout/sideBar/TopCategory.tsx b/src/components/layout/sideBar/TopCategory.tsx index d717eba..9493cfe 100644 --- 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; dropedCategory: React.MutableRefObject; category: IFolderProps; - isEditing: { activated: boolean; categoryId: number }; - setIsEditing: React.Dispatch< - React.SetStateAction<{ activated: boolean; categoryId: number }> + isEditing: IEditProps; + setIsEditing: React.Dispatch>; + setIsAddCategoryModalOpen: React.Dispatch< + React.SetStateAction >; - setIsSubCategoryModalOpen: React.Dispatch>; setIsDeleteModalOpen: React.Dispatch>; setCategoryId: React.Dispatch>; 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 ( <> { - const isTopCategoryModalOpen = useRecoilValue(topCategoryModalState); + const [isAddCategoryModalOpen, setIsAddCategoryModalOpen] = useRecoilState( + addCategoryModalState, + ); const [isSuccessAddCategoryModalOpen, setIsSuccessAddCategoryModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); @@ -24,7 +26,6 @@ const UserMode = () => { const [categoryId, setCategoryId] = useState(null); const [to, setTo] = useState(''); const categories = useRecoilValue(categoryState); - const [isSubCategoryModalOpen, setIsSubCategoryModalOpen] = useState(false); const grabedCategory = useRef(undefined); const dropedCategory = useRef(undefined); const { createToast } = useCreateToast(); @@ -96,7 +97,7 @@ const UserMode = () => { category={category} isEditing={isEditing} setIsEditing={setIsEditing} - setIsSubCategoryModalOpen={setIsSubCategoryModalOpen} + setIsAddCategoryModalOpen={setIsAddCategoryModalOpen} setIsDeleteModalOpen={setIsDeleteModalOpen} putCategoryFolder={putCategoryFolder} setCategoryId={setCategoryId} @@ -104,14 +105,11 @@ const UserMode = () => { /> ))} - {(isTopCategoryModalOpen || isSubCategoryModalOpen) && ( + {isAddCategoryModalOpen.isOpen && ( )} diff --git a/src/components/modals/AddCategoryModal.tsx b/src/components/modals/AddCategoryModal.tsx index 3353c08..78f8c6d 100644 --- 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>; - topCategoryId: number; setTo: React.Dispatch>; } 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(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 = ({ - {isTopCategoryModalOpen ? '상위' : '하위'} 카테고리 추가 + {isTopAdd ? '상위' : '하위'} 카테고리 추가 만들고 싶은 카테고리의 이름을 작성해주세요 diff --git a/src/stores/modal.ts b/src/stores/modal.ts index 5adae7b..5570113 100644 --- 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 index ac6a12b..4dbe752 100644 --- 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; +}