diff --git a/src/components/common/popupManager/PopupManager.jsx b/src/components/common/popupManager/PopupManager.jsx index 14047be5..147e0988 100644 --- a/src/components/common/popupManager/PopupManager.jsx +++ b/src/components/common/popupManager/PopupManager.jsx @@ -3,6 +3,9 @@ import { Fragment } from 'react' import { useRecoilValue } from 'recoil' import { popupState } from '@/store/popupAtom' +/** + * 팝업 관리자 + */ export default function PopupManager() { const popup = useRecoilValue(popupState) diff --git a/src/hooks/usePopup.js b/src/hooks/usePopup.js index 5ef59bdc..726ab353 100644 --- a/src/hooks/usePopup.js +++ b/src/hooks/usePopup.js @@ -1,10 +1,21 @@ import { useRecoilState } from 'recoil' import { contextPopupState, popupState } from '@/store/popupAtom' +/** + * 팝업 관리 훅 + * @returns + */ export function usePopup() { const [popup, setPopup] = useRecoilState(popupState) const [contextMenuPopup, setContextMenuPopup] = useRecoilState(contextPopupState) + /** + * 팝업 추가 + * @param {*} id 팝업 아이디 + * @param {*} depth 팝업 깊이 + * @param {*} component 팝업 컴포넌트 + * @param {*} isConfig 팝업 타입 + */ const addPopup = (id, depth, component, isConfig = false) => { setPopup({ config: isConfig ? [...filterDepth(depth, isConfig), { id, depth, component, isConfig }] : [...popup.config], @@ -12,6 +23,11 @@ export function usePopup() { }) } + /** + * 팝업 닫기 + * @param {*} id 팝업 아이디 + * @param {*} isConfig 팝업 타입 + */ const closePopup = (id, isConfig = false) => { if (contextMenuPopup) setContextMenuPopup(null) if (isConfig) { @@ -27,6 +43,10 @@ export function usePopup() { } } + /** + * 팝업 필터 + * @param {*} depth 팝업 깊이 + */ const filterPopup = (depth) => { setPopup({ config: [...filterDepth(depth)], @@ -34,6 +54,12 @@ export function usePopup() { }) } + /** + * 팝업 자식 필터 + * @param {*} id 팝업 아이디 + * @param {*} isConfig 팝업 타입 + * @returns + */ const filterChildrenPopup = (id, isConfig) => { let target = [] if (isConfig) { @@ -57,6 +83,10 @@ export function usePopup() { } } + /** + * 팝업 여러개 닫기 + * @param {*} ids 팝업 아이디 배열 + */ const closePopups = (ids) => { setPopup({ config: [...popup?.config.filter((child) => !ids.includes(child.id))], @@ -64,6 +94,9 @@ export function usePopup() { }) } + /** + * 팝업 전체 닫기 + */ const closeAll = () => { setPopup({ other: [], @@ -71,6 +104,9 @@ export function usePopup() { }) } + /** + * 이전 팝업 닫기 + */ const closePrevPopup = () => { setPopup({ config: [...popup?.slice(popup?.length - 1)], @@ -78,6 +114,12 @@ export function usePopup() { }) } + /** + * 팝업 깊이 필터 + * @param {*} depth 팝업 깊이 + * @param {*} isConfig 팝업 타입 + * @returns + */ const filterDepth = (depth, isConfig) => { if (isConfig) { return [...popup?.config.filter((child) => child.depth < depth)]