[Refactor] 모달 띄우는 로직, 데이터 상태 로직 리팩토링..

package.json

@@ -15,7 +15,6 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@sentry/react": "^8.22.0",
-    "@sentry/vite-plugin": "^2.21.1",
     "@tanstack/react-query": "^5.49.2",
     "@tanstack/react-query-devtools": "^5.49.2",
     "axios": "^1.7.2",
@@ -28,6 +27,7 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
     "@eslint/js": "^9.6.0",
+    "@sentry/vite-plugin": "^2.21.1",
     "@storybook/addon-a11y": "^8.2.6",
     "@storybook/addon-essentials": "^8.2.6",
     "@storybook/addon-interactions": "^8.2.6",

src/App.tsx

@@ -11,6 +11,7 @@ import { theme } from '@/common/style/theme/theme';
 import { HTTPError } from '@/shared/api/HTTPError';
 import LeftSidebar from '@/shared/component/LeftSidebar/LeftSidebar';
 import Login from '@/shared/component/Login/Login';
+import ModalContainer from '@/shared/component/Modal/ModalContainer';
 import { HTTP_STATUS_CODE } from '@/shared/constant/api';
 import { PATH } from '@/shared/constant/path';
 import ErrorPage from '@/shared/page/errorPage/ErrorPage';
