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

src/App.tsx

@@ -13,7 +13,6 @@ import Login from '@/shared/component/Login/Login';
 import { HTTP_STATUS_CODE } from '@/shared/constant/api';
 import { PATH } from '@/shared/constant/path';
 import ErrorPage from '@/shared/page/errorPage/ErrorPage';
-import { BlockModalProvider, WorkSpaceProvider } from '@/shared/store/modalContext';
 
 const App = () => {
   useEffect(() => {
@@ -43,18 +42,14 @@ const App = () => {
 
   return (
     <ErrorBoundary fallback={ErrorPage} onReset={handleResetError}>
-      <WorkSpaceProvider>
-        <BlockModalProvider>
-          <Login>
-            <div css={containerStyle}>
-              <LeftSidebar />
-              <main css={layoutStyle}>
-                <Outlet />
-              </main>
-            </div>
-          </Login>
-        </BlockModalProvider>
-      </WorkSpaceProvider>
+      <Login>
+        <div css={containerStyle}>
+          <LeftSidebar />
+          <main css={layoutStyle}>
+            <Outlet />
+          </main>
+        </div>
+      </Login>
     </ErrorBoundary>
   );
 };

src/common/component/Modal/ModalManager.tsx

@@ -0,0 +1,40 @@
+import Modal from '@/common/component/Modal/Modal';
+
+import { useModalStore } from '@/shared/store/modal';
+import { BlockFlow, BlockProvider } from '@/shared/store/useBlockContext';
+import { WorkSpaceFlow, WorkSpaceProvider } from '@/shared/store/useWorkSpaceContext';
+
+const ModalManager = () => {
+  const { isOpen, content, closeModal, id } = useModalStore();
+
+  if (!isOpen || !content) return null;
+
+  let ModalContent;
+
+  switch (id) {
+    case 'workspace':
+      ModalContent = (
+        <WorkSpaceProvider>
+          <WorkSpaceFlow />
+        </WorkSpaceProvider>
+      );
+      break;
+    case 'block':
+      ModalContent = (
+        <BlockProvider>
+          <BlockFlow />
+        </BlockProvider>
+      );
+      break;
+    default:
+      return null;
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={closeModal}>
+      {content}
+    </Modal>
+  );
+};
+
+export default ModalManager;

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

@@ -12,16 +12,14 @@ import Input from '@/common/component/Input/Input';
 import Text from '@/common/component/Text/Text';
 
 import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo';
-import { useNextStep } from '@/shared/store/modal';
-import { useBlockModalContext } from '@/shared/store/modalContext';
+import { useBlockContext } from '@/shared/store/useBlockContext';
 
 const BlockModal = () => {
   const [selectedIcon, setSelectedIcon] = useState<number>(-1);
   const [isDateRangeValid, setIsDateRangeValid] = useState(false);
 
-  const { blockName, setBlockName, setBlockType, startDate, setStartDate, endDate, setEndDate } =
-    useBlockModalContext();
-  const nextStep = useNextStep();
+  const { blockName, setBlockName, setBlockType, startDate, setStartDate, endDate, setEndDate, nextStep } =
+    useBlockContext();
 
   const handleBlockNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.value.length <= 25) {

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

@@ -13,14 +13,17 @@ 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 { useBlockModalContext } from '@/shared/store/modalContext';
+import { useModalStore } from '@/shared/store/modal';
 import { useTeamStore } from '@/shared/store/team';
 import { useToastStore } from '@/shared/store/toast';
+import { useBlockContext } from '@/shared/store/useBlockContext';
 
 const UploadModal = () => {
   const { teamId } = useTeamStore();
 
-  const { blockName, blockType, startDate, endDate, closeModal, resetBlockData } = useBlockModalContext();
+  const { blockName, blockType, startDate, endDate, reset } = useBlockContext();
+  const { closeModal } = useModalStore();
+
   const [files, setFiles] = useState<File[]>([]);
   const [fileUrls, setFileUrls] = useState<Files>({});
   const [uploadStatus, setUploadStatus] = useState<{ [key: string]: boolean }>({});
@@ -87,7 +90,7 @@ const UploadModal = () => {
       onSuccess: () => {
         createToast('활동 블록이 생성되었습니다', 'success');
         closeModal();
-        resetBlockData();
+        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

@@ -14,12 +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 { useOutsideClick } from '@/common/hook';
+import { useModal, useOutsideClick } from '@/common/hook';
 import { theme } from '@/common/style/theme/theme';
 
-import { useToggleModal } from '@/shared/store/modal';
+import { useModalStore } from '@/shared/store/modal';
 import { useTeamStore } from '@/shared/store/team';
-import { ModalManager } from '@/shared/util/modal';
 
 const ArchivingPage = () => {
   const [selectedId, setSelectedId] = useState('total');
@@ -65,7 +64,11 @@ const ArchivingPage = () => {
   const blockFloors = alignBlocks(timeBlocks, endDay, selectedMonth, currentYear);
 
   // 블록 생성 모달 관련 코드
-  const toggleModal = useToggleModal();
+  const openModal = useModalStore((state) => state.openModal);
+
+  const handleOpenBlockModal = () => {
+    openModal('block', null);
+  };
 
   return (
     <Flex
@@ -138,7 +141,7 @@ const ArchivingPage = () => {
           </div>
         </Flex>
         <Flex css={{ zIndex: theme.zIndex.overlayTop, marginLeft: 'auto' }}>
-          <Button variant="action" css={buttonStyle(selectedBlock)} onClick={() => toggleModal('block')}>
+          <Button variant="action" css={buttonStyle(selectedBlock)} onClick={handleOpenBlockModal}>
             <AddIc width={24} height={24} />
             블록 생성
           </Button>
@@ -152,7 +155,6 @@ const ArchivingPage = () => {
         onSelectId={handleSelectedId}
         onClickClose={handleClose}
       />
-      <ModalManager />
     </Flex>
   );
 };

src/shared/component/DeleteModal/DeleteModal.tsx

@@ -9,7 +9,7 @@ import Text from '@/common/component/Text/Text';
 
 import { cancelStyle, deleteStyle } from '@/shared/component/DeleteModal/DeleteModal.style';
 import { DELETE_DETAIL, DELETE_TITLE } from '@/shared/constant';
-import { useDeleteModalStore } from '@/shared/store/modal';
+import { useModalStore } from '@/shared/store/modal';
 
 interface DeleteModalProps {
   title: 'block' | 'docs';
@@ -22,7 +22,7 @@ const DeleteModal = ({ title, detail, teamId, id }: DeleteModalProps) => {
   const { mutateAsync: blockMutate } = useDeleteBlockMutation();
   const { mutateAsync: documentMutate } = useDeleteDocumentMutation();
 
-  const { isOpen, closeModal } = useDeleteModalStore();
+  const { closeModal } = useModalStore();
 
   const handleDeleteBlock = (teamId: number, id: number) => {
     blockMutate(
@@ -49,32 +49,30 @@ const DeleteModal = ({ title, detail, teamId, id }: DeleteModalProps) => {
   const handleDelete = title === 'block' ? handleDeleteBlock : handleDeleteDocs;
 
   return (
-    <Modal isOpen={isOpen} onClose={closeModal}>
-      <Flex
-        styles={{
-          direction: 'column',
-          align: 'center',
-          justify: 'center',
-          paddingRight: '9.35rem',
-          paddingLeft: '9.35rem',
-        }}>
-        <Heading tag="H5" css={{ fontWeight: 600 }}>
-          {DELETE_TITLE[title.toUpperCase() as keyof typeof DELETE_TITLE]}
-        </Heading>
-        <Text tag="body4" css={{ marginTop: '1rem', fontWeight: 400 }}>
-          {DELETE_DETAIL[detail.toUpperCase() as keyof typeof DELETE_DETAIL]}
-        </Text>
+    <Flex
+      styles={{
+        direction: 'column',
+        align: 'center',
+        justify: 'center',
+        paddingRight: '9.35rem',
+        paddingLeft: '9.35rem',
+      }}>
+      <Heading tag="H5" css={{ fontWeight: 600 }}>
+        {DELETE_TITLE[title.toUpperCase() as keyof typeof DELETE_TITLE]}
+      </Heading>
+      <Text tag="body4" css={{ marginTop: '1rem', fontWeight: 400 }}>
+        {DELETE_DETAIL[detail.toUpperCase() as keyof typeof DELETE_DETAIL]}
+      </Text>
 
-        <Flex styles={{ direction: 'row', align: 'center', justify: 'center', gap: '0.8rem', marginTop: '2.4rem' }}>
-          <Button variant="secondary" size="large" onClick={closeModal} css={cancelStyle}>
-            취소
-          </Button>
-          <Button variant="primary" size="large" onClick={() => handleDelete(teamId, id)} css={deleteStyle}>
-            삭제
-          </Button>
-        </Flex>
+      <Flex styles={{ direction: 'row', align: 'center', justify: 'center', gap: '0.8rem', marginTop: '2.4rem' }}>
+        <Button variant="secondary" size="large" onClick={() => closeModal()} css={cancelStyle}>
+          취소
+        </Button>
+        <Button variant="primary" size="large" onClick={() => handleDelete(teamId, id)} css={deleteStyle}>
+          삭제
+        </Button>
       </Flex>
-    </Modal>
+    </Flex>
   );
 };
 

src/shared/component/LeftSidebar/LeftSidebar.tsx

@@ -22,12 +22,12 @@ import LeftSidebarItem from '@/shared/component/LeftSidebar/LeftSidebarItem/Left
 import SettingMenu from '@/shared/component/LeftSidebar/LeftSidebarItem/SettingMenu/SettingMenu';
 import { PATH } from '@/shared/constant/path';
 import { useClubInfoQuery } from '@/shared/hook/api/useClubInfoQuery';
-import { useToggleModal } from '@/shared/store/modal';
+import { useModalStore } from '@/shared/store/modal';
 import { useTeamStore } from '@/shared/store/team';
 import { Team } from '@/shared/type/team';
-import { ModalManager } from '@/shared/util/modal';
 
 const LeftSidebar = () => {
+  const openModal = useModalStore((state) => state.openModal);
   const { isOpen: isNavOpen, close, open } = useOverlay();
 
   const sidebarRef = useOutsideClick(close);
@@ -72,11 +72,9 @@ const LeftSidebar = () => {
     close();
   };
 
-  const toggleModal = useToggleModal();
-
   const handleWorkspaceClick = () => {
     setIsWorkspaceClicked(true);
-    toggleModal('workspace');
+    openModal('workspace', null);
   };
 
   const handleModalClose = () => {
@@ -133,7 +131,6 @@ const LeftSidebar = () => {
         </LeftSidebarItem>
         <SettingMenu isModalOpen={isSettingOpen} />
       </div>
-      <ModalManager onClose={handleModalClose} />
     </aside>
   );
 };

src/shared/component/createWorkSpace/category/WorkSpaceCategory.tsx

@@ -14,14 +14,12 @@ import {
 import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo';
 import { buttonStyle, sectionStyle } from '@/shared/component/createWorkSpace/name/WorkSpaceName.style';
 import useCategoryListQuery from '@/shared/hook/api/useCategoryListQuery';
-import { useNextStep } from '@/shared/store/modal';
-import { useWorkSpaceContext } from '@/shared/store/modalContext';
+import { useWorkSpaceContext } from '@/shared/store/useWorkSpaceContext';
 
 const WorkSpaceCategory = () => {
   const { isOpen, close, toggle } = useOverlay();
   const ref = useOutsideClick<HTMLDivElement>(close, 'select-container');
-  const nextStep = useNextStep();
-  const { setCategory } = useWorkSpaceContext();
+  const { setCategory, nextStep } = useWorkSpaceContext();
   const [selected, setSelected] = useState('');
 
   // 카테고리 데이터

src/shared/component/createWorkSpace/image/WorkSpaceImage.tsx

@@ -18,8 +18,7 @@ import {
 } from '@/shared/component/createWorkSpace/image/WorkSpaceImage.style';
 import WorkSapceInfo from '@/shared/component/createWorkSpace/info/WorkSpaceInfo';
 import { sectionStyle } from '@/shared/component/createWorkSpace/name/WorkSpaceName.style';
-import { useNextStep } from '@/shared/store/modal';
-import { useWorkSpaceContext } from '@/shared/store/modalContext';
+import { useWorkSpaceContext } from '@/shared/store/useWorkSpaceContext';
 
 const WorkSpaceImage = () => {
   const [fileURL, setFileURL] = useState<string>('');
@@ -33,8 +32,7 @@ const WorkSpaceImage = () => {
   const { data: fileData } = useGetFileQuery(file as File);
 
   // 모달
-  const nextStep = useNextStep();
-  const { setFileUrlData, name, category, resetBlockData } = useWorkSpaceContext();
+  const { setFileUrlData, nextStep, reset, name, category } = useWorkSpaceContext();
   const { mutate: postTeamMutate } = usePostTeamMutation();
 
   useEffect(() => {
@@ -100,7 +98,7 @@ const WorkSpaceImage = () => {
       {
         onSuccess: () => {
           nextStep();
-          resetBlockData();
+          reset();
         },
       }
     );

src/shared/component/createWorkSpace/name/WorkSpaceName.tsx

@@ -10,17 +10,15 @@ import {
   inputWrapperStyle,
   sectionStyle,
 } from '@/shared/component/createWorkSpace/name/WorkSpaceName.style';
-import {useNextStep} from '@/shared/store/modal';
-import { useWorkSpaceContext } from '@/shared/store/modalContext';
+import { useWorkSpaceContext } from '@/shared/store/useWorkSpaceContext';
 
 const WorkSpaceName = () => {
   const [inputValue, setInputValue] = useState('');
-  const nextStep = useNextStep();
-  const { setName } = useWorkSpaceContext();
+  const { setName, nextStep } = useWorkSpaceContext();
 
   const handleNext = () => {
     setName(inputValue);
-    nextStep(); 
+    nextStep();
   };
 
   const isButtonActive = inputValue.trim().length > 0;