[Feat] teamId 전역 상태로 구현 (#322)

* feat: teamId nullable 방지하는 커스텀 훅 구현 * fix: state로 teamId 관리 * chore: sort package.json * feat: useTeamId 훅으로 teamId값 관리 * chore: useTeamId 훅 적용 * chore: 주석 삭제 * fix: undefined일 경우 0으로 저장 * fix: 워크스페이스 data undefined 방지 * feat: TeamId 전역 상태로 관리 * fix: context 파일 제거 * feat: teamId 커스텀 훅 구현 및 적용 * feat: enabled 옵션 활용해서 데이터 효율적으로 호출 * chore: 변수 설정 * fix: enabled 옵션 값 변경 * fix: solve build error * fix: 훅 내에서 useQuery 사용해서 처리 * refactor: 조건문 단순화 * fix: teamId 없을시 에러페이지로 라우팅되는 이슈 해결 * chore: 절대경로로 수정 * chore: 줄 바꿈 수정
Team-Tiki · Nov 20, 2024 · 0285fb0 · 0285fb0
1 parent dc57735
commit 0285fb0
Show file tree

Hide file tree

Showing 17 changed files with 58 additions and 45 deletions.
diff --git a/src/page/archiving/index/ArchivingPage.tsx b/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';
 
 const ArchivingPage = () => {
-  const teamId = localStorage.getItem('teamId');
   const { selectedBlock, handleBlockClick } = useInteractTimeline();
 
   const openModal = useOpenModal();
 
+  const teamId = useInitializeTeamId();
+
   const location = useLocation();
   const selectedBlockFromDashboard: Block = location.state?.selectedBlock;
   const finalSelectedBlock = selectedBlockFromDashboard || selectedBlock;
@@ -42,9 +44,8 @@ const ArchivingPage = () => {
   const handleOpenBlockModal = () => {
     openModal('create-block');
   };
-
   return (
-    <DateProvider teamId={teamId!}>
+    <DateProvider teamId={teamId}>
       <Flex css={pageStyle}>
         <ContentBox
           variant="timeline"

diff --git a/src/page/archiving/index/DateProvider.tsx b/src/page/archiving/index/DateProvider.tsx
@@ -13,15 +13,15 @@ interface DateContextProp {
 
 interface DateProviderProp {
   children: ReactNode;
-  teamId: string;
+  teamId: number;
 }
 
 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;
 };

diff --git a/src/page/archiving/index/component/DocumentBar/Item/Item.tsx b/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 (

diff --git a/src/page/archiving/index/component/DocumentBar/Selected/Selected.tsx b/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 (

diff --git a/src/page/archiving/index/component/DocumentBar/Total/Total.tsx b/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('');

diff --git a/src/page/archiving/index/component/TimeBlockModal/component/Upload/UploadModal.tsx b/src/page/archiving/index/component/TimeBlockModal/component/Upload/UploadModal.tsx
@@ -17,6 +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 { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
 import { useCloseModal } from '@/shared/store/modal';
 import { useToastAction } from '@/shared/store/toast';
 
@@ -25,7 +26,7 @@ interface UploadModalProps {
 }
 
 const UploadModal = ({ isVisible }: UploadModalProps) => {
-  const teamId = localStorage.getItem('teamId');
+  const teamId = useInitializeTeamId();
 
   const { formData, reset } = useBlockContext();
   const closeModal = useCloseModal();
@@ -35,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();
 

diff --git a/src/page/archiving/index/component/TimeLine/Day/Day.style.ts b/src/page/archiving/index/component/TimeLine/Day/Day.style.ts
@@ -58,7 +58,7 @@ export const dayBodyStyle = (dayCount: number) =>
     minHeight: 'calc(100vh - 40rem)',
     maxHeight: 'calc(100vh - 2rem)',
 
-    overflowY: 'auto',
+    overflowY: 'scroll',
 
     backgroundColor: theme.colors.gray_100,
   });

diff --git a/src/page/archiving/index/component/TimeLine/TimeLineHeader/TimeLineHeader.style.ts b/src/page/archiving/index/component/TimeLine/TimeLineHeader/TimeLineHeader.style.ts
@@ -8,8 +8,6 @@ export const headerStyle = css({
 
   top: '0',
 
-  zIndex: theme.zIndex.overlayHigh,
-
   paddingBottom: '1rem',
 
   alignItems: 'center',

diff --git a/src/page/archiving/index/component/TimeLine/index.tsx b/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,6 +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 { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
 import { useDrawerIsOpen } from '@/shared/store/drawer';
 
 interface TimeLineProps {
@@ -20,11 +22,10 @@ interface TimeLineProps {
 }
 
 const TimeLine = ({ selectedBlock, onBlockClick }: TimeLineProps) => {
-  const teamId = localStorage.getItem('teamId');
-
+  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);

diff --git a/src/page/archiving/index/hook/common/useDate.ts b/src/page/archiving/index/hook/common/useDate.ts
@@ -2,7 +2,7 @@ import { endOfMonth } from 'date-fns';
 
 import { useState } from 'react';
 
-export const useDate = (teamId?: string) => {
+export const useDate = (teamId: number) => {
   const currentDate = new Date();
 
   const [currentMonth, setCurrentMonth] = useState(currentDate.getMonth() + 1);

diff --git a/src/page/dashboard/.gitkeep b/src/page/dashboard/.gitkeep
diff --git a/src/page/dashboard/component/Timeline/Timeline/Timeline.tsx b/src/page/dashboard/component/Timeline/Timeline/Timeline.tsx
@@ -10,15 +10,16 @@ import { alignBlocks, createTimeBlock } from '@/page/archiving/index/util/block'
 import { timelineContentStyle } from '@/page/dashboard/component/Timeline/Timeline/Timeline.style';
 
 import { PATH } from '@/shared/constant/path';
+import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
 
 const Timeline = () => {
   const navigate = useNavigate();
 
-  const teamId = localStorage.getItem('teamId');
+  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);

diff --git a/src/page/dashboard/component/Timeline/index.tsx b/src/page/dashboard/component/Timeline/index.tsx
@@ -4,11 +4,13 @@ import DateProvider from '@/page/archiving/index/DateProvider';
 import TimeLineHeader from '@/page/archiving/index/component/TimeLine/TimeLineHeader/TimeLineHeader';
 import Timeline from '@/page/dashboard/component/Timeline/Timeline/Timeline';
 
+import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
+
 const TimelineSection = () => {
-  const teamId = localStorage.getItem('teamId');
+  const teamId = useInitializeTeamId();
 
   return (
-    <DateProvider teamId={teamId!}>
+    <DateProvider teamId={teamId}>
       <TimeLineHeader />
       <Suspense>
         <Timeline />

diff --git a/src/shared/api/members/teams/index.ts b/src/shared/api/members/teams/index.ts
@@ -4,5 +4,5 @@ import { ClubInfo } from '@/shared/api/members/teams/type';
 export const getClubInfo = async () => {
   const response = await axiosInstance.get<ClubInfo>(`/members/teams`);
 
-  return response.data;
+  return response.data.data;
 };
diff --git a/src/shared/component/SideNavBar/SideNavBar.tsx b/src/shared/component/SideNavBar/SideNavBar.tsx
@@ -53,7 +53,7 @@ const SideNavBar = () => {
           hoverMessage={'showcase'}
         />
         <Divider type="horizontal" size={56.78} color={theme.colors.gray_300} />
-        {data?.data.belongTeamGetResponses.map((data: Team) => {
+        {data?.belongTeamGetResponses.map((data: Team) => {
           return (
             <Item
               key={data.id}

diff --git a/src/shared/hook/common/useInitializeTeamId.tsx b/src/shared/hook/common/useInitializeTeamId.tsx
@@ -0,0 +1,19 @@
+import { useClubInfoQuery } from '@/shared/hook/api/useClubInfoQuery';
+import { useTeamIdAction } from '@/shared/store/team';
+
+export const useInitializeTeamId = () => {
+  const { setTeamId } = useTeamIdAction();
+
+  const { data, isSuccess } = useClubInfoQuery();
+
+  if (isSuccess && !localStorage.getItem('teamId')) {
+    const teamId = data.belongTeamGetResponses[0].id;
+    localStorage.setItem('teamId', teamId.toString());
+
+    setTeamId(teamId);
+
+    return teamId;
+  }
+
+  return Number(localStorage.getItem('teamId'));
+};
diff --git a/src/shared/store/team.ts b/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);