@@ -48,6 +49,7 @@ const App = () => {
     <ErrorBoundary fallback={ErrorPage} onReset={handleResetError}>
       <Login>
         <div css={containerStyle}>
+          <ModalContainer />
           <LeftSidebar />
           <main css={layoutStyle}>
             <Outlet />

src/common/component/Modal/Modal.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { ReactElement, useCallback, useEffect } from 'react';
+import { ReactNode, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
 import { backgroundStyle, dialogStyle } from '@/common/component/Modal/Modal.style';
 
 interface ModalProps {
   isOpen: boolean;
-  children?: ReactElement;
+  children: ReactNode;
   onClose?: () => void;
 }
 

src/page/archiving/index/ArchivingPage.tsx

@@ -4,12 +4,9 @@ import { useLocation } from 'react-router-dom';
 import Add from '@/common/asset/svg/add_btn.svg?react';
 import Button from '@/common/component/Button/Button';
 import Flex from '@/common/component/Flex/Flex';
-import Modal from '@/common/component/Modal/Modal';
-import { useModal, useOutsideClick } from '@/common/hook';
+import { useOutsideClick } from '@/common/hook';
 import { theme } from '@/common/style/theme/theme';
 
-import BlockModal from '@/page/archiving/createTimeBlock/component/Block/BlockModal';
-import UploadModal from '@/page/archiving/createTimeBlock/component/Upload/UploadModal';
 import {
   buttonStyle,
   contentStyle,
@@ -28,6 +25,8 @@ import { Block } from '@/page/archiving/index/type/blockType';
 import { MonthType } from '@/page/archiving/index/type/monthType';
 import { alignBlocks, createTimeBlock } from '@/page/archiving/index/util/block';
 
+import { useOpenModal } from '@/shared/component/Modal/store/modal';
+
 const ArchivingPage = () => {
   const [selectedBlock, setSelectedBlock] = useState<Block>();
 
@@ -38,9 +37,6 @@ const ArchivingPage = () => {
   const teamId = new URLSearchParams(location.search).get('teamId');
   if (!teamId) throw new Error('has no error');
 
-  // 블록 생성 모달 관련 코드
-  const { isOpen, openModal, closeModal, setCurrentContent, currentContent } = useModal();
-
   const {
     currentDate,
     currentYear,
@@ -66,22 +62,18 @@ const ArchivingPage = () => {
   };
   const sideBarRef = useOutsideClick(handleClose);
 
+  const openModal = useOpenModal();
+
   useEffect(() => {
     setSelectedMonthString(`${currentDate.getMonth() + 1}월` as MonthType);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [teamId]);
 
-  const handleNext = (blockData: {
-    blockName: string;
-    blockType: string;
-    dates: { startDate: string; endDate: string };
-  }) => {
-    const type = 'executive';
-    setCurrentContent(<UploadModal onClose={closeModal} teamId={+teamId} type={type} blockData={blockData} />);
+  const handleOpenBlockModal = () => {
+    openModal('create-block');
   };
 
   const handleMonthClick = (month: MonthType) => {
-    console.log('click');
     daySectionRef.current?.scrollTo(0, 0);
     setSelectedMonthString(month);
   };
@@ -141,17 +133,12 @@ const ArchivingPage = () => {
         </Flex>
 
         <Flex css={{ zIndex: theme.zIndex.overlayTop, marginLeft: 'auto' }}>
-          <Button
-            variant="action"
-            css={buttonStyle(selectedBlock)}
-            onClick={() => openModal(<BlockModal onNext={handleNext} />)}>
+          <Button variant="action" css={buttonStyle(selectedBlock)} onClick={handleOpenBlockModal}>
             <Add width={24} height={24} />
             블록 생성
           </Button>
         </Flex>
       </section>
-
-      <Modal isOpen={isOpen} children={currentContent} onClose={closeModal} />
       <DocumentBar selectedBlock={selectedBlock} ref={sideBarRef} onClose={handleClose} />
     </Flex>
   );

src/page/archiving/index/component/DocumentItem/DocumentItem.tsx

@@ -1,18 +1,16 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { ReactNode } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import Download from '@/common/asset/svg/download.svg?react';
 import TrashBox from '@/common/asset/svg/trash_box.svg?react';
 import Flex from '@/common/component/Flex/Flex';
-import Modal from '@/common/component/Modal/Modal';
 import Text from '@/common/component/Text/Text';
-import { useModal } from '@/common/hook';
 
 import { containerStyle, fileNameStyle } from '@/page/archiving/index/component/DocumentItem/DocumentItem.style';
 import { downloadDocument } from '@/page/archiving/index/util/document';
 
-import DeleteModal from '@/shared/component/DeleteModal/DeleteModal';
-import { useTeamId } from '@/shared/store/team';
+import { useOpenModal } from '@/shared/component/Modal/store/modal';
 
 interface DocumentItemProps {
   documentId: number;
@@ -24,9 +22,11 @@ interface DocumentItemProps {
 }
 
 const DocumentItem = ({ documentId, children, fileUrl, fileName }: DocumentItemProps) => {
-  const { isOpen, openModal, closeModal, currentContent } = useModal();
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const teamId = searchParams.get('teamId');
 
-  const teamId = useTeamId();
+  const openModal = useOpenModal();
 
   const onClickDocumentItem = () => {
     window.open(fileUrl);
@@ -39,7 +39,8 @@ const DocumentItem = ({ documentId, children, fileUrl, fileName }: DocumentItemP
 
   const handleTrashBoxClick = (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
     e.stopPropagation();
-    openModal(<DeleteModal title="docs" detail="docs" onClose={closeModal} teamId={+teamId} id={documentId} />);
+
+    openModal('delete', { teamId: +teamId!, itemId: documentId, itemType: 'docs' });
   };
 
   return (
@@ -55,7 +56,6 @@ const DocumentItem = ({ documentId, children, fileUrl, fileName }: DocumentItemP
           <TrashBox width={20} height={20} onClick={(e) => handleTrashBoxClick(e)} css={{ cursor: 'pointer' }} />
         </Flex>
       </li>
-      <Modal isOpen={isOpen} children={currentContent} onClose={closeModal} />
     </>
   );
 };

src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx

@@ -3,9 +3,7 @@ import { useLocation } from 'react-router-dom';
 import Button from '@/common/component/Button/Button';
 import Flex from '@/common/component/Flex/Flex';
 import Heading from '@/common/component/Heading/Heading';
-import Modal from '@/common/component/Modal/Modal';
 import Text from '@/common/component/Text/Text';
-import { useModal } from '@/common/hook';
 import { theme } from '@/common/style/theme/theme';
 
 import DocumentItem from '@/page/archiving/index/component/DocumentItem/DocumentItem';
@@ -15,7 +13,7 @@ import { Block } from '@/page/archiving/index/type/blockType';
 import { DocumentType } from '@/page/archiving/index/type/documentType';
 import { formattingDate } from '@/page/archiving/index/util/date';
 
-import DeleteModal from '@/shared/component/DeleteModal/DeleteModal';
+import { useOpenModal } from '@/shared/component/Modal/store/modal';
 
 import { blockNameStyle, deleteBtnStyle } from './SelectedBlock.style';
 
@@ -24,9 +22,7 @@ interface DocumentBarInfoProps {
   onClose: () => void;
 }
 
-const SelectedBlock = ({ selectedBlock, onClose }: DocumentBarInfoProps) => {
-  const { isOpen, openModal, closeModal, currentContent } = useModal();
-
+const SelectedBlock = ({ selectedBlock }: DocumentBarInfoProps) => {
   const location = useLocation();
   const teamId = new URLSearchParams(location.search).get('teamId');
 
@@ -37,9 +33,10 @@ const SelectedBlock = ({ selectedBlock, onClose }: DocumentBarInfoProps) => {
   const startDate = formattingDate(selectedBlock.startDate);
   const endDate = formattingDate(selectedBlock.endDate);
 
-  const handleModalClose = () => {
-    onClose();
-    closeModal;
+  const openModal = useOpenModal();
+
+  const handleDeleteClick = () => {
+    openModal('delete', { teamId: +teamId!, itemId: selectedBlock.timeBlockId, itemType: 'block' });
   };
 
   return (
@@ -49,21 +46,7 @@ const SelectedBlock = ({ selectedBlock, onClose }: DocumentBarInfoProps) => {
         <Heading tag="H6" css={blockNameStyle}>
           {selectedBlock.name}
         </Heading>
-        <Button
-          variant="text"
-          size="small"
-          css={deleteBtnStyle}
-          onClick={() =>
-            openModal(
-              <DeleteModal
-                title="block"
-                detail="block"
-                onClose={handleModalClose}
-                teamId={+teamId}
-                id={selectedBlock.timeBlockId}
-              />
-            )
-          }>
+        <Button variant="text" size="small" css={deleteBtnStyle} onClick={handleDeleteClick}>
           블록삭제
         </Button>
       </Flex>
@@ -82,7 +65,6 @@ const SelectedBlock = ({ selectedBlock, onClose }: DocumentBarInfoProps) => {
           />
         ))}
       </Flex>
-      <Modal isOpen={isOpen} children={currentContent} onClose={closeModal} />
     </Flex>
   );
 };

src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx → src/page/archiving/index/component/TimeBlockModal/component/Block/BlockModal.tsx

@@ -1,49 +1,59 @@
-import { buttonStyle, textStyle } from '@/page/archiving/createTimeBlock/component/Block/BlockModal.style';
-import BlockDate from '@/page/archiving/createTimeBlock/component/Block/Date/BlockDate';
-import BlockIcon from '@/page/archiving/createTimeBlock/component/Block/Icon/BlockIcon';
-import BlockBox from '@/page/archiving/createTimeBlock/component/Box/BlockBox';
-import { BLOCK_ICON } from '@/page/archiving/createTimeBlock/constant/iconBlock';
-import { BlockData } from '@/page/archiving/createTimeBlock/type/blockType';
-
 import { useState } from 'react';
 
 import Button from '@/common/component/Button/Button';
 import Flex from '@/common/component/Flex/Flex';
 import Input from '@/common/component/Input/Input';
 import Text from '@/common/component/Text/Text';
 
-import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo';
+import {
+  buttonStyle,
+  textStyle,
+} from '@/page/archiving/index/component/TimeBlockModal/component/Block/BlockModal.style';
+import BlockDate from '@/page/archiving/index/component/TimeBlockModal/component/Block/Date/BlockDate';
+import BlockIcon from '@/page/archiving/index/component/TimeBlockModal/component/Block/Icon/BlockIcon';
+import BlockBox from '@/page/archiving/index/component/TimeBlockModal/component/Box/BlockBox';
+import { BLOCK_ICON } from '@/page/archiving/index/component/TimeBlockModal/constant/iconBlock';
+
+import { useBlockContext } from '@/shared/component/Modal/hook/useBlockContext';
+import WorkSapceInfo from '@/shared/component/WorkSpaceModal/info/WorkSpaceInfo';
 
 interface BlockModalProps {
-  onNext: (blockData: BlockData) => void;
+  isVisible: boolean;
 }
 
-const BlockModal = ({ onNext }: BlockModalProps) => {
-  const [blockName, setBlockName] = useState('');
+const BlockModal = ({ isVisible }: BlockModalProps) => {
   const [selectedIcon, setSelectedIcon] = useState<number>(-1);
-  const [dates, setDates] = useState({ startDate: '', endDate: '' });
   const [isDateRangeValid, setIsDateRangeValid] = useState(false);
 
+  const { formData, setFormData, nextStep } = useBlockContext();
+
   const handleBlockNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.value.length <= 25) {
-      setBlockName(e.target.value);
+      setFormData({ blockName: e.target.value });
     }
   };
 
   const isButtonActive =
-    blockName.trim() !== '' &&
+    formData.blockName.trim() !== '' &&
     selectedIcon !== -1 &&
-    dates.startDate.length === 10 &&
-    dates.endDate.length === 10 &&
+    formData.startDate.length === 10 &&
+    formData.endDate.length === 10 &&
     isDateRangeValid;
 
   const handleNext = () => {
     if (isButtonActive) {
-      const blockType = BLOCK_ICON[selectedIcon].name;
-      onNext({ blockName, dates, blockType });
+      const blockIconType = BLOCK_ICON[selectedIcon].name;
+      setFormData({
+        blockType: blockIconType,
+        startDate: formData.startDate,
+        endDate: formData.endDate,
+      });
+      nextStep();
     }
   };
 
+  if (!isVisible) return null;
+
   return (
     <Flex
       tag={'section'}
@@ -74,22 +84,22 @@
               size="large"
               placeholder="활동,행사명 등"
               css={{ width: '100%' }}
-              value={blockName}
+              value={formData.blockName}
               onChange={handleBlockNameChange}
             />
             <Text tag="body7" css={textStyle}>
-              {blockName.length} / 25
+              {formData.blockName.length} / 25
             </Text>
           </Flex>
         </BlockBox>
 
         <BlockBox title="기간">
           <Flex styles={{ align: 'flex-start', direction: 'column', padding: '0', width: '100%' }}>
             <BlockDate
-              startDate={dates.startDate}
-              endDate={dates.endDate}
-              onSetStartDate={(date) => setDates((prev) => ({ ...prev, startDate: date as string }))}
-              onSetEndDate={(date) => setDates((prev) => ({ ...prev, endDate: date as string }))}
+              startDate={formData.startDate}
+              endDate={formData.endDate}
+              onSetStartDate={(date) => setFormData({ startDate: date })}
+              onSetEndDate={(date) => setFormData({ endDate: date })}
               onSetIsDateRangeValid={setIsDateRangeValid}
             />
           </Flex>