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

src/App.tsx

@@ -6,6 +6,7 @@ import { Outlet, useNavigate } from 'react-router-dom';
 import { AxiosError } from 'axios';
 
 import ErrorBoundary from '@/common/component/ErrorBoundary/ErrorBoundary';
+import ModalContainer from '@/common/component/Modal/ModalContainer';
 import { theme } from '@/common/style/theme/theme';
 
 import LeftSidebar from '@/shared/component/LeftSidebar/LeftSidebar';
@@ -44,6 +45,7 @@ const App = () => {
     <ErrorBoundary fallback={ErrorPage} onReset={handleResetError}>
       <Login>
         <div css={containerStyle}>
+          <ModalContainer />
           <LeftSidebar />
           <main css={layoutStyle}>
             <Outlet />

src/common/component/Modal/Modal.tsx

@@ -3,14 +3,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/common/component/Modal/ModalContainer.tsx

@@ -0,0 +1,23 @@
+import Modal from '@/common/component/Modal/Modal';
+
+import { BlockProvider } from '@/shared/hook/common/useBlockContext';
+import { WorkSpaceProvider } from '@/shared/hook/common/useWorkSpaceContext';
+import { useCloseModal, useModalContent, useModalIsOpen } from '@/shared/store/modal';
+
+const ModalContainer = () => {
+  const isOpen = useModalIsOpen();
+  const content = useModalContent();
+  const closeModal = useCloseModal();
+
+  if (!isOpen || !content) return null;
+
+  return (
+    <Modal isOpen={isOpen} onClose={closeModal}>
+      <WorkSpaceProvider>
+        <BlockProvider>{content}</BlockProvider>
+      </WorkSpaceProvider>
+    </Modal>
+  );
+};
+
+export default ModalContainer;

src/page/archiving/createTimeBlock/component/Block/BlockModal.tsx

@@ -3,7 +3,6 @@ import BlockDate from '@/page/archiving/createTimeBlock/component/Block/Date/Blo
 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';
 
@@ -12,35 +11,37 @@ 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 WorkSapceInfo from '@/shared/component/createWorkSpaceModal/info/WorkSpaceInfo';
+import { useBlockContext } from '@/shared/hook/common/useBlockContext';
 
-interface BlockModalProps {
-  onNext: (blockData: BlockData) => void;
-}
-
-const BlockModal = ({ onNext }: BlockModalProps) => {
-  const [blockName, setBlockName] = useState('');
+const BlockModal = () => {
   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();
     }
   };
 
@@ -74,22 +75,22 @@ const BlockModal = ({ onNext }: BlockModalProps) => {
               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>

src/page/archiving/createTimeBlock/component/Block/Date/BlockDate.tsx

@@ -9,17 +9,17 @@ import SupportingText from '@/common/component/SupportingText/SupportingText';
 interface BlockDateProps {
   startDate: string;
   endDate: string;
-  onSetStartDate: (date: string | ((prev: string) => string)) => void;
-  onSetEndDate: (date: string | ((prev: string) => string)) => void;
+  onSetStartDate: (date: string) => void;
+  onSetEndDate: (date: string) => void;
   onSetIsDateRangeValid: (isValid: boolean) => void;
 }
 
 const BlockDate = ({ startDate, endDate, onSetStartDate, onSetEndDate, onSetIsDateRangeValid }: BlockDateProps) => {
   const { dates, validation, handleChange } = useDateRange(
     startDate,
     endDate,
-    onSetStartDate,
-    onSetEndDate,
+    (date: string) => onSetStartDate(date),
+    (date: string) => onSetEndDate(date),
     onSetIsDateRangeValid
   );
 

src/page/archiving/createTimeBlock/component/Upload/UploadModal.tsx

@@ -3,7 +3,6 @@ import BlockItem from '@/page/archiving/createTimeBlock/component/Upload/File/Li
 import { flexStyle, scrollStyle } from '@/page/archiving/createTimeBlock/component/Upload/UploadModal.style';
 import { useDeleteFileMutation } from '@/page/archiving/createTimeBlock/hook/api/useDeleteFileMutation';
 import { usePostTimeBlockMutation } from '@/page/archiving/createTimeBlock/hook/api/usePostTimeBlockMutation';
-import { BlockData } from '@/page/archiving/createTimeBlock/type/blockType';
 import { formatDatePost } from '@/page/archiving/createTimeBlock/util/date';
 import { getRandomColor } from '@/page/archiving/index/util/color';
 
@@ -13,23 +12,24 @@ import Button from '@/common/component/Button/Button';
 import Flex from '@/common/component/Flex/Flex';
 
 import { Files } from '@/shared/api/time-blocks/team/time-block/type';
-import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo';
+import WorkSapceInfo from '@/shared/component/createWorkSpaceModal/info/WorkSpaceInfo';
+import { useBlockContext } from '@/shared/hook/common/useBlockContext';
+import { useModalStore } from '@/shared/store/modal';
+import { useTeamStore } from '@/shared/store/team';
 import { useToastStore } from '@/shared/store/toast';
 
-interface UploadModalProps {
-  onClose: () => void;
-  teamId: number;
-  type: string;
-  blockData: BlockData;
-}
+const UploadModal = () => {
+  const { teamId } = useTeamStore();
+
+  const { formData, reset } = useBlockContext();
+  const { closeModal } = useModalStore();
 
-const UploadModal = ({ onClose, teamId, type, blockData }: UploadModalProps) => {
   const [files, setFiles] = useState<File[]>([]);
   const [fileUrls, setFileUrls] = useState<Files>({});
   const [uploadStatus, setUploadStatus] = useState<{ [key: string]: boolean }>({});
   const [isAllUploaded, setIsAllUploaded] = useState(true);
 
-  const { mutate: timeBlockMutate } = usePostTimeBlockMutation(teamId, type);
+  const { mutate: timeBlockMutate } = usePostTimeBlockMutation(+teamId, 'executive');
   const { mutate: fileDeleteMutate } = useDeleteFileMutation();
   const { createToast } = useToastStore();
 
@@ -77,19 +77,20 @@ const UploadModal = ({ onClose, teamId, type, blockData }: UploadModalProps) =>
   };
 
   const data = {
-    name: blockData.blockName,
+    name: formData.blockName,
     color: getRandomColor(),
-    startDate: formatDatePost(blockData.dates.startDate),
-    endDate: formatDatePost(blockData.dates.endDate),
-    blockType: blockData.blockType,
+    startDate: formatDatePost(formData.startDate),
+    endDate: formatDatePost(formData.endDate),
+    blockType: formData.blockType,
     files: fileUrls,
   };
 
   const handleSave = () => {
     timeBlockMutate(data, {
       onSuccess: () => {
-        onClose();
         createToast('활동 블록이 생성되었습니다', 'success');
+        closeModal();
+        reset();
       },
     });
   };

src/page/archiving/createTimeBlock/hook/common/useDateRange.tsx

@@ -6,8 +6,8 @@ import { useState } from 'react';
 const useDateRange = (
   initialStartDate = '',
   initialEndDate = '',
-  onSetStartDate: (date: string | ((prev: string) => string)) => void,
-  onSetEndDate: (date: string | ((prev: string) => string)) => void,
+  onSetStartDate: (date: string) => void,
+  onSetEndDate: (date: string) => void,
   onSetIsDateRangeValid: (isValid: boolean) => void
 ) => {
   const [dates, setDates] = useState({ startDate: initialStartDate, endDate: initialEndDate });

src/page/archiving/index/ArchivingPage.tsx

@@ -1,5 +1,3 @@
-import BlockModal from '@/page/archiving/createTimeBlock/component/Block/BlockModal';
-import UploadModal from '@/page/archiving/createTimeBlock/component/Upload/UploadModal';
 import { buttonStyle, contentStyle, daySectionStyle, timelineStyle } from '@/page/archiving/index/ArchivingPage.style';
 import DaySection from '@/page/archiving/index/component/DaySection/DaySection';
 import DocumentBar from '@/page/archiving/index/component/DocumentBar/DocumentBar';
@@ -16,10 +14,11 @@ import { useState } from 'react';
 import AddIc 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 { BlockFlow } from '@/shared/component/ModalFlow/BlockFlow';
+import { useOpenModal } from '@/shared/store/modal';
 import { useTeamStore } from '@/shared/store/team';
 
 const ArchivingPage = () => {
@@ -66,15 +65,10 @@ const ArchivingPage = () => {
   const blockFloors = alignBlocks(timeBlocks, endDay, selectedMonth, currentYear);
 
   // 블록 생성 모달 관련 코드
-  const { isOpen, openModal, closeModal, setCurrentContent, currentContent } = useModal();
-
-  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 openModal = useOpenModal();
+
+  const handleOpenBlockModal = () => {
+    openModal(<BlockFlow />);
   };
 
   return (
@@ -148,17 +142,13 @@ const ArchivingPage = () => {
           </div>
         </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}>
             <AddIc width={24} height={24} />
             블록 생성
           </Button>
         </Flex>
       </section>
 
-      <Modal isOpen={isOpen} children={currentContent} onClose={closeModal} />
       <DocumentBar
         selectedBlock={selectedBlock}
         ref={sideBarRef}

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

@@ -11,11 +11,10 @@ import { ReactNode } from 'react';
 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 DeleteModal from '@/shared/component/DeleteModal/DeleteModal';
+import { useOpenModal } from '@/shared/store/modal';
 import { useTeamStore } from '@/shared/store/team';
 
 interface DocumentItemProps {
@@ -28,12 +27,12 @@ interface DocumentItemProps {
 }
 
 const DocumentItem = ({ documentId, children, selectedId, blockName, fileUrl, color }: DocumentItemProps) => {
-  const { isOpen, openModal, closeModal, currentContent } = useModal();
-
   const fileName = children?.toString();
 
   const { teamId } = useTeamStore();
 
+  const openModal = useOpenModal();
+
   //문서 클릭시 띄워주는 함수
   const onClickDocumentItem = () => {
     window.open(fileUrl);
@@ -46,30 +45,29 @@ const DocumentItem = ({ documentId, children, selectedId, blockName, fileUrl, co
 
   const handleTrashClick = (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
     e.stopPropagation();
-    openModal(<DeleteModal title="docs" detail="docs" onClose={closeModal} teamId={+teamId} id={documentId} />);
+    // 모달 띄우기
+    const modalContent = <DeleteModal title="docs" detail="docs" teamId={+teamId} id={documentId} />;
+    openModal(modalContent);
   };
 
   return (
-    <>
-      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions  */}
-      <li css={containerStyle(selectedId)} onClick={onClickDocumentItem}>
-        {color && (
-          <div>
-            <Text tag="body8" css={blockNameTextStyle(color)}>
-              {blockName}
-            </Text>
-          </div>
-        )}
-        <Flex>
-          <Text tag="body6" css={fileNameStyle}>
-            {fileName}
+    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions  */
+    <li css={containerStyle(selectedId)} onClick={onClickDocumentItem}>
+      {color && (
+        <div>
+          <Text tag="body8" css={blockNameTextStyle(color)}>
+            {blockName}
           </Text>
-          <Download width={20} height={20} css={{ cursor: 'pointer' }} onClick={handleDownloadClick} />
-          <TrashBox width={20} height={20} onClick={(e) => handleTrashClick(e)} css={{ cursor: 'pointer' }} />
-        </Flex>
-      </li>
-      <Modal isOpen={isOpen} children={currentContent} onClose={closeModal} />
-    </>
+        </div>
+      )}
+      <Flex>
+        <Text tag="body6" css={fileNameStyle}>
+          {fileName}
+        </Text>
+        <Download width={20} height={20} css={{ cursor: 'pointer' }} onClick={handleDownloadClick} />
+        <TrashBox width={20} height={20} onClick={(e) => handleTrashClick(e)} css={{ cursor: 'pointer' }} />
+      </Flex>
+    </li>
   );
 };
 export default DocumentItem;