feat: teamId 커스텀 훅 구현 및 적용

src/page/archiving/index/ArchivingPage.tsx

@@ -12,15 +12,17 @@ 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 { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
 import { useDrawerAction } from '@/shared/store/drawer';
 import { useOpenModal } from '@/shared/store/modal';
-import { useTeamId } from '@/shared/store/team';
 
 const ArchivingPage = () => {
   const { selectedBlock, handleBlockClick } = useInteractTimeline();
 
   const openModal = useOpenModal();
 
+  const teamId = useInitializeTeamId();
+
   const location = useLocation();
   const selectedBlockFromDashboard: Block = location.state?.selectedBlock;
   const finalSelectedBlock = selectedBlockFromDashboard || selectedBlock;
@@ -43,7 +45,7 @@ const ArchivingPage = () => {
     openModal('create-block');
   };
   return (
-    <DateProvider teamId={Number(useTeamId())}>
+    <DateProvider teamId={teamId}>
       <Flex css={pageStyle}>
         <ContentBox
           variant="timeline"

src/page/archiving/index/DateProvider.tsx

@@ -27,7 +27,7 @@ export const useDateContext = () => {
 };
 
 const DateProvider = ({ children, teamId }: DateProviderProp) => {
-  const date = useDate(+teamId);
+  const date = useDate(teamId);
 
   return <DateContext.Provider value={{ ...date }}>{children}</DateContext.Provider>;
 };

src/page/archiving/index/component/DocumentBar/Item/Item.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { ReactNode } from 'react';
-import { useLocation } from 'react-router-dom';
 
 import TrashBox from '@/common/asset/svg/ic_delete.svg?react';
 import Download from '@/common/asset/svg/ic_download.svg?react';
@@ -10,6 +9,7 @@ import Text from '@/common/component/Text/Text';
 import { containerStyle, fileNameStyle } from '@/page/archiving/index/component/DocumentBar/Item/Item.style';
 import { downloadDocument } from '@/page/archiving/index/util/document';
 
+import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
 import { useOpenModal } from '@/shared/store/modal';
 
 interface ItemProps {
@@ -22,9 +22,7 @@ interface ItemProps {
 }
 
 const Item = ({ documentId, children, fileUrl, fileName }: ItemProps) => {
-  const location = useLocation();
-  const searchParams = new URLSearchParams(location.search);
-  const teamId = searchParams.get('teamId');
+  const teamId = useInitializeTeamId();
 
   const openModal = useOpenModal();
 
@@ -40,7 +38,7 @@ const Item = ({ documentId, children, fileUrl, fileName }: ItemProps) => {
   const handleTrashBoxClick = (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
     e.stopPropagation();
 
-    openModal('delete', { teamId: +teamId!, itemId: documentId, itemType: 'docs' });
+    openModal('delete', { teamId: teamId, itemId: documentId, itemType: 'docs' });
   };
 
   return (

src/page/archiving/index/component/DocumentBar/Selected/Selected.tsx

@@ -1,5 +1,3 @@
-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';
@@ -14,6 +12,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 { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
 import { useOpenModal } from '@/shared/store/modal';
 
 interface SelectedProps {
@@ -22,20 +21,17 @@ interface SelectedProps {
 }
 
 const Selected = ({ selectedBlock }: SelectedProps) => {
-  const location = useLocation();
-  const teamId = new URLSearchParams(location.search).get('teamId');
-
-  if (!teamId) throw new Error('has no teamId');
+  const teamId = useInitializeTeamId();
 
-  const { data: blockData } = useBlockInfoQuery(+teamId, selectedBlock?.timeBlockId ?? 0);
+  const { data: blockData } = useBlockInfoQuery(teamId, selectedBlock?.timeBlockId ?? 0);
 
   const startDate = formattingDate(selectedBlock.startDate);
   const endDate = formattingDate(selectedBlock.endDate);
 
   const openModal = useOpenModal();
 
   const handleDeleteClick = () => {
-    openModal('delete', { teamId: +teamId!, itemId: selectedBlock.timeBlockId, itemType: 'block' });
+    openModal('delete', { teamId: teamId, itemId: selectedBlock.timeBlockId, itemType: 'block' });
   };
 
   return (

src/page/archiving/index/component/DocumentBar/Total/Total.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { useLocation } from 'react-router-dom';
 
 import SearchIc from '@/common/asset/svg/ic_search.svg?react';
 import Flex from '@/common/component/Flex/Flex';
@@ -13,15 +12,13 @@ import Sort from '@/page/archiving/index/component/DocumentBar/Sort/Sort';
 import { useTotalDocumentQuery } from '@/page/archiving/index/hook/api/useTotalDocumentQuery';
 import { DocumentType } from '@/page/archiving/index/type/documentType';
 
+import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
+
 const DocumentTotal = () => {
   const [selected, setSelected] = useState('최근 업로드 순');
 
-  const location = useLocation();
-  const teamId = new URLSearchParams(location.search).get('teamId');
-
-  if (!teamId) throw new Error('has no teamId');
-
-  const { data: documentDatas } = useTotalDocumentQuery(+teamId, 'executive');
+  const teamId = useInitializeTeamId();
+  const { data: documentDatas } = useTotalDocumentQuery(teamId, 'executive');
 
   // input에 입력되는 검색값
   const [searchWord, setSearchWord] = useState('');

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

@@ -17,16 +17,16 @@ 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 { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
 import { useCloseModal } from '@/shared/store/modal';
-import { useTeamId } from '@/shared/store/team';
 import { useToastAction } from '@/shared/store/toast';
 
 interface UploadModalProps {
   isVisible: boolean;
 }
 
 const UploadModal = ({ isVisible }: UploadModalProps) => {
-  const teamId = useTeamId();
+  const teamId = useInitializeTeamId();
 
   const { formData, reset } = useBlockContext();
   const closeModal = useCloseModal();
@@ -36,7 +36,7 @@ const UploadModal = ({ isVisible }: UploadModalProps) => {
   const [uploadStatus, setUploadStatus] = useState<{ [key: string]: boolean }>({});
   const [isAllUploaded, setIsAllUploaded] = useState(true);
 
-  const { mutate: timeBlockMutate } = usePostTimeBlockMutation(+teamId!, 'executive');
+  const { mutate: timeBlockMutate } = usePostTimeBlockMutation(teamId, 'executive');
   const { mutate: fileDeleteMutate } = useDeleteFileMutation();
   const { createToast } = useToastAction();
 

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

@@ -13,19 +13,19 @@ 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 { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
 import { useDrawerIsOpen } from '@/shared/store/drawer';
-import { useTeamId } from '@/shared/store/team';
 
 interface TimeLineProps {
   selectedBlock?: Block;
   onBlockClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, block: Block) => void;
 }
 
 const TimeLine = ({ selectedBlock, onBlockClick }: TimeLineProps) => {
-  const teamId = useTeamId();
+  const teamId = useInitializeTeamId();
   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/component/Timeline/TimelineSection.tsx

@@ -12,15 +12,15 @@ 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/store/team';
+import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
 
 const TimelineSection = () => {
   const navigate = useNavigate();
 
-  const teamId = useTeamId();
-  const { currentYear, currentMonth, endDay } = useDate(+teamId);
+  const teamId = useInitializeTeamId();
+  const { currentYear, currentMonth, endDay } = useDate(teamId);
 
-  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/shared/hook/common/useInitializeTeamId.tsx

@@ -0,0 +1,16 @@
+import { useClubInfoQuery } from '@/shared/hook/api/useClubInfoQuery';
+import { useTeamIdAction } from '@/shared/store/team';
+
+export const useInitializeTeamId = () => {
+  const { data } = useClubInfoQuery();
+  const { setTeamId } = useTeamIdAction();
+
+  if (data && !localStorage.getItem('teamId')) {
+    localStorage.setItem('teamId', data.belongTeamGetResponses[0].id.toString());
+    setTeamId(data.belongTeamGetResponses[0].id);
+
+    return data.belongTeamGetResponses[0].id;
+  }
+
+  return Number(localStorage.getItem('teamId'));
+};

src/shared/store/team.ts

@@ -1,23 +1,22 @@
 import { create } from 'zustand';
 
 type TeamStore = {
-  teamId: string;
+  teamId: number;
   actions: {
-    setTeamId: (id: string) => void;
+    setTeamId: (id: number) => void;
   };
 };
 
 const useTeamStore = create<TeamStore>((set) => ({
-  teamId: '0',
+  teamId: Number(localStorage.getItem('teamId')),
 
   actions: {
-    setTeamId: (teamId: string) =>
+    setTeamId: (teamId: number) =>
       set({
         teamId,
       }),
   },
 }));
 
 export const useTeamId = () => useTeamStore((state) => state.teamId);
-
 export const useTeamIdAction = () => useTeamStore((state) => state.actions);