feat: TeamId 전역 상태로 관리

Author: namdaeun

src/page/archiving/index/ArchivingPage.tsx

@@ -12,12 +12,11 @@ import { useInteractTimeline } from '@/page/archiving/index/hook/common/useInter
 import { Block } from '@/page/archiving/index/type/blockType';
 
 import ContentBox from '@/shared/component/ContentBox/ContentBox';
-import useTeamId from '@/shared/hook/common/useTeamId';
+import TeamProvider, { useTeamContext } from '@/shared/hook/common/useTeamContext';
 import { useDrawerAction } from '@/shared/store/drawer';
 import { useOpenModal } from '@/shared/store/modal';
 
 const ArchivingPage = () => {
-  const teamId = useTeamId();
   const { selectedBlock, handleBlockClick } = useInteractTimeline();
 
   const openModal = useOpenModal();
@@ -43,30 +42,31 @@ const ArchivingPage = () => {
   const handleOpenBlockModal = () => {
     openModal('create-block');
   };
-
   return (
-    <DateProvider teamId={+teamId}>
-      <Flex css={pageStyle}>
-        <ContentBox
-          variant="timeline"
-          title="타임라인"
-          headerOption={
-            <Button variant="secondary" onClick={handleOpenBlockModal}>
-              타임블록 추가
-            </Button>
-          }>
-          <section css={timelineStyle}>
-            <TimeLineHeader />
-            <Flex css={contentStyle}>
-              <Suspense>
-                {/** fallback UI 디자인 나올 시에 TimeLine 크기만큼 채워서 Layout 안움직이도록 */}
-                <TimeLine selectedBlock={finalSelectedBlock} onBlockClick={handleBlockClick} />
-              </Suspense>
-            </Flex>
-          </section>
-        </ContentBox>
-      </Flex>
-    </DateProvider>
+    <TeamProvider>
+      <DateProvider teamId={useTeamContext()}>
+        <Flex css={pageStyle}>
+          <ContentBox
+            variant="timeline"
+            title="타임라인"
+            headerOption={
+              <Button variant="secondary" onClick={handleOpenBlockModal}>
+                타임블록 추가
+              </Button>
+            }>
+            <section css={timelineStyle}>
+              <TimeLineHeader />
+              <Flex css={contentStyle}>
+                <Suspense>
+                  {/** fallback UI 디자인 나올 시에 TimeLine 크기만큼 채워서 Layout 안움직이도록 */}
+                  <TimeLine selectedBlock={finalSelectedBlock} onBlockClick={handleBlockClick} />
+                </Suspense>
+              </Flex>
+            </section>
+          </ContentBox>
+        </Flex>
+      </DateProvider>
+    </TeamProvider>
   );
 };
 

src/page/archiving/index/DateProvider.tsx

@@ -21,7 +21,7 @@ const DateContext = createContext<DateContextProp>({} as DateContextProp);
 export const useDateContext = () => {
   const context = useContext(DateContext);
   if (!context) {
-    throw new Error('Error from DateProvider');
+    throw new Error('Error from DateContext');
   }
   return context;
 };

src/page/archiving/index/component/TimeBlockModal/component/Upload/UploadModal.tsx

@@ -17,7 +17,7 @@ import { formatDatePost } from '@/page/archiving/index/component/TimeBlockModal/
 import { Files } from '@/shared/api/time-blocks/team/time-block/type';
 import WorkSapceInfo from '@/shared/component/WorkSpaceModal/info/WorkSpaceInfo';
 import { useBlockContext } from '@/shared/hook/common/useBlockContext';
-import useTeamId from '@/shared/hook/common/useTeamId';
+import { useTeamContext } from '@/shared/hook/common/useTeamContext';
 import { useCloseModal } from '@/shared/store/modal';
 import { useToastAction } from '@/shared/store/toast';
 
@@ -26,7 +26,7 @@ interface UploadModalProps {
 }
 
 const UploadModal = ({ isVisible }: UploadModalProps) => {
-  const teamId = useTeamId();
+  const teamId = useTeamContext();
 
   const { formData, reset } = useBlockContext();
   const closeModal = useCloseModal();

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

@@ -1,3 +1,4 @@
+// TimeLine.tsx
 import React from 'react';
 
 import { useDateContext } from '@/page/archiving/index/DateProvider';
@@ -12,7 +13,7 @@ import { useGetTimeBlockQuery } from '@/page/archiving/index/hook/api/useGetTime
 import { Block } from '@/page/archiving/index/type/blockType';
 import { alignBlocks, createTimeBlock } from '@/page/archiving/index/util/block';
 
-import useTeamId from '@/shared/hook/common/useTeamId';
+import { useTeamContext } from '@/shared/hook/common/useTeamContext';
 import { useDrawerIsOpen } from '@/shared/store/drawer';
 
 interface TimeLineProps {
@@ -21,10 +22,10 @@ interface TimeLineProps {
 }
 
 const TimeLine = ({ selectedBlock, onBlockClick }: TimeLineProps) => {
-  const teamId = useTeamId();
+  const teamId = useTeamContext();
   const { currentYear, currentMonth, endDay } = useDateContext();
 
-  const { data } = useGetTimeBlockQuery(+teamId, 'executive', currentYear, currentMonth);
+  const { data } = useGetTimeBlockQuery(teamId, 'executive', currentYear, currentMonth);
 
   const timeBlocks: Block[] = data.timeBlocks;
   const blockFloors = alignBlocks(timeBlocks, endDay, currentMonth, currentYear);

src/page/dashboard/.gitkeep

@@ -12,12 +12,12 @@ import { alignBlocks, createTimeBlock } from '@/page/archiving/index/util/block'
 import { timelineContentStyle } from '@/page/dashboard/component/Timeline/TimelineSection.style';
 
 import { PATH } from '@/shared/constant/path';
-import useTeamId from '@/shared/hook/common/useTeamId';
+import { useTeamContext } from '@/shared/hook/common/useTeamContext';
 
 const TimelineSection = () => {
   const navigate = useNavigate();
 
-  const teamId = useTeamId();
+  const teamId = useTeamContext();
   const { currentYear, currentMonth, endDay } = useDate(+teamId);
 
   const { data } = useGetTimeBlockQuery(+teamId, 'executive', currentYear, currentMonth);

src/page/dashboard/component/Timeline/TimelineSection.tsx

@@ -0,0 +1,33 @@
+import { ReactNode, createContext, useContext } from 'react';
+
+import { useClubInfoQuery } from '@/shared/hook/api/useClubInfoQuery';
+
+interface TeamProviderProp {
+  children?: ReactNode;
+}
+
+const TeamContext = createContext(Number(localStorage.getItem('teamId')));
+
+export const useTeamContext = () => {
+  const context = useContext(TeamContext);
+
+  if (context === undefined) {
+    throw new Error('useTeamContext must be used within a TeamProvider');
+  }
+
+  return context;
+};
+
+const TeamProvider = ({ children }: TeamProviderProp) => {
+  const { data } = useClubInfoQuery();
+  const teamId = Number(localStorage.getItem('teamId')) || data?.belongTeamGetResponses?.[0]?.id;
+
+  if (!teamId) {
+    console.error('teamId undefined');
+    return;
+  }
+
+  return <TeamContext.Provider value={teamId}>{children}</TeamContext.Provider>;
+};
+
+export default TeamProvider